fix: payment method name (#143)

* fix: payment method name

* chore: changeset

* chore: add more translated properties

.changeset/happy-owls-deliver.md

@@ -0,0 +1,5 @@
+---
+"vue-demo-store": patch
+---
+
+payment method name displayed properly in checkout

templates/vue-demo-store/pages/account/payment.vue

@@ -101,7 +101,7 @@ onMounted(async () => {
               :for="paymentMethod.id"
               class="ml-3 block text-sm font-medium text-gray-700"
             >
-              {{ paymentMethod.name }}
+              {{ paymentMethod.translated?.name }}
             </label>
           </div>
           <button

templates/vue-demo-store/pages/checkout/index.vue

@@ -609,7 +609,7 @@ async function invokeLogout() {
                 :class="{ 'animate-pulse': isLoading[singleShippingMethod.id] }"
                 class="ml-2 block text-sm font-medium text-gray-700"
               >
-                {{ singleShippingMethod.name }}
+                {{ singleShippingMethod.translated?.name }}
               </label>
             </div>
           </fieldset>
@@ -651,7 +651,7 @@ async function invokeLogout() {
                 :class="{ 'animate-pulse': isLoading[singlePaymentMethod.id] }"
                 class="ml-2 block text-sm font-medium text-gray-700"
               >
-                {{ singlePaymentMethod.name }}
+                {{ singlePaymentMethod.translated?.name }}
               </label>
             </div>
           </fieldset>

templates/vue-demo-store/pages/checkout/success/[id]/index.vue

@@ -182,13 +182,13 @@ const formatDate = (date: Date) =>
               <div class="w-auto md:w-1/2">
                 <div class="font-medium">Payment method</div>
                 <div class="pt-2 text-gray-600">
-                  <div>{{ paymentMethod?.name }}</div>
+                  <div>{{ paymentMethod?.translated?.name }}</div>
                 </div>
               </div>
               <div v-if="shippingMethod" class="w-auto md:w-1/2">
                 <div class="font-medium">Shipping method</div>
                 <div class="pt-2 text-gray-600">
-                  <div>{{ shippingMethod?.name }}</div>
+                  <div>{{ shippingMethod?.translated?.name }}</div>
                   <div v-if="shippingMethod?.deliveryTime">
                     Takes up to {{ shippingMethod.deliveryTime?.name }}
                   </div>

templates/vue-vite-blank/src/components/Frontends.vue

@@ -22,7 +22,8 @@ const { isLoggedIn } = useUser();
       Currency: <strong>{{ currency?.name }} ({{ currency?.symbol }})</strong>
     </p>
     <p>
-      Default payment method: <strong>{{ selectedPaymentMethod?.name }}</strong>
+      Default payment method:
+      <strong>{{ selectedPaymentMethod?.translated?.name }}</strong>
     </p>
     <p>
       Is customer logged in: <strong>{{ isLoggedIn }}</strong>