Merge 0612729 into 5a15c73

website/client/app.vue

@@ -12,6 +12,8 @@ div
     banned-account-modal
     amazon-payments-modal(v-if='!isStaticPage')
     payments-success-modal
+    sub-cancel-modal-confirm
+    sub-canceled-modal
     snackbars
     router-view(v-if="!isUserLoggedIn || isStaticPage")
     template(v-else)
@@ -187,6 +189,8 @@ import notifications from 'client/mixins/notifications';
 import { setup as setupPayments } from 'client/libs/payments';
 import amazonPaymentsModal from 'client/components/payments/amazonModal';
 import paymentsSuccessModal from 'client/components/payments/successModal';
+import subCancelModalConfirm from 'client/components/payments/cancelModalConfirm';
+import subCanceledModal from 'client/components/payments/canceledModal';
 
 import spellsMixin from 'client/mixins/spells';
 import { CONSTANTS, getLocalSetting, removeLocalSetting } from 'client/libs/userlocalManager';
@@ -210,6 +214,8 @@ export default {
     amazonPaymentsModal,
     bannedAccountModal,
     paymentsSuccessModal,
+    subCancelModalConfirm,
+    subCanceledModal,
   },
   data () {
     return {

website/client/components/group-plans/billing.vue

@@ -29,13 +29,14 @@
     .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='cancelSubscription({group: group})') {{ $t('cancelGroupSub') }}
+      @click='cancelSubscriptionConfirm({group: group})') {{ $t('cancelGroupSub') }}
 </template>
 
 <script>
 import moment from 'moment';
 import { mapState } from 'client/libs/store';
 import paymentsMixin from 'client/mixins/payments';
+import { CONSTANTS, getLocalSetting, removeLocalSetting } from 'client/libs/userlocalManager';
 
 export default {
   mixins: [paymentsMixin],
@@ -45,8 +46,20 @@ export default {
       group: {},
     };
   },
-  mounted () {
-    this.loadGroup();
+  async mounted () {
+    await this.loadGroup();
+
+    let appState = getLocalSetting(CONSTANTS.savedAppStateValues.SAVED_APP_STATE);
+    if (appState) {
+      appState = JSON.parse(appState);
+      if (appState.groupPlanCanceled) {
+        removeLocalSetting(CONSTANTS.savedAppStateValues.SAVED_APP_STATE);
+        this.$root.$emit('habitica:subscription-canceled', {
+          dateTerminated: this.dateTerminated,
+          isGroup: true,
+        });
+      }
+    }
   },
   computed: {
     ...mapState({user: 'user.data'}),

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')
@@ -104,7 +104,6 @@
 
 <script>
 import axios from 'axios';
-import moment from 'moment';
 import filter from 'lodash/filter';
 import sortBy from 'lodash/sortBy';
 import min from 'lodash/min';
@@ -235,10 +234,6 @@ export default {
         amount: this.numberOfMysticHourglasses,
       };
     },
-    dateTerminated () {
-      if (!this.user.preferences || !this.user.preferences.dateFormat) return this.user.purchased.plan.dateTerminated;
-      return moment(this.user.purchased.plan.dateTerminated).format(this.user.preferences.dateFormat.toUpperCase());
-    },
     canCancelSubscription () {
       return (
         this.user.purchased.plan.paymentMethod !== this.paymentMethods.GOOGLE &&

website/client/mixins/payments.js

@@ -8,13 +8,14 @@ import notificationsMixin from 'client/mixins/notifications';
 import * as Analytics from 'client/libs/analytics';
 import { CONSTANTS, setLocalSetting } from 'client/libs/userlocalManager';
 import pick from 'lodash/pick';
+import moment from 'moment';
 
 const habiticaUrl = `${location.protocol}//${location.host}`;
 
 export default {
   mixins: [notificationsMixin],
   computed: {
-    ...mapState(['credentials']),
+    ...mapState({user: 'user.data', credentials: 'credentials'}),
     paypalCheckoutLink () {
       return '/paypal/checkout';
     },
@@ -31,6 +32,10 @@ export default {
       if (this.subscription.coupon) couponString = `&coupon=${this.subscription.coupon}`;
       return `/paypal/subscribe?sub=${this.subscription.key}${couponString}`;
     },
+    dateTerminated () {
+      if (!this.user.preferences || !this.user.preferences.dateFormat) return this.user.purchased.plan.dateTerminated;
+      return moment(this.user.purchased.plan.dateTerminated).format(this.user.preferences.dateFormat.toUpperCase());
+    },
   },
   methods: {
     encodeGift (uuid, gift) {
@@ -275,29 +280,21 @@ export default {
       this.amazonPayments.groupToCreate = null;
       this.amazonPayments.group = null;
     },
+    cancelSubscriptionConfirm (config) {
+      this.$root.$emit('habitica:cancel-subscription-confirm', config);
+    },
     async cancelSubscription (config) {
-      if (config && config.group && !confirm(this.$t('confirmCancelGroupPlan'))) return;
-      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,
       };
 
@@ -309,9 +306,19 @@ export default {
         const cancelUrl = `/${paymentMethod}/subscribe/cancel?${encodeParams(queryParams)}`;
         await axios.get(cancelUrl);
 
-        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});
+        if (!config || !config.group) {
+          await this.$store.dispatch('user:fetch', {forceLoad: true});
+          this.$root.$emit('habitica:subscription-canceled', {
+            dateTerminated: this.dateTerminated,
+            isGroup: false,
+          });
+        } else {
+          const appState = {
+            groupPlanCanceled: true,
+          };
+          setLocalSetting(CONSTANTS.savedAppStateValues.SAVED_APP_STATE, JSON.stringify(appState));
+          window.location.reload(true);
+        }
 
         this.loading = false;
       } catch (e) {

website/common/locales/en/generic.json

@@ -84,7 +84,7 @@
   "continue": "Continue",
   "accept": "Accept",
   "reject": "Reject",
-  "neverMind": "Never mind",
+  "neverMind": "Nevermind",
   "buyMoreGems": "Buy More Gems",
   "notEnoughGems": "Not enough Gems",
   "alreadyHave": "Whoops! You already have this item. No need to buy it again!",

website/common/locales/en/groups.json

@@ -347,8 +347,8 @@
   "leaderCannotLeaveGroupWithActiveGroup": "A leader can not leave a group while the group has an active plan",
   "youHaveGroupPlan": "You have a free subscription because you are a member of a group that has a Group Plan. This will end when you are no longer in the group that has a Group Plan. Any months of extra subscription credit you have will be applied at the end of the Group Plan.",
   "cancelGroupSub": "Cancel Group Plan",
-  "confirmCancelGroupPlan": "Are you sure you want to cancel the group plan and remove its benefits from all members, including their free subscriptions?",
-  "canceledGroupPlan": "Canceled Group Plan",
+  "confirmCancelGroupPlan": "Are you sure you want to cancel your Group Plan? All Group members will lose their subscription and benefits.",
+  "canceledGroupPlan": "Group Plan Canceled",
   "groupPlanCanceled": "Group Plan will become inactive on",
   "purchasedGroupPlanPlanExtraMonths": "You have <%= months %> months of extra group plan credit.",
   "addManager": "Assign Manager",

website/common/locales/en/npc.json

@@ -121,6 +121,7 @@
   "paymentYouSentSubscription": "You sent <strong><%= name %></strong> a <%= months %>-months Habitica subscription.",
   "paymentSubBilling": "Your subscription will be billed <strong>$<%= amount %></strong> every <strong><%= months %> months</strong>.",
   "paymentAutoRenew": "This subscription will auto-renew until it is canceled. If you need to cancel this subscription, you can do so from your settings.",
+  "paymentCanceledDisputes": "We’ve sent a cancelation confirmation to your email. If you don’t see the email, please contact us to prevent future billing disputes.",
   "success": "Success!",
 
   "classGear": "Class Gear",

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",
@@ -191,7 +191,7 @@
     "invalidCoupon": "Invalid coupon code.",
     "couponUsed": "Coupon code already used.",
     "couponCodeRequired": "The coupon code is required.",
-    "paypalCanceled": "Your subscription has been canceled",
+    "subCanceledTitle": "Subscription Canceled",
     "earnGemsMonthly": "Earn up to **<%= cap %> Gems** per month",
     "receiveMysticHourglass": "Receive a Mystic Hourglass!",
     "receiveMysticHourglasses": "Receive **<%= amount %> Mystic Hourglasses**!",