abstract confirm modal for subs

HabitRPG · Apr 29, 2019 · 366c441 · 366c441
1 parent 0f15218
commit 366c441
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 44 deletions.
diff --git a/website/client/components/group-plans/billing.vue b/website/client/components/group-plans/billing.vue
@@ -31,7 +31,7 @@
     .btn.btn-primary(v-if='!group.purchased.plan.dateTerminated && group.purchased.plan.paymentMethod === "Stripe"',
       @click='showStripeEdit({groupId: group.id})') {{ $t('subUpdateCard') }}
     .btn.btn-sm.btn-danger(v-if='!group.purchased.plan.dateTerminated',
-      @click='cancelGroupPlanSubscription({group: group})') {{ $t('cancelGroupSub') }}
+      @click='cancelSubscriptionConfirm({group: group})') {{ $t('cancelGroupSub') }}
 </template>
 
 <script>

diff --git a/website/client/components/group-plans/cancelModalConfirm.vue b/website/client/components/group-plans/cancelModalConfirm.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  b-modal#group-plan-cancel-modal(
+  b-modal#subscription-cancel-modal(
     size='sm',
     :hideFooter="true",
     :modalClass="['modal-hidden-footer']"
@@ -9,9 +9,9 @@
         .svg-icon.warning(v-html="icons.warning", v-once)
     .row
       .col-12.modal-body-col
-        h2(v-once) {{ $t('cancelGroupSub') }}
-        span.cancel-text(v-once) {{ $t('confirmCancelGroupPlan') }}
-        button.btn.btn-danger.mt-4.mb-3(v-once, @click="cancelSubscription(config)") {{ $t('cancelGroupSub') }}
+        h2 {{ config && config.group ? $t('cancelGroupSub') : $t('cancelSub') }}
+        span.cancel-text {{ config && config.group ? $t('confirmCancelGroupPlan') : $t('confirmCancelSub')
+        button.btn.btn-danger.mt-4.mb-3(v-once, @click="cancelSubscription(config)") {{ $t('cancelSub') }}
         a.standard-link(v-once, @click="close()") {{ $t('neverMind') }}
 </template>
 
@@ -86,20 +86,6 @@
     display: flex;
     flex-direction: row;
     text-align: center;
-
-    &.gems {
-      padding: 12px 16px 12px 20px;
-      color: $green-10;
-      font-size: 24px;
-      font-weight: bold;
-      line-height: 1.33;
-
-      .svg-icon {
-        margin-right: 8px;
-        width: 32px;
-        height: 32px;
-      }
-    }
   }
 
   .auto-renew {
@@ -141,17 +127,17 @@ export default {
     ...mapState({user: 'user.data'}),
   },
   mounted () {
-    this.$root.$on('habitica:cancel-group-plan', (config) => {
+    this.$root.$on('habitica:cancel-subscription-confirm', (config) => {
       this.config = config;
-      this.$root.$emit('bv::show::modal', 'group-plan-cancel-modal');
+      this.$root.$emit('bv::show::modal', 'subscription-cancel-modal');
     });
   },
   destroyed () {
-    this.$root.$off('habitica:cancel-group-plan');
+    this.$root.$off('habitica:cancel-subscription-confirm');
   },
   methods: {
     close () {
-      this.$root.$emit('bv::hide::modal', 'group-plan-cancel-modal');
+      this.$root.$emit('bv::hide::modal', 'subscription-cancel-modal');
     },
   },
 };

diff --git a/website/client/components/settings/subscription.vue b/website/client/components/settings/subscription.vue
@@ -68,7 +68,7 @@
 
         div(v-if='hasSubscription')
           .btn.btn-primary(v-if='canEditCardDetails', @click='showStripeEdit()') {{ $t('subUpdateCard') }}
-          .btn.btn-sm.btn-danger(v-if='canCancelSubscription && !loading', @click='cancelSubscription()') {{ $t('cancelSub') }}
+          .btn.btn-sm.btn-danger(v-if='canCancelSubscription && !loading', @click='cancelSubscriptionConfirm()') {{ $t('cancelSub') }}
           small(v-if='!canCancelSubscription && !hasCanceledSubscription', v-html='getCancelSubInfo()')
 
         .subscribe-pay(v-if='!hasSubscription || hasCanceledSubscription')

diff --git a/website/client/mixins/payments.js b/website/client/mixins/payments.js
@@ -275,33 +275,21 @@ export default {
       this.amazonPayments.groupToCreate = null;
       this.amazonPayments.group = null;
     },
-    cancelGroupPlanSubscription (config) {
-      this.$root.$emit('habitica:cancel-group-plan', config);
+    cancelSubscriptionConfirm (config) {
+      this.$root.$emit('habitica:cancel-subscription-confirm', config);
     },
     async cancelSubscription (config) {
-      if (!config || !config.group) {
-        if (!confirm(this.$t('sureCancelSub'))) return;
-      }
-
       this.loading = true;
 
       let group;
       if (config && config.group) {
         group = config.group;
       }
 
-      let paymentMethod = this.user.purchased.plan.paymentMethod;
-      if (group) {
-        paymentMethod = group.purchased.plan.paymentMethod;
-      }
-
-      if (paymentMethod === 'Amazon Payments') {
-        paymentMethod = 'amazon';
-      } else {
-        paymentMethod = paymentMethod.toLowerCase();
-      }
+      let paymentMethod = group ? group.purchased.plan.paymentMethod : this.user.purchased.plan.paymentMethod;
+      paymentMethod = paymentMethod === 'Amazon Payments' ? 'amazon' : paymentMethod.toLowerCase();
 
-      let queryParams = {
+      const queryParams = {
         noRedirect: true,
       };
 
@@ -314,9 +302,8 @@ export default {
         await axios.get(cancelUrl);
 
         if (!config || !config.group) {
-          alert(this.$t('paypalCanceled'));
-          // @TODO: We should probably update the api to return the new sub data eventually.
           await this.$store.dispatch('user:fetch', {forceLoad: true});
+          // TODO reload? show modal directly?
         } else {
           const appState = {
             groupPlanCanceled: true,

diff --git a/website/common/locales/en/subscriber.json b/website/common/locales/en/subscriber.json
@@ -69,7 +69,7 @@
     "notYetPlan": "Plan not yet available, but click to contact us and we'll keep you updated.",
     "contactUs": "Contact Us",
     "checkout": "Checkout",
-    "sureCancelSub": "Are you sure you want to cancel your subscription?",
+    "confirmCancelSub": "Are you sure you want to cancel your subscription? You will lose all of your subscription benefits.",
     "subCanceled": "Subscription will become inactive on",
     "buyGemsGoldTitle": "To Buy Gems with Gold",
     "becomeSubscriber": "Become a Subscriber",