From 2a367ab3a7c7227741833b10c65ae398b9efeea2 Mon Sep 17 00:00:00 2001
From: Matteo Pagliazzi <matteopagliazzi@gmail.com>
Date: Thu, 7 Mar 2019 16:58:49 +0100
Subject: [PATCH] Revert "New payments buttons and new Amazon checkout flow
 (#10940)"

This reverts commit 77f3bb53dea34625a965eb2d6bd418ce76878c7b.
---
 .../group-plans/createGroupModalPages.vue     |  13 +-
 .../client/components/groups/groupPlan.vue    |  16 +--
 .../components/payments/amazonButton.vue      | 110 -----------------
 .../components/payments/amazonModal.vue       | 114 ++++++++++++++----
 .../components/payments/buyGemsModal.vue      |  14 +--
 .../components/payments/sendGemsModal.vue     |   7 +-
 .../components/settings/subscription.vue      |  15 +--
 website/client/mixins/payments.js             |  24 +---
 8 files changed, 118 insertions(+), 195 deletions(-)
 delete mode 100644 website/client/components/payments/amazonButton.vue

diff --git a/website/client/components/group-plans/createGroupModalPages.vue b/website/client/components/group-plans/createGroupModalPages.vue
index 38630835ad..e0971792a8 100644
--- a/website/client/components/group-plans/createGroupModalPages.vue
+++ b/website/client/components/group-plans/createGroupModalPages.vue
@@ -25,8 +25,7 @@
     .payment-providers
       .box.payment-button(@click='pay(PAYMENTS.STRIPE)')
         .svg-icon.credit-card-icon(v-html="icons.creditCard")
-      amazon-button(:amazon-data="pay(PAYMENTS.AMAZON)")
-      //.box.payment-button.amazon(@click='pay(PAYMENTS.AMAZON)')
+      .box.payment-button.amazon(@click='pay(PAYMENTS.AMAZON)')
         .svg-icon.amazon-pay-icon(v-html="icons.amazonpay")
 </template>
 
@@ -88,21 +87,17 @@
 import * as Analytics from 'client/libs/analytics';
 import { mapState } from 'client/libs/store';
 import paymentsMixin from '../../mixins/payments';
-import amazonButton from 'client/components/payments/amazonButton';
 
-// import amazonpay from 'assets/svg/amazonpay.svg';
+import amazonpay from 'assets/svg/amazonpay.svg';
 import creditCard from 'assets/svg/credit-card.svg';
 
 export default {
   mixins: [paymentsMixin],
-  components: {
-    amazonButton,
-  },
   data () {
     return {
       amazonPayments: {},
       icons: Object.freeze({
-        // amazonpay,
+        amazonpay,
         creditCard,
       }),
       PAGES: {
@@ -164,7 +159,7 @@ export default {
         this.showStripe(paymentData);
       } else if (this.paymentMethod === this.PAYMENTS.AMAZON) {
         paymentData.type = 'subscription';
-        return paymentData;
+        this.amazonPaymentsInit(paymentData);
       }
     },
   },
diff --git a/website/client/components/groups/groupPlan.vue b/website/client/components/groups/groupPlan.vue
index 968b442703..9e92d0aa58 100644
--- a/website/client/components/groups/groupPlan.vue
+++ b/website/client/components/groups/groupPlan.vue
@@ -53,8 +53,7 @@ div
                 .svg-icon.credit-card-icon(v-html="icons.group")
                 p.credit-card Credit Card
               p Powered by Stripe
-            amazon-button(:amazon-data="pay(PAYMENTS.AMAZON)")
-            //.box.payment-button(@click='pay(PAYMENTS.AMAZON)')
+            .box.payment-button(@click='pay(PAYMENTS.AMAZON)')
               .svg-icon.amazon-pay-icon(v-html="icons.amazonpay")
 
     .container.col-6.offset-3.create-option(v-if='!upgradingGroup._id')
@@ -105,8 +104,7 @@ div
         .box.payment-button(@click='pay(PAYMENTS.STRIPE)')
           p Credit Card
           p Powered by Stripe
-        amazon-button(:amazon-data="pay(PAYMENTS.AMAZON)")
-        //.box.payment-button(@click='pay(PAYMENTS.AMAZON)')
+        .box.payment-button(@click='pay(PAYMENTS.AMAZON)')
           | Amazon Pay
 </template>
 
@@ -336,21 +334,17 @@ div
 import paymentsMixin from '../../mixins/payments';
 import { mapState } from 'client/libs/store';
 import group from 'assets/svg/group.svg';
-// import amazonpay from 'assets/svg/amazonpay.svg';
+import amazonpay from 'assets/svg/amazonpay.svg';
 import positiveIcon from 'assets/svg/positive.svg';
-import amazonButton from 'client/components/payments/amazonButton';
 
 export default {
   mixins: [paymentsMixin],
-  components: {
-    amazonButton,
-  },
   data () {
     return {
       amazonPayments: {},
       icons: Object.freeze({
         group,
-        // amazonpay,
+        amazonpay,
         positiveIcon,
       }),
       PAGES: {
@@ -419,7 +413,7 @@ export default {
         this.showStripe(paymentData);
       } else if (this.paymentMethod === this.PAYMENTS.AMAZON) {
         paymentData.type = 'subscription';
-        return paymentData;
+        this.amazonPaymentsInit(paymentData);
       }
     },
   },
diff --git a/website/client/components/payments/amazonButton.vue b/website/client/components/payments/amazonButton.vue
deleted file mode 100644
index 35e33c2af7..0000000000
--- a/website/client/components/payments/amazonButton.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template lang="pug">
-  .amazon-pay-button(:id="buttonId")
-</template>
-
-<style scoped>
-  .amazon-pay-button {
-    width: 150px;
-    margin-bottom: 12px;
-    margin: 0 auto;
-  }
-</style>
-
-<script>
-import axios from 'axios';
-import { mapState } from 'client/libs/store';
-import uuid from 'uuid';
-import paymentsMixin from 'client/mixins/payments';
-
-const AMAZON_PAYMENTS = process.env.AMAZON_PAYMENTS; // eslint-disable-line
-
-export default {
-  mixins: [paymentsMixin],
-  data () {
-    return { // @TODO what needed here? can be moved to mixin?
-      amazonPayments: {
-        modal: null,
-        type: null,
-        gift: null,
-        loggedIn: false,
-        paymentSelected: false,
-        billingAgreementId: '',
-        recurringConsent: false,
-        orderReferenceId: null,
-        subscription: null,
-        coupon: null,
-      },
-      isAmazonSetup: false,
-      amazonButtonEnabled: false,
-      groupToCreate: null, // creating new group
-      group: null, // upgrading existing group
-      buttonId: null,
-    };
-  },
-  props: {
-    amazonData: Object,
-  },
-  computed: {
-    ...mapState({user: 'user.data'}),
-    ...mapState(['isAmazonReady']),
-    amazonPaymentsCanCheckout () {
-      if (this.amazonPayments.type === 'single') {
-        return this.amazonPayments.paymentSelected === true;
-      } else if (this.amazonPayments.type === 'subscription') {
-        return this.amazonPayments.paymentSelected && this.amazonPayments.recurringConsent;
-      }
-      return false;
-    },
-  },
-  beforeMount () {
-    this.buttonId = `AmazonPayButton-${uuid.v4()}`;
-  },
-  mounted () {
-    this.amazonPaymentsInit(this.amazonData); // TOOD clone
-    if (this.isAmazonReady) return this.setupAmazon();
-
-    this.$store.watch(state => state.isAmazonReady, (isAmazonReady) => {
-      if (isAmazonReady) return this.setupAmazon();
-    });
-  },
-  methods: {
-    setupAmazon () {
-      if (this.isAmazonSetup) return false;
-      this.isAmazonSetup = true;
-      this.showButton();
-    },
-    showButton () {
-      window.OffAmazonPayments.Button( // eslint-disable-line new-cap
-        this.buttonId, // ID of the button
-        AMAZON_PAYMENTS.SELLER_ID,
-        {
-          type: 'PwA',
-          color: 'Gold',
-          size: 'small',
-          agreementType: 'BillingAgreement',
-          onSignIn: async (contract) => { // @TODO send to modal
-            this.amazonPayments.billingAgreementId = contract.getAmazonBillingAgreementId();
-
-            this.$set(this.amazonPayments, 'loggedIn', true);
-
-            this.$root.$emit('habitica::pay-with-amazon', this.amazonPayments);
-          },
-          authorization: () => {
-            window.amazon.Login.authorize({
-              scope: 'payments:widget',
-              popup: true,
-            }, function amazonSuccess (response) {
-              if (response.error) return alert(response.error);
-
-              const url = '/amazon/verifyAccessToken';
-              axios.post(url, response).catch((e) => {
-                alert(e.message);
-              });
-            });
-          },
-          onError: this.amazonOnError, // @TODO port here
-        });
-    },
-  },
-};
-</script>
diff --git a/website/client/components/payments/amazonModal.vue b/website/client/components/payments/amazonModal.vue
index 823aae5e85..13380db0b5 100644
--- a/website/client/components/payments/amazonModal.vue
+++ b/website/client/components/payments/amazonModal.vue
@@ -1,6 +1,7 @@
 <template lang="pug">
   b-modal#amazon-payment(title="Amazon", :hide-footer="true", size='md')
     h2.text-center Continue with Amazon
+    #AmazonPayButton
     #AmazonPayWallet(v-if="amazonPayments.loggedIn", style="width: 400px; height: 228px;")
     template(v-if="amazonPayments.loggedIn && amazonPayments.type === 'subscription'")
       br
@@ -18,7 +19,7 @@
     margin-bottom: 12px;
   }
 
-  #AmazonPayWallet, #AmazonPayRecurring {
+  #AmazonPayButton, #AmazonPayWallet, #AmazonPayRecurring {
     margin: 0 auto;
   }
 
@@ -53,6 +54,7 @@ export default {
         subscription: null,
         coupon: null,
       },
+      OffAmazonPayments: {},
       isAmazonSetup: false,
       amazonButtonEnabled: false,
       groupToCreate: null, // creating new group
@@ -72,6 +74,12 @@ export default {
     },
   },
   mounted () {
+    if (this.isAmazonReady) return this.setupAmazon();
+
+    this.$store.watch(state => state.isAmazonReady, (isAmazonReady) => {
+      if (isAmazonReady) return this.setupAmazon();
+    });
+
     this.$root.$on('habitica::pay-with-amazon', (amazonPaymentsData) => {
       if (!amazonPaymentsData) return;
 
@@ -82,30 +90,67 @@ export default {
       this.amazonPayments = Object.assign({}, amazonPayments, amazonPaymentsData);
 
       this.$root.$emit('bv::show::modal', 'amazon-payment');
-
-      this.$nextTick(async () => {
-        if (this.amazonPayments.type === 'subscription') {
-          this.amazonInitWidgets();
-        } else {
-          let url = '/amazon/createOrderReferenceId';
-          let response = await axios.post(url, {
-            billingAgreementId: this.amazonPayments.billingAgreementId,
-          });
-
-          if (response.status <= 400) {
-            this.amazonPayments.orderReferenceId = response.data.data.orderReferenceId;
-            this.amazonInitWidgets();
-          } else {
-            alert(response.message);
-          }
-        }
-      });
     });
   },
   destroyed () {
     this.$root.$off('habitica::pay-with-amazon');
   },
   methods: {
+    setupAmazon () {
+      if (this.isAmazonSetup) return false;
+      this.isAmazonSetup = true;
+      this.OffAmazonPayments = window.OffAmazonPayments;
+      this.showButton();
+    },
+    showButton () {
+      // @TODO: prevent modal close form clicking outside
+      let amazonButton = this.OffAmazonPayments.Button( // eslint-disable-line
+        'AmazonPayButton',
+        AMAZON_PAYMENTS.SELLER_ID,
+        {
+          type: 'PwA',
+          color: 'Gold',
+          size: 'small',
+          agreementType: 'BillingAgreement',
+          onSignIn: async (contract) => {
+            this.amazonPayments.billingAgreementId = contract.getAmazonBillingAgreementId();
+
+            this.$set(this.amazonPayments, 'loggedIn', true);
+
+            if (this.amazonPayments.type === 'subscription') {
+              this.amazonInitWidgets();
+            } else {
+              let url = '/amazon/createOrderReferenceId';
+              let response = await axios.post(url, {
+                billingAgreementId: this.amazonPayments.billingAgreementId,
+              });
+
+              if (response.status <= 400) {
+                this.amazonPayments.orderReferenceId = response.data.data.orderReferenceId;
+                this.amazonInitWidgets();
+                return;
+              }
+
+              alert(response.message);
+            }
+          },
+          authorization: () => {
+            window.amazon.Login.authorize({
+              scope: 'payments:widget',
+              popup: true,
+            }, function amazonSuccess (response) {
+              if (response.error) return alert(response.error);
+
+              let url = '/amazon/verifyAccessToken';
+              axios.post(url, response)
+                .catch((e) => {
+                  alert(e.message);
+                });
+            });
+          },
+          onError: this.amazonOnError,
+        });
+    },
     amazonInitWidgets () {
       let walletParams = {
         sellerId: AMAZON_PAYMENTS.SELLER_ID, // @TODO: Import
@@ -122,14 +167,15 @@ export default {
         walletParams.onReady = (billingAgreement) => {
           this.amazonPayments.billingAgreementId = billingAgreement.getAmazonBillingAgreementId();
 
-          new window.OffAmazonPayments.Widgets.Consent({
+          new this.OffAmazonPayments.Widgets.Consent({
             sellerId: AMAZON_PAYMENTS.SELLER_ID,
             amazonBillingAgreementId: this.amazonPayments.billingAgreementId,
             design: {
               designMode: 'responsive',
             },
             onReady: (consent) => {
-              this.$set(this.amazonPayments, 'recurringConsent', consent.getConsentStatus ? Boolean(consent.getConsentStatus()) : false);
+              let getConsent = consent.getConsentStatus;
+              this.$set(this.amazonPayments, 'recurringConsent', getConsent ? Boolean(getConsent()) : false);
               this.$set(this, 'amazonButtonEnabled', true);
             },
             onConsent: (consent) => {
@@ -143,7 +189,7 @@ export default {
         walletParams.amazonOrderReferenceId = this.amazonPayments.orderReferenceId;
       }
 
-      new window.OffAmazonPayments.Widgets.Wallet(walletParams).bind('AmazonPayWallet');
+      new this.OffAmazonPayments.Widgets.Wallet(walletParams).bind('AmazonPayWallet');
     },
     storePaymentStatusAndReload (url) {
       let paymentType;
@@ -259,6 +305,30 @@ export default {
     amazonOnPaymentSelect () {
       this.$set(this.amazonPayments, 'paymentSelected', true);
     },
+    amazonOnError (error) {
+      alert(error.getErrorMessage());
+      this.reset();
+    },
+    reset () {
+      // @TODO: Ensure we are using all of these
+      // some vars are set in the payments mixin. We should try to edit in one place
+      this.amazonPayments.modal = null;
+      this.amazonPayments.type = null;
+      this.amazonPayments.loggedIn = false;
+
+      // Gift
+      this.amazonPayments.gift = null;
+      this.amazonPayments.giftReceiver = null;
+
+      this.amazonPayments.billingAgreementId = null;
+      this.amazonPayments.orderReferenceId = null;
+      this.amazonPayments.paymentSelected = false;
+      this.amazonPayments.recurringConsent = false;
+      this.amazonPayments.subscription = null;
+      this.amazonPayments.coupon = null;
+      this.amazonPayments.groupToCreate = null;
+      this.amazonPayments.group = null;
+    },
   },
 };
 </script>
diff --git a/website/client/components/payments/buyGemsModal.vue b/website/client/components/payments/buyGemsModal.vue
index 5a2dac09b5..1d98396be6 100644
--- a/website/client/components/payments/buyGemsModal.vue
+++ b/website/client/components/payments/buyGemsModal.vue
@@ -51,8 +51,7 @@
           .card.text-center.payment-method
             a.card-body.paypal(@click="openPaypal(paypalCheckoutLink, 'gems')")
               img(src='~assets/images/paypal.png')
-          amazon-button(:amazon-data="{type: 'single'}")
-          // .card.text-center.payment-method(@click="amazonPaymentsInit({type: 'single'})")
+          .card.text-center.payment-method(@click="amazonPaymentsInit({type: 'single'})")
             .card-body.amazon
               img(src='~assets/images/amazon-payments.png')
         .row.text-center
@@ -136,8 +135,7 @@
               a.card-body.paypal(@click="openPaypal(paypalSubscriptionLink, 'subscription')")
                 img(src='~assets/images/paypal.png')
             .card.text-center.payment-method
-              amazon-button(:amazon-data="{type: 'subscription', subscription: subscriptionPlan}")
-              // .card-body.amazon(@click="amazonPaymentsInit({type: 'subscription', subscription: subscriptionPlan})")
+              .card-body.amazon(@click="amazonPaymentsInit({type: 'subscription', subscription: subscriptionPlan})")
                 img(src='~assets/images/amazon-payments.png')
           .row.text-center
             .svg-icon.mx-auto(v-html='icons.heart', style='"height: 24px; width: 24px;"')
@@ -176,6 +174,10 @@
     font-size: 16px;
   }
 
+  .amazon {
+    padding-top: 1.8em;
+  }
+
   .benefits {
     font-size: 14px;
   }
@@ -346,13 +348,10 @@
   import fortyTwoGems from 'assets/svg/42-gems.svg';
   import eightyFourGems from 'assets/svg/84-gems.svg';
 
-  import amazonButton from 'client/components/payments/amazonButton';
-
   export default {
     mixins: [paymentsMixin],
     components: {
       planGemLimits,
-      amazonButton,
     },
     computed: {
       ...mapState({user: 'user.data'}),
@@ -384,6 +383,7 @@
         gemAmount: 0,
         subscriptionPlan: '',
         selectedPage: 'subscribe',
+        amazonPayments: {},
         planGemLimits,
       };
     },
diff --git a/website/client/components/payments/sendGemsModal.vue b/website/client/components/payments/sendGemsModal.vue
index eda6c20b9e..b03f521f57 100644
--- a/website/client/components/payments/sendGemsModal.vue
+++ b/website/client/components/payments/sendGemsModal.vue
@@ -51,8 +51,7 @@ b-modal#send-gems(:title="title", :hide-footer="true", size='lg', @hide='onHide(
     template(v-else)
       button.btn.btn-primary(@click='showStripe({gift, uuid: userReceivingGems._id, receiverName})') {{ $t('card') }}
       button.btn.btn-warning(@click='openPaypalGift({gift: gift, giftedTo: userReceivingGems._id, receiverName})') PayPal
-      amazon-button(:amazon-data="{type: 'single', gift, giftedTo: userReceivingGems._id, receiverName}")
-      //button.btn.btn-success(@click="amazonPaymentsInit({type: 'single', gift, giftedTo: userReceivingGems._id, receiverName})") Amazon Payments
+      button.btn.btn-success(@click="amazonPaymentsInit({type: 'single', gift, giftedTo: userReceivingGems._id, receiverName})") Amazon Payments
     button.btn.btn-secondary(@click='close()') {{$t('cancel')}}
 </template>
 
@@ -87,16 +86,12 @@ import { mapState } from 'client/libs/store';
 import planGemLimits from '../../../common/script/libs/planGemLimits';
 import paymentsMixin from 'client/mixins/payments';
 import notificationsMixin from 'client/mixins/notifications';
-import amazonButton from 'client/components/payments/amazonButton';
 
 // @TODO: EMAILS.TECH_ASSISTANCE_EMAIL, load from config
 const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
 
 export default {
   mixins: [paymentsMixin, notificationsMixin],
-  components: {
-    amazonButton,
-  },
   data () {
     return {
       planGemLimits,
diff --git a/website/client/components/settings/subscription.vue b/website/client/components/settings/subscription.vue
index 14c7223c6c..b76747c523 100644
--- a/website/client/components/settings/subscription.vue
+++ b/website/client/components/settings/subscription.vue
@@ -80,8 +80,7 @@
               a.purchase(@click="openPaypal(paypalPurchaseLink, 'subscription')", :disabled='!subscription.key')
                 img(src='https://www.paypalobjects.com/webstatic/en_US/i/buttons/pp-acceptance-small.png', :alt="$t('paypal')")
             .col-md-4
-              amazon-button(:amazon-data="{type: 'subscription', subscription: this.subscription.key, coupon: this.subscription.coupon}")
-              // a.btn.btn-secondary.purchase(@click="payWithAmazon()")
+              a.btn.btn-secondary.purchase(@click="payWithAmazon()")
                 img(src='https://payments.amazon.com/gp/cba/button', :alt="$t('amazonPayments')")
     .row
       .col-6
@@ -116,13 +115,8 @@ import planGemLimits from '../../../common/script/libs/planGemLimits';
 import paymentsMixin from '../../mixins/payments';
 import notificationsMixin from '../../mixins/notifications';
 
-import amazonButton from 'client/components/payments/amazonButton';
-
 export default {
   mixins: [paymentsMixin, notificationsMixin],
-  components: {
-    amazonButton,
-  },
   data () {
     return {
       loading: false,
@@ -246,6 +240,13 @@ export default {
     },
   },
   methods: {
+    payWithAmazon () {
+      this.amazonPaymentsInit({
+        type: 'subscription',
+        subscription: this.subscription.key,
+        coupon: this.subscription.coupon,
+      });
+    },
     async applyCoupon (coupon) {
       const response = await axios.post(`/api/v4/coupons/validate/${coupon}`);
 
diff --git a/website/client/mixins/payments.js b/website/client/mixins/payments.js
index 9fc28dda27..84c653a45f 100644
--- a/website/client/mixins/payments.js
+++ b/website/client/mixins/payments.js
@@ -251,30 +251,8 @@ export default {
 
       this.amazonPayments.gift = data.gift;
       this.amazonPayments.type = data.type;
-    },
-    amazonOnError (error) {
-      alert(error.getErrorMessage());
-      this.reset();
-    },
-    reset () {
-      // @TODO: Ensure we are using all of these
-      // some vars are set in the payments mixin. We should try to edit in one place
-      this.amazonPayments.modal = null;
-      this.amazonPayments.type = null;
-      this.amazonPayments.loggedIn = false;
 
-      // Gift
-      this.amazonPayments.gift = null;
-      this.amazonPayments.giftReceiver = null;
-
-      this.amazonPayments.billingAgreementId = null;
-      this.amazonPayments.orderReferenceId = null;
-      this.amazonPayments.paymentSelected = false;
-      this.amazonPayments.recurringConsent = false;
-      this.amazonPayments.subscription = null;
-      this.amazonPayments.coupon = null;
-      this.amazonPayments.groupToCreate = null;
-      this.amazonPayments.group = null;
+      this.$root.$emit('habitica::pay-with-amazon', this.amazonPayments);
     },
     async cancelSubscription (config) {
       if (config && config.group && !confirm(this.$t('confirmCancelGroupPlan'))) return;