Merge pull request #366 from vuejs-jp/enhance/prepare-for-close-purchase-store

[10/8 Vue Fes Store 事前注文終了] endedPurchaseStore

Author: jiyuujin

apps/web/app/components/StorePageSection.vue

@@ -2,7 +2,7 @@
 import { useTranslation } from '~/composables/useTranslation'
 import type { Product } from '@vuejs-jp/model'
 import MarkDownText from '~/components/MarkDownText.vue'
-import { storeUrl } from '~/utils/constants'
+import { endedPurchaseStore, storeUrl } from '~/utils/constants'
 
 const { translate: t } = useTranslation()
 
@@ -117,6 +117,7 @@ const products: Product[] = [
             rel="noreferrer"
             background-color="vue-green/200"
             color="white"
+            :disabled="endedPurchaseStore"
           >
             {{ $t('store.preorder') }}
           </VFLinkButton>
@@ -125,7 +126,7 @@ const products: Product[] = [
         <div class="store-menu">
           <div class="store-menu-list">
             <div v-for="product in products" :key="product.name" class="store-card">
-              <VFProduct v-bind="product">
+              <VFProduct v-bind="{ ...product, disabled: endedPurchaseStore }">
                 <template #explain>
                   <i18n-t :keypath="product.explain" tag="p" style="margin: 0;">
                     <template #kawaiiStickerCreator>
@@ -150,6 +151,7 @@ const products: Product[] = [
                 rel="noreferrer"
                 background-color="vue-green/200"
                 color="white"
+                :disabled="endedPurchaseStore"
               >
                 {{ $t('store.preorder') }}
               </VFLinkButton>
@@ -168,6 +170,7 @@ const products: Product[] = [
                 rel="noreferrer"
                 background-color="vue-green/200"
                 color="white"
+                :disabled="endedPurchaseStore"
               >
                 {{ $t('store.preorder') }}
               </VFLinkButton>

apps/web/app/content/en/store.md

@@ -1,2 +1,2 @@
-The Vue Fes Store, where you can purchase exclusive original goods from Vue Fes Japan, is back this year. Let's gear up with these original items and make Vue Fes Japan even more exciting!
-Since on-the-day sales are limited in quantity, we recommend placing a pre-order to ensure you get your items. By pre-ordering through STORES, you can pick up your goods at the Vue Fes Japan 2024 venue.
+The Vue Fes Store is back this year, where you can purchase exclusive original goods from Vue Fes Japan. Let’s gear up with original merchandise to make Vue Fes Japan even more exciting!
+Please note that pre-orders have ended as of October 8. If you wish to purchase goods, please take advantage of the sales on the day of the event.

apps/web/app/content/ja/store.md

@@ -1,2 +1 @@
-Vue Fes Japan 限定オリジナルグッズをお買い求めいただける Vue Fes Store が今年も登場。オリジナルグッズを揃えて、Vue Fes Japan を盛り上げましょう！
-当日販売は数量限定のため、確実にご購入いただくには予約注文がオススメです。STORES で予約注文いただくと、当日 Vue Fes Japan 2024 の会場にてお受け取りいただけます。
+Vue Fes Japan 限定オリジナルグッズをお買い求めいただける Vue Fes Store が今年も登場。オリジナルグッズを揃えて、Vue Fes Japan を盛り上げましょう！　　なお、10/8 をもって予約注文は終了しました。グッズ購入希望の方は、当日販売をご利用ください。

apps/web/app/utils/constants.ts

@@ -51,6 +51,8 @@ export const endedApplyEarly = true
 
 export const endedApplyHandson = true
 
+export const endedPurchaseStore = true
+
 export const endedCreateNamecard = true
 
 export const displayNameMaxLength = 24

packages/model/lib/store.ts

@@ -9,4 +9,5 @@ export interface Product {
   weight?: string
   src: string
   alt: string
+  disabled?: boolean
 }

packages/ui/components/store/Product.vue

@@ -8,9 +8,14 @@ const props = defineProps<StoreItemProps>()
 
 <template>
   <div class="store-item">
-    <a :href="url" target="_blank">
+    <template v-if="!disabled">
+      <a :href="url" target="_blank" :aria-label="name">
+        <NuxtImg :alt :src width="616" height="616" fit="cover" loading="lazy" class="image" />
+      </a>
+    </template>
+    <template v-else>
       <NuxtImg :alt :src width="616" height="616" fit="cover" loading="lazy" class="image" />
-    </a>
+    </template>
     <div class="name">{{ name }}</div>
     <div class="price">{{ price }}</div>
     <div class="explain">