fix(amazon): disabled state for button, fix bug where checkout button would not appear

website/client/assets/scss/payments.scss

@@ -10,6 +10,10 @@
     .btn, .btn:hover, .btn:active {
       box-shadow: none;
     }
+
+    .payment-item > *{
+      cursor: default !important;
+    }
   }
 
   .payment-item {

website/client/components/payments/amazonButton.vue

@@ -35,6 +35,10 @@ export default {
   },
   props: {
     amazonData: Object,
+    amazonDisabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     ...mapState({user: 'user.data'}),
@@ -48,11 +52,16 @@ export default {
       return false;
     },
   },
+  watch: {
+    amazonData () {
+      this.amazonPaymentsInit(this.amazonData);
+    },
+  },
   beforeMount () {
     this.buttonId = `AmazonPayButton-${uuid.v4()}`;
   },
   mounted () {
-    this.amazonPaymentsInit(this.amazonData); // TOOD clone
+    this.amazonPaymentsInit(this.amazonData);
     if (this.isAmazonReady) return this.setupAmazon();
 
     this.$store.watch(state => state.isAmazonReady, (isAmazonReady) => {
@@ -75,6 +84,8 @@ export default {
           size: 'large',
           agreementType: 'BillingAgreement',
           onSignIn: async (contract) => { // @TODO send to modal
+            if (this.amazonDisabled === true) return null;
+            // if (!this.checkGemAmount(this.amazonData)) return;
             this.amazonPayments.billingAgreementId = contract.getAmazonBillingAgreementId();
 
             this.$set(this.amazonPayments, 'loggedIn', true);
@@ -82,6 +93,7 @@ export default {
             this.$root.$emit('habitica::pay-with-amazon', this.amazonPayments);
           },
           authorization: () => {
+            if (this.amazonDisabled === true) return null;
             window.amazon.Login.authorize({
               scope: 'payments:widget',
               popup: true,

website/client/components/payments/sendGemsModal.vue

@@ -48,15 +48,18 @@ b-modal#send-gems(:title="title", :hide-footer="true", size='md', @hide='onHide(
       @click="sendGift()",
       :disabled="sendingInProgress"
     ) {{ $t("send") }}
-    .payments-column.mx-auto(v-else, :class="{'payments-disabled': !gift.subscription.key}")
-      button.purchase.btn.btn-primary.payment-button.payment-item(@click='showStripe({gift, uuid: userReceivingGems._id, receiverName})', :disabled="!gift.subscription.key") 
+    .payments-column.mx-auto(v-else, :class="{'payments-disabled': !gift.subscription.key && gift.gems.amount < 1}")
+      button.purchase.btn.btn-primary.payment-button.payment-item(@click='showStripe({gift, uuid: userReceivingGems._id, receiverName})', :disabled="!gift.subscription.key && gift.gems.amount < 1") 
         .svg-icon.credit-card-icon(v-html="icons.creditCardIcon")
         | {{ $t('card') }}
-      button.btn.payment-item.paypal-checkout.payment-button(@click="openPaypalGift({gift: gift, giftedTo: userReceivingGems._id, receiverName})", :disabled="!gift.subscription.key")
+      button.btn.payment-item.paypal-checkout.payment-button(@click="openPaypalGift({gift: gift, giftedTo: userReceivingGems._id, receiverName})", :disabled="!gift.subscription.key && gift.gems.amount < 1")
         | &nbsp;
         img(src='~assets/images/paypal-checkout.png', :alt="$t('paypal')")
         | &nbsp;
-      amazon-button.payment-item.mb-0(:amazon-data="{type: 'single', gift, giftedTo: userReceivingGems._id, receiverName}")
+      amazon-button.payment-item.mb-0(
+        :amazon-data="{type: 'single', gift, giftedTo: userReceivingGems._id, receiverName}",
+        :amazon-disabled="!gift.subscription.key && gift.gems.amount < 1",
+      )
 </template>
 
 <style lang="scss">

website/client/mixins/payments.js

@@ -223,7 +223,6 @@ export default {
       return true;
     },
     amazonPaymentsInit (data) {
-      if (!this.checkGemAmount(data)) return;
       if (data.type !== 'single' && data.type !== 'subscription') return;
 
       if (data.gift) {