New client group plan (#8948)

* Added stripe payment for group plan

* Began adding amazon

* Added amazon payments for group

* Added get group plans route

* Added group plan nav

* Added initial task page

* Added create and edit group plans

* Added initial approval header and footer

* Added assignment and approved requirement

* Added minor text fixes

* Added inital approval flow

* Added approval modal

* Removed always true

* Added more styles for filters

* Added search

* Added env vars

* Fixed router issues

* Added env to social login

* Fixed merge conflict

website/client/components/settings/subscription.vue

@@ -116,10 +116,12 @@ import { mapState } from 'client/libs/store';
 import subscriptionBlocks from '../../../common/script/content/subscriptionBlocks';
 import planGemLimits from '../../../common/script/libs/planGemLimits';
 import amazonPaymentsModal from '../payments/amazonModal';
+import paymentsMixin from '../../mixins/payments';
 
 const STRIPE_PUB_KEY = 'pk_test_6pRNASCoBOKtIshFeQd4XMUh';
 
 export default {
+  mixins: [paymentsMixin],
   components: {
     amazonPaymentsModal,
   },
@@ -250,58 +252,6 @@ export default {
       subs.basic_6mo.discount = true;
       subs.google_6mo.discount = false;
     },
-    showStripe (data) {
-      if (!this.checkGemAmount(data)) return;
-
-      let sub = false;
-
-      if (data.subscription) {
-        sub = data.subscription;
-      } else if (data.gift && data.gift.type === 'subscription') {
-        sub = data.gift.subscription.key;
-      }
-
-      sub = sub && subscriptionBlocks[sub];
-
-      let amount = 500;// 500 = $5
-      if (sub) amount = sub.price * 100;
-      if (data.gift && data.gift.type === 'gems') amount = data.gift.gems.amount / 4 * 100;
-      if (data.group) amount = (sub.price + 3 * (data.group.memberCount - 1)) * 100;
-
-      this.StripeCheckout.open({
-        key: STRIPE_PUB_KEY,
-        address: false,
-        amount,
-        name: 'Habitica',
-        description: sub ? this.$t('subscribe') : this.$t('checkout'),
-        image: '/apple-touch-icon-144-precomposed.png',
-        panelLabel: sub ? this.$t('subscribe') : this.$t('checkout'),
-        token: async (res) => {
-          let url = '/stripe/checkout?a=a'; // just so I can concat &x=x below
-
-          if (data.groupToCreate) {
-            url = '/api/v3/groups/create-plan?a=a';
-            res.groupToCreate = data.groupToCreate;
-            res.paymentType = 'Stripe';
-          }
-
-          if (data.gift) url += `&gift=${this.encodeGift(data.uuid, data.gift)}`;
-          if (data.subscription) url += `&sub=${sub.key}`;
-          if (data.coupon) url += `&coupon=${data.coupon}`;
-          if (data.groupId) url += `&groupId=${data.groupId}`;
-
-          let response = await axios.post(url, res);
-          // Success
-          if (response && response.data && response.data._id) {
-            this.$router.push(`/#/options/groups/guilds/${response.data._id}`);
-          } else {
-            window.location.reload(true);
-          }
-          // Error
-          alert(response.message);
-        },
-      });
-    },
     showStripeEdit (config) {
       let groupId;
       if (config && config.groupId) {
@@ -373,34 +323,6 @@ export default {
     getCancelSubInfo () {
       return this.$t(`cancelSubInfo${this.user.purchased.plan.paymentMethod}`);
     },
-    amazonPaymentsInit (data) {
-      if (!this.isAmazonReady) return;
-      if (!this.checkGemAmount(data)) return;
-      if (data.type !== 'single' && data.type !== 'subscription') return;
-
-      if (data.gift) {
-        if (data.gift.gems && data.gift.gems.amount && data.gift.gems.amount <= 0) return;
-        data.gift.uuid = data.giftedTo;
-      }
-
-      if (data.subscription) {
-        this.amazonPayments.subscription = data.subscription;
-        this.amazonPayments.coupon = data.coupon;
-      }
-
-      if (data.groupId) {
-        this.amazonPayments.groupId = data.groupId;
-      }
-
-      if (data.groupToCreate) {
-        this.amazonPayments.groupToCreate = data.groupToCreate;
-      }
-
-      this.amazonPayments.gift = data.gift;
-      this.amazonPayments.type = data.type;
-
-      this.$root.$emit('show::modal', 'amazon-payment');
-    },
     payPalPayment (data) {
       if (!this.checkGemAmount(data)) return;
 
@@ -413,15 +335,6 @@ export default {
       let encodedString = JSON.stringify(gift);
       return encodeURIComponent(encodedString);
     },
-    checkGemAmount (data) {
-      let isGem = data && data.gift && data.gift.type === 'gems';
-      let notEnoughGem = isGem && (!data.gift.gems.amount || data.gift.gems.amount === 0);
-      if (notEnoughGem) {
-        Notification.error(this.$t('badAmountOfGemsToPurchase'), true);
-        return false;
-      }
-      return true;
-    },
   },
 };
 </script>