From 240fdd7435205a7666712150433f571bc0e7d589 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 18 Dec 2024 14:21:09 +0800
Subject: [PATCH 1/9] =?UTF-8?q?=E2=9C=A8=20Add=20banner=20for=20christmas?=
 =?UTF-8?q?=20campaign?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ChristmasCampaign/banner.vue | 85 +++++++++++++++++++++
 src/layouts/default.vue                     |  1 +
 src/layouts/index.vue                       |  1 +
 3 files changed, 87 insertions(+)
 create mode 100644 src/components/ChristmasCampaign/banner.vue

diff --git a/src/components/ChristmasCampaign/banner.vue b/src/components/ChristmasCampaign/banner.vue
new file mode 100644
index 000000000..927a3e725
--- /dev/null
+++ b/src/components/ChristmasCampaign/banner.vue
@@ -0,0 +1,85 @@
+<template>
+  <div
+    v-if="showBanner"
+    class="z-[500] w-full h-[40px] overflow-hidden flex items-center justify-center text-white bg-like-green relative"
+  >
+    <div class="h-[24px] overflow-hidden relative">
+      <div class="scrolling-content">
+        <div
+          v-for="(message, index) in repeatedMessages"
+          :key="index"
+          class="h-[24px] text-[14px] flex items-center justify-center"
+        >
+          {{ message }}
+        </div>
+      </div>
+    </div>
+
+    <ButtonV2
+      preset="plain"
+      size="small"
+      class="absolute translate-y-[-50%] right-[12px] top-1/2"
+      @click="closeBanner"
+    >
+      <IconClose class="transform scale-75 laptop:scale-100" />
+    </ButtonV2>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      messages: ['🎄聖誕限時 全店9折優惠', '於付款頁面輸入優惠碼”CHRISTMAS10”'],
+      showBanner: true,
+    };
+  },
+  computed: {
+    repeatedMessages() {
+      return [...this.messages, ...this.messages];
+    },
+  },
+  methods: {
+    closeBanner() {
+      this.showBanner = false;
+      try {
+        window.localStorage.setItem('bannerClosedTime', Date.now());
+      } catch (error) {}
+    },
+    checkBannerStatus() {
+      try {
+        const lastClosedTime = window.localStorage.getItem('bannerClosedTime');
+        const oneDay = 24 * 60 * 60 * 1000;
+        if (lastClosedTime && Date.now() - lastClosedTime < oneDay) {
+          this.showBanner = false;
+        }
+      } catch (error) {}
+    },
+  },
+  created() {
+    this.checkBannerStatus();
+  },
+};
+</script>
+
+<style scoped>
+.scrolling-content {
+  display: flex;
+  flex-direction: column;
+  animation: scrollUp 10s linear infinite;
+}
+
+@keyframes scrollUp {
+  0%,
+  25% {
+    transform: translateY(0%);
+  }
+  50%,
+  75% {
+    transform: translateY(-25%);
+  }
+  100% {
+    transform: translateY(-50%);
+  }
+}
+</style>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 96761aea3..7adca588a 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="flex flex-col items-stretch min-h-screen">
+    <ChristmasCampaignBanner />
     <!-- <AlertBanner
       v-if="getRouteBaseName($route) !== 'nft-class-classId' && $route.params.classId !== alertBannerNFTClassId"
       :primary-button-text="$t('alert_banner_actions_purchase')"
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 4cc7ab307..140af4781 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -3,6 +3,7 @@
     <AlertBanner v-if="uiIsChainUpgrading">{{
       $t('notice_chain_upgrading')
     }}</AlertBanner>
+    <ChristmasCampaignBanner />
 
     <nuxt
       :class="[

From 9e53f5a4e22edb373cdd603ad8ebff9c52eb5eea Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 18 Dec 2024 14:25:31 +0800
Subject: [PATCH 2/9] =?UTF-8?q?=F0=9F=92=84=20Add=20discount=20info=20on?=
 =?UTF-8?q?=20check=20out=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/en.json              |  3 ++
 src/locales/zh-Hant.json         |  3 ++
 src/pages/shopping-cart/book.vue | 47 +++++++++++++++++++-------------
 3 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 572e81ca3..195856901 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -981,11 +981,14 @@
     "language": "Language",
     "title": "Settings"
   },
+  "shopping_cart_checkoutd": "Checkout",
   "shopping_cart_checkout_button_by_card": "Checkout by card",
   "shopping_cart_checkout_button_by_LIKE": "Checkout by LIKE",
   "shopping_cart_empty_notice": "Shopping cart is empty",
   "shopping_cart_empty_notice_button": "Browse Bookstore",
   "shopping_cart_error_insufficient_balance": "Insufficient balance, you only have {balance}",
+  "shopping_cart_list_coupon_title": "Discount (if applicable)",
+  "shopping_cart_list_coupon_text": "Calculated at next step",
   "shopping_cart_list_header_item": "Item",
   "shopping_cart_list_header_price": "Price",
   "shopping_cart_list_header_quantity": "Quantity",
diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
index 5471c3a5b..21f8557a4 100644
--- a/src/locales/zh-Hant.json
+++ b/src/locales/zh-Hant.json
@@ -981,11 +981,14 @@
     "language": "介面語言",
     "title": "設定"
   },
+  "shopping_cart_checkout": "結帳",
   "shopping_cart_checkout_button_by_card": "以信用卡結帳",
   "shopping_cart_checkout_button_by_LIKE": "以 LIKE 結帳",
   "shopping_cart_empty_notice": "購物車是空的",
   "shopping_cart_empty_notice_button": "瀏覽書店",
   "shopping_cart_error_insufficient_balance": "餘額不足，你只有 {balance}",
+  "shopping_cart_list_coupon_title": "優惠（如適用）",
+  "shopping_cart_list_coupon_text": "將於下一步計算",
   "shopping_cart_list_header_item": "購物明細",
   "shopping_cart_list_header_price": "單價",
   "shopping_cart_list_header_quantity": "數量",
diff --git a/src/pages/shopping-cart/book.vue b/src/pages/shopping-cart/book.vue
index ba1f7ab8f..2f2f6a640 100644
--- a/src/pages/shopping-cart/book.vue
+++ b/src/pages/shopping-cart/book.vue
@@ -73,6 +73,16 @@
       <footer
         class="grid grid-cols-6 items-center gap-[1em] mt-[1em] text-right"
       >
+        <div
+          class="col-span-3 sm:col-span-4 text-medium-gray text-[14px] font-200"
+        >
+          {{ $t('shopping_cart_list_coupon_title') }}
+        </div>
+        <div
+          class="col-span-3 sm:col-span-2 text-medium-gray text-[14px] font-200"
+        >
+          {{ $t('shopping_cart_list_coupon_text') }}
+        </div>
         <div class="col-span-3 sm:col-span-4 text-gray-4a">
           {{ $t('shopping_cart_list_total_price') }}
         </div>
@@ -84,25 +94,24 @@
       </footer>
 
       <div class="flex justify-end mt-[2em]">
-        <div class="flex gap-[1em]">
-          <ButtonV2
-            v-if="giftInfo"
-            class="min-w-[120px]"
-            preset="outline"
-            :text="$t('nft_edition_select_confirm_button_text_gift')"
-            @click="handleClickGiftButton"
-          >
-            <template #prepend>
-              <IconGift class="w-[16px]" />
-            </template>
-          </ButtonV2>
-          <EventModalCollectMethodButton
-            :title="$t('shopping_cart_checkout_button_by_card')"
-            type="stripe"
-            :price="formattedFiatPrice"
-            @click="_ => handleClickCheckoutByFiatButton()"
-          />
-        </div>
+        <ButtonV2
+          v-if="giftInfo"
+          class="min-w-[120px]"
+          preset="outline"
+          :text="$t('nft_edition_select_confirm_button_text_gift')"
+          @click="handleClickGiftButton"
+        >
+          <template #prepend>
+            <IconGift class="w-[16px]" />
+          </template>
+        </ButtonV2>
+      </div>
+      <div class="grid w-full grid-cols-6">
+        <ButtonV2
+          class="w-full col-span-3 col-start-4 sm:col-span-2 sm:col-start-5"
+          :text="$t('shopping_cart_checkout')"
+          @click="handleClickCheckoutByFiatButton()"
+        />
       </div>
     </CardV2>
 

From e5efc5b687f108286fbc0339548aad72e81a4555 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 18 Dec 2024 14:29:36 +0800
Subject: [PATCH 3/9] =?UTF-8?q?=F0=9F=8E=A8=20Add=20coupon=20code=20when?=
 =?UTF-8?q?=20click=20check=20out?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/shopping-cart/book.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/shopping-cart/book.vue b/src/pages/shopping-cart/book.vue
index 2f2f6a640..ccdc9a325 100644
--- a/src/pages/shopping-cart/book.vue
+++ b/src/pages/shopping-cart/book.vue
@@ -361,7 +361,7 @@ export default {
             fbClickId: this.fbClickId,
             items: this.shoppingCartBookItems,
             email: this.walletEmail,
-            coupon: this.coupon,
+            coupon: this.coupon || 'CHRISTMAS10',
             giftInfo,
           },
           {

From a7d87145e3f458550ea07794a6916e00c9d97f96 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Thu, 19 Dec 2024 16:20:11 +0800
Subject: [PATCH 4/9] =?UTF-8?q?=F0=9F=9A=9A=20Rename=20Campaign=20banner?=
 =?UTF-8?q?=20to=20SiteTopBanner?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{ChristmasCampaign/banner.vue => SiteTopBanner.vue}     | 6 +++---
 src/layouts/default.vue                                     | 2 +-
 src/layouts/index.vue                                       | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)
 rename src/components/{ChristmasCampaign/banner.vue => SiteTopBanner.vue} (100%)

diff --git a/src/components/ChristmasCampaign/banner.vue b/src/components/SiteTopBanner.vue
similarity index 100%
rename from src/components/ChristmasCampaign/banner.vue
rename to src/components/SiteTopBanner.vue
index 927a3e725..962ddf761 100644
--- a/src/components/ChristmasCampaign/banner.vue
+++ b/src/components/SiteTopBanner.vue
@@ -39,6 +39,9 @@ export default {
       return [...this.messages, ...this.messages];
     },
   },
+  created() {
+    this.checkBannerStatus();
+  },
   methods: {
     closeBanner() {
       this.showBanner = false;
@@ -56,9 +59,6 @@ export default {
       } catch (error) {}
     },
   },
-  created() {
-    this.checkBannerStatus();
-  },
 };
 </script>
 
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 7adca588a..46271d6fe 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col items-stretch min-h-screen">
-    <ChristmasCampaignBanner />
+    <SiteTopBanner />
     <!-- <AlertBanner
       v-if="getRouteBaseName($route) !== 'nft-class-classId' && $route.params.classId !== alertBannerNFTClassId"
       :primary-button-text="$t('alert_banner_actions_purchase')"
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 140af4781..391e636d3 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -3,7 +3,7 @@
     <AlertBanner v-if="uiIsChainUpgrading">{{
       $t('notice_chain_upgrading')
     }}</AlertBanner>
-    <ChristmasCampaignBanner />
+    <SiteTopBanner />
 
     <nuxt
       :class="[

From b92e1bd39fac90a3f2ed0e56627c3b96dec43e9d Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Thu, 19 Dec 2024 16:37:15 +0800
Subject: [PATCH 5/9] =?UTF-8?q?=F0=9F=92=84=20Increase=20top=20spacing=20f?=
 =?UTF-8?q?or=20mobile=20menu=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SiteMenuForMobile.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SiteMenuForMobile.vue b/src/components/SiteMenuForMobile.vue
index 601156d45..a4bd25933 100644
--- a/src/components/SiteMenuForMobile.vue
+++ b/src/components/SiteMenuForMobile.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="fixed inset-0 z-50 bg-black bg-opacity-[30%]">
     <div
-      class="flex flex-col items-center gap-[22px] w-full bg-white pl-[16px] pr-[8px] py-[28px]"
+      class="flex flex-col items-center gap-[22px] w-full bg-white pl-[16px] pr-[8px] pt-[40px] pb-[28px]"
     >
       <header
         class="flex items-center justify-between w-full text-like-green mb-[10px]"

From e60c36eb7af3e84c6325f7cca59431b4da01c0df Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Thu, 19 Dec 2024 17:21:40 +0800
Subject: [PATCH 6/9] =?UTF-8?q?=F0=9F=8C=90=20Localize=20campaign=20messag?=
 =?UTF-8?q?es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SiteTopBanner.vue | 7 +++++--
 src/locales/en.json              | 2 ++
 src/locales/zh-Hant.json         | 2 ++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/SiteTopBanner.vue b/src/components/SiteTopBanner.vue
index 962ddf761..650d32fea 100644
--- a/src/components/SiteTopBanner.vue
+++ b/src/components/SiteTopBanner.vue
@@ -30,13 +30,16 @@
 export default {
   data() {
     return {
-      messages: ['🎄聖誕限時 全店9折優惠', '於付款頁面輸入優惠碼”CHRISTMAS10”'],
+      messages: [
+        this.$t('christmas_campaign_text_1'),
+        this.$t('christmas_campaign_text_2'),
+      ],
       showBanner: true,
     };
   },
   computed: {
     repeatedMessages() {
-      return [...this.messages, ...this.messages];
+      return this.messages.concat(this.messages);
     },
   },
   created() {
diff --git a/src/locales/en.json b/src/locales/en.json
index 195856901..5c9a7aad6 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -90,6 +90,8 @@
   "cart_item_free_not_supported": "Free items cannot be added to cart",
   "cart_item_tipping": "Price includes a tip of {amount} USD",
   "cart_purchase_channel": "via {from}",
+  "christmas_campaign_text_1": "🎄Christmas Offer: 10% off storewide",
+  "christmas_campaign_text_2": "於付款頁面輸入優惠碼”CHRISTMAS10”",
   "civic_dashboard_v3_about_url": "https://docs.like.co/user-guide/civic-liker",
   "civic_dashboard_v3_banner_book_nft": "NFT BOOK",
   "civic_dashboard_v3_banner_book_nft_description": "unleashes the potential value of ebooks, elevating the essence of books, making them books, yet no longer just books",
diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
index 21f8557a4..f23b03d24 100644
--- a/src/locales/zh-Hant.json
+++ b/src/locales/zh-Hant.json
@@ -90,6 +90,8 @@
   "cart_item_free_not_supported": "購物車暫不支援免費收藏",
   "cart_item_tipping": "單價已含小額打賞 {amount} USD",
   "cart_purchase_channel": "透過 {from}",
+  "christmas_campaign_text_1": "🎄聖誕限時 全店9折優惠'",
+  "christmas_campaign_text_2": "於付款頁面輸入優惠碼”CHRISTMAS10”",
   "civic_dashboard_v3_about_url": "https://docs.like.co/v/zh/user-guide/civic-liker",
   "civic_dashboard_v3_banner_book_nft": "NFT BOOK",
   "civic_dashboard_v3_banner_book_nft_description": "Liker Land 也解放電子書的潛在價值，昇華書的本質，令書不再只是書。",

From 68bd5b01ac00eff8342ebb682024c6b2c0887da8 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Thu, 19 Dec 2024 20:42:46 +0800
Subject: [PATCH 7/9] =?UTF-8?q?=F0=9F=92=AC=20Update=20banner=20messages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SiteTopBanner.vue | 15 ++++++++++-----
 src/locales/en.json              |  5 +++--
 src/locales/zh-Hant.json         |  5 +++--
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/SiteTopBanner.vue b/src/components/SiteTopBanner.vue
index 650d32fea..c2c25197c 100644
--- a/src/components/SiteTopBanner.vue
+++ b/src/components/SiteTopBanner.vue
@@ -33,6 +33,7 @@ export default {
       messages: [
         this.$t('christmas_campaign_text_1'),
         this.$t('christmas_campaign_text_2'),
+        this.$t('christmas_campaign_text_3'),
       ],
       showBanner: true,
     };
@@ -69,17 +70,21 @@ export default {
 .scrolling-content {
   display: flex;
   flex-direction: column;
-  animation: scrollUp 10s linear infinite;
+  animation: scrollUp 12s cubic-bezier(0.7, 0, 0.25, 1) infinite;
 }
 
 @keyframes scrollUp {
   0%,
-  25% {
+  16.666% {
     transform: translateY(0%);
   }
-  50%,
-  75% {
-    transform: translateY(-25%);
+  33.333%,
+  50% {
+    transform: translateY(-16.666%);
+  }
+  66.666%,
+  83.333% {
+    transform: translateY(-33.333%);
   }
   100% {
     transform: translateY(-50%);
diff --git a/src/locales/en.json b/src/locales/en.json
index 5c9a7aad6..b875dbe20 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -90,8 +90,9 @@
   "cart_item_free_not_supported": "Free items cannot be added to cart",
   "cart_item_tipping": "Price includes a tip of {amount} USD",
   "cart_purchase_channel": "via {from}",
-  "christmas_campaign_text_1": "🎄Christmas Offer: 10% off storewide",
-  "christmas_campaign_text_2": "於付款頁面輸入優惠碼”CHRISTMAS10”",
+  "christmas_campaign_text_1": "🎄 Christmas exclusive discount until DEC 31 🎄",
+  "christmas_campaign_text_2": "⭐️ Enjoy 15% off on order over $9 USD ⭐️",
+  "christmas_campaign_text_3": "Code \"XMASREAD\" will be applied automatically",
   "civic_dashboard_v3_about_url": "https://docs.like.co/user-guide/civic-liker",
   "civic_dashboard_v3_banner_book_nft": "NFT BOOK",
   "civic_dashboard_v3_banner_book_nft_description": "unleashes the potential value of ebooks, elevating the essence of books, making them books, yet no longer just books",
diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
index f23b03d24..f74f85fb0 100644
--- a/src/locales/zh-Hant.json
+++ b/src/locales/zh-Hant.json
@@ -90,8 +90,9 @@
   "cart_item_free_not_supported": "購物車暫不支援免費收藏",
   "cart_item_tipping": "單價已含小額打賞 {amount} USD",
   "cart_purchase_channel": "透過 {from}",
-  "christmas_campaign_text_1": "🎄聖誕限時 全店9折優惠'",
-  "christmas_campaign_text_2": "於付款頁面輸入優惠碼”CHRISTMAS10”",
+  "christmas_campaign_text_1": "🎄 聖誕限時優惠至12月31號 🎄",
+  "christmas_campaign_text_2": "⭐️ 凡購買滿 $9 USD 即享全單85折 ⭐️",
+  "christmas_campaign_text_3": "優惠碼 \"XMASREAD\" 將自動套用",
   "civic_dashboard_v3_about_url": "https://docs.like.co/v/zh/user-guide/civic-liker",
   "civic_dashboard_v3_banner_book_nft": "NFT BOOK",
   "civic_dashboard_v3_banner_book_nft_description": "Liker Land 也解放電子書的潛在價值，昇華書的本質，令書不再只是書。",

From af95de222a2b28d67f2f626836ca656874e377c0 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Thu, 19 Dec 2024 21:05:31 +0800
Subject: [PATCH 8/9] =?UTF-8?q?=F0=9F=8E=A8=20Update=20coupon=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/zh-Hant.json         |  2 +-
 src/pages/shopping-cart/book.vue | 30 ++++++++++++++++++++++++++++--
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
index f74f85fb0..18acafbb0 100644
--- a/src/locales/zh-Hant.json
+++ b/src/locales/zh-Hant.json
@@ -990,7 +990,7 @@
   "shopping_cart_empty_notice": "購物車是空的",
   "shopping_cart_empty_notice_button": "瀏覽書店",
   "shopping_cart_error_insufficient_balance": "餘額不足，你只有 {balance}",
-  "shopping_cart_list_coupon_title": "優惠（如適用）",
+  "shopping_cart_list_coupon_title": "優惠(如適用)",
   "shopping_cart_list_coupon_text": "將於下一步計算",
   "shopping_cart_list_header_item": "購物明細",
   "shopping_cart_list_header_price": "單價",
diff --git a/src/pages/shopping-cart/book.vue b/src/pages/shopping-cart/book.vue
index ccdc9a325..bbc225de5 100644
--- a/src/pages/shopping-cart/book.vue
+++ b/src/pages/shopping-cart/book.vue
@@ -79,7 +79,7 @@
           {{ $t('shopping_cart_list_coupon_title') }}
         </div>
         <div
-          class="col-span-3 sm:col-span-2 text-medium-gray text-[14px] font-200"
+          class="col-span-3 sm:col-span-2 text-medium-gray text-[14px] font-400"
         >
           {{ $t('shopping_cart_list_coupon_text') }}
         </div>
@@ -154,6 +154,9 @@ 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';
+
 export default {
   name: 'ShoppingCartPage',
   filters: {
@@ -228,9 +231,32 @@ export default {
         return totalPrice + (unitPrice * item.quantity || 0);
       }, 0);
     },
+    totalItemPriceInUSD() {
+      return this.shoppingCartBookItems.reduce((totalPrice, item) => {
+        let itemPrice = 0;
+        if (item.collectionId) {
+          itemPrice = this.getNFTCollectionPriceByCollectionId(
+            item.collectionId
+          );
+        } else {
+          const edition = this.getNFTBookStorePriceByClassIdAndIndex(
+            item.productId,
+            item.classId ? item.priceIndex : undefined
+          );
+          itemPrice = edition?.price || 0;
+        }
+        return totalPrice + (itemPrice * item.quantity || 0);
+      }, 0);
+    },
     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);
@@ -361,7 +387,7 @@ export default {
             fbClickId: this.fbClickId,
             items: this.shoppingCartBookItems,
             email: this.walletEmail,
-            coupon: this.coupon || 'CHRISTMAS10',
+            coupon: this.getApplicableCoupon,
             giftInfo,
           },
           {

From 27824fe2dd2fd6bb297dc23e185cc072d20b75cc Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Fri, 20 Dec 2024 00:15:41 +0800
Subject: [PATCH 9/9] =?UTF-8?q?=F0=9F=92=84=20Rewrite=20<SiteTopBanner/>?=
 =?UTF-8?q?=20with=20<Transition/>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/_transitions.scss             |  19 +++
 src/components/SiteTopBanner.vue             | 171 +++++++++++--------
 src/components/SiteTopBannerForChristmas.vue |  15 ++
 src/layouts/default.vue                      |   2 +-
 src/layouts/index.vue                        |   2 +-
 5 files changed, 140 insertions(+), 69 deletions(-)
 create mode 100644 src/components/SiteTopBannerForChristmas.vue

diff --git a/src/assets/css/_transitions.scss b/src/assets/css/_transitions.scss
index 72a8bf06c..0bf1b6c91 100644
--- a/src/assets/css/_transitions.scss
+++ b/src/assets/css/_transitions.scss
@@ -18,3 +18,22 @@
     transition-timing-function: ease-in;
   }
 }
+
+.scroll-up- {
+  &enter {
+    transform: translateY(100%);
+  }
+  &leave-to {
+    transform: translateY(-100%);
+  }
+
+  &enter-active,
+  &leave-active {
+    transition-property: opacity, transform !important;
+    transition-duration: 2s;
+  }
+  &enter-active,
+  &leave-active {
+    transition-timing-function: cubic-bezier(0.7, 0, 0.25, 1);
+  }
+}
diff --git a/src/components/SiteTopBanner.vue b/src/components/SiteTopBanner.vue
index c2c25197c..4cd3748bf 100644
--- a/src/components/SiteTopBanner.vue
+++ b/src/components/SiteTopBanner.vue
@@ -1,93 +1,130 @@
 <template>
-  <div
-    v-if="showBanner"
-    class="z-[500] w-full h-[40px] overflow-hidden flex items-center justify-center text-white bg-like-green relative"
-  >
-    <div class="h-[24px] overflow-hidden relative">
-      <div class="scrolling-content">
-        <div
-          v-for="(message, index) in repeatedMessages"
-          :key="index"
-          class="h-[24px] text-[14px] flex items-center justify-center"
-        >
-          {{ message }}
-        </div>
-      </div>
-    </div>
+  <Transition @enter="handleBannerEnter" @leave="handleBannerLeave">
+    <div
+      v-if="isShowBanner"
+      :class="[
+        'relative',
+        'top-0',
+        'z-[500]',
+
+        'flex',
+        'items-center',
+        'justify-center',
 
-    <ButtonV2
-      preset="plain"
-      size="small"
-      class="absolute translate-y-[-50%] right-[12px] top-1/2"
-      @click="closeBanner"
+        'overflow-hidden',
+
+        'w-full',
+        'h-[40px]',
+
+        'text-white',
+        'bg-like-green',
+      ]"
     >
-      <IconClose class="transform scale-75 laptop:scale-100" />
-    </ButtonV2>
-  </div>
+      <Transition name="scroll-up">
+        <div
+          :key="activeMessage"
+          :class="[
+            'absolute',
+            'inset-0',
+
+            'flex',
+            'justify-center',
+            'items-center',
+
+            'text-[14px]',
+            'text-center',
+          ]"
+          v-text="activeMessage"
+        />
+      </Transition>
+
+      <ButtonV2
+        preset="plain"
+        size="small"
+        class="absolute translate-y-[-50%] right-[12px] top-1/2"
+        @click="closeBanner"
+      >
+        <IconClose class="transform scale-75 laptop:scale-100" />
+      </ButtonV2>
+    </div>
+  </Transition>
 </template>
 
 <script>
+const LAST_CLOSED_AT_KEY = 'site-top-banner-last-closed-at';
+
 export default {
+  name: 'SiteTopBanner',
+  props: {
+    messages: {
+      type: Array,
+      default: () => [],
+    },
+    interval: {
+      type: Number,
+      default: 4000,
+    },
+  },
   data() {
     return {
-      messages: [
-        this.$t('christmas_campaign_text_1'),
-        this.$t('christmas_campaign_text_2'),
-        this.$t('christmas_campaign_text_3'),
-      ],
-      showBanner: true,
+      isShowBanner: false,
+      activeMessageIndex: 0,
     };
   },
   computed: {
-    repeatedMessages() {
-      return this.messages.concat(this.messages);
+    activeMessage() {
+      return this.messages[this.activeMessageIndex];
     },
   },
-  created() {
-    this.checkBannerStatus();
+  mounted() {
+    this.showBannerIfPossible();
+  },
+  beforeDestroy() {
+    this.clearInterval();
   },
   methods: {
+    handleBannerEnter(el, done) {
+      this.$gsap.gsap.from(el, {
+        height: 0,
+        duration: 0.5,
+        onComplete: done,
+      });
+    },
+    handleBannerLeave(el, done) {
+      this.$gsap.gsap.to(el, {
+        height: 0,
+        duration: 0.5,
+        onComplete: done,
+      });
+    },
+    nextMessage() {
+      this.activeMessageIndex =
+        (this.activeMessageIndex + 1) % this.messages.length;
+    },
+    clearInterval() {
+      if (this.messageInterval) {
+        clearInterval(this.messageInterval);
+        this.messageInterval = null;
+      }
+    },
     closeBanner() {
-      this.showBanner = false;
+      this.isShowBanner = false;
       try {
-        window.localStorage.setItem('bannerClosedTime', Date.now());
-      } catch (error) {}
+        window.localStorage.setItem(LAST_CLOSED_AT_KEY, Date.now());
+      } finally {
+        this.clearInterval();
+      }
     },
-    checkBannerStatus() {
+    showBannerIfPossible() {
       try {
-        const lastClosedTime = window.localStorage.getItem('bannerClosedTime');
+        const lastClosedTime = window.localStorage.getItem(LAST_CLOSED_AT_KEY);
         const oneDay = 24 * 60 * 60 * 1000;
-        if (lastClosedTime && Date.now() - lastClosedTime < oneDay) {
-          this.showBanner = false;
+        if (!lastClosedTime || Date.now() - lastClosedTime >= oneDay) {
+          this.isShowBanner = true;
+          this.messageInterval = setInterval(this.nextMessage, this.interval);
         }
-      } catch (error) {}
+      } catch {}
     },
   },
 };
 </script>
-
-<style scoped>
-.scrolling-content {
-  display: flex;
-  flex-direction: column;
-  animation: scrollUp 12s cubic-bezier(0.7, 0, 0.25, 1) infinite;
-}
-
-@keyframes scrollUp {
-  0%,
-  16.666% {
-    transform: translateY(0%);
-  }
-  33.333%,
-  50% {
-    transform: translateY(-16.666%);
-  }
-  66.666%,
-  83.333% {
-    transform: translateY(-33.333%);
-  }
-  100% {
-    transform: translateY(-50%);
-  }
-}
-</style>
diff --git a/src/components/SiteTopBannerForChristmas.vue b/src/components/SiteTopBannerForChristmas.vue
new file mode 100644
index 000000000..7a3f24e94
--- /dev/null
+++ b/src/components/SiteTopBannerForChristmas.vue
@@ -0,0 +1,15 @@
+<template>
+  <SiteTopBanner
+    :messages="[
+      $t('christmas_campaign_text_1'),
+      $t('christmas_campaign_text_2'),
+      $t('christmas_campaign_text_3'),
+    ]"
+  />
+</template>
+
+<script>
+export default {
+  name: 'SiteTopBannerForChristmas',
+};
+</script>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 46271d6fe..d35d3fbdf 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col items-stretch min-h-screen">
-    <SiteTopBanner />
+    <SiteTopBannerForChristmas />
     <!-- <AlertBanner
       v-if="getRouteBaseName($route) !== 'nft-class-classId' && $route.params.classId !== alertBannerNFTClassId"
       :primary-button-text="$t('alert_banner_actions_purchase')"
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 391e636d3..03f690ae3 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -3,7 +3,7 @@
     <AlertBanner v-if="uiIsChainUpgrading">{{
       $t('notice_chain_upgrading')
     }}</AlertBanner>
-    <SiteTopBanner />
+    <SiteTopBannerForChristmas />
 
     <nuxt
       :class="[