enhance(namecard): UI implementation for the edit page

Author: genj11

apps/web/app/components/namecard/ImageUploader.vue

@@ -116,7 +116,7 @@ onMounted(() => {
         @change="onFileInputChange"
       />
     </button>
-    <span
+    <p
       class="annotation"
       :style="{
         fontSize: fontSize('body/300'),
@@ -125,7 +125,7 @@ onMounted(() => {
       }"
     >
       {{ t('namecard.form.annotation_avatar') }}
-    </span>
+    </p>
     <!--   TODO エラー制御
     <Typography v-if="errorMessage" variant="body/200" color="sangosyo/200">{{
       errorMessage

apps/web/app/composables/useLocale.ts

@@ -35,6 +35,7 @@ export function useLocale(path: Path) {
       .with('namecard_process_3', () => `/${locale.value}/namecard_process_3`)
       .with('namecard_process_4', () => `/${locale.value}/namecard_process_4`)
       .with('namecard_process_alert', () => `/${locale.value}/namecard_process_alert`)
+      .with('namecard_annotation_order_number', () => `/${locale.value}/namecard_annotation_order_number`)
       .exhaustive(),
   )
 

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

@@ -0,0 +1 @@
+\* The order number can be found in the [receipt data](https://help-attendee.peatix.com/ja-JP/support/solutions/articles/44001821741) included in the email sent by Peatix when you purchase a ticket.

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

@@ -0,0 +1 @@
+※注文番号は、チケット購入時にPeatixから送信されるメール内に含まれる[領収データ](https://help-attendee.peatix.com/ja-JP/support/solutions/articles/44001821741)から確認できます。

apps/web/app/lang/en.json

@@ -149,7 +149,6 @@
       "label_order_number": "Order Number",
       "annotation_name": "Up to 12 full-width characters (24 half-width characters)",
       "annotation_avatar": "*  Upload a square image (aspect ratio 1:1) for your avatar.",
-      "annotation_order_number": "* The order number can be found in the receipt data included in the email sent by Peatix when you purchase a ticket.",
       "placeholder_order_number": "Please enter the order number",
       "submit": "Submit",
       "registrationCompleted": "The name card information has been successfully registered!",

apps/web/app/lang/ja.json

@@ -167,7 +167,6 @@
       "label_order_number": "注文番号",
       "annotation_name": "※全角12文字（半角24文字）まで",
       "annotation_avatar": "※アバターは正方形（比率1:1）の画像をアップロードしてください。",
-      "annotation_order_number": "※注文番号は、チケット購入時にPeatixから送信されるメール内に含まれる領収データから確認できます。",
       "placeholder_order_number": "注文番号を入力してください",
       "submit": "確定する",
       "registrationCompleted": "ネームカードの情報登録が完了しました！",

apps/web/app/pages/namecard/[id]/edit/index.vue

@@ -79,13 +79,15 @@ function onSubmit(e: Event) {
     navigateTo(`/namecard/${authUserId.value}/edit/complete/`)
   }
 }
+
+// TODO バリデート、エラー制御を追加する
 </script>
 <template>
   <NuxtLayout name="namecard-base">
     <div class="namecard-edit-root">
       <div class="preview-wrapper">
         <VFNamecard23 :user="namecard" class="namecard" />
-        <CreationStatus :status-key="statusKey" class="creation-status" />
+        <CreationStatus :status-key="statusKey" size="small" class="creation-status" />
       </div>
       <div class="form-wrapper">
         <form @submit.prevent="onSubmit">
@@ -97,17 +99,16 @@ function onSubmit(e: Event) {
             :label="t('namecard.form.label_name')"
             :placeholder="`${t('form.form_placeholder_example')}${t('form.form_name_placeholder')}`"
             required
-            :annotation="t('namecard.form.annotation_name')"
             :error="nameError"
             @input="updateName"
             @blur="validateName"
-          />
+            ><p class="annotation">{{ t('namecard.form.annotation_name') }}</p></VFInputField
+          >
           <ImageUploader
             class="image-uploader"
             file-accept="image/*"
             @check-files.prevent="checkFiles"
           />
-          <!-- TODO 領収書データ を外部リンク化する Nuxt Content使う -->
           <VFInputField
             id="orderNumber"
             v-model="receiptId"
@@ -116,13 +117,13 @@ function onSubmit(e: Event) {
             :label="t('namecard.form.label_order_number')"
             :placeholder="t('namecard.form.placeholder_order_number')"
             required
-            :annotation="t('namecard.form.annotation_order_number')"
             :error="orderNumberError"
             @input="updateReceiptId"
             @blur="validateOrderNumbere"
-          />
+            ><div class="annotation"><MarkDownText path="namecard_annotation_order_number" /></div
+          ></VFInputField>
           <div class="form-buttons">
-            <!-- TODO ボタン キャンセルボタン disable の制御 スタイルを追加する disable の制御も -->
+            <!-- TODO ボタン キャンセルボタン スタイルを追加する -->
             <VFSubmitButton id="submit-button" :disabled="!isSubmitting">
               {{ $t('namecard.form.submit') }}
             </VFSubmitButton>
@@ -142,6 +143,9 @@ function onSubmit(e: Event) {
   margin: 0 auto;
   gap: 0 calc(var(--unit) * 8);
 }
+.namecard {
+  margin-bottom: calc(var(--unit) * 2);
+}
 .form-wrapper {
   text-align: left;
 }
@@ -159,7 +163,8 @@ function onSubmit(e: Event) {
   font-weight: 700;
   color: var(--color-vue-green200);
 }
-:deep(.annotation) {
+.annotation,
+.annotation:deep(p) {
   font-weight: 500;
   color: var(--color-vue-blue);
 }

packages/model/lib/path.ts

@@ -26,3 +26,4 @@ export type Path =
   | 'namecard_process_3'
   | 'namecard_process_4'
   | 'namecard_process_alert'
+  | 'namecard_annotation_order_number'

packages/ui/components/forms/InputField.stories.ts

@@ -42,7 +42,6 @@ export const Error: Story = {
     label: 'お名前',
     placeholder: '山田太郎',
     errorMessage: 'エラーメッセージが表示されます',
-    annotation:'※全角12文字（半角24文字）まで'
   },
 }
 

packages/ui/components/forms/InputField.vue

@@ -15,7 +15,6 @@ interface Props extends /* @vue-ignore */ _InputFieldProps {
   label: string
   /* Error Message */
   errorMessage?: string
-  annotation?: string
 }
 type Emits = {
   blur: [value: string]
@@ -30,7 +29,6 @@ withDefaults(defineProps<Props>(), {
   disabled: false,
   label: '',
   errorMessage: '',
-  annotation: '',
 })
 
 const emit = defineEmits<Emits>()
@@ -71,7 +69,7 @@ const { fontWeight, fontSize } = useTypography()
       :disabled="disabled"
       @blur="handleBlur"
     />
-    <span v-if="annotation" class="annotation">{{ annotation }}</span>
+    <slot />
     <Typography v-if="errorMessage" variant="body/200" color="sangosyo/200">{{
       errorMessage
     }}</Typography>