ts-glitter 21.1.7 → 21.1.9

package/lowcode/public-components/checkout/index.js

@@ -93,7 +93,7 @@ export class CheckoutIndex {
           role="status"
         ></div>
         <span class="mt-3 ${textAttr.visible ? '' : 'd-none'}" style="font-size: ${textAttr.fontSize}px;"
-        >${textAttr.value}</span
+          >${textAttr.value}</span
         >
       </div>`;
         }
@@ -439,28 +439,28 @@ export class CheckoutIndex {
                                                                 })(),
                                                                 item.usePass
                                                                     ? html ` <button
-                                                class="${gClass('button-bgr')} my-2"
-                                                style="max-width: 150px;"
-                                                onclick="${gvc.event(() => {
+                                                  class="${gClass('button-bgr')} my-2"
+                                                  style="max-width: 150px;"
+                                                  onclick="${gvc.event(() => {
                                                                         apiCart.setCart(cartItem => {
                                                                             cartItem.code = item.code;
                                                                             refreshCartData();
                                                                             gvc.closeDialog();
                                                                         });
                                                                     })}"
-                                              >
+                                                >
                                                   <span class="${gClass('button-text')}"
-                                                  >${Language.text('select_to_use')}</span
+                                                    >${Language.text('select_to_use')}</span
                                                   >
-                                              </button>`
+                                                </button>`
                                                                     : html ` <button
-                                                class="${gClass('button-bgr-disable')} my-2"
-                                                style="max-width: 150px; cursor: not-allowed"
-                                              >
+                                                  class="${gClass('button-bgr-disable')} my-2"
+                                                  style="max-width: 150px; cursor: not-allowed"
+                                                >
                                                   <span class="${gClass('button-text')}"
-                                                  >${Language.text('not_meet_usage_criteria')}</span
+                                                    >${Language.text('not_meet_usage_criteria')}</span
                                                   >
-                                              </button>`,
+                                                </button>`,
                                                             ];
                                                         }
                                                         const dialog = new ShareDialog(gvc.glitter);
@@ -495,7 +495,7 @@ export class CheckoutIndex {
                                             <div>
                                               <div class="d-flex align-items-center mb-2">
                                                 <label class="${gClass('label')} mb-0 me-2" style="min-width: 80px;"
-                                                >${Language.text('enter_code')}</label
+                                                  >${Language.text('enter_code')}</label
                                                 >
                                                 <input
                                                   class="${gClass('input')}"
@@ -506,37 +506,48 @@ export class CheckoutIndex {
                                                 />
                                               </div>
                                             </div>
-                                            <div class="w-100 d-sm-flex py-4 um-th-bar">
-                                              ${header
-                                                                .map((item, index) => {
-                                                                return html ` <div class="um-th" style="flex: ${flexList[index]};">
-                                                    ${item.title}
-                                                  </div>`;
-                                                            })
-                                                                .join('')}
-                                            </div>
-                                            ${vmi.dataList
-                                                                .map((item, t1) => {
-                                                                const fText = formatText(item.content);
-                                                                return html ` <div class="w-100 d-sm-flex py-1 align-items-center">
-                                                  ${fText
-                                                                    .map((dd, t2) => {
+                                            ${vmi.dataList.length > 0
+                                                                ? html `<div class="w-100 d-sm-flex py-4 um-th-bar">
+                                                    ${header
+                                                                    .map((item, index) => {
                                                                     return html ` <div
-                                                        class="um-td ${t2 === fText.length - 1 ? 'text-center' : ''}"
-                                                        style="flex: ${flexList[t2]}"
-                                                      >
-                                                        ${dd}
-                                                      </div>`;
+                                                          class="um-th"
+                                                          style="flex: ${flexList[index]};"
+                                                        >
+                                                          ${item.title}
+                                                        </div>`;
                                                                 })
                                                                     .join('')}
-                                                </div>`;
-                                                            })
-                                                                .join('')}
+                                                  </div>
+                                                  ${vmi.dataList
+                                                                    .map(item => {
+                                                                    const fText = formatText(item.content);
+                                                                    return html ` <div class="w-100 d-sm-flex py-1 align-items-center">
+                                                        ${fText
+                                                                        .map((dd, t2) => {
+                                                                        return html ` <div
+                                                              class="um-td ${t2 === fText.length - 1
+                                                                            ? 'text-center'
+                                                                            : ''}"
+                                                              style="flex: ${flexList[t2]}"
+                                                            >
+                                                              ${dd}
+                                                            </div>`;
+                                                                    })
+                                                                        .join('')}
+                                                      </div>`;
+                                                                })
+                                                                    .join('')}`
+                                                                : html `<div
+                                                  class="d-flex justify-content-center align-items-center"
+                                                  style="height: 250px;"
+                                                >
+                                                  尚無可使用的優惠券
+                                                </div>`}
                                           `;
                                                         }
-                                                        return html ` <div>
-                                          <div class="d-flex flex-column flex-sm-row align-items-center ">
-                                            <div class="d-flex align-items-center">
+                                                        return html `<div class="d-flex flex-column flex-sm-row align-items-center">
+                                            <div class="d-flex align-items-center w-100">
                                               <input
                                                 class="${gClass('input')}"
                                                 type="text"
@@ -551,30 +562,36 @@ export class CheckoutIndex {
                                                         })}"
                                               >
                                                 <span class="${gClass('button-text')}"
-                                                >${Language.text('confirm')}</span
+                                                  >${Language.text('confirm')}</span
                                                 >
                                               </button>
                                             </div>
                                           </div>
                                           <div class="w-100 d-sm-none mb-3 s162413">
-                                            ${vmi.dataList
-                                                            .map(item => {
-                                                            return html ` <div class="um-mobile-area">
-                                                  ${formatText(item.content)
-                                                                .map((dd, index) => {
-                                                                if (header[index].title === '') {
-                                                                    return dd;
-                                                                }
-                                                                return html ` <div class="um-mobile-text">
-                                                        ${header[index].title} : ${dd}
-                                                      </div>`;
+                                            ${vmi.dataList.length > 0
+                                                            ? vmi.dataList
+                                                                .map(item => {
+                                                                return html ` <div class="um-mobile-area">
+                                                      ${formatText(item.content)
+                                                                    .map((dd, index) => {
+                                                                    if (header[index].title === '') {
+                                                                        return dd;
+                                                                    }
+                                                                    return html ` <div class="um-mobile-text">
+                                                            ${header[index].title} : ${dd}
+                                                          </div>`;
+                                                                })
+                                                                    .join('')}
+                                                    </div>`;
                                                             })
-                                                                .join('')}
-                                                </div>`;
-                                                        })
-                                                            .join('')}
-                                          </div>
-                                        </div>`;
+                                                                .join('')
+                                                            : html `<div
+                                                  class="d-flex justify-content-center align-items-center"
+                                                  style="height: 200px;"
+                                                >
+                                                  尚無可使用的優惠券
+                                                </div>`}
+                                          </div>`;
                                                     }
                                                 }
                                                 catch (e) {
@@ -583,15 +600,6 @@ export class CheckoutIndex {
                                             },
                                             onCreate: () => {
                                                 if (loading) {
-                                                    function isNowBetweenDates(startIso, endIso) {
-                                                        const now = new Date();
-                                                        const startDate = new Date(startIso);
-                                                        const endDate = new Date(endIso);
-                                                        if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
-                                                            return true;
-                                                        }
-                                                        return now >= startDate && now <= endDate;
-                                                    }
                                                     gvc.addMtScript([
                                                         {
                                                             src: `${gvc.glitter.root_path}/jslib/lottie-player.js`,
@@ -604,8 +612,9 @@ export class CheckoutIndex {
                                                         }).then((res) => __awaiter(this, void 0, void 0, function* () {
                                                             if (res.result && res.response.data) {
                                                                 vmi.dataList = res.response.data.filter((item) => {
-                                                                    return (item.content.trigger === 'code' &&
-                                                                        isNowBetweenDates(item.content.start_ISO_Date, item.content.end_ISO_Date));
+                                                                    return (item.content.status === 1 &&
+                                                                        item.content.trigger === 'code' &&
+                                                                        Tool.isNowBetweenDates(item.content.start_ISO_Date, item.content.end_ISO_Date));
                                                                 });
                                                             }
                                                             else {
@@ -654,16 +663,16 @@ export class CheckoutIndex {
                     >
                       ${vm.cartData.code
                             ? html `${vm.cartData.code}<i
-                          class="fa-solid fa-xmark-large ms-2"
-                          style="cursor: pointer;"
-                          onclick="${gvc.event((e, event) => {
+                              class="fa-solid fa-xmark-large ms-2"
+                              style="cursor: pointer;"
+                              onclick="${gvc.event((e, event) => {
                                 event.stopPropagation();
                                 apiCart.setCart(cartItem => {
                                     cartItem.code = '';
                                     refreshCartData();
                                 });
                             })}"
-                        ></i>`
+                            ></i>`
                             : Language.text('add')}
                     </div>
                   </div>
@@ -676,30 +685,30 @@ export class CheckoutIndex {
                                     let tempRebate = 0;
                                     const dialog = new ShareDialog(gvc.glitter);
                                     return html ` <div class="${gClass(['price-row', 'text-2'])}">
-                          <div>${vm.rebateConfig.title}${Language.text('discount')}</div>
-                          <div>- ${Currency.convertCurrencyText(vm.cartData.use_rebate)}</div>
-                        </div>
-                        <div class="${gClass(['price-row', 'text-2'])}">
-                          <div>${vm.rebateConfig.title}${Language.text('reback_text')}</div>
-                          <div>+ ${vm.cartData.rebate.toLocaleString()}</div>
-                        </div>
+                              <div>${vm.rebateConfig.title}${Language.text('discount')}</div>
+                              <div>- ${Currency.convertCurrencyText(vm.cartData.use_rebate)}</div>
+                            </div>
+                            <div class="${gClass(['price-row', 'text-2'])}">
+                              <div>${vm.rebateConfig.title}${Language.text('reback_text')}</div>
+                              <div>+ ${vm.cartData.rebate.toLocaleString()}</div>
+                            </div>
 
-                        <div class="${gClass(['price-row', 'text-2'])}">
-                          <div
-                            style="  justify-content: flex-start; align-items: center; display: inline-flex;border:1px solid #EAEAEA;border-radius: 10px;overflow: hidden; ${document
+                            <div class="${gClass(['price-row', 'text-2'])}">
+                              <div
+                                style="  justify-content: flex-start; align-items: center; display: inline-flex;border:1px solid #EAEAEA;border-radius: 10px;overflow: hidden; ${document
                                         .body.clientWidth > 768
                                         ? 'gap: 18px;'
                                         : 'gap: 0px;'}"
-                            class="w-100"
-                          >
-                            <input
-                              class="flex-fill ${gClass('group-input')}"
-                              placeholder="${Language.text('please_enter')}${vm.rebateConfig.title}"
-                              style="${document.body.clientWidth < 800
+                                class="w-100"
+                              >
+                                <input
+                                  class="flex-fill ${gClass('group-input')}"
+                                  placeholder="${Language.text('please_enter')}${vm.rebateConfig.title}"
+                                  style="${document.body.clientWidth < 800
                                         ? `width:calc(100% - 150px) !important;`
                                         : ''}"
-                              value="${vm.cartData.use_rebate || ''}"
-                              onchange="${gvc.event((e, event) => {
+                                  value="${vm.cartData.use_rebate || ''}"
+                                  onchange="${gvc.event((e, event) => {
                                         if (CheckInput.isNumberString(e.value)) {
                                             tempRebate = parseInt(e.value, 10);
                                         }
@@ -708,11 +717,11 @@ export class CheckoutIndex {
                                             gvc.notifyDataChange(ids.page);
                                         }
                                     })}"
-                            />
-                            <div class="${gClass('group-button')}">
-                              <div
-                                class="${gClass('button-text')}"
-                                onclick="${gvc.event(() => __awaiter(this, void 0, void 0, function* () {
+                                />
+                                <div class="${gClass('group-button')}">
+                                  <div
+                                    class="${gClass('button-text')}"
+                                    onclick="${gvc.event(() => __awaiter(this, void 0, void 0, function* () {
                                         const sum = yield new Promise((resolve, reject) => {
                                             ApiShop.getRebate({}).then((res) => __awaiter(this, void 0, void 0, function* () {
                                                 if (res.result && res.response.sum) {
@@ -741,15 +750,15 @@ export class CheckoutIndex {
                                             refreshCartData();
                                         });
                                     }))}"
-                              >
-                                ${Language.text('apply')}
+                                  >
+                                    ${Language.text('apply')}
+                                  </div>
+                                </div>
                               </div>
-                            </div>
-                          </div>
-                        </div>`;
+                            </div>`;
                                 })()}
-                      <div class="${gClass(['price-row', 'text-2'])}">
-                        ${(() => {
+                        <div class="${gClass(['price-row', 'text-2'])}">
+                          ${(() => {
                                     return gvc.bindView(() => {
                                         return {
                                             bind: gvc.glitter.getUUID(),
@@ -770,13 +779,13 @@ export class CheckoutIndex {
                                                 const info = vm.cartData.useRebateInfo;
                                                 if (info.condition) {
                                                     return html `${Language.text('distance_from_target_amount')}$
-                                  ${info.condition.toLocaleString()} ${Language.text('can_use_now')}
-                                  ${vm.rebateConfig.title} ${Language.text('discount')}`;
+                                    ${info.condition.toLocaleString()} ${Language.text('can_use_now')}
+                                    ${vm.rebateConfig.title} ${Language.text('discount')}`;
                                                 }
                                                 if (info.limit) {
                                                     return html `${Language.text('remaining_balance')} ${sum || 0}
-                                  ${Language.text('point')} ${vm.rebateConfig.title} <br />${Language.text('max_discount_order')}
-                                  ${info.limit.toLocaleString()} ${Language.text('point')} ${vm.rebateConfig.title}`;
+                                      ${Language.text('point')} ${vm.rebateConfig.title} <br />${Language.text('max_discount_order')}
+                                      ${info.limit.toLocaleString()} ${Language.text('point')} ${vm.rebateConfig.title}`;
                                                 }
                                                 else {
                                                     return `${Language.text('remaining_balance')} ${sum || 0} ${Language.text('point')} ${vm.rebateConfig.title}`;
@@ -785,7 +794,7 @@ export class CheckoutIndex {
                                         };
                                     });
                                 })()}
-                      </div>`;
+                        </div>`;
                             }
                         })()}
                   <div class="${gClass(['price-row', 'text-2', 'bold'])}">
@@ -1319,7 +1328,7 @@ export class CheckoutIndex {
                                                     })}"
                                                     >
                                                       <span class="${gClass('button-text')}"
-                                                      >${isSelected
+                                                        >${isSelected
                                                         ? isSelected.id === pd.id
                                                             ? Language.text('selected')
                                                             : Language.text('change_gift')
@@ -1590,14 +1599,14 @@ export class CheckoutIndex {
                                                 ? shipmentList
                                                     .map((dd) => {
                                                     return html ` <option
-                                                        value="${dd.value}"
-                                                        ${vm.cartData.user_info.shipment === dd.value
+                                                          value="${dd.value}"
+                                                          ${vm.cartData.user_info.shipment === dd.value
                                                         ? `selected`
                                                         : ''}
-                                                      >
-                                                        ${Language.text(`ship_${dd.value}`) ||
+                                                        >
+                                                          ${Language.text(`ship_${dd.value}`) ||
                                                         Language.getLanguageCustomText(dd.name)}
-                                                      </option>`;
+                                                        </option>`;
                                                 })
                                                     .join('')
                                                 : html ` <option selected>(${Language.text('disable_ship')})</option>`}
@@ -1614,9 +1623,9 @@ export class CheckoutIndex {
                                                 const log_config = (yield ApiUser.getPublicConfig('shipment_config_' + vm.cartData.user_info.shipment, 'manager')).response.value;
                                                 if (log_config.content) {
                                                     return html ` <label class="${gClass('label')}"
-                                                >${Language.text('shipping_instructions')}</label
-                                                >
-                                                <div class="border rounded-3 p-2">${log_config.content}</div>`;
+                                                    >${Language.text('shipping_instructions')}</label
+                                                  >
+                                                  <div class="border rounded-3 p-2">${log_config.content}</div>`;
                                                 }
                                                 return '';
                                             }),
@@ -1658,13 +1667,13 @@ export class CheckoutIndex {
                                                 view: () => {
                                                     select_id = gvc.glitter.getUUID();
                                                     return html `<label
-                                                class="${gClass('label')} w-100 d-flex align-items-center"
-                                              >${Language.text('shipping_address')}
-                                                <div class="flex-fill"></div>
-                                                <div
-                                                  class="fs-sm fw-500 ${!GlobalUser.token ? `d-none` : ''}"
-                                                  style="cursor: pointer; color: #3366bb;"
-                                                  onclick="${gvc.event(() => {
+                                                    class="${gClass('label')} w-100 d-flex align-items-center"
+                                                    >${Language.text('shipping_address')}
+                                                    <div class="flex-fill"></div>
+                                                    <div
+                                                      class="fs-sm fw-500 ${!GlobalUser.token ? `d-none` : ''}"
+                                                      style="cursor: pointer; color: #3366bb;"
+                                                      onclick="${gvc.event(() => {
                                                         ApiUser.getUserData(GlobalUser.token, 'me').then(res => {
                                                             vm.cartData.user_info.address =
                                                                 res.response.userData.consignee_address;
@@ -1672,32 +1681,32 @@ export class CheckoutIndex {
                                                             gvc.notifyDataChange(id);
                                                         });
                                                     })}"
-                                                >
-                                                  ${Language.text('quick_input')}
-                                                </div>
-                                              </label>
-                                              <div class="row">
-                                                <div class="col-12 mb-3">
-                                                  <div
-                                                    role="tw-city-selector"
-                                                    id="select_id_${id}"
-                                                    class="w-100 city-selector d-flex d_${select_id}"
-                                                    style="gap:15px;"
-                                                  ></div>
-                                                </div>
-                                                <div class="col-12">
-                                                  <input
-                                                    class="${gClass('input')}"
-                                                    type="address"
-                                                    placeholder="${Language.text('please_enter_street_location')}"
-                                                    value="${vm.cartData.user_info.address || ''}"
-                                                    onchange="${gvc.event(e => {
+                                                    >
+                                                      ${Language.text('quick_input')}
+                                                    </div>
+                                                  </label>
+                                                  <div class="row">
+                                                    <div class="col-12 mb-3">
+                                                      <div
+                                                        role="tw-city-selector"
+                                                        id="select_id_${id}"
+                                                        class="w-100 city-selector d-flex d_${select_id}"
+                                                        style="gap:15px;"
+                                                      ></div>
+                                                    </div>
+                                                    <div class="col-12">
+                                                      <input
+                                                        class="${gClass('input')}"
+                                                        type="address"
+                                                        placeholder="${Language.text('please_enter_street_location')}"
+                                                        value="${vm.cartData.user_info.address || ''}"
+                                                        onchange="${gvc.event(e => {
                                                         vm.cartData.user_info.address = e.value;
                                                         this.storeLocalData(vm.cartData);
                                                     })}"
-                                                  />
-                                                </div>
-                                              </div> `;
+                                                      />
+                                                    </div>
+                                                  </div> `;
                                                 },
                                                 divCreate: {
                                                     class: `col-12  mb-2`,
@@ -1742,9 +1751,9 @@ export class CheckoutIndex {
                                       <!-- 選取超商 -->
                                       ${ShipmentConfig.supermarketList.includes(vm.cartData.user_info.shipment)
                                         ? html ` <div class="col-12">
-                                          <button
-                                            class="${gClass('button-bgr')}"
-                                            onclick="${gvc.event(() => {
+                                            <button
+                                              class="${gClass('button-bgr')}"
+                                              onclick="${gvc.event(() => {
                                             ApiDelivery.storeMaps({
                                                 returnURL: (() => {
                                                     if (ApplicationConfig.device_type === 'ios') {
@@ -1770,9 +1779,9 @@ export class CheckoutIndex {
                                                 }
                                             }));
                                         })}"
-                                          >
+                                            >
                                               <span class="${gClass('button-text')}"
-                                              >${(() => {
+                                                >${(() => {
                                             let cvs = glitter.getUrlParameter('CVSStoreName') || '';
                                             if (decodeURIComponent(cvs)) {
                                                 return `${decodeURIComponent(cvs)} 『 ${Language.text('click_to_reselct_store')} 』`;
@@ -1782,8 +1791,8 @@ export class CheckoutIndex {
                                             }
                                         })()}</span
                                               >
-                                          </button>
-                                        </div>`
+                                            </button>
+                                          </div>`
                                         : ''}
                                       ${(() => {
                                         var _a;
@@ -1800,7 +1809,7 @@ export class CheckoutIndex {
                                     })()
                                         ? [
                                             html `<label class="${gClass('label')}">${Language.text('country')}</label>
-                                          ${gvc.bindView(() => {
+                                              ${gvc.bindView(() => {
                                                 const id = gvc.glitter.getUUID();
                                                 return {
                                                     bind: id,
@@ -1825,89 +1834,89 @@ export class CheckoutIndex {
                                                             });
                                                         });
                                                         return html `<select
-                                                  class="w-100 ${gClass('select')}"
-                                                  onchange="${gvc.event((e, event) => {
+                                                      class="w-100 ${gClass('select')}"
+                                                      onchange="${gvc.event((e, event) => {
                                                             vm.cartData.user_info.country = e.value;
                                                             this.storeLocalData(vm.cartData);
                                                             refreshCartData();
                                                         })}"
-                                                >
-                                                  ${(() => {
+                                                    >
+                                                      ${(() => {
                                                             let map = country_select.map((dd) => {
                                                                 return html `
-                                                          <option
-                                                            value="${dd.countryCode}"
-                                                            ${vm.cartData.user_info.country === dd.countryCode
+                                                              <option
+                                                                value="${dd.countryCode}"
+                                                                ${vm.cartData.user_info.country === dd.countryCode
                                                                     ? `selected`
                                                                     : ''}
-                                                          >
-                                                            ${dd.countryName}
-                                                          </option>
-                                                        `;
+                                                              >
+                                                                ${dd.countryName}
+                                                              </option>
+                                                            `;
                                                             });
                                                             if (!country_select.find((dd) => {
                                                                 return dd.countryCode === vm.cartData.user_info.country;
                                                             })) {
                                                                 delete vm.cartData.user_info.country;
                                                                 map.push(html ` <option class="d-none" selected>
-                                                          ${Language.text('select_country')}
-                                                        </option>`);
+                                                              ${Language.text('select_country')}
+                                                            </option>`);
                                                             }
                                                             return map.join('');
                                                         })()}
-                                                </select>`;
+                                                    </select>`;
                                                     }),
                                                 };
                                             })}`,
                                             html ` <label class="${gClass('label')}"
-                                          >${Language.text('shipping_address')}</label
-                                          >
-                                          <input
-                                            class="${gClass('input')}"
-                                            type="address"
-                                            placeholder="${Language.text('please_enter_delivery_address')}"
-                                            value="${vm.cartData.user_info.address || ''}"
-                                            onchange="${gvc.event(e => {
+                                                >${Language.text('shipping_address')}</label
+                                              >
+                                              <input
+                                                class="${gClass('input')}"
+                                                type="address"
+                                                placeholder="${Language.text('please_enter_delivery_address')}"
+                                                value="${vm.cartData.user_info.address || ''}"
+                                                onchange="${gvc.event(e => {
                                                 vm.cartData.user_info.address = e.value;
                                                 this.storeLocalData(vm.cartData);
                                             })}"
-                                          />`,
+                                              />`,
                                             html ` <label class="${gClass('label')}">${Language.text('city')}</label>
-                                          <input
-                                            class="${gClass('input')}"
-                                            type="city"
-                                            placeholder="${Language.text('city')}"
-                                            value="${vm.cartData.user_info.city || ''}"
-                                            onchange="${gvc.event(e => {
+                                              <input
+                                                class="${gClass('input')}"
+                                                type="city"
+                                                placeholder="${Language.text('city')}"
+                                                value="${vm.cartData.user_info.city || ''}"
+                                                onchange="${gvc.event(e => {
                                                 vm.cartData.user_info.city = e.value;
                                                 this.storeLocalData(vm.cartData);
                                             })}"
-                                          />`,
+                                              />`,
                                             html ` <label class="${gClass('label')}">${Language.text('state')}</label>
-                                          <input
-                                            class="${gClass('input')}"
-                                            class="${gClass('input')}"
-                                            type="state"
-                                            placeholder="${Language.text('state')}"
-                                            value="${vm.cartData.user_info.state || ''}"
-                                            onchange="${gvc.event(e => {
+                                              <input
+                                                class="${gClass('input')}"
+                                                class="${gClass('input')}"
+                                                type="state"
+                                                placeholder="${Language.text('state')}"
+                                                value="${vm.cartData.user_info.state || ''}"
+                                                onchange="${gvc.event(e => {
                                                 vm.cartData.user_info.state = e.value;
                                                 this.storeLocalData(vm.cartData);
                                             })}"
-                                          />`,
+                                              />`,
                                             html ` <label class="${gClass('label')}"
-                                          >${Language.text('postal_code')}</label
-                                          >
-                                          <input
-                                            class="${gClass('input')}"
-                                            type=""
-                                            placeholder="${Language.text('postal_code')}"
-                                            value="${vm.cartData.user_info.postal_code || ''}"
-                                            onchange="${gvc.event(e => {
+                                                >${Language.text('postal_code')}</label
+                                              >
+                                              <input
+                                                class="${gClass('input')}"
+                                                type=""
+                                                placeholder="${Language.text('postal_code')}"
+                                                value="${vm.cartData.user_info.postal_code || ''}"
+                                                onchange="${gvc.event(e => {
                                                 vm.cartData.user_info.postal_code = e.value;
                                                 this.storeLocalData(vm.cartData);
                                             })}"
-                                          />`,
+                                              />`,
                                         ]
                                             .map(dd => {
                                             return html ` <div class="col-12 col-md-6 mb-2">${dd}</div>`;
@@ -2680,10 +2689,10 @@ export class CheckoutIndex {
                                               class="d-flex align-items-center justify-content-end"
                                               style="width:1180px;max-width: 100%;gap:24px;"
                                             >
-                                              <div class="d-flex align-items-end fs-base" style="gap:5px;">
-                                                <span style="white-space:nowrap;" class="fw-bold fs-sm">
-                                                  ${Language.text('total_amount')}</span
-                                                >
+                                              <div class="d-flex align-items-center fs-base" style="gap:5px;">
+                                                <div style="white-space:nowrap;" class="fw-bold fs-sm">
+                                                  ${Language.text('total_amount')}
+                                                </div>
                                                 <div class="${gClass(['price-row', 'text-1', 'bold'])}">
                                                   <div class="fs-5 fw-bold ${gClass('price-text')}">
                                                     ${Currency.convertCurrencyText(vm.cartData.total)}
@@ -2817,7 +2826,7 @@ export class CheckoutIndex {
                                                             dialog.dataLoading({ visible: false });
                                                             if (!res.result) {
                                                                 dialog.infoMessage({
-                                                                    text: '系統處理您的付款時遇到一些問題，導致交易未能完成。請聯繫我們的客服團隊以取得進一步的協助'
+                                                                    text: '系統處理您的付款時遇到一些問題，導致交易未能完成。請聯繫我們的客服團隊以取得進一步的協助',
                                                                 });
                                                                 return;
                                                             }
@@ -3280,7 +3289,7 @@ export class CheckoutIndex {
           </div>
           <div class="c_dialog">
             <div class="c_dialog_body">
-              <div class="c_dialog_main" style="gap: 24px; height: auto; max-height: 500px; padding: 12px 20px;">
+              <div class="c_dialog_main" style="gap: 24px; height: auto; max-height: 500px; padding: 12px;">
                 ${obj.innerHTML(gvc)}
               </div>
             </div>