🔀 Merge #1990 into deploy/rinkeby

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>

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')"

src/layouts/index.vue

@@ -3,6 +3,7 @@
     <AlertBanner v-if="uiIsChainUpgrading">{{
       $t('notice_chain_upgrading')
     }}</AlertBanner>
+    <ChristmasCampaignBanner />
 
     <nuxt
       :class="[

src/locales/en.json

@@ -985,11 +985,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",

src/locales/zh-Hant.json

@@ -985,11 +985,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": "數量",

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>