Removed cancel sub button and added info for apple/google subs (Fixes #8642) (#8666)

* Removed cancel sub button and added info for apple/google subs

* Refactored logic and constants from subscriptions view

website/client-old/js/controllers/settingsCtrl.js

@@ -2,8 +2,8 @@
 
 // Make user and settings available for everyone through root scope.
 habitrpg.controller('SettingsCtrl',
-  ['$scope', 'User', '$rootScope', '$http', 'ApiUrl', 'Guide', '$location', '$modalStack', '$timeout', 'Content', 'Notification', 'Shared', 'Social', '$compile',
+  ['$scope', 'User', '$rootScope', '$http', 'ApiUrl', 'Guide', '$location', '$modalStack', '$timeout', 'Content', 'Notification', 'Shared', 'Social', '$compile', '$sce', 'Payments',
-  function($scope, User, $rootScope, $http, ApiUrl, Guide, $location, $modalStack, $timeout, Content, Notification, Shared, Social, $compile) {
+  function($scope, User, $rootScope, $http, ApiUrl, Guide, $location, $modalStack, $timeout, Content, Notification, Shared, Social, $compile, $sce, Payments) {
     var RELEASE_ANIMAL_TYPES = {
       pets: 'releasePets',
       mounts: 'releaseMounts',
@@ -341,6 +341,49 @@ habitrpg.controller('SettingsCtrl',
 
     $scope.socialLogin = Social.socialLogin;
 
+    $scope.hasSubscription = function (user) {
+      return !!user.purchased.plan.customerId;
+    }
+
+    $scope.hasCanceledSubscription = function (user) {
+      return (
+        $scope.hasSubscription(user) &&
+        !!user.purchased.plan.dateTerminated
+      );
+    }
+
+    $scope.canCancelSubscription = function (user) {
+      return (
+        user.purchased.plan.paymentMethod !== Payments.paymentMethods.GOOGLE &&
+        user.purchased.plan.paymentMethod !== Payments.paymentMethods.APPLE &&
+        !$scope.hasCanceledSubscription(user) &&
+        !$scope.hasGroupPlan(user)
+      );
+    };
+
+    $scope.hasPlan = function (user) {
+      return !!user.purchased.plan.planId;
+    };
+
+    $scope.hasGroupPlan = function (user) {
+      return user.purchased.plan.customerId === "group-plan";
+    };
+
+    $scope.hasConsecutiveSubscription = function (user) {
+      return !!user.purchased.plan.consecutive.count || !!user.purchased.plan.consecutive.offset;
+    };
+
+    $scope.canEditCardDetails = function (user) {
+      return (
+        !$scope.hasCanceledSubscription(user) &&
+        user.purchased.plan.paymentMethod === Payments.paymentMethods.STRIPE
+      );
+    };
+
+    $scope.getCancelSubInfo = function (user) {
+      return $sce.trustAsHtml(env.t('cancelSubInfo' + user.purchased.plan.paymentMethod));
+    };
+
     function _calculateNextCron() {
       $scope.dayStart;
 

website/client-old/js/services/paymentServices.js

@@ -6,6 +6,15 @@ function($rootScope, User, $http, Content) {
   var Payments = {};
   var isAmazonReady = false;
 
+  Payments.paymentMethods = {
+    AMAZON_PAYMENTS: 'Amazon Payments',
+    STRIPE: 'Stripe',
+    GOOGLE: 'Google',
+    APPLE: 'Apple',
+    PAYPAL: 'Paypal',
+    GIFT: 'Gift'
+  };
+
   window.onAmazonLoginReady = function(){
     isAmazonReady = true;
     amazon.Login.setClientId(window.env.AMAZON_PAYMENTS.CLIENT_ID);

website/common/locales/en/subscriber.json

@@ -37,6 +37,8 @@
     "subscribed": "Subscribed",
     "manageSub": "Click to manage subscription",
     "cancelSub": "Cancel Subscription",
+    "cancelSubInfoGoogle": "Please go to the \"My apps & games\" > \"Subscriptions\" section of the Google Play Store app to cancel your subscription or to see your subscription's termination date if you have already cancelled it. This screen is not able to show you whether your subscription has been cancelled.",
+    "cancelSubInfoApple": "Please follow <a href=\"https://support.apple.com/en-us/HT202039\">Apple’s official instructions</a> to cancel your subscription or to see your subscription's termination date if you have already cancelled it. This screen is not able to show you whether your subscription has been cancelled.",
     "canceledSubscription": "Canceled Subscription",
     "cancelingSubscription": "Canceling the subscription",
     "adminSub": "Administrator Subscriptions",

website/views/options/settings/subscription.jade

@@ -8,19 +8,19 @@ script(id='partials/options.settings.subscription.html',type='text/ng-template',
         +subPerks()
 
       .col-md-6
-        table.table.alert.alert-info(ng-if='user.purchased.plan.customerId')
+        table.table.alert.alert-info(ng-if='hasSubscription(user)')
-          tr(ng-if='user.purchased.plan.dateTerminated'): td.alert.alert-warning
+          tr(ng-if='hasCanceledSubscription(user)'): td.alert.alert-warning
             span.noninteractive-button.btn-danger=env.t('canceledSubscription')
             i.glyphicon.glyphicon-time
             |  #{env.t('subCanceled')} <strong>{{user.purchased.plan.dateTerminated | date:user.preferences.dateFormat}}</strong>
-          tr(ng-if='!user.purchased.plan.dateTerminated'): td
+          tr(ng-if='!hasCanceledSubscription(user)'): td
             h4=env.t('subscribed')
-            p(ng-if='user.purchased.plan.planId && user.purchased.plan.customerId !== "group-plan"')=env.t('purchasedPlanId', {price: '{{Content.subscriptionBlocks[user.purchased.plan.planId].price}}', months: '{{Content.subscriptionBlocks[user.purchased.plan.planId].months}}', plan: '{{user.purchased.plan.paymentMethod}}'})
+            p(ng-if='hasPlan(user) && !hasGroupPlan(user)')=env.t('purchasedPlanId', {price: '{{Content.subscriptionBlocks[user.purchased.plan.planId].price}}', months: '{{Content.subscriptionBlocks[user.purchased.plan.planId].months}}', plan: '{{user.purchased.plan.paymentMethod}}'})
-            p(ng-if='user.purchased.plan.customerId === "group-plan"')=env.t('youHaveGroupPlan')
+            p(ng-if='hasGroupPlan(user)')=env.t('youHaveGroupPlan')
           tr(ng-if='user.purchased.plan.extraMonths'): td
             span.glyphicon.glyphicon-credit-card
             | &nbsp;#{env.t('purchasedPlanExtraMonths', {months: '{{user.purchased.plan.extraMonths | number:2}}'})}
-          tr(ng-if='user.purchased.plan.consecutive.count || user.purchased.plan.consecutive.offset'): td
+          tr(ng-if='hasConsecutiveSubscription(user)'): td
             span.glyphicon.glyphicon-forward
             | &nbsp;#{env.t('consecutiveSubscription')}
             ul.list-unstyled
@@ -28,8 +28,8 @@ script(id='partials/options.settings.subscription.html',type='text/ng-template',
               li #{env.t('gemCapExtra')} {{user.purchased.plan.consecutive.gemCapExtra}}
               li #{env.t('mysticHourglasses')} {{user.purchased.plan.consecutive.trinkets}}
 
-        div(ng-if='!user.purchased.plan.customerId || (user.purchased.plan.customerId && user.purchased.plan.dateTerminated)')
+        div(ng-if='!hasSubscription(user) || hasCanceledSubscription(user)')
-          h4(ng-if='(user.purchased.plan.customerId && user.purchased.plan.dateTerminated)')= env.t("resubscribe")
+          h4(ng-if='hasCanceledSubscription(user)')= env.t("resubscribe")
           .form-group.reduce-top-margin
             .radio(ng-repeat='block in Content.subscriptionBlocks | toArray | omit: "discount==true" | orderBy:"months"', ng-if="block.target !== 'group' && block.canSubscribe === true")
               label
@@ -47,11 +47,12 @@ script(id='partials/options.settings.subscription.html',type='text/ng-template',
             .form-group
               button.pull-right.btn.btn-small(type='button',ng-click='applyCoupon(_subscription.coupon)')= env.t("apply")
 
-        div(ng-if='user.purchased.plan.customerId')
+        div(ng-if='hasSubscription(user)')
-          .btn.btn-primary(ng-if='!user.purchased.plan.dateTerminated && user.purchased.plan.paymentMethod=="Stripe"', ng-click='Payments.showStripeEdit()')=env.t('subUpdateCard')
+          .btn.btn-primary(ng-if='canEditCardDetails(user)', ng-click='Payments.showStripeEdit()')=env.t('subUpdateCard')
-          .btn.btn-sm.btn-danger(ng-if='!user.purchased.plan.dateTerminated && user.purchased.plan.customerId !== "group-plan"', ng-click='Payments.cancelSubscription()')=env.t('cancelSub')
+          .btn.btn-sm.btn-danger(ng-if='canCancelSubscription(user)', ng-click='Payments.cancelSubscription()')=env.t('cancelSub')
+          small(ng-if='!canCancelSubscription(user)', ng-bind-html='getCancelSubInfo(user)')
 
-        .container-fluid.slight-vertical-padding(ng-if='!user.purchased.plan.customerId || (user.purchased.plan.customerId && user.purchased.plan.dateTerminated)')
+        .container-fluid.slight-vertical-padding(ng-if='!hasSubscription(user) || hasCanceledSubscription(user)')
           small.muted=env.t('subscribeUsing')
           .row.text-center
             .col-md-4