Merge pull request #344 from vuejs-jp/enhance/ended-apply-early

アーリー〆切、ハンズオン売切対応

Author: jiyuujin

apps/web/app/components/ticket/TicketSection.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from '#imports'
-import { ticketUrl } from '~/utils/constants'
+import { endedApplyEarly, endedApplyHandson, ticketUrl } from '~/utils/constants'
 
 const { t } = useI18n()
 
@@ -60,7 +60,7 @@ const ticketCards = {
           :img-alt="ticketCards.ippan.imgAlt"
         >
           <div class="ticket-details ippan-details">
-            <div class="early-purchase">
+            <div v-if="!endedApplyEarly" class="early-purchase">
               <span class="cost">
                 {{ $t('ticket.card.ippan.early') }}
               </span>
@@ -81,7 +81,7 @@ const ticketCards = {
           :img-alt="ticketCards.ippanParty.imgAlt"
         >
           <div class="ticket-details ippan-party-details">
-            <div class="early-purchase">
+            <div v-if="!endedApplyEarly" class="early-purchase">
               <span class="cost">
                 {{ $t('ticket.card.ippanParty.early') }}
               </span>
@@ -100,15 +100,20 @@ const ticketCards = {
           :title="ticketCards.handsOn.title"
           :img-src="ticketCards.handsOn.imgSrc"
           :img-alt="ticketCards.handsOn.imgAlt"
+          :is-close="endedApplyHandson"
         >
           <div class="ticket-details hands-on-details">
             <div class="cost">
-              {{ $t('ticket.card.handsOn.cost') }}
+              <template v-if="!endedApplyHandson">{{ $t('ticket.card.handsOn.cost') }}</template>
+              <s v-else>{{ $t('ticket.card.handsOn.cost') }}</s>
             </div>
             <div class="cost-details">
-              <span>
+              <span v-if="!endedApplyHandson">
                 {{ $t('ticket.card.handsOn.details1') }}
               </span>
+              <span v-else>
+                {{ $t('ticket.sold_out_explain') }}
+              </span>
               <span>
                 {{ $t('ticket.card.handsOn.details2') }}
               </span>

apps/web/app/lang/en.json

@@ -151,7 +151,9 @@
         "details2": "*For more details, please refer to the Individual Sponsor section.",
         "imgAlt": "Event-branded t-shirts"
       }
-    }
+    },
+    "sold_out_explain": "※Due to high demand, all seats are sold out.",
+    "ended_explain": "※Sales have ended."
   },
   "access": {
     "title": "Access",

apps/web/app/lang/ja.json

@@ -169,7 +169,9 @@
         "details2": "※詳しくは個人スポンサーについてをご覧ください。",
         "imgAlt": "イベントTシャツ"
       }
-    }
+    },
+    "sold_out_explain": "※好評により全席完売しました。",
+    "ended_explain": "※販売を終了しました。"
   },
   "access": {
     "title": "アクセス",

apps/web/app/utils/constants.ts

@@ -43,6 +43,10 @@ export const storeUrl = 'https://vuejs-jp.stores.jp'
 
 export const peatixReferenceUrl = 'https://help-attendee.peatix.com/ja-JP/support/solutions/articles/44001821741'
 
+export const endedApplyEarly = true
+
+export const endedApplyHandson = true
+
 export const displayNameMaxLength = 24
 
 export const personalSponsors = [

packages/ui/components/ticket/TicketCard.vue

@@ -3,14 +3,20 @@ interface TicketCardProps {
   title: string
   imgSrc: string
   imgAlt: string
+  isClose?: boolean
 }
-const props = defineProps<TicketCardProps>()
+const props = withDefaults(defineProps<TicketCardProps>(), {
+  isClose: false,
+})
 </script>
 
 <template>
   <div class="ticket-card">
     <img class="ticket-img" :src="props.imgSrc" :alt="props.imgAlt" />
-    <div class="ticket-title">{{ props.title }}</div>
+    <div class="ticket-title">
+      <template v-if="!isClose">{{ props.title }}</template>
+      <template v-else><s>{{ props.title }}</s></template>
+    </div>
     <div class="ticket-content">
       <slot />
     </div>