🎨 Enable coupon code on all checkout pages (#2000)

* 🎨 Enable coupon code on all checkout pages

* ♻️ Refactor Christmas coupon logic into mixin

* 🔥 Remove unused code

src/components/NFTBook/CrossSellDialog.vue

@@ -72,10 +72,11 @@ import { getNFTBookPurchaseLink } from '~/util/api';
 import { logTrackerEvent, logPurchaseFlowEvent } from '~/util/EventLogger';
 
 import nftOrCollectionMixin from '~/mixins/nft-or-collection';
+import couponMixin from '~/mixins/coupon';
 
 export default {
   name: 'NFTBookCrossSellDialog',
-  mixins: [nftOrCollectionMixin],
+  mixins: [nftOrCollectionMixin, couponMixin],
   props: {
     open: {
       type: Boolean,
@@ -150,7 +151,9 @@ export default {
           {
             gaClientId: this.getGaClientId,
             gaSessionId: this.getGaSessionId,
-            coupon: this.$route.query.coupon,
+            coupon: this.getApplicableCoupon({
+              checkoutPrice: customPriceInDecimal,
+            }),
             customPriceInDecimal,
             utmCampaign: this.utmCampaign,
             utmSource: `${this.utmSource}_cross-sell`,

src/constant/index.js

@@ -452,3 +452,6 @@ export const SEARCH_SUGGESTIONS = [
   '信仰',
   '邵家臻',
 ];
+
+export const CHRISTMAS_CAMPAIGN_MIN_SPEND = 9;
+export const CHRISTMAS_CAMPAIGN_COUPON = 'XMASREAD';

src/mixins/coupon.js

@@ -0,0 +1,22 @@
+import {
+  CHRISTMAS_CAMPAIGN_MIN_SPEND,
+  CHRISTMAS_CAMPAIGN_COUPON,
+} from '@/constant/index';
+
+export default {
+  computed: {
+    mixinCoupon() {
+      return this.$route.query.coupon || '';
+    },
+  },
+  methods: {
+    getApplicableCoupon({ cartCoupon, checkoutPrice }) {
+      if (this.mixinCoupon || cartCoupon) {
+        return this.mixinCoupon || cartCoupon;
+      }
+      return checkoutPrice > CHRISTMAS_CAMPAIGN_MIN_SPEND
+        ? CHRISTMAS_CAMPAIGN_COUPON
+        : '';
+    },
+  },
+};

src/pages/nft/class/_classId/index.vue

@@ -426,24 +426,25 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import { nftClassCollectionType, parseNFTMetadataURL } from '~/util/nft';
-import { getNFTBookPurchaseLink, postNewStripeFiatPayment } from '~/util/api';
-import { logTrackerEvent, logPurchaseFlowEvent } from '~/util/EventLogger';
 import {
   IS_TESTNET,
   USD_TO_HKD_RATIO,
   EXTERNAL_HOST,
   NFT_BOOK_PLATFORM_LIKER_LAND,
   LIKECOIN_API_BASE,
   LIKECOIN_BUTTON_BASE,
-} from '~/constant';
+} from '@/constant/index';
+import { nftClassCollectionType, parseNFTMetadataURL } from '~/util/nft';
+import { getNFTBookPurchaseLink, postNewStripeFiatPayment } from '~/util/api';
+import { logTrackerEvent, logPurchaseFlowEvent } from '~/util/EventLogger';
 
 import nftMixin from '~/mixins/nft';
 import clipboardMixin from '~/mixins/clipboard';
 import crossSellMixin from '~/mixins/cross-sell';
 import navigationListenerMixin from '~/mixins/navigation-listener';
 import utmMixin from '~/mixins/utm';
 import alertMixin from '~/mixins/alert';
+import couponMixin from '~/mixins/coupon';
 
 export default {
   name: 'NFTClassDetailsPage',
@@ -454,6 +455,7 @@ export default {
     navigationListenerMixin,
     utmMixin,
     alertMixin,
+    couponMixin,
   ],
   layout: 'default',
   asyncData({ query }) {
@@ -1424,7 +1426,9 @@ export default {
                 gaClientId,
                 gaSessionId,
                 giftInfo,
-                coupon: this.$route.query.coupon,
+                coupon: this.getApplicableCoupon({
+                  checkoutPrice: edition.price,
+                }),
                 customPriceInDecimal,
                 utmCampaign: this.utmCampaign,
                 utmSource: this.utmSource,

src/pages/nft/collection/_collectionId/index.vue

@@ -111,6 +111,7 @@ import clipboardMixin from '~/mixins/clipboard';
 import navigationListenerMixin from '~/mixins/navigation-listener';
 import utmMixin from '~/mixins/utm';
 import alertMixin from '~/mixins/alert';
+import couponMixin from '~/mixins/coupon';
 
 export default {
   name: 'NFTCollectionDetailsPage',
@@ -120,6 +121,7 @@ export default {
     navigationListenerMixin,
     utmMixin,
     alertMixin,
+    couponMixin,
   ],
   layout: 'default',
   data() {
@@ -533,7 +535,9 @@ export default {
                 gaClientId,
                 giftInfo,
                 gaSessionId,
-                coupon: this.$route.query.coupon,
+                coupon: this.getApplicableCoupon({
+                  checkoutPrice: customPriceInDecimal,
+                }),
                 customPriceInDecimal,
                 utmCampaign: this.utmCampaign,
                 utmSource: this.utmSource,

src/pages/shopping-cart/book.vue

@@ -153,16 +153,14 @@ import { getNFTBookCartPurchaseLink } from '~/util/api';
 
 import nftMixin from '~/mixins/nft';
 import alertMixin from '~/mixins/alert';
-
-const CHRISTMAS_CAMPAIGN_MIN_SPEND = 9;
-const CHRISTMAS_CAMPAIGN_COUPON = 'XMASREAD';
+import couponMixin from '~/mixins/coupon';
 
 export default {
   name: 'ShoppingCartPage',
   filters: {
     formatNumberWithUSD,
   },
-  mixins: [nftMixin, alertMixin],
+  mixins: [nftMixin, alertMixin, couponMixin],
   data() {
     return {
       isGiftDialogOpen: false,
@@ -251,12 +249,6 @@ export default {
     formattedFiatPrice() {
       return formatNumberWithUSD(this.totalNFTPriceInUSD);
     },
-    getApplicableCoupon() {
-      if (this.coupon) return this.coupon;
-      return this.totalItemPriceInUSD > CHRISTMAS_CAMPAIGN_MIN_SPEND
-        ? CHRISTMAS_CAMPAIGN_COUPON
-        : '';
-    },
   },
   mounted() {
     logPurchaseFlowEvent(this, 'view_cart', this.purchaseEventParams);
@@ -387,7 +379,10 @@ export default {
             fbClickId: this.fbClickId,
             items: this.shoppingCartBookItems,
             email: this.walletEmail,
-            coupon: this.getApplicableCoupon,
+            coupon: this.getApplicableCoupon({
+              cartCoupon: this.coupon,
+              checkoutPrice: this.totalNFTPriceInUSD,
+            }),
             giftInfo,
           },
           {