feat: sold out after party (#969)

Author: ubugeeei

app/pages/ticket/index.vue

@@ -30,6 +30,9 @@ const { signIn, status, data } = useAuth();
 const { t, locale } = useI18n();
 const localeRoute = useLocaleRoute();
 
+const isSoldOutAfterParty = __FEATURE_SOLD_OUT_AFTER_PARTY__;
+const isSoldOutEarlyBirdAfterParty = __FEATURE_SOLD_OUT_EARLY_BIRD_AFTER_PARTY__;
+
 const isLoading = ref(false);
 
 async function handleClockGoogleSignIn() {
@@ -109,17 +112,19 @@ useSeoMeta({
                 <span class="ticket-badge-price">
                   <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
                   <span class="ticket-badge-price-type">{{ t('ticket.early') }}</span>
-                  <span class="ticket-badge-price-value">
+                  <span class="ticket-badge-price-value" :class="{ 'sold-out': isSoldOutEarlyBirdAfterParty }">
                     <span class="ticket-badge-price-unit" :class="locale">{{ t("ticket.priceUnit") }}</span>{{ (Number(t('ticket.afterPartyTicket.earlyPrice'))).toLocaleString() }}
                   </span>
+                  <span v-if="isSoldOutEarlyBirdAfterParty" class="sold-out-label">{{ t('ticket.soldOut') }}</span>
                 </span>
 
                 <span class="ticket-badge-price">
                   <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
                   <span class="ticket-badge-price-type">{{ t('ticket.standard') }}</span>
-                  <span class="ticket-badge-price-value">
+                  <span class="ticket-badge-price-value" :class="{ 'sold-out': isSoldOutAfterParty }">
                     <span class="ticket-badge-price-unit" :class="locale">{{ t("ticket.priceUnit") }}</span>{{ (Number(t('ticket.afterPartyTicket.standardPrice'))).toLocaleString() }}
                   </span>
+                  <span v-if="isSoldOutAfterParty" class="sold-out-label">{{ t('ticket.soldOut') }}</span>
                 </span>
               </div>
             </div>
@@ -369,6 +374,10 @@ useSeoMeta({
             font-weight: 700;
             line-height: 1;
 
+            &.sold-out {
+              text-decoration: line-through;
+            }
+
             .ticket-badge-price-unit {
               font-size: 1.75rem;
 
@@ -378,6 +387,15 @@ useSeoMeta({
               }
             }
           }
+
+          .sold-out-label {
+            color: var(--color-sub);
+            background-color: var(--color-base);
+            font-size: 11px;
+            padding: 0 0.375rem;
+            border-radius: 4px;
+            margin-left: -8px;
+          }
         }
       }
     }

features.d.ts

@@ -1,2 +1,8 @@
 /** defined by ViteConfig.define on nuxt.config.ts */
 const __FEATURE_TIMETABLE__: boolean;
+
+/** defined by ViteConfig.define on nuxt.config.ts */
+const __FEATURE_SOLD_OUT_AFTER_PARTY__: boolean;
+
+/** defined by ViteConfig.define on nuxt.config.ts */
+const __FEATURE_SOLD_OUT_EARLY_BIRD_AFTER_PARTY__: boolean;

i18n/en/index.yaml

@@ -56,6 +56,7 @@ ticket:
     attention1: "※ A general ticket is also required to participate in Vue Fes Japan."
     attention2: "※ Please see the {about} for details."
     about: "Individual Sponsor section"
+  soldOut: "SOLD OUT"
   buy: "Buy Tickets"
 
 nameBadge:

i18n/ja/index.yaml

@@ -56,6 +56,7 @@ ticket:
     attention1: "※ Vue Fes Japan へのご参加には、一般チケットも必要となります。"
     attention2: "※ 詳しくは{about}をご覧ください。"
     about: "個人スポンサーについて"
+  soldOut: "SOLD OUT"
   buy: "チケットを購入する"
 
 nameBadge:

nuxt.config.ts

@@ -108,6 +108,8 @@ export default defineNuxtConfig({
   vite: {
     define: {
       __FEATURE_TIMETABLE__: process.env.FEATURE_TIMETABLE || false, // ?
+      __FEATURE_SOLD_OUT_AFTER_PARTY__: !["0", undefined].includes(process.env.FEATURE_SOLD_OUT_AFTER_PARTY),
+      __FEATURE_SOLD_OUT_EARLY_BIRD_AFTER_PARTY__: !["0", undefined].includes(process.env.FEATURE_SOLD_OUT_EARLY_BIRD_AFTER_PARTY),
     },
     css: {
       transformer: "lightningcss",

package.json

@@ -31,8 +31,8 @@
     ]
   },
   "scripts": {
-    "build": "cross-env NODE_OPTIONS='--max-old-space-size=4096' nuxt build",
-    "dev": "cross-env FEATURE_TIMETABLE=0 nuxt dev",
+    "build": "cross-env NODE_OPTIONS='--max-old-space-size=4096' FEATURE_SOLD_OUT_AFTER_PARTY=1 FEATURE_SOLD_OUT_EARLY_BIRD_AFTER_PARTY=1 nuxt build",
+    "dev": "cross-env FEATURE_TIMETABLE=0 FEATURE_SOLD_OUT_AFTER_PARTY=1 FEATURE_SOLD_OUT_EARLY_BIRD_AFTER_PARTY=1 nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "check": "nuxi typecheck",