ts-glitter 22.5.7 → 22.5.9

package/lowcode/cms-plugin/shopping-finance-setting.ts

@@ -1,7 +1,7 @@
 import { GVC } from '../glitterBundle/GVController.js';
 import { EditorElem } from '../glitterBundle/plugins/editor-elem.js';
 import { ShareDialog } from '../glitterBundle/dialog/ShareDialog.js';
-import { BgWidget } from '../backend-manager/bg-widget.js';
+import { BgWidget, CustomButtonObject } from '../backend-manager/bg-widget.js';
 import { CheckInput } from '../modules/checkInput.js';
 import { Tool } from '../modules/tool.js';
 import { imageLibrary } from '../modules/image-library.js';
@@ -20,6 +20,7 @@ type CustomFinance = {
   id: string;
   text: string;
   shipmentSupport: string[];
+  type?: 'pos';
 };
 
 type ShipmentGroupData = {
@@ -28,45 +29,48 @@ type ShipmentGroupData = {
   list: string[];
 };
 
+type EditCustomFinance = {
+  function: 'replace' | 'plus';
+  data?: CustomFinance;
+};
+
 const html = String.raw;
 
 export class ShoppingFinanceSetting {
+  static gvc: GVC | null = null;
+  static id = '';
+  static loading = true;
+  static saasConfig = (window.parent as any).saasConfig;
+
+  // *金流設定頁
   static main(gvc: GVC, pos?: boolean) {
+    this.gvc = gvc;
+    this.id = 'shopping-finance-setting-main';
+    this.loading = true;
+
     pos = `${pos}` === 'true';
-    const dialog = new ShareDialog(gvc.glitter);
-    const saasConfig: { config: any; api: any } = (window.parent as any).saasConfig;
+    let keyData: any = { payment_info_custom: [] };
 
     const vm: {
       id: string;
       onBoxId: string;
       posBoxId: string;
       offBoxId: string;
-      loading: boolean;
       page: 'online' | 'offline' | 'pos';
     } = {
-      id: gvc.glitter.getUUID(),
+      id: this.id,
       onBoxId: gvc.glitter.getUUID(),
       posBoxId: gvc.glitter.getUUID(),
       offBoxId: gvc.glitter.getUUID(),
-      loading: true,
       page: pos ? 'pos' : 'online',
     };
+    const dialog = new ShareDialog(gvc.glitter);
+    const saasConfig = this.saasConfig;
+    const saveData = () => {
+      saasConfig.api.setPrivateConfig(saasConfig.config.appName, 'glitter_finance', keyData).then(() => this.refresh());
+    };
 
-    let keyData: any = { payment_info_custom: [] };
-
-    function refresh() {
-      gvc.notifyDataChange(vm.id);
-    }
-
-    function saveData() {
-      saasConfig.api.setPrivateConfig(saasConfig.config.appName, 'glitter_finance', keyData).then(() => {
-        vm.loading = true;
-        refresh();
-      });
-    }
-
-    // 自訂金流設定
-    function updateCustomFinance(obj: { function: 'replace' | 'plus'; data?: CustomFinance }) {
+    const customFinance = (obj: EditCustomFinance): CustomButtonObject[] => {
       const custom_finance: CustomFinance = structuredClone(
         obj.data || {
           id: gvc.glitter.getUUID(),
@@ -75,902 +79,495 @@ export class ShoppingFinanceSetting {
           shipmentSupport: [],
         }
       );
-      let form: any = undefined;
-
-      BgWidget.settingDialog({
-        gvc: gvc,
-        title: obj.function === 'replace' ? '修改金流設定' : '新增自訂金流',
-        width: 800,
-        innerHTML: gvc => {
-          const id = gvc.glitter.getUUID();
-          form = BgWidget.customForm(gvc, [
-            {
-              title: html` <div class="tx_normal fw-bolder mt-2 d-flex flex-column" style="margin-bottom: 12px;">
-                自訂線下金流表單
-                <span style="color: #8D8D8D; font-size: 12px;">當客戶選擇此付款方式時，所需上傳的付款證明</span>
-              </div>`,
-              key: `form_finance_${custom_finance.id}`,
-              no_padding: true,
-            },
-          ]);
-
-          return gvc.bindView({
-            bind: id,
-            view: () => {
-              const setting = {
-                title: '金流設定',
-                key: 'setting',
-                html: [
-                  BgWidget.editeInput({
-                    gvc: gvc,
-                    title: '自訂金流名稱',
-                    default: custom_finance.name,
-                    callback: text => {
-                      custom_finance.name = text;
-                    },
-                    placeHolder: '請輸入自訂金流名稱',
-                    global_language: true,
-                  }),
-                  form.view,
-                ].join(''),
-              };
 
-              const note = {
-                title: '付款說明',
-                key: 'note',
-                html: [
-                  html` <div class="d-flex justify-content-between mb-3">
-                    <div class="tx_normal">付款說明</div>
-                  </div>`,
-                  BgWidget.richTextEditor({
-                    gvc: gvc,
-                    content: custom_finance.text,
-                    callback: content => {
-                      custom_finance.text = content;
-                    },
-                    title: '付款說明',
-                  }),
-                ].join(''),
-              };
+      const form: any = BgWidget.customForm(gvc, [
+        {
+          title: html` <div class="tx_normal fw-bolder mt-2 d-flex flex-column" style="margin-bottom: 12px;">
+            自訂線下金流表單
+            <span style="color: #8D8D8D; font-size: 12px;">當客戶選擇此付款方式時，所需上傳的付款證明</span>
+          </div>`,
+          key: `form_finance_${custom_finance.id}`,
+          no_padding: true,
+        },
+      ]);
 
-              const shipment = {
-                key: 'shipment',
-                title: '指定物流',
-                html: gvc.bindView({
-                  bind: gvc.glitter.getUUID(),
-                  view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, custom_finance),
-                }),
-              };
+      const setting = {
+        title: '金流設定',
+        key: 'setting',
+        html: (gvc: GVC) => {
+          return [
+            BgWidget.editeInput({
+              gvc: gvc,
+              title: '自訂金流名稱',
+              default: custom_finance.name,
+              callback: text => {
+                custom_finance.name = text;
+              },
+              placeHolder: '請輸入自訂金流名稱',
+              global_language: true,
+            }),
+            form.view,
+          ].join('');
+        },
+      };
 
-              const cartSetting = {
-                key: 'cartSetting',
-                title: '購物車設定',
-                html: gvc.bindView({
-                  bind: gvc.glitter.getUUID(),
-                  view: () => ShoppingFinanceSetting.setCartSetting(gvc, custom_finance),
-                }),
-              };
+      const note = {
+        title: '付款說明',
+        key: 'note',
+        html: (gvc: GVC) => {
+          return [
+            html` <div class="d-flex justify-content-between mb-3">
+              <div class="tx_normal">付款說明</div>
+            </div>`,
+            BgWidget.richTextEditor({
+              gvc: gvc,
+              content: custom_finance.text,
+              callback: content => {
+                custom_finance.text = content;
+              },
+              title: '付款說明',
+            }),
+          ].join('');
+        },
+      };
 
-              return ShoppingFinanceSetting.tabView(gvc, [setting, note, shipment, cartSetting]);
-            },
+      const shipment = {
+        key: 'shipment',
+        title: '指定物流',
+        html: (gvc: GVC) => {
+          return gvc.bindView({
+            bind: gvc.glitter.getUUID(),
+            view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, custom_finance),
           });
         },
-        footer_html: gvc => {
-          const saveButton = BgWidget.save(
-            gvc.event(() => {
-              return new Promise<boolean>(async () => {
-                if (!custom_finance.name) {
-                  dialog.errorMessage({ text: '請輸入金流名稱' });
-                  return;
-                }
+      };
 
-                keyData.payment_info_custom = keyData.payment_info_custom ?? [];
-
-                if (obj.function === 'plus') {
-                  const newFinance = JSON.parse(JSON.stringify(custom_finance));
-                  keyData.payment_info_custom.push(newFinance);
-                } else {
-                  const index = keyData.payment_info_custom.findIndex((d1: any) => d1.id === custom_finance.id);
-                  if (index !== -1) {
-                    keyData.payment_info_custom[index] = custom_finance;
-                  } else {
-                    console.error('找不到對應的金流設定 ID:', custom_finance.id);
-                    return;
-                  }
-                }
+      const cartSetting = {
+        key: 'cartSetting',
+        title: '購物車設定',
+        html: (gvc: GVC) => {
+          return gvc.bindView({
+            bind: gvc.glitter.getUUID(),
+            view: () => ShoppingFinanceSetting.setCartSetting(gvc, custom_finance),
+          });
+        },
+      };
 
-                dialog.dataLoading({ visible: true });
+      return (obj.function === 'plus' ? [setting] : [setting, note, shipment, cartSetting]).map(item => {
+        return {
+          button: { color: 'gray', size: 'sm' },
+          text: { name: item.title },
+          event: gvc.event(async () => {
+            this.settingDialog(
+              gvc,
+              item.title,
+              gvc => html`<div>${item.html(gvc)}</div>`,
+              gvc => {
+                return BgWidget.save(
+                  gvc.event(async () => {
+                    if (!custom_finance.name) {
+                      dialog.errorMessage({ text: '請輸入金流名稱' });
+                      return;
+                    }
 
-                try {
-                  await form.save();
-                  await saasConfig.api.setPrivateConfig(saasConfig.config.appName, 'glitter_finance', keyData);
+                    if (vm.page === 'pos') {
+                      custom_finance.type = 'pos';
+                    }
 
-                  dialog.successMessage({ text: '設定成功' });
-                } catch (error) {
-                  console.error('更新金流設定失敗:', error);
-                  dialog.errorMessage({ text: '設定失敗，請稍後再試' });
-                } finally {
-                  dialog.dataLoading({ visible: false });
-                }
+                    keyData.payment_info_custom = keyData.payment_info_custom ?? [];
+
+                    if (obj.function === 'plus') {
+                      const newFinance = JSON.parse(JSON.stringify(custom_finance));
+                      keyData.payment_info_custom.push(newFinance);
+                    } else {
+                      const index = keyData.payment_info_custom.findIndex((d1: any) => d1.id === custom_finance.id);
+                      if (index !== -1) {
+                        keyData.payment_info_custom[index] = custom_finance;
+                      } else {
+                        console.error('找不到對應的金流設定 ID:', custom_finance.id);
+                        return;
+                      }
+                    }
 
-                gvc.closeDialog();
-                refresh();
-              });
-            })
-          );
+                    dialog.dataLoading({ visible: true });
 
-          if (obj.function === 'plus') {
-            return saveButton;
-          }
-
-          return [
-            BgWidget.danger(
-              gvc.event(() => {
-                dialog.checkYesOrNot({
-                  text: '是否確認刪除？',
-                  callback: response => {
-                    if (response) {
-                      keyData.payment_info_custom = keyData.payment_info_custom.filter((d1: any) => {
-                        return obj.data!.id !== d1.id;
-                      });
-                      dialog.dataLoading({ visible: true });
-                      saasConfig.api.setPrivateConfig(saasConfig.config.appName, 'glitter_finance', keyData);
+                    try {
+                      await form.save();
+                      await saasConfig.api.setPrivateConfig(saasConfig.config.appName, 'glitter_finance', keyData);
+                      dialog.successMessage({ text: '設定成功' });
+                    } catch (error) {
+                      console.error('更新金流設定失敗:', error);
+                      dialog.errorMessage({ text: '設定失敗，請稍後再試' });
+                    } finally {
                       dialog.dataLoading({ visible: false });
-                      gvc.closeDialog();
-                      refresh();
                     }
-                  },
-                });
-              })
-            ),
-            saveButton,
-          ].join('');
-        },
+
+                    this.refresh(gvc);
+                  })
+                );
+              },
+              () => this.refresh(gvc)
+            );
+          }),
+        };
       });
-    }
+    };
 
     return BgWidget.container(
-      html`
-        ${[
-          html` <div class="title-container ${pos ? `d-none` : ''}">
-            ${BgWidget.title('金流設定')}
-            <div class="flex-fill"></div>
-          </div>`,
-          gvc.bindView({
-            bind: vm.id,
-            view: () => {
-              if (vm.loading) {
-                return BgWidget.spinner();
-              }
+      [
+        html` <div class="title-container ${pos ? 'd-none' : ''}">
+          ${BgWidget.title('金流設定')}
+          <div class="flex-fill"></div>
+        </div>`,
+        gvc.bindView({
+          bind: vm.id,
+          view: () => {
+            if (this.loading) {
+              return BgWidget.spinner();
+            }
 
-              try {
-                keyData.off_line_support = keyData.off_line_support ?? {
-                  line: false,
-                  atm: false,
-                  cash_on_delivery: false,
-                  ...keyData.payment_info_custom.map((dd: any) => {
-                    return {
-                      [dd.id]: false,
-                    };
-                  }),
-                };
+            try {
+              // 初始化離線支付選項
+              this.initOfflineSupport(keyData);
+
+              // 清理不必要的離線支付選項
+              this.cleanupOfflineSupport(keyData);
+
+              return [
+                // 只有在非POS模式下才顯示頁籤
+                pos ? '' : this.renderTabs(gvc, vm),
+                // 根據當前頁面渲染相應內容
+                this.renderPageContent(gvc, vm, keyData, saveData, customFinance),
+              ].join('');
+            } catch (e) {
+              console.error(e);
+              return '發生錯誤';
+            }
+          },
+          onCreate: () => {
+            if (this.loading) {
+              return new Promise<void>(async resolve => {
+                const data = await saasConfig.api.getPrivateConfig(saasConfig.config.appName, 'glitter_finance');
+                if (data.response.result[0]) {
+                  keyData = {
+                    ...keyData,
+                    ...data.response.result[0].value,
+                  };
+                }
+                resolve();
+              }).then(() => {
+                this.loading = false;
+                gvc.notifyDataChange(vm.id);
+              });
+            } else {
+              const handleBeforeUnload = (e: any) => {
+                e.preventDefault();
+                e.returnValue = '您確定要離開金流設定嗎？您將會失去未儲存的更改';
+              };
+              (window.parent as any).document.addEventListener('beforeunload', handleBeforeUnload);
+            }
+          },
+        }),
+        pos ? '' : BgWidget.mbContainer(240),
+      ].join(''),
+      {
+        style: pos ? 'margin-top: 0px !important;' : '',
+      }
+    );
+  }
+
+  // 金物流頁面重新整理
+  static refresh = (dialogGVC?: GVC) => {
+    this.loading = true;
 
-                Object.keys(keyData.off_line_support).map(key => {
-                  if (
-                    ['line', 'atm', 'cash_on_delivery'].includes(key) ||
-                    keyData.payment_info_custom.some((item: any) => item.id === key)
-                  ) {
-                    return;
-                  }
-                  delete keyData.off_line_support[key];
+    if (dialogGVC) {
+      dialogGVC.closeDialog();
+    }
+
+    if (this.gvc === null) {
+      console.error('Refresh GVC 並不存在');
+      return;
+    }
+
+    const pageGVC = this.gvc;
+    pageGVC.closeDialog();
+    setTimeout(() => pageGVC.notifyDataChange(this.id), 300);
+  };
+
+  // 初始化離線支付選項
+  private static initOfflineSupport(keyData: any): void {
+    keyData.off_line_support = keyData.off_line_support ?? {
+      line: false,
+      atm: false,
+      cash_on_delivery: false,
+      ...keyData.payment_info_custom.map((dd: any) => ({
+        [dd.id]: false,
+      })),
+    };
+  }
+
+  // 清理不必要的離線支付選項
+  private static cleanupOfflineSupport(keyData: any): void {
+    Object.keys(keyData.off_line_support).forEach(key => {
+      const isValidKey =
+        ['line', 'atm', 'cash_on_delivery'].includes(key) ||
+        keyData.payment_info_custom.some((item: any) => item.id === key);
+
+      if (!isValidKey) {
+        delete keyData.off_line_support[key];
+      }
+    });
+  }
+
+  // 渲染頁籤
+  private static renderTabs(gvc: any, vm: any): string {
+    return BgWidget.tab(
+      [
+        { key: 'online', title: '線上金流' },
+        { key: 'offline', title: '線下金流' },
+      ],
+      gvc,
+      vm.page,
+      (key: any) => {
+        vm.page = key;
+        gvc.notifyDataChange(vm.id);
+      }
+    );
+  }
+
+  // 根據當前頁面渲染相應內容
+  private static renderPageContent(gvc: any, vm: any, keyData: any, saveData: any, setCustomFinance: any): string {
+    switch (vm.page) {
+      case 'online':
+        return this.onlinePayment(gvc, keyData, saveData);
+      case 'offline':
+        return this.offlinePayment(gvc, keyData, saveData, setCustomFinance);
+      case 'pos':
+        return this.posPayment(gvc, keyData, saveData, setCustomFinance);
+      default:
+        return '';
+    }
+  }
+
+  // 線上金流卡片
+  static onlinePayment(gvc: GVC, keyData: any, saveData: () => void) {
+    return html` <div class="px-md-0 px-2 mb-2">
+        ${BgWidget.normalInsignia('透過線上金流，消費者可於線上進行結帳付款')}
+      </div>
+      <div class="row m-0">
+        ${PaymentConfig.onlinePay
+          .filter(item => item.type !== 'pos')
+          .map(dd => {
+            keyData[dd.key] = keyData[dd.key] ?? {};
+
+            return this.card({
+              title: dd.name,
+              img: html`<img src="${dd.img || BgWidget.noImageURL}" />`,
+              toggle: keyData[dd.key].toggle,
+              toggleEvent: gvc.event(() => {
+                keyData[dd.key].toggle = !keyData[dd.key].toggle;
+                saveData();
+              }),
+              buttonAction: this.formatOnlinePayList(gvc, dd.key, keyData[dd.key]) || [],
+            });
+          })
+          .join('')}
+      </div>`;
+  }
+
+  // 線下金流卡片
+  static offlinePayment(
+    gvc: GVC,
+    keyData: any,
+    saveData: () => void,
+    offlineCustomFinance: (obj: EditCustomFinance) => CustomButtonObject[]
+  ) {
+    const dialog = new ShareDialog(gvc.glitter);
+    const saasConfig = this.saasConfig;
+    const offlinePayArray = [
+      // 系統線下金流
+      ...PaymentConfig.defalutOfflinePay,
+      // 自訂線下金流
+      ...keyData.payment_info_custom
+        .filter((dd: any) => {
+          return dd.type !== 'pos';
+        })
+        .map((dd: any) => {
+          return {
+            key: dd.id,
+            name: html`${Language.getLanguageCustomText(dd.name)}`,
+            custom: true,
+          };
+        }),
+    ];
+
+    // 刪除自訂金流事件
+    const deleteEvent = (key: string) =>
+      gvc.event(() => {
+        dialog.checkYesOrNot({
+          text: '是否確認刪除此金流？',
+          callback: async response => {
+            if (response) {
+              const data = await saasConfig.api.getPrivateConfig(saasConfig.config.appName, 'glitter_finance');
+              if (data.response.result[0]) {
+                const keyData = data.response.result[0].value;
+
+                keyData.payment_info_custom = keyData.payment_info_custom.filter((d1: any) => {
+                  return key !== d1.id;
                 });
 
-                let h = '';
-                const cloneData = structuredClone(keyData);
+                dialog.dataLoading({ visible: true });
+                saasConfig.api.setPrivateConfig(saasConfig.config.appName, 'glitter_finance', keyData);
 
-                // 線上金流
-                if (vm.page === 'online') {
-                  h = html` <div class="px-md-0 px-2 mb-2">
-                      ${BgWidget.normalInsignia('透過線上金流，消費者可於線上進行結帳付款')}
-                    </div>
-                    <div class="row m-0">
-                      ${PaymentConfig.onlinePay
-                        .filter(item => item.type !== 'pos')
-                        .map(dd => {
-                          keyData[dd.key] = keyData[dd.key] ?? {};
-                          return html` <div class="col-12 col-lg-3 col-md-4 p-0 p-md-2">
-                            <div
-                              class="w-100 position-relative main-card"
-                              style=" background: white; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; display: inline-flex;"
-                            >
-                              <div
-                                class="pt-4"
-                                style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 28px; display: inline-flex"
-                              >
-                                <div style="min-width: 46px;max-width: 46px;">
-                                  <img src="${dd.img || BgWidget.noImageURL}" />
-                                </div>
-                                <div
-                                  style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: inline-flex"
-                                >
-                                  <div class="tx_normal">${dd.name}</div>
-                                  <div class="d-flex align-items-center" style="gap:4px;">
-                                    <div class="tx_normal">${keyData[dd.key].toggle ? `開啟` : `關閉`}</div>
-                                    <div class="cursor_pointer form-check form-switch" style="margin-top: 10px;">
-                                      <input
-                                        class="form-check-input"
-                                        type="checkbox"
-                                        onchange="${gvc.event((e, event) => {
-                                          keyData[dd.key].toggle = !keyData[dd.key].toggle;
-                                          saveData();
-                                        })}"
-                                        ${keyData[dd.key].toggle ? `checked` : ''}
-                                      />
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <div class="position-absolute " style="right:10px;top:10px;">
-                                ${BgWidget.customButton({
-                                  button: {
-                                    color: 'gray',
-                                    size: 'sm',
-                                  },
-                                  text: {
-                                    name: '金流設定',
-                                  },
-                                  event: gvc.event(() => {
-                                    const payData = dd;
-                                    const key_d = structuredClone(keyData[payData.key]);
-
-                                    BgWidget.settingDialog({
-                                      gvc: gvc,
-                                      title: '金流設定',
-                                      width: 800,
-                                      innerHTML: (gvc: GVC) => {
-                                        try {
-                                          const setting = {
-                                            key: 'setting',
-                                            title: '基本設定',
-                                            html: html` ${BgWidget.editeInput({
-                                                gvc: gvc,
-                                                title: html`<div>
-                                                  自訂金流名稱 ${BgWidget.grayNote('未輸入則參照預設')}
-                                                </div>`,
-                                                default: key_d.custome_name,
-                                                callback: text => {
-                                                  key_d.custome_name = text;
-                                                },
-                                                placeHolder: '請輸入自訂顯示名稱',
-                                                global_language: true,
-                                              })}
-                                              <div style="margin-top: 8px;">
-                                                ${(() => {
-                                                  switch (payData.key) {
-                                                    case 'newWebPay':
-                                                    case 'ecPay':
-                                                      return [
-                                                        BgWidget.inlineCheckBox({
-                                                          title: '串接路徑',
-                                                          gvc: gvc,
-                                                          def: key_d.ActionURL,
-                                                          array: (() => {
-                                                            if (payData.key === 'newWebPay') {
-                                                              return [
-                                                                {
-                                                                  title: '正式站',
-                                                                  value: 'https://core.newebpay.com/MPG/mpg_gateway',
-                                                                },
-                                                                {
-                                                                  title: '測試站',
-                                                                  value: 'https://ccore.newebpay.com/MPG/mpg_gateway',
-                                                                },
-                                                              ];
-                                                            } else {
-                                                              return [
-                                                                {
-                                                                  title: '正式站',
-                                                                  value:
-                                                                    'https://payment.ecpay.com.tw/Cashier/AioCheckOut/V5',
-                                                                },
-                                                                {
-                                                                  title: '測試站',
-                                                                  value:
-                                                                    'https://payment-stage.ecpay.com.tw/Cashier/AioCheckOut/V5',
-                                                                },
-                                                              ];
-                                                            }
-                                                          })(),
-                                                          callback: (text: any) => {
-                                                            key_d.ActionURL = text;
-                                                          },
-                                                        }),
-                                                        BgWidget.inlineCheckBox({
-                                                          title: '開通付款方式',
-                                                          gvc: gvc,
-                                                          def: [
-                                                            'credit',
-                                                            'atm',
-                                                            'web_atm',
-                                                            'c_code',
-                                                            'c_bar_code',
-                                                          ].filter(dd => {
-                                                            return (key_d as any)[dd];
-                                                          }),
-                                                          array: [
-                                                            {
-                                                              title: '信用卡',
-                                                              value: 'credit',
-                                                            },
-                                                            {
-                                                              title: '一般 ATM',
-                                                              value: 'atm',
-                                                            },
-                                                            {
-                                                              title: '網路 ATM',
-                                                              value: 'web_atm',
-                                                            },
-                                                            {
-                                                              title: '超商代碼',
-                                                              value: 'c_code',
-                                                            },
-                                                            {
-                                                              title: '超商條碼',
-                                                              value: 'c_bar_code',
-                                                            },
-                                                          ],
-                                                          callback: (array: any) => {
-                                                            ['credit', 'atm', 'web_atm', 'c_code', 'c_bar_code'].map(
-                                                              dd => {
-                                                                (key_d as any)[dd] = !!array.find((d1: string) => {
-                                                                  return d1 === dd;
-                                                                });
-                                                              }
-                                                            );
-                                                          },
-                                                          type: 'multiple',
-                                                        }),
-                                                        BgWidget.editeInput({
-                                                          gvc: gvc,
-                                                          title: '特店編號',
-                                                          default: key_d.MERCHANT_ID,
-                                                          callback: text => {
-                                                            key_d.MERCHANT_ID = text;
-                                                          },
-                                                          placeHolder: '請輸入特店編號',
-                                                        }),
-                                                        BgWidget.editeInput({
-                                                          gvc: gvc,
-                                                          title: 'HASH_KEY',
-                                                          default: key_d.HASH_KEY,
-                                                          callback: text => {
-                                                            key_d.HASH_KEY = text;
-                                                          },
-                                                          placeHolder: '請輸入HASH_KEY',
-                                                        }),
-                                                        BgWidget.editeInput({
-                                                          gvc: gvc,
-                                                          title: 'HASH_IV',
-                                                          default: key_d.HASH_IV,
-                                                          callback: text => {
-                                                            key_d.HASH_IV = text;
-                                                          },
-                                                          placeHolder: '請輸入HASH_IV',
-                                                        }),
-                                                        BgWidget.editeInput({
-                                                          gvc: gvc,
-                                                          title: '信用卡授權檢查碼',
-                                                          default: key_d.CreditCheckCode,
-                                                          callback: text => {
-                                                            key_d.CreditCheckCode = text;
-                                                          },
-                                                          placeHolder: '請輸入信用卡檢查碼',
-                                                        }),
-                                                      ].join('');
-                                                    case 'paypal':
-                                                      return [
-                                                        BgWidget.inlineCheckBox({
-                                                          title: '串接路徑',
-                                                          gvc: gvc,
-                                                          def: `${key_d.BETA}`,
-                                                          array: [
-                                                            {
-                                                              title: '正式站',
-                                                              value: `false`,
-                                                            },
-                                                            {
-                                                              title: '測試站',
-                                                              value: `true`,
-                                                            },
-                                                          ],
-                                                          callback: (text: any) => {
-                                                            key_d.BETA = text;
-                                                          },
-                                                        }),
-                                                        BgWidget.editeInput({
-                                                          gvc: gvc,
-                                                          title: 'CLIENT_ID',
-                                                          default: key_d.PAYPAL_CLIENT_ID,
-                                                          callback: text => {
-                                                            key_d.PAYPAL_CLIENT_ID = text;
-                                                          },
-                                                          placeHolder: '請輸入CLIENT_ID',
-                                                        }),
-                                                        BgWidget.editeInput({
-                                                          gvc: gvc,
-                                                          title: 'SECRET',
-                                                          default: key_d.PAYPAL_SECRET,
-                                                          callback: text => {
-                                                            key_d.PAYPAL_SECRET = text;
-                                                          },
-                                                          placeHolder: '請輸入SECRET',
-                                                        }),
-                                                      ].join('');
-                                                    case 'line_pay':
-                                                      return [
-                                                        BgWidget.inlineCheckBox({
-                                                          title: '串接路徑',
-                                                          gvc: gvc,
-                                                          def: `${key_d.BETA}`,
-                                                          array: [
-                                                            {
-                                                              title: '正式站',
-                                                              value: `false`,
-                                                            },
-                                                            {
-                                                              title: '測試站',
-                                                              value: `true`,
-                                                            },
-                                                          ],
-                                                          callback: (text: any) => {
-                                                            key_d.BETA = text;
-                                                          },
-                                                        }),
-                                                        BgWidget.editeInput({
-                                                          gvc: gvc,
-                                                          title: 'CLIENT_ID',
-                                                          default: key_d.CLIENT_ID,
-                                                          callback: text => {
-                                                            key_d.CLIENT_ID = text;
-                                                          },
-                                                          placeHolder: '請輸入CLIENT_ID',
-                                                        }),
-                                                        BgWidget.editeInput({
-                                                          gvc: gvc,
-                                                          title: 'SECRET',
-                                                          default: key_d.SECRET,
-                                                          callback: text => {
-                                                            key_d.SECRET = text;
-                                                          },
-                                                          placeHolder: '請輸入SECRET',
-                                                        }),
-                                                      ].join('');
-                                                    case 'jkopay':
-                                                      return [
-                                                        BgWidget.editeInput({
-                                                          gvc: gvc,
-                                                          title: 'STORE_ID',
-                                                          default: key_d.STORE_ID,
-                                                          callback: text => {
-                                                            key_d.STORE_ID = text;
-                                                          },
-                                                          placeHolder: '請輸入STORE_ID',
-                                                        }),
-                                                      ].join('');
-                                                    case 'paynow':
-                                                      return [
-                                                        BgWidget.inlineCheckBox({
-                                                          title: '串接路徑',
-                                                          gvc: gvc,
-                                                          def: `${key_d.BETA}`,
-                                                          array: [
-                                                            {
-                                                              title: '正式站',
-                                                              value: `false`,
-                                                            },
-                                                            {
-                                                              title: '測試站',
-                                                              value: `true`,
-                                                            },
-                                                          ],
-                                                          callback: (text: any) => {
-                                                            key_d.BETA = text;
-                                                          },
-                                                        }),
-                                                        BgWidget.editeInput({
-                                                          gvc: gvc,
-                                                          title: '串接帳號',
-                                                          default: key_d.account,
-                                                          callback: text => {
-                                                            key_d.account = text;
-                                                          },
-                                                          placeHolder: '請輸入串接帳號',
-                                                        }),
-                                                        BgWidget.editeInput({
-                                                          gvc: gvc,
-                                                          title: '串接密碼',
-                                                          default: key_d.pwd,
-                                                          callback: text => {
-                                                            key_d.pwd = text;
-                                                          },
-                                                          placeHolder: '請輸入串接密碼',
-                                                        }),
-                                                      ].join('');
-                                                  }
-                                                  return '';
-                                                })()}
-                                              </div>`,
-                                          };
-
-                                          const shipment = {
-                                            key: 'shipment',
-                                            title: '指定物流',
-                                            html: gvc.bindView({
-                                              bind: gvc.glitter.getUUID(),
-                                              view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, key_d),
-                                            }),
-                                          };
-
-                                          const cartSetting = {
-                                            key: 'cartSetting',
-                                            title: '購物車設定',
-                                            html: gvc.bindView({
-                                              bind: gvc.glitter.getUUID(),
-                                              view: () => ShoppingFinanceSetting.setCartSetting(gvc, key_d),
-                                            }),
-                                          };
+                dialog.dataLoading({ visible: false });
+                this.refresh();
+              }
+            }
+          },
+        });
+      });
 
-                                          return ShoppingFinanceSetting.tabView(gvc, [setting, shipment, cartSetting]);
-                                        } catch (e) {
-                                          console.error(e);
-                                          return `${e}`;
-                                        }
-                                      },
-                                      footer_html: gvc => {
-                                        return [
-                                          BgWidget.cancel(
-                                            gvc.event(() => {
-                                              keyData = cloneData;
-                                              gvc.closeDialog();
-                                            })
-                                          ),
-                                          BgWidget.save(
-                                            gvc.event(() => {
-                                              //綠界支付的測試版切換
-                                              if (
-                                                payData.key == 'ecPay' &&
-                                                key_d.ActionURL ==
-                                                  'https://payment-stage.ecpay.com.tw/Cashier/AioCheckOut/V5'
-                                              ) {
-                                                key_d.MERCHANT_ID = '3002607';
-                                                key_d.HASH_KEY = 'pwFHCqoQZGmho4w6';
-                                                key_d.HASH_IV = 'EkRm7iFT261dpevs';
-                                              }
-                                              keyData[payData.key] = key_d;
-                                              saveData();
-                                              gvc.closeDialog();
-                                            })
-                                          ),
-                                        ].join('');
-                                      },
-                                      closeCallback: () => {
-                                        keyData = cloneData;
-                                      },
-                                    });
-                                  }),
-                                })}
-                              </div>
-                            </div>
-                          </div>`;
-                        })
-                        .join('')}
-                    </div>`;
-                }
+    // 預設的金流按鈕列表
+    const keyMap: (key: string) => string[] = key => {
+      const maps: Record<string, string[]> = {
+        atm: this.atm(gvc, key, keyData),
+        line: this.lineIPassMoney(gvc, key, keyData),
+        cash_on_delivery: this.cashOnDelivery(gvc, key, keyData),
+      };
 
-                // 線下金流
-                if (vm.page === 'offline') {
-                  const offlinePayArray = [
-                    // 系統線下金流
-                    ...PaymentConfig.defalutOfflinePay,
-                    // 自訂線下金流
-                    ...keyData.payment_info_custom.map((dd: any) => {
-                      return {
-                        key: dd.id,
-                        name: html`${Language.getLanguageCustomText(dd.name)}`,
-                        custom: true,
-                      };
-                    }),
-                  ];
-
-                  h = html` <div class="px-md-0 px-2 mb-2">
-                      ${BgWidget.normalInsignia(
-                        '透過設定線下金流，結帳後訂單將進入手動核款的流程，亦可使用超商取貨付款'
-                      )}
-                    </div>
-                    <div class="row m-0">
-                      ${offlinePayArray
-                        .map((dd: any) => {
-                          return html` <div class="col-12 col-lg-3 col-md-4 p-0 p-md-2">
-                            <div
-                              class="w-100 position-relative main-card "
-                              style=" background: white; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: flex-start;gap:10px;  display: inline-flex;"
-                            >
-                              <div
-                                class="pt-4"
-                                style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 28px; display: inline-flex"
-                              >
-                                <div style="min-width: 46px;max-width: 46px;">
-                                  ${dd.img
-                                    ? html`<img class="rounded-2" src="${dd.img}" />`
-                                    : html`<i class="fa-regular fa-puzzle-piece-simple fs-4" aria-hidden="true"></i>`}
-                                </div>
-                                <div
-                                  style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: inline-flex"
-                                >
-                                  <div class="tx_normal">${dd.name}</div>
-                                  <div class="d-flex align-items-center" style="gap:4px;">
-                                    <div class="tx_normal">
-                                      ${(keyData.off_line_support as any)[dd.key] ? `開啟` : `關閉`}
-                                    </div>
-                                    <div class="cursor_pointer form-check form-switch" style="margin-top: 10px;">
-                                      <input
-                                        class="form-check-input"
-                                        type="checkbox"
-                                        onchange="${gvc.event((e, event) => {
-                                          (keyData.off_line_support as any)[dd.key] = !(
-                                            keyData.off_line_support as any
-                                          )[dd.key];
-                                          saveData();
-                                        })}"
-                                        ${(keyData.off_line_support as any)[dd.key] ? `checked` : ''}
-                                      />
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <div
-                                class=" position-absolute ${dd.hide_setting ? `d-none` : ''}"
-                                style="right:10px;top:10px;"
-                              >
-                                ${BgWidget.customButton({
-                                  button: {
-                                    color: 'gray',
-                                    size: 'sm',
-                                  },
-                                  text: {
-                                    name: '金流設定',
-                                  },
-                                  event: gvc.event(() => {
-                                    if (dd.custom) {
-                                      updateCustomFinance({
-                                        function: 'replace',
-                                        data: keyData.payment_info_custom.find((d1: any) => dd.key === d1.id),
-                                      });
-                                      return;
-                                    }
+      return maps[key] || [];
+    };
 
-                                    BgWidget.settingDialog({
-                                      gvc: gvc,
-                                      title: '金流設定',
-                                      width: 800,
-                                      innerHTML: gvc => {
-                                        const keyMap: Record<string, string> = {
-                                          atm: this.atm(gvc, keyData),
-                                          line: this.lineIPassMoney(gvc, keyData),
-                                          cash_on_delivery: this.cashOnDelivery(gvc, keyData),
-                                        };
-                                        return html`<div>${keyMap[dd.key] || ''}</div>`;
-                                      },
-                                      footer_html: gvc => {
-                                        return [
-                                          BgWidget.cancel(
-                                            gvc.event(() => {
-                                              keyData = cloneData;
-                                              gvc.closeDialog();
-                                            })
-                                          ),
-                                          BgWidget.save(
-                                            gvc.event(() => {
-                                              saveData();
-                                              gvc.closeDialog();
-                                            })
-                                          ),
-                                        ].join('');
-                                      },
-                                      closeCallback: () => {
-                                        keyData = cloneData;
-                                      },
-                                    });
-                                  }),
-                                })}
-                              </div>
-                            </div>
-                          </div>`;
-                        })
-                        .join('')}
-                      <div
-                        class="col-12 col-lg-3 col-md-4 p-0 p-md-2"
-                        style="cursor: pointer;"
-                        onclick="${gvc.event(() => {
-                          updateCustomFinance({ function: 'plus' });
-                        })}"
-                      >
-                        <div
-                          class="w-100 main-card"
-                          style="min-height:119.09px;padding: 24px; background: white; overflow: hidden; flex-direction: column; justify-content: center; align-items: center; gap: 18px; display: inline-flex"
-                        >
-                          <div
-                            class="fw-bold"
-                            style="align-self: stretch; justify-content: center; align-items: center; gap: 14px; display: inline-flex;color:#4D86DB;"
-                          >
-                            <i class="fa-regular fa-circle-plus fs-5"></i>
-                            <div class="fs-5">新增自訂付款</div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>`;
-                }
+    return html` <div class="px-md-0 px-2 mb-2">
+        ${BgWidget.normalInsignia('透過設定線下金流，結帳後訂單將進入手動核款的流程，亦可使用超商取貨付款')}
+      </div>
+      <div class="row m-0">
+        ${offlinePayArray
+          .map((dd: any) => {
+            keyData[dd.key] = keyData[dd.key] ?? {};
+
+            const button_action = dd.custom
+              ? offlineCustomFinance({
+                  function: 'replace',
+                  data: keyData.payment_info_custom.find((d1: any) => dd.key === d1.id),
+                }).map(item => {
+                  return BgWidget.customButton(item);
+                })
+              : keyMap(dd.key) || [];
+
+            return this.card({
+              title: dd.name,
+              img: dd.img
+                ? html`<img class="rounded-2" src="${dd.img}" />`
+                : html`<i class="fa-regular fa-puzzle-piece-simple fs-4" aria-hidden="true"></i>`,
+              toggle: keyData.off_line_support[dd.key],
+              toggleEvent: gvc.event(() => {
+                keyData.off_line_support[dd.key] = !keyData.off_line_support[dd.key];
+                saveData();
+              }),
+              buttonAction: button_action,
+              deleteEvent: dd.custom ? deleteEvent(dd.key) : undefined,
+            });
+          })
+          .join('')}
+        ${this.addCard('新增自訂付款', offlineCustomFinance({ function: 'plus' })[0].event)}
+      </div>`;
+  }
 
-                // POS
-                if (vm.page === 'pos') {
-                  h = html`<div class="px-md-0 px-2 mb-2">
-                      ${BgWidget.normalInsignia('設定實體店面所需串接的付款方式')}
-                    </div>
-                    <div class="row m-0">
-                      ${PaymentConfig.onlinePay
-                        .filter(item => item.type === 'pos')
-                        .map(dd => {
-                          return html` <div class="col-12 col-lg-3 col-md-4 p-0 p-md-2">
-                            <div
-                              class="w-100 position-relative main-card"
-                              style=" background: white; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; display: inline-flex;"
-                            >
-                              <div
-                                class="pt-4"
-                                style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 28px; display: inline-flex"
-                              >
-                                <div style="min-width: 46px;max-width: 46px;">
-                                  <img src="${dd.img || BgWidget.noImageURL}" />
-                                </div>
-                                <div
-                                  style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: inline-flex"
-                                >
-                                  <div class="tx_normal">${dd.name}</div>
-                                  <div class="d-flex align-items-center" style="gap:4px;">
-                                    <div class="tx_normal">${keyData[dd.key].toggle ? `開啟` : `關閉`}</div>
-                                    <div class="cursor_pointer form-check form-switch" style="margin-top: 10px;">
-                                      <input
-                                        class="form-check-input"
-                                        type="checkbox"
-                                        onchange="${gvc.event(() => {
-                                          keyData[dd.key].toggle = !keyData[dd.key].toggle;
-                                          saveData();
-                                        })}"
-                                        ${keyData[dd.key].toggle ? `checked` : ''}
-                                      />
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
+  // POS 金流卡片
+  static posPayment(
+    gvc: GVC,
+    keyData: any,
+    saveData: () => void,
+    posCustomFinance: (obj: EditCustomFinance) => CustomButtonObject[]
+  ) {
+    const dialog = new ShareDialog(gvc.glitter);
+    const saasConfig = this.saasConfig;
+
+    const posCashflow = [
+      // 系統 POS 金流
+      ...PaymentConfig.onlinePay.filter(item => item.type === 'pos'),
+      // 自訂 POS 金流
+      ...keyData.payment_info_custom
+        .filter((dd: any) => {
+          return dd.type === 'pos';
+        })
+        .map((dd: any) => {
+          return {
+            key: dd.id,
+            name: dd.name,
+            type: 'pos',
+            custom: true,
+            img: html`<i class="fa-regular fa-puzzle-piece-simple fs-4"></i>`,
+          };
+        }),
+    ];
+
+    const deleteEvent = (key: string) =>
+      gvc.event(() => {
+        dialog.checkYesOrNot({
+          text: '是否確認刪除此金流？',
+          callback: async response => {
+            if (response) {
+              const data = await saasConfig.api.getPrivateConfig(saasConfig.config.appName, 'glitter_finance');
+              if (data.response.result[0]) {
+                const keyData = data.response.result[0].value;
+
+                keyData.payment_info_custom = keyData.payment_info_custom.filter((d1: any) => {
+                  return key !== d1.id;
+                });
 
-                              <div class="position-absolute" style="right:10px;top:10px;">
-                                ${BgWidget.customButton({
-                                  button: {
-                                    color: 'gray',
-                                    size: 'sm',
-                                  },
-                                  text: {
-                                    name: '金流設定',
-                                  },
-                                  event: gvc.event(() => {
-                                    const payData = dd;
-                                    const key_d = structuredClone(keyData[payData.key]);
-                                    BgWidget.settingDialog({
-                                      gvc: gvc,
-                                      title: '金流設定',
-                                      width: 800,
-                                      innerHTML: (gvc: GVC) => {
-                                        try {
-                                          return html`<div>
-                                            ${(() => {
-                                              switch (payData.key) {
-                                                case 'line_pay_scan':
-                                                  return this.linePayScan(gvc, key_d);
-                                                case 'ut_credit_card':
-                                                  return this.utCreditCard(gvc, key_d);
-                                              }
-                                              return '';
-                                            })()}
-                                          </div>`;
-                                        } catch (error) {
-                                          console.error(error);
-                                          return '';
-                                        }
-                                      },
-                                      footer_html: gvc => {
-                                        return [
-                                          BgWidget.cancel(
-                                            gvc.event(() => {
-                                              keyData = cloneData;
-                                              gvc.closeDialog();
-                                            })
-                                          ),
-                                          BgWidget.save(
-                                            gvc.event(() => {
-                                              keyData[payData.key] = key_d;
-                                              saveData();
-                                              gvc.closeDialog();
-                                            })
-                                          ),
-                                        ].join('');
-                                      },
-                                      closeCallback: () => {
-                                        keyData = cloneData;
-                                      },
-                                    });
-                                  }),
-                                })}
-                              </div>
-                            </div>
-                          </div>`;
-                        })
-                        .join('')}
-                    </div>`;
-                }
+                dialog.dataLoading({ visible: true });
+                saasConfig.api.setPrivateConfig(saasConfig.config.appName, 'glitter_finance', keyData);
 
-                return [
-                  pos
-                    ? ''
-                    : BgWidget.tab(
-                        [
-                          { key: 'online', title: '線上金流' },
-                          { key: 'offline', title: '線下金流' },
-                        ],
-                        gvc,
-                        vm.page,
-                        (key: any) => {
-                          vm.page = key;
-                          gvc.notifyDataChange(vm.id);
-                        }
-                      ),
-                  h,
-                ].join('');
-              } catch (e) {
-                console.error(e);
-                return `${e}`;
+                dialog.dataLoading({ visible: false });
+                this.refresh();
               }
-            },
-            onCreate: () => {
-              if (vm.loading) {
-                return new Promise<void>(async resolve => {
-                  const data = await saasConfig.api.getPrivateConfig(saasConfig.config.appName, 'glitter_finance');
-                  if (data.response.result[0]) {
-                    keyData = {
-                      ...keyData,
-                      ...data.response.result[0].value,
-                    };
-                  }
-                  resolve();
-                }).then(() => {
-                  vm.loading = false;
-                  gvc.notifyDataChange(vm.id);
+            }
+          },
+        });
+      });
+
+    return html`<div class="px-md-0 px-2 mb-2">${BgWidget.normalInsignia('設定實體店面所需串接的付款方式')}</div>
+      <div class="row m-0">
+        ${posCashflow
+          .map(dd => {
+            keyData[dd.key] = keyData[dd.key] ?? {};
+
+            const data = structuredClone(keyData[dd.key]);
+            const button_action: string[] = (() => {
+              if (dd.custom) {
+                return posCustomFinance({
+                  function: 'replace',
+                  data: keyData.payment_info_custom.find((d1: any) => dd.key === d1.id),
+                }).map(item => {
+                  return BgWidget.customButton(item);
                 });
-              } else {
-                const handleBeforeUnload = (e: any) => {
-                  e.preventDefault();
-                  e.returnValue = '您確定要離開金流設定嗎？您將會失去未儲存的更改';
-                };
-                (window.parent as any).document.addEventListener('beforeunload', handleBeforeUnload);
               }
-            },
-          }),
-        ].join('')}
-        ${pos ? '' : BgWidget.mbContainer(240)}
-      `,
-      {
-        style: pos ? `margin-top: 0px !important;` : '',
-      }
-    );
+              if (dd.key === 'line_pay_scan') {
+                return this.linePayScan(gvc, dd.key, data);
+              }
+              if (dd.key === 'ut_credit_card') {
+                return this.utCreditCard(gvc, dd.key, data);
+              }
+              return [];
+            })();
+
+            return this.card({
+              title: dd.name,
+              img: dd.img.includes('fa-puzzle-piece') ? dd.img : html`<img src="${dd.img || BgWidget.noImageURL}" />`,
+              toggle: keyData[dd.key].toggle,
+              toggleEvent: gvc.event(() => {
+                keyData[dd.key].toggle = !keyData[dd.key].toggle;
+                saveData();
+              }),
+              buttonAction: button_action,
+              deleteEvent: dd.custom ? deleteEvent(dd.key) : undefined,
+            });
+          })
+          .join('')}
+        ${this.addCard('新增自訂付款', posCustomFinance({ function: 'plus' })[0].event)}
+      </div>`;
   }
 
   // 分頁模組
@@ -1001,12 +598,73 @@ export class ShoppingFinanceSetting {
     });
   }
 
+  // 金物流 Dialog
+  static settingDialog(
+    gvc: GVC,
+    title: string,
+    innerHTML: (gvc: GVC) => string,
+    footerHTML: (gvc: GVC) => string,
+    closeCallback: () => void
+  ) {
+    return BgWidget.settingDialog({
+      gvc,
+      title,
+      innerHTML: gvc => innerHTML(gvc),
+      footer_html: gvc => footerHTML(gvc),
+      closeCallback: closeCallback,
+    });
+  }
+
+  // 系統預設按鈕條列
+  static buttonListView(
+    gvc: GVC,
+    key: string,
+    keyData: any,
+    viewList: { key: string; title: string; html: (gvc: GVC) => string }[]
+  ) {
+    return viewList.map(item => {
+      return BgWidget.customButton({
+        button: { color: 'gray', size: 'sm' },
+        text: { name: item.title },
+        event: gvc.event(async () => {
+          this.settingDialog(
+            gvc,
+            item.title,
+            gvc => html`<div>${item.html(gvc)}</div>`,
+            gvc => {
+              return [
+                BgWidget.cancel(gvc.event(() => this.refresh(gvc))),
+                BgWidget.save(
+                  gvc.event(async () => {
+                    try {
+                      const saasConfig = this.saasConfig;
+                      const data = await saasConfig.api.getPrivateConfig(saasConfig.config.appName, 'glitter_finance');
+
+                      data.response.result[0].value[key] = keyData;
+                      saasConfig.api
+                        .setPrivateConfig(saasConfig.config.appName, 'glitter_finance', data.response.result[0].value)
+                        .then(() => this.refresh(gvc));
+                    } catch (error) {
+                      console.error(error);
+                      gvc.closeDialog();
+                    }
+                  })
+                ),
+              ].join('');
+            },
+            () => this.refresh(gvc)
+          );
+        }),
+      });
+    });
+  }
+
   // 自訂物流設定
   static async setShipmentSupport(gvc: GVC, data: Record<string, any>) {
     const id = gvc.glitter.getUUID();
-
-    const saasConfig: { config: any; api: any } = (window.parent as any).saasConfig;
+    const saasConfig = this.saasConfig;
     const logiData = await saasConfig.api.getPrivateConfig(saasConfig.config.appName, 'logistics_setting');
+
     const custom_delivery: any[] = (() => {
       try {
         return logiData?.response?.result[0]?.value?.custom_delivery || [];
@@ -1031,26 +689,16 @@ export class ShoppingFinanceSetting {
     return html`<div class="w-100">
       <div class="d-flex align-items-center mt-2 gap-2">
         ${BgWidget.customButton({
-          button: {
-            color: 'snow',
-            size: 'sm',
-          },
-          text: {
-            name: '全部開啟',
-          },
+          button: { color: 'snow', size: 'sm' },
+          text: { name: '全部開啟' },
           event: gvc.event(() => {
             data.shipmentSupport = allDelivery.map(d => d.value);
             gvc.notifyDataChange(id);
           }),
         })}
         ${BgWidget.customButton({
-          button: {
-            color: 'snow',
-            size: 'sm',
-          },
-          text: {
-            name: '全部關閉',
-          },
+          button: { color: 'snow', size: 'sm' },
+          text: { name: '全部關閉' },
           event: gvc.event(() => {
             data.shipmentSupport = [];
             gvc.notifyDataChange(id);
@@ -1096,7 +744,7 @@ export class ShoppingFinanceSetting {
                           style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: inline-flex"
                         >
                           <div class="tx_normal">${dd.title}</div>
-                          <div class="d-flex align-items-center" style="gap:4px;">
+                          <div class="d-flex align-items-center" style="gap: 4px;">
                             <div class="tx_normal">${trigger ? '開啟' : '關閉'}</div>
                             <div class="cursor_pointer form-check form-switch" style="margin-top: 10px;">
                               <input
@@ -1193,52 +841,56 @@ export class ShoppingFinanceSetting {
       bind: id,
       view: () => {
         return [
-          html`<div class="d-flex align-items-center mt-2 gap-2 mb-2">
-            <div class="tx_700">是否啟用此${t}流的計算公式包含</div>
-            ${questionDialog(
-              html`<div style="white-space: normal;">
-                  訂單總金額的公式為：<br />
-                  「總金額(T) = 所有商品小計(A) - 購物金折抵(B) - 優惠券折抵(C) + 運費(D)」
-                </div>
-                ${BgWidget.mbContainer(12)}
-                <div style="white-space: normal;">勾選的項目會列為「限制使用此${t}流」的公式判斷</div>
-                ${BgWidget.mbContainer(12)}
-                <div style="white-space: normal;">
-                  範例：僅勾選「運費」，顧客購物車消費的總金額依然是 A-B-C+D<br />
-                  但此${t}流是否能使用的公式會是 A+D
-                </div>
-                ${BgWidget.mbContainer(12)}
-                <div style="white-space: normal;">
-                  若 A+D 有在最低和最高消費金額的區間內<br />
-                  則顧客可以使用此${t}流進行結帳
-                </div>`
-            )}
-          </div>`,
-          BgWidget.multiCheckboxContainer(
-            gvc,
-            [
-              {
-                key: 'use_rebate',
-                name: '購物金折抵',
-              },
-              {
-                key: 'discount',
-                name: '優惠券折抵',
-              },
-              {
-                key: 'shipment_fee',
-                name: '運費',
+          [
+            html`<div class="d-flex align-items-center gap-2">
+              <div class="tx_700">金額計算規則</div>
+              ${questionDialog(
+                html`<div style="white-space: normal;">
+                    訂單總金額的公式為：<br />
+                    「總金額(T) = 所有商品小計(A) - 購物金折抵(B) - 優惠券折抵(C) + 運費(D)」
+                  </div>
+                  ${BgWidget.mbContainer(12)}
+                  <div style="white-space: normal;">勾選的項目會列為「限制使用此${t}流」的公式判斷</div>
+                  ${BgWidget.mbContainer(12)}
+                  <div style="white-space: normal;">
+                    範例：僅勾選「運費」，顧客購物車消費的總金額依然是 A-B-C+D<br />
+                    但此${t}流是否能使用的公式會是 A+D
+                  </div>
+                  ${BgWidget.mbContainer(12)}
+                  <div style="white-space: normal;">
+                    若 A+D 有在最低和最高消費金額的區間內<br />
+                    則顧客可以使用此${t}流進行結帳
+                  </div>`
+              )}
+            </div>`,
+            BgWidget.grayNote('系統會依據您選擇的規則計算訂單金額，再判斷是否達到以下門檻'),
+            BgWidget.mbContainer(8),
+            BgWidget.multiCheckboxContainer(
+              gvc,
+              [
+                {
+                  key: 'use_rebate',
+                  name: '含購物金折抵',
+                },
+                {
+                  key: 'discount',
+                  name: '含優惠券折抵',
+                },
+                {
+                  key: 'shipment_fee',
+                  name: '含運費',
+                },
+              ],
+              data.cartSetting.orderFormula,
+              result => {
+                data.cartSetting.orderFormula = result;
               },
-            ],
-            data.cartSetting.orderFormula,
-            result => {
-              data.cartSetting.orderFormula = result;
-            },
-            { single: false }
-          ),
+              { single: false }
+            ),
+          ].join(''),
           BgWidget.editeInput({
             gvc: gvc,
-            title: html`<div class="d-flex align-items-center mt-3 gap-2">最低消費金額（輸入 0 則沒有限制）</div>
+            title: html`<div class="tx_700">最低消費門檻 (輸入 0 則沒有限制)</div>
               ${BgWidget.grayNote(`購物車需達到此金額，才可使用此${t}流`)}`,
             default: `${data.cartSetting.minimumTotal}`,
             type: 'number',
@@ -1249,7 +901,7 @@ export class ShoppingFinanceSetting {
           }),
           BgWidget.editeInput({
             gvc: gvc,
-            title: html`<div class="d-flex align-items-center mt-3 gap-2">最高消費金額（輸入 0 則沒有限制）</div>
+            title: html`<div class="tx_700">最高消費門檻 (輸入 0 則沒有限制)</div>
               ${BgWidget.grayNote(`購物車需低於此金額，才可使用此${t}流`)}`,
             default: `${data.cartSetting.maximumTotal}`,
             type: 'number',
@@ -1261,124 +913,453 @@ export class ShoppingFinanceSetting {
           BgWidget.horizontalLine({ margin: 1.5 }),
           BgWidget.editeInput({
             gvc: gvc,
-            title: html`<div class="mt-3" style="white-space: break-spaces;">滿額免運（輸入 0 則不啟用）</div>
-              ${BgWidget.grayNote('購物車達到此金額即享有免運優惠')}`,
-            default: `${data.cartSetting.freeShipmnetTarget}`,
-            type: 'number',
+            title: html`<div class="tx_700">滿額免運 (輸入 0 則不啟用)</div>
+              ${BgWidget.grayNote('購物車達到此金額即享有免運優惠')}`,
+            default: `${data.cartSetting.freeShipmnetTarget}`,
+            type: 'number',
+            callback: text => {
+              checkTotalNumber(text, 'freeShipmnet');
+            },
+            placeHolder: '請輸入金額',
+          }),
+        ].join(BgWidget.mbContainer(18));
+      },
+    });
+  }
+
+  // 藍新 & 綠界表單
+  static ePayForm(gvc: GVC, key_d: any, brand: 'newWebPay' | 'ecPay') {
+    return [
+      BgWidget.inlineCheckBox({
+        title: '串接路徑',
+        gvc: gvc,
+        def: key_d.ActionURL,
+        array: (() => {
+          if (brand === 'newWebPay') {
+            return [
+              {
+                title: '正式站',
+                value: 'https://core.newebpay.com/MPG/mpg_gateway',
+              },
+              {
+                title: '測試站',
+                value: 'https://ccore.newebpay.com/MPG/mpg_gateway',
+              },
+            ];
+          } else {
+            return [
+              {
+                title: '正式站',
+                value: 'https://payment.ecpay.com.tw/Cashier/AioCheckOut/V5',
+              },
+              {
+                title: '測試站',
+                value: 'https://payment-stage.ecpay.com.tw/Cashier/AioCheckOut/V5',
+              },
+            ];
+          }
+        })(),
+        callback: (text: any) => {
+          key_d.ActionURL = text;
+        },
+      }),
+      BgWidget.inlineCheckBox({
+        title: '開通付款方式',
+        gvc: gvc,
+        def: ['credit', 'atm', 'web_atm', 'c_code', 'c_bar_code'].filter(dd => {
+          return (key_d as any)[dd];
+        }),
+        array: [
+          {
+            title: '信用卡',
+            value: 'credit',
+          },
+          {
+            title: '一般 ATM',
+            value: 'atm',
+          },
+          {
+            title: '網路 ATM',
+            value: 'web_atm',
+          },
+          {
+            title: '超商代碼',
+            value: 'c_code',
+          },
+          {
+            title: '超商條碼',
+            value: 'c_bar_code',
+          },
+        ],
+        callback: (array: any) => {
+          ['credit', 'atm', 'web_atm', 'c_code', 'c_bar_code'].map(dd => {
+            (key_d as any)[dd] = !!array.find((d1: string) => {
+              return d1 === dd;
+            });
+          });
+        },
+        type: 'multiple',
+      }),
+      BgWidget.editeInput({
+        gvc: gvc,
+        title: '商店代號',
+        default: key_d.MERCHANT_ID,
+        callback: text => {
+          key_d.MERCHANT_ID = text;
+        },
+        placeHolder: '請輸入商店代號',
+      }),
+      BgWidget.editeInput({
+        gvc: gvc,
+        title: 'HASH_KEY',
+        default: key_d.HASH_KEY,
+        callback: text => {
+          key_d.HASH_KEY = text;
+        },
+        placeHolder: '請輸入HASH_KEY',
+      }),
+      BgWidget.editeInput({
+        gvc: gvc,
+        title: 'HASH_IV',
+        default: key_d.HASH_IV,
+        callback: text => {
+          key_d.HASH_IV = text;
+        },
+        placeHolder: '請輸入HASH_IV',
+      }),
+      BgWidget.editeInput({
+        gvc: gvc,
+        title: '信用卡授權檢查碼',
+        default: key_d.CreditCheckCode,
+        callback: text => {
+          key_d.CreditCheckCode = text;
+        },
+        placeHolder: '請輸入信用卡檢查碼',
+      }),
+    ].join('');
+  }
+
+  // Paypal 表單
+  static paypalForm(gvc: GVC, key_d: any) {
+    return [
+      BgWidget.inlineCheckBox({
+        title: '串接路徑',
+        gvc: gvc,
+        def: `${key_d.BETA}`,
+        array: [
+          {
+            title: '正式站',
+            value: `false`,
+          },
+          {
+            title: '測試站',
+            value: `true`,
+          },
+        ],
+        callback: (text: any) => {
+          key_d.BETA = text;
+        },
+      }),
+      BgWidget.editeInput({
+        gvc: gvc,
+        title: 'CLIENT_ID',
+        default: key_d.PAYPAL_CLIENT_ID,
+        callback: text => {
+          key_d.PAYPAL_CLIENT_ID = text;
+        },
+        placeHolder: '請輸入CLIENT_ID',
+      }),
+      BgWidget.editeInput({
+        gvc: gvc,
+        title: 'SECRET',
+        default: key_d.PAYPAL_SECRET,
+        callback: text => {
+          key_d.PAYPAL_SECRET = text;
+        },
+        placeHolder: '請輸入SECRET',
+      }),
+    ].join('');
+  }
+
+  // Line Pay 表單
+  static linepayForm(gvc: GVC, key_d: any) {
+    return [
+      BgWidget.inlineCheckBox({
+        title: '串接路徑',
+        gvc: gvc,
+        def: `${key_d.BETA}`,
+        array: [
+          {
+            title: '正式站',
+            value: `false`,
+          },
+          {
+            title: '測試站',
+            value: `true`,
+          },
+        ],
+        callback: (text: any) => {
+          key_d.BETA = text;
+        },
+      }),
+      BgWidget.editeInput({
+        gvc: gvc,
+        title: 'CLIENT_ID',
+        default: key_d.CLIENT_ID,
+        callback: text => {
+          key_d.CLIENT_ID = text;
+        },
+        placeHolder: '請輸入CLIENT_ID',
+      }),
+      BgWidget.editeInput({
+        gvc: gvc,
+        title: 'SECRET',
+        default: key_d.SECRET,
+        callback: text => {
+          key_d.SECRET = text;
+        },
+        placeHolder: '請輸入SECRET',
+      }),
+    ].join('');
+  }
+
+  // 街口表單
+  static jkopayForm(gvc: GVC, key_d: any) {
+    return [
+      BgWidget.editeInput({
+        gvc: gvc,
+        title: 'STORE_ID',
+        default: key_d.STORE_ID,
+        callback: text => {
+          key_d.STORE_ID = text;
+        },
+        placeHolder: '請輸入STORE_ID',
+      }),
+    ].join('');
+  }
+
+  // Paynow 表單
+  static paynowForm(gvc: GVC, key_d: any) {
+    return [
+      BgWidget.inlineCheckBox({
+        title: '串接路徑',
+        gvc: gvc,
+        def: `${key_d.BETA}`,
+        array: [
+          {
+            title: '正式站',
+            value: `false`,
+          },
+          {
+            title: '測試站',
+            value: `true`,
+          },
+        ],
+        callback: (text: any) => {
+          key_d.BETA = text;
+        },
+      }),
+      BgWidget.editeInput({
+        gvc: gvc,
+        title: '串接帳號',
+        default: key_d.account,
+        callback: text => {
+          key_d.account = text;
+        },
+        placeHolder: '請輸入串接帳號',
+      }),
+      BgWidget.editeInput({
+        gvc: gvc,
+        title: '串接密碼',
+        default: key_d.pwd,
+        callback: text => {
+          key_d.pwd = text;
+        },
+        placeHolder: '請輸入串接密碼',
+      }),
+    ].join('');
+  }
+
+  // 彈窗: 線上付款
+  static formatOnlinePayList(gvc: GVC, key: string, key_d: any) {
+    const setting = {
+      key: 'setting',
+      title: '基本設定',
+      html: (gvc: GVC) => {
+        return html` ${BgWidget.editeInput({
+            gvc: gvc,
+            title: html`<div>自訂金流名稱 ${BgWidget.grayNote('未輸入則參照預設')}</div>`,
+            default: key_d.custome_name,
             callback: text => {
-              checkTotalNumber(text, 'freeShipmnet');
+              key_d.custome_name = text;
             },
-            placeHolder: '請輸入金額',
-          }),
-        ].join('');
+            placeHolder: '請輸入自訂顯示名稱',
+            global_language: true,
+          })}
+          <div style="margin-top: 8px;">
+            ${(() => {
+              switch (key) {
+                case 'newWebPay':
+                case 'ecPay':
+                  return this.ePayForm(gvc, key_d, key);
+                case 'paypal':
+                  return this.paypalForm(gvc, key_d);
+                case 'line_pay':
+                  return this.linepayForm(gvc, key_d);
+                case 'jkopay':
+                  return this.jkopayForm(gvc, key_d);
+                case 'paynow':
+                  return this.paynowForm(gvc, key_d);
+              }
+              return '';
+            })()}
+          </div>`;
       },
-    });
+    };
+
+    const shipment = {
+      key: 'shipment',
+      title: '指定物流',
+      html: (gvc: GVC) => {
+        return gvc.bindView({
+          bind: gvc.glitter.getUUID(),
+          view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, key_d),
+        });
+      },
+    };
+
+    const cartSetting = {
+      key: 'cartSetting',
+      title: '購物車設定',
+      html: (gvc: GVC) => {
+        return gvc.bindView({
+          bind: gvc.glitter.getUUID(),
+          view: () => ShoppingFinanceSetting.setCartSetting(gvc, key_d),
+        });
+      },
+    };
+
+    return this.buttonListView(gvc, key, key_d, [setting, shipment, cartSetting]);
   }
 
   // 彈窗: 貨到付款 (線下)
-  static cashOnDelivery(gvc: GVC, keyData: any) {
+  static cashOnDelivery(gvc: GVC, key: string, keyData: any) {
     keyData.cash_on_delivery = keyData.cash_on_delivery ?? { shipmentSupport: [] };
 
     const shipment = {
       key: 'shipment',
       title: '指定物流',
-      html: gvc.bindView({
-        bind: gvc.glitter.getUUID(),
-        view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, keyData.cash_on_delivery),
-      }),
+      html: (gvc: GVC) => {
+        return gvc.bindView({
+          bind: gvc.glitter.getUUID(),
+          view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, keyData.cash_on_delivery),
+        });
+      },
     };
 
     const cartSetting = {
       key: 'cartSetting',
       title: '購物車設定',
-      html: gvc.bindView({
-        bind: gvc.glitter.getUUID(),
-        view: () => ShoppingFinanceSetting.setCartSetting(gvc, keyData.cash_on_delivery),
-      }),
+      html: (gvc: GVC) => {
+        return gvc.bindView({
+          bind: gvc.glitter.getUUID(),
+          view: () => ShoppingFinanceSetting.setCartSetting(gvc, keyData.cash_on_delivery),
+        });
+      },
     };
 
-    return this.tabView(gvc, [shipment, cartSetting]);
+    return this.buttonListView(gvc, 'cash_on_delivery', keyData.cash_on_delivery, [shipment, cartSetting]);
   }
 
   // 彈窗: Line Pay 一卡通 (線下)
-  static lineIPassMoney(gvc: GVC, keyData: any) {
+  static lineIPassMoney(gvc: GVC, key: string, keyData: any) {
     keyData.payment_info_line_pay = keyData.payment_info_line_pay ?? { text: '' };
 
     const cashflow = {
       key: 'cashflow',
       title: '基本設定',
-      html: (() => {
-        const id = gvc.glitter.getUUID();
-        const defText = html`<p>
-            您選擇了線下Line
-            Pay付款。請完成付款後，提供證明截圖(圖一)，或是照著(圖二)的流程擷取『付款詳細資訊』並上傳，以便我們核款。&nbsp;
-          </p>
-          <p>
-            <br /><img
-              src="https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1722924978722-Frame%205078.png"
-              class="fr-fic fr-dii"
-              style="width: 215px;"
-            />&nbsp;<img
-              src="https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1722924973580-Frame%205058.png"
-              class="fr-fic fr-dii"
-              style="width: 545px;"
-            />
-          </p>
-          <p>
-            <br />
-          </p>`;
+      html: (gvc: GVC) => {
+        return (() => {
+          const id = gvc.glitter.getUUID();
+          const defText = html`<p>
+              您選擇了線下Line
+              Pay付款。請完成付款後，提供證明截圖(圖一)，或是照著(圖二)的流程擷取『付款詳細資訊』並上傳，以便我們核款。&nbsp;
+            </p>
+            <p>
+              <br /><img
+                src="https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1722924978722-Frame%205078.png"
+                class="fr-fic fr-dii"
+                style="width: 215px;"
+              />&nbsp;<img
+                src="https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1722924973580-Frame%205058.png"
+                class="fr-fic fr-dii"
+                style="width: 545px;"
+              />
+            </p>
+            <p>
+              <br />
+            </p>`;
 
-        return gvc.bindView({
-          bind: id,
-          view: () => {
-            return [
-              html` <div class="d-flex justify-content-between mb-3">
-                <div class="tx_normal">付款說明</div>
-                ${BgWidget.blueNote(
-                  '返回預設',
-                  gvc.event(() => {
-                    keyData.payment_info_line_pay.text = defText;
-                    gvc.notifyDataChange(id);
-                  })
-                )}
-              </div>`,
-              BgWidget.richTextEditor({
-                gvc: gvc,
-                content: keyData.payment_info_line_pay!.text ?? '',
-                callback: content => {
-                  keyData.payment_info_line_pay!.text = content;
-                },
-                title: '付款說明',
-              }),
-            ].join('');
-          },
-        });
-      })(),
+          return gvc.bindView({
+            bind: id,
+            view: () => {
+              return [
+                html` <div class="d-flex justify-content-between mb-3">
+                  <div class="tx_normal">付款說明</div>
+                  ${BgWidget.blueNote(
+                    '返回預設',
+                    gvc.event(() => {
+                      keyData.payment_info_line_pay.text = defText;
+                      gvc.notifyDataChange(id);
+                    })
+                  )}
+                </div>`,
+                BgWidget.richTextEditor({
+                  gvc: gvc,
+                  content: keyData.payment_info_line_pay!.text ?? '',
+                  callback: content => {
+                    keyData.payment_info_line_pay!.text = content;
+                  },
+                  title: '付款說明',
+                }),
+              ].join('');
+            },
+          });
+        })();
+      },
     };
 
     const shipment = {
       key: 'shipment',
       title: '指定物流',
-      html: gvc.bindView({
-        bind: gvc.glitter.getUUID(),
-        view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, keyData.payment_info_line_pay),
-      }),
+      html: (gvc: GVC) => {
+        return gvc.bindView({
+          bind: gvc.glitter.getUUID(),
+          view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, keyData.payment_info_line_pay),
+        });
+      },
     };
 
     const cartSetting = {
       key: 'cartSetting',
       title: '購物車設定',
-      html: gvc.bindView({
-        bind: gvc.glitter.getUUID(),
-        view: () => ShoppingFinanceSetting.setCartSetting(gvc, keyData.payment_info_line_pay),
-      }),
+      html: (gvc: GVC) => {
+        return gvc.bindView({
+          bind: gvc.glitter.getUUID(),
+          view: () => ShoppingFinanceSetting.setCartSetting(gvc, keyData.payment_info_line_pay),
+        });
+      },
     };
 
-    return this.tabView(gvc, [cashflow, shipment, cartSetting]);
+    return this.buttonListView(gvc, 'payment_info_line_pay', keyData.payment_info_line_pay, [
+      cashflow,
+      shipment,
+      cartSetting,
+    ]);
   }
 
   // 彈窗: ATM 轉帳 (線下)
-  static atm(gvc: GVC, keyData: any) {
+  static atm(gvc: GVC, key: string, keyData: any) {
     keyData.payment_info_atm = keyData.payment_info_atm ?? {
       bank_account: '',
       bank_code: '',
@@ -1389,208 +1370,226 @@ export class ShoppingFinanceSetting {
     const cashflow = {
       key: 'cashflow',
       title: '基本設定',
-      html: (() => {
-        const id = gvc.glitter.getUUID();
-        const defText = html`<p>當日下單匯款，隔日出貨，後天到貨。</p>
-          <p>若有需要統一編號 請提早告知</p>
-          <p>------------------------------------------------------------------</p>
-          <p>＊採臨櫃匯款者，電匯單上匯款人姓名與聯絡電話請務必填寫。</p> `;
+      html: (gvc: GVC) => {
+        return (() => {
+          const id = gvc.glitter.getUUID();
+          const defText = html`<p>當日下單匯款，隔日出貨，後天到貨。</p>
+            <p>若有需要統一編號 請提早告知</p>
+            <p>------------------------------------------------------------------</p>
+            <p>＊採臨櫃匯款者，電匯單上匯款人姓名與聯絡電話請務必填寫。</p> `;
 
-        return gvc.bindView({
-          bind: id,
-          view: () => {
-            return [
-              html` <div class="row w-100">
-                ${[
-                  {
-                    key: 'bank_code',
-                    title: '銀行代號',
-                  },
-                  {
-                    key: 'bank_name',
-                    title: '銀行名稱',
-                  },
-                  {
-                    key: 'bank_user',
-                    title: '銀行戶名',
-                  },
-                  {
-                    key: 'bank_account',
-                    title: '銀行帳號',
-                  },
-                ]
-                  .map(dd => {
-                    return html` <div class="col-12 col-md-6 mb-2 pe-0 pe-md-2">
-                      <div class="w-100 mb-1">
-                        <span
-                          style="color: #393939; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
-                          >${dd.title}</span
-                        >
-                        <span
-                          style="color: #E80000; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
-                          >*</span
-                        >
-                      </div>
-                      <input
-                        class="form-control w-100"
-                        placeholder="請輸入${dd.title}"
-                        value="${keyData.payment_info_atm[dd.key]}"
-                        onchange="${gvc.event(e => {
-                          keyData.payment_info_atm[dd.key] = e.value;
-                        })}"
-                      />
-                    </div>`;
-                  })
-                  .join('')}
-              </div>`,
-              html` <div class="my-2 px-1" style="display:flex;justify-content: space-between;">
-                <div class="tx_normal">付款說明</div>
-                ${BgWidget.blueNote(
-                  '返回預設',
-                  gvc.event(() => {
-                    keyData.payment_info_atm.text = defText;
+          return gvc.bindView({
+            bind: id,
+            view: () => {
+              return [
+                html` <div class="row w-100">
+                  ${[
+                    {
+                      key: 'bank_code',
+                      title: '銀行代號',
+                    },
+                    {
+                      key: 'bank_name',
+                      title: '銀行名稱',
+                    },
+                    {
+                      key: 'bank_user',
+                      title: '銀行戶名',
+                    },
+                    {
+                      key: 'bank_account',
+                      title: '銀行帳號',
+                    },
+                  ]
+                    .map(dd => {
+                      return html` <div class="col-12 col-md-6 mb-2 pe-0 pe-md-2">
+                        <div class="w-100 mb-1">
+                          <span
+                            style="color: #393939; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
+                            >${dd.title}</span
+                          >
+                          <span
+                            style="color: #E80000; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
+                            >*</span
+                          >
+                        </div>
+                        <input
+                          class="form-control w-100"
+                          placeholder="請輸入${dd.title}"
+                          value="${keyData.payment_info_atm[dd.key]}"
+                          onchange="${gvc.event(e => {
+                            keyData.payment_info_atm[dd.key] = e.value;
+                          })}"
+                        />
+                      </div>`;
+                    })
+                    .join('')}
+                </div>`,
+                html` <div class="my-2 px-1" style="display:flex;justify-content: space-between;">
+                  <div class="tx_normal">付款說明</div>
+                  ${BgWidget.blueNote(
+                    '返回預設',
+                    gvc.event(() => {
+                      keyData.payment_info_atm.text = defText;
+                      gvc.notifyDataChange(id);
+                    })
+                  )}
+                </div>`,
+                BgWidget.richTextEditor({
+                  gvc: gvc,
+                  content: keyData.payment_info_atm?.text ?? '',
+                  callback: content => {
+                    keyData.payment_info_atm!.text = content;
                     gvc.notifyDataChange(id);
-                  })
-                )}
-              </div>`,
-              BgWidget.richTextEditor({
-                gvc: gvc,
-                content: keyData.payment_info_atm?.text ?? '',
-                callback: content => {
-                  keyData.payment_info_atm!.text = content;
-                  gvc.notifyDataChange(id);
-                },
-                title: '付款說明',
-              }),
-            ].join('');
-          },
-          divCreate: { class: 'guide2-5' },
-        });
-      })(),
+                  },
+                  title: '付款說明',
+                }),
+              ].join('');
+            },
+            divCreate: { class: 'guide2-5' },
+          });
+        })();
+      },
     };
 
     const shipment = {
       key: 'shipment',
       title: '指定物流',
-      html: gvc.bindView({
-        bind: gvc.glitter.getUUID(),
-        view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, keyData.payment_info_atm),
-      }),
+      html: (gvc: GVC) => {
+        return gvc.bindView({
+          bind: gvc.glitter.getUUID(),
+          view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, keyData.payment_info_atm),
+        });
+      },
     };
 
     const cartSetting = {
       key: 'cartSetting',
       title: '購物車設定',
-      html: gvc.bindView({
-        bind: gvc.glitter.getUUID(),
-        view: () => ShoppingFinanceSetting.setCartSetting(gvc, keyData.payment_info_atm),
-      }),
+      html: (gvc: GVC) => {
+        return gvc.bindView({
+          bind: gvc.glitter.getUUID(),
+          view: () => ShoppingFinanceSetting.setCartSetting(gvc, keyData.payment_info_atm),
+        });
+      },
     };
 
-    return this.tabView(gvc, [cashflow, shipment, cartSetting]);
+    return this.buttonListView(gvc, 'payment_info_atm', keyData.payment_info_atm, [cashflow, shipment, cartSetting]);
   }
 
   // 彈窗: Line Pay (POS)
-  static linePayScan(gvc: GVC, data: any) {
+  static linePayScan(gvc: GVC, key: string, data: any) {
     const cashflow = {
       key: 'cashflow',
       title: '基本設定',
-      html: html` ${[
-        BgWidget.inlineCheckBox({
-          title: '串接路徑',
-          gvc: gvc,
-          def: `${data.BETA}`,
-          array: [
-            {
-              title: '正式站',
-              value: `false`,
+      html: (gvc: GVC) => {
+        return [
+          BgWidget.inlineCheckBox({
+            title: '串接路徑',
+            gvc: gvc,
+            def: `${data.BETA}`,
+            array: [
+              {
+                title: '正式站',
+                value: `false`,
+              },
+              {
+                title: '測試站',
+                value: `true`,
+              },
+            ],
+            callback: (text: any) => {
+              data.BETA = text;
+            },
+          }),
+          BgWidget.editeInput({
+            gvc: gvc,
+            title: 'CLIENT_ID',
+            default: data.CLIENT_ID,
+            callback: text => {
+              data.CLIENT_ID = text;
             },
-            {
-              title: '測試站',
-              value: `true`,
+            placeHolder: '請輸入CLIENT_ID',
+          }),
+          BgWidget.editeInput({
+            gvc: gvc,
+            title: 'SECRET',
+            default: data.SECRET,
+            callback: text => {
+              data.SECRET = text;
             },
-          ],
-          callback: (text: any) => {
-            data.BETA = text;
-          },
-        }),
-        BgWidget.editeInput({
-          gvc: gvc,
-          title: 'CLIENT_ID',
-          default: data.CLIENT_ID,
-          callback: text => {
-            data.CLIENT_ID = text;
-          },
-          placeHolder: '請輸入CLIENT_ID',
-        }),
-        BgWidget.editeInput({
-          gvc: gvc,
-          title: 'SECRET',
-          default: data.SECRET,
-          callback: text => {
-            data.SECRET = text;
-          },
-          placeHolder: '請輸入SECRET',
-        }),
-      ].join('')}`,
+            placeHolder: '請輸入SECRET',
+          }),
+        ].join('');
+      },
     };
 
     const shipment = {
       key: 'shipment',
       title: '指定物流',
-      html: gvc.bindView({
-        bind: gvc.glitter.getUUID(),
-        view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, data),
-      }),
+      html: (gvc: GVC) => {
+        return gvc.bindView({
+          bind: gvc.glitter.getUUID(),
+          view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, data),
+        });
+      },
     };
 
     const cartSetting = {
       key: 'cartSetting',
       title: '購物車設定',
-      html: gvc.bindView({
-        bind: gvc.glitter.getUUID(),
-        view: () => ShoppingFinanceSetting.setCartSetting(gvc, data),
-      }),
+      html: (gvc: GVC) => {
+        return gvc.bindView({
+          bind: gvc.glitter.getUUID(),
+          view: () => ShoppingFinanceSetting.setCartSetting(gvc, data),
+        });
+      },
     };
 
-    return this.tabView(gvc, [cashflow, shipment, cartSetting]);
+    return this.buttonListView(gvc, key, data, [cashflow, shipment, cartSetting]);
   }
 
   // 彈窗: 聯合信用卡 (POS)
-  static utCreditCard(gvc: GVC, data: any) {
+  static utCreditCard(gvc: GVC, key: string, data: any) {
     const cashflow = {
       key: 'cashflow',
       title: '基本設定',
-      html: BgWidget.editeInput({
-        gvc: gvc,
-        title: '商家ID',
-        default: data.pwd,
-        callback: text => {
-          data.pwd = text;
-        },
-        placeHolder: '請輸入商家ID',
-      }),
+      html: (gvc: GVC) => {
+        return BgWidget.editeInput({
+          gvc: gvc,
+          title: '商家ID',
+          default: data.pwd,
+          callback: text => {
+            data.pwd = text;
+          },
+          placeHolder: '請輸入商家ID',
+        });
+      },
     };
 
     const shipment = {
       key: 'shipment',
       title: '指定物流',
-      html: gvc.bindView({
-        bind: gvc.glitter.getUUID(),
-        view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, data),
-      }),
+      html: (gvc: GVC) => {
+        return gvc.bindView({
+          bind: gvc.glitter.getUUID(),
+          view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, data),
+        });
+      },
     };
 
     const cartSetting = {
       key: 'cartSetting',
       title: '購物車設定',
-      html: gvc.bindView({
-        bind: gvc.glitter.getUUID(),
-        view: () => ShoppingFinanceSetting.setCartSetting(gvc, data),
-      }),
+      html: (gvc: GVC) => {
+        return gvc.bindView({
+          bind: gvc.glitter.getUUID(),
+          view: () => ShoppingFinanceSetting.setCartSetting(gvc, data),
+        });
+      },
     };
 
-    return this.tabView(gvc, [cashflow, shipment, cartSetting]);
+    return this.buttonListView(gvc, key, data, [cashflow, shipment, cartSetting]);
   }
 
   // 彈窗: MyPay高鉅科技 (POS)
@@ -1598,38 +1597,45 @@ export class ShoppingFinanceSetting {
     const cashflow = {
       key: 'cashflow',
       title: '基本設定',
-      html: BgWidget.editeInput({
-        gvc: gvc,
-        title: '刷卡機密碼',
-        default: data.pwd,
-        callback: text => {
-          data.pwd = text;
-        },
-        placeHolder: '請輸入刷卡機密碼',
-      }),
+      html: (gvc: GVC) => {
+        return BgWidget.editeInput({
+          gvc: gvc,
+          title: '刷卡機密碼',
+          default: data.pwd,
+          callback: text => {
+            data.pwd = text;
+          },
+          placeHolder: '請輸入刷卡機密碼',
+        });
+      },
     };
 
     const shipment = {
       key: 'shipment',
       title: '指定物流',
-      html: gvc.bindView({
-        bind: gvc.glitter.getUUID(),
-        view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, data),
-      }),
+      html: (gvc: GVC) => {
+        return gvc.bindView({
+          bind: gvc.glitter.getUUID(),
+          view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, data),
+        });
+      },
     };
 
     const cartSetting = {
       key: 'cartSetting',
       title: '購物車設定',
-      html: gvc.bindView({
-        bind: gvc.glitter.getUUID(),
-        view: () => ShoppingFinanceSetting.setCartSetting(gvc, data),
-      }),
+      html: (gvc: GVC) => {
+        return gvc.bindView({
+          bind: gvc.glitter.getUUID(),
+          view: () => ShoppingFinanceSetting.setCartSetting(gvc, data),
+        });
+      },
     };
 
-    return this.tabView(gvc, [cashflow, shipment, cartSetting]);
+    return this.buttonListView(gvc, 'my_pay', data, [cashflow, shipment, cartSetting]);
   }
 
+  // 付款說明元件
   static customerText(gvc: GVC, keyData: any, id: string) {
     const fi_ = keyData.payment_info_custom.find((id_: string) => id_ === id);
     keyData[keyData.findIndex(fi_)] = {
@@ -1659,22 +1665,89 @@ export class ShoppingFinanceSetting {
     });
   }
 
+  // 金物流元件卡
+  static card(obj: {
+    title: string;
+    img: string;
+    toggle: boolean;
+    toggleEvent: string;
+    buttonAction: string[];
+    deleteEvent?: string;
+  }) {
+    return html`<div class="col-12 col-lg-4 col-md-6 p-0 p-md-2">
+        <div
+          class="w-100 position-relative main-card"
+          style="padding: 20px 12px; background: white; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; display: inline-flex;"
+        >
+          <div
+            style="padding: 9px 12px;align-self: stretch; justify-content: flex-start; align-items: center; gap: 28px; display: inline-flex;"
+          >
+            ${obj.deleteEvent
+              ? html`<div style="position: absolute; top: 10px; right: 20px; font-size: 18px; cursor: pointer;">
+                  <i class="fa-regular fa-trash" onclick="${obj.deleteEvent}"></i>
+                </div>`
+              : ''}
+            <div style="min-width: 46px;max-width: 46px; text-align: center;">${obj.img}</div>
+            <div
+              style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: inline-flex"
+            >
+              <div class="tx_normal">${obj.title}</div>
+              <div class="d-flex align-items-center" style="gap: 4px;">
+                <div class="tx_normal">${obj.toggle ? '開啟' : '關閉'}</div>
+                <div class="cursor_pointer form-check form-switch" style="margin-top: 10px;">
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    onchange="${obj.toggleEvent}"
+                    ${obj.toggle ? 'checked' : ''}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="w-100 border-top pt-3 mt-n2">
+            <div class="d-flex flex-wrap justify-content-end gap-1 cursor_pointer">
+              <div class="flex-fill"></div>
+              ${obj.buttonAction.join('')}
+            </div>
+          </div>
+        </div>
+      </div>
+      ${document.body.clientWidth > 768 ? '' : BgWidget.mbContainer(8)}`;
+  }
+
+  // 新增客製元件卡
+  static addCard(title: string, event: string) {
+    return html`<div class="col-12 col-lg-4 col-md-6 p-0 p-md-2" style="cursor: pointer;" onclick="${event}">
+      <div
+        class="w-100 main-card"
+        style="min-height:183.59px;padding: 24px; background: white; overflow: hidden; flex-direction: column; justify-content: center; align-items: center; gap: 18px; display: inline-flex"
+      >
+        <div
+          class="fw-bold"
+          style="align-self: stretch; justify-content: center; align-items: center; gap: 14px; display: inline-flex;color:#4D86DB;"
+        >
+          <i class="fa-regular fa-circle-plus fs-5"></i>
+          <div class="fs-5">${title}</div>
+        </div>
+      </div>
+    </div>`;
+  }
+
+  // *物流設定頁
   static logistics_setting(gvc: GVC, widget: any) {
+    this.id = 'shopping-logistics-setting-main';
+    this.loading = true;
+    this.gvc = gvc;
+
     const dialog = new ShareDialog(gvc.glitter);
-    const saasConfig: {
-      config: any;
-      api: any;
-    } = (window.parent as any).saasConfig;
+    const saasConfig = this.saasConfig;
     const vm: {
-      id: string;
-      loading: boolean;
       data: any;
       delivery: any;
       language: any;
       page: 'delivery_setting' | 'delivery_track' | 'delivery_note';
     } = {
-      id: gvc.glitter.getUUID(),
-      loading: true,
       data: {},
       delivery: {
         ec_pay: {
@@ -1697,38 +1770,24 @@ export class ShoppingFinanceSetting {
       language: (window.parent as any).store_info.language_setting.def,
       page: 'delivery_setting',
     };
-    saasConfig.api
-      .getPrivateConfig(saasConfig.config.appName, 'logistics_setting')
-      .then((r: { response: any; result: boolean }) => {
-        if (r.response.result[0]) {
-          vm.data = r.response.result[0].value;
-        }
-        vm.loading = false;
-        if (!vm.data.language_data) {
-          vm.data.language_data = {
-            'en-US': { info: '' },
-            'zh-CN': { info: '' },
-            'zh-TW': { info: vm.data.info || '' },
-          };
-        }
-        gvc.notifyDataChange(vm.id);
-      });
 
-    function save() {
+    const save = () => {
       saasConfig.api.setPrivateConfig(saasConfig.config.appName, 'logistics_setting', vm.data);
-    }
+    };
 
     return gvc.bindView(() => {
       return {
-        bind: vm.id,
+        bind: this.id,
         view: () => {
-          if (vm.loading) {
+          if (this.loading) {
             return BgWidget.spinner();
           }
-          vm.data.support = vm.data.support || [];
+
           const language_data = vm.data.language_data[vm.language];
+          vm.data.support = vm.data.support || [];
           vm.data.info = vm.data.info || '';
           vm.data.form = vm.data.form || [];
+
           let view = [
             html`<div class="title-container">
               ${BgWidget.title('物流設定')}
@@ -1745,11 +1804,12 @@ export class ShoppingFinanceSetting {
               vm.page,
               text => {
                 vm.page = text as any;
-                gvc.notifyDataChange(vm.id);
+                gvc.notifyDataChange(this.id);
               },
               'margin-bottom:0px;'
             ),
           ];
+
           if (vm.page === 'delivery_setting') {
             view = view.concat([
               html`<div class="px-md-0 px-2">
@@ -1757,14 +1817,10 @@ export class ShoppingFinanceSetting {
                   '設定支援的配送方式，供消費者於前臺自行選擇合適的物流，另外可於商品頁面設定特定商品支援的配送'
                 )}
               </div>`,
-              gvc.bindView(() => {
-                const id = gvc.glitter.getUUID();
-
-                function refresh() {
-                  gvc.notifyDataChange(id);
-                }
+              gvc.bindView(() => {
+                const id = gvc.glitter.getUUID();
 
-                //設定自訂物流
+                // 設定自訂物流
                 function updateCustomShipment(obj: {
                   function: 'replace' | 'plus';
                   data?: {
@@ -1786,7 +1842,7 @@ export class ShoppingFinanceSetting {
                   let form: any = undefined;
                   BgWidget.settingDialog({
                     gvc: gvc,
-                    title: custom_delivery.name ? `「${custom_delivery.name}」自訂表單設定` : '新增自訂物流',
+                    title: custom_delivery.name ? `「${custom_delivery.name}」表單設定` : '新增自訂物流',
                     innerHTML: gvc => {
                       form = BgWidget.customForm(gvc, [
                         {
@@ -1850,68 +1906,38 @@ export class ShoppingFinanceSetting {
                       );
                     },
                     footer_html: gvc => {
-                      let array = [
-                        BgWidget.save(
-                          gvc.event(() => {
-                            return new Promise<boolean>(async () => {
-                              if (!custom_delivery.name) {
-                                dialog.errorMessage({ text: `請輸入物流名稱` });
-                                return;
-                              }
-                              vm.data.custom_delivery = vm.data.custom_delivery ?? [];
-                              if (obj.function === 'plus') {
-                                vm.data.custom_delivery.push(custom_delivery);
-                              } else {
-                                vm.data.custom_delivery[
-                                  vm.data.custom_delivery.findIndex((d1: any) => {
-                                    return d1.id === custom_delivery.id;
-                                  })
-                                ] = custom_delivery;
-                              }
-
-                              dialog.dataLoading({ visible: true });
-                              await form.save();
-                              await saasConfig.api.setPrivateConfig(
-                                saasConfig.config.appName,
-                                'logistics_setting',
-                                vm.data
-                              );
-                              dialog.dataLoading({ visible: false });
-                              dialog.successMessage({ text: '設定成功' });
-                              gvc.closeDialog();
-                              refresh();
-                            });
-                          })
-                        ),
-                      ];
-                      if (obj.function === 'replace') {
-                        array = [
-                          BgWidget.danger(
-                            gvc.event(() => {
-                              dialog.checkYesOrNot({
-                                text: '是否確認刪除?',
-                                callback: async response => {
-                                  if (response) {
-                                    vm.data.custom_delivery = vm.data.custom_delivery.filter((d1: any) => {
-                                      return obj.data!.id !== d1.id;
-                                    });
-                                    dialog.dataLoading({ visible: true });
-                                    await saasConfig.api.setPrivateConfig(
-                                      saasConfig.config.appName,
-                                      'logistics_setting',
-                                      vm.data
-                                    );
-                                    dialog.dataLoading({ visible: false });
-                                    refresh();
-                                    gvc.closeDialog();
-                                  }
-                                },
-                              });
-                            })
-                          ),
-                        ].concat(array);
-                      }
-                      return array.join('');
+                      return BgWidget.save(
+                        gvc.event(() => {
+                          return new Promise<boolean>(async () => {
+                            if (!custom_delivery.name) {
+                              dialog.errorMessage({ text: `請輸入物流名稱` });
+                              return;
+                            }
+
+                            vm.data.custom_delivery = vm.data.custom_delivery ?? [];
+                            if (obj.function === 'plus') {
+                              vm.data.custom_delivery.push(custom_delivery);
+                            } else {
+                              vm.data.custom_delivery[
+                                vm.data.custom_delivery.findIndex((d1: any) => {
+                                  return d1.id === custom_delivery.id;
+                                })
+                              ] = custom_delivery;
+                            }
+
+                            dialog.dataLoading({ visible: true });
+                            await form.save();
+                            await saasConfig.api.setPrivateConfig(
+                              saasConfig.config.appName,
+                              'logistics_setting',
+                              vm.data
+                            );
+                            dialog.dataLoading({ visible: false });
+                            dialog.successMessage({ text: '設定成功' });
+                            ShoppingFinanceSetting.refresh(gvc);
+                          });
+                        })
+                      );
                     },
                   });
                 }
@@ -1932,342 +1958,291 @@ export class ShoppingFinanceSetting {
                         })
                       )
                       .map(dd => {
-                        return html`
-                          <div class="col-12 col-lg-4 col-md-6 p-0 p-md-2">
-                            <div
-                              class="w-100 position-relative main-card"
-                              style="padding: 24px; background: white; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; display: inline-flex;"
-                            >
-                              <div
-                                style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 28px; display: inline-flex;"
-                              >
-                                <div style="min-width: 46px;max-width: 46px;">
-                                  ${dd.type === 'font_awesome' ? dd.src : html` <img src="${dd.src}" />`}
-                                </div>
-                                <div
-                                  style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: inline-flex"
-                                >
-                                  <div class="tx_normal">${dd.title}</div>
-                                  <div class="d-flex align-items-center" style="gap:4px;">
-                                    <div class="tx_normal">
-                                      ${vm.data.support.find((d1: any) => dd.value === d1) ? `開啟` : `關閉`}
-                                    </div>
-                                    <div class="cursor_pointer form-check form-switch" style="margin-top: 10px;">
-                                      <input
-                                        class="form-check-input"
-                                        type="checkbox"
-                                        onchange="${gvc.event(() => {
-                                          if (
-                                            vm.data.support.find((d1: any) => {
-                                              return dd.value === d1;
-                                            })
-                                          ) {
-                                            vm.data.support = vm.data.support.filter((d1: any) => {
-                                              return dd.value !== d1;
-                                            });
-                                          } else {
-                                            vm.data.support.push(dd.value);
-                                          }
-                                          save();
-                                          gvc.notifyDataChange(id);
-                                        })}"
-                                        ${vm.data.support.find((d1: any) => {
-                                          return dd.value === d1;
-                                        })
-                                          ? `checked`
-                                          : ''}
-                                      />
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <div class="w-100 border-top pt-3 mt-n2">
-                                ${(() => {
-                                  let button_action: string[] = [
-                                    BgWidget.customButton({
-                                      button: {
-                                        color: 'gray',
-                                        size: 'sm',
-                                      },
-                                      text: {
-                                        name: html`<i class="fa-regular fa-gear me-1"></i>配送`,
-                                      },
-                                      event: gvc.event(async () => {
-                                        const log_config = (
-                                          await ApiUser.getPublicConfig(
-                                            'shipment_config_' + dd.value,
-                                            'manager',
-                                            saasConfig.config.appName
-                                          )
-                                        ).response.value;
-                                        BgWidget.settingDialog({
-                                          gvc: gvc,
-                                          title: `「${dd.title}」配送設定`,
-                                          innerHTML: gvc => {
-                                            const view: string[] = [];
-                                            if (
-                                              ['UNIMARTC2C', 'UNIMARTFREEZE', 'FAMIC2C', 'FAMIC2CFREEZE'].includes(
-                                                dd.value
-                                              )
-                                            ) {
-                                              view.push(
-                                                html`<div class="d-flex flex-column w-100">
-                                                  ${[
-                                                    html`<div
-                                                      style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: inline-flex"
-                                                    >
-                                                      <div class="tx_normal">大宗配送</div>
-                                                      <div class="d-flex align-items-center" style="gap:4px;">
-                                                        <div class="tx_normal">
-                                                          ${log_config.bulk ? `開啟` : `關閉`}
-                                                        </div>
-                                                        <div
-                                                          class="cursor_pointer form-check form-switch"
-                                                          style="margin-top: 10px;"
-                                                        >
-                                                          <input
-                                                            class="form-check-input"
-                                                            type="checkbox"
-                                                            onchange="${gvc.event(() => {
-                                                              log_config.bulk = !log_config.bulk;
-                                                              gvc.recreateView();
-                                                            })}"
-                                                            ${log_config.bulk ? `checked` : ''}
-                                                          />
-                                                        </div>
-                                                      </div>
-                                                    </div> `,
-                                                  ].join('')}
-                                                </div>`
-                                              );
-                                            }
-                                            view.push(
-                                              html` <div class="d-flex flex-column" style="gap:5px;">
-                                                ${[
-                                                  html`<div class="tx_normal">物流配送說明</div>`,
-                                                  BgWidget.richTextEditor({
-                                                    gvc: gvc,
-                                                    content: log_config.content ?? '',
-                                                    callback: data => {
-                                                      log_config.content = data;
-                                                    },
-                                                    title: '物流配送說明',
-                                                  }),
-                                                ].join('')}
-                                              </div>`
-                                            );
-                                            return html`<div class="w-100 d-flex flex-column" style="gap:5px;">
-                                              ${view.join(html`<div class="w-100 border-bottom my-2"></div>`)}
-                                            </div>`;
-                                          },
-                                          footer_html: gvc => {
-                                            let array = [
-                                              BgWidget.cancel(
-                                                gvc.event(() => {
-                                                  gvc.closeDialog();
-                                                })
-                                              ),
-                                              BgWidget.save(
-                                                gvc.event(() => {
-                                                  dialog.dataLoading({ visible: true });
-                                                  ApiUser.setPublicConfig({
-                                                    user_id: 'manager',
-                                                    key: 'shipment_config_' + dd.value,
-                                                    value: log_config,
-                                                  }).then(() => {
-                                                    dialog.dataLoading({ visible: false });
-                                                    dialog.successMessage({ text: '設定成功' });
-                                                    gvc.closeDialog();
-                                                  });
-                                                })
-                                              ),
-                                            ];
-                                            return array.join('');
-                                          },
-                                        });
-                                      }),
-                                    }),
-                                    BgWidget.customButton({
-                                      button: {
-                                        color: 'gray',
-                                        size: 'sm',
-                                      },
-                                      text: {
-                                        name: html`<i class="fa-regular fa-gear me-1"></i>購物車`,
-                                      },
-                                      event: gvc.event(async () => {
-                                        const vm = {
-                                          id: gvc.glitter.getUUID(),
-                                          loading: true,
-                                          config: {},
-                                        };
-
-                                        BgWidget.settingDialog({
+                        let button_action: string[] = [
+                          BgWidget.customButton({
+                            button: {
+                              color: 'gray',
+                              size: 'sm',
+                            },
+                            text: {
+                              name: '配送設定',
+                            },
+                            event: gvc.event(async () => {
+                              const log_config = (
+                                await ApiUser.getPublicConfig(
+                                  'shipment_config_' + dd.value,
+                                  'manager',
+                                  saasConfig.config.appName
+                                )
+                              ).response.value;
+                              BgWidget.settingDialog({
+                                gvc: gvc,
+                                title: `「${dd.title}」配送設定`,
+                                innerHTML: gvc => {
+                                  const view: string[] = [];
+                                  if (['UNIMARTC2C', 'UNIMARTFREEZE', 'FAMIC2C', 'FAMIC2CFREEZE'].includes(dd.value)) {
+                                    view.push(
+                                      html`<div class="d-flex flex-column w-100">
+                                        ${[
+                                          html`<div
+                                            style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: inline-flex"
+                                          >
+                                            <div class="tx_normal">大宗配送</div>
+                                            <div class="d-flex align-items-center" style="gap: 4px;">
+                                              <div class="tx_normal">${log_config.bulk ? '開啟' : '關閉'}</div>
+                                              <div
+                                                class="cursor_pointer form-check form-switch"
+                                                style="margin-top: 10px;"
+                                              >
+                                                <input
+                                                  class="form-check-input"
+                                                  type="checkbox"
+                                                  onchange="${gvc.event(() => {
+                                                    log_config.bulk = !log_config.bulk;
+                                                    gvc.recreateView();
+                                                  })}"
+                                                  ${log_config.bulk ? `checked` : ''}
+                                                />
+                                              </div>
+                                            </div>
+                                          </div> `,
+                                        ].join('')}
+                                      </div>`
+                                    );
+                                  }
+                                  view.push(
+                                    html` <div class="d-flex flex-column" style="gap: 4px;">
+                                      ${[
+                                        html`<div class="tx_normal">物流配送說明</div>`,
+                                        BgWidget.richTextEditor({
                                           gvc: gvc,
-                                          title: `「${dd.title}」購物車設定`,
-                                          innerHTML: gvc => {
-                                            return gvc.bindView({
-                                              bind: id,
-                                              view: () => {
-                                                if (vm.loading) {
-                                                  return BgWidget.spinner();
-                                                } else {
-                                                  return ShoppingFinanceSetting.setCartSetting(
-                                                    gvc,
-                                                    vm.config,
-                                                    'shipment'
-                                                  );
-                                                }
-                                              },
-                                              onCreate: async () => {
-                                                if (vm.loading) {
-                                                  const r = await ApiUser.getPublicConfig(
-                                                    'shipment_config_' + dd.value,
-                                                    'manager',
-                                                    saasConfig.config.appName
-                                                  );
-                                                  vm.config = r.response.value;
-                                                  vm.loading = false;
-                                                  gvc.notifyDataChange(id);
-                                                }
-                                              },
-                                            });
-                                          },
-                                          footer_html: gvc => {
-                                            return [
-                                              BgWidget.cancel(
-                                                gvc.event(() => {
-                                                  gvc.closeDialog();
-                                                })
-                                              ),
-                                              BgWidget.save(
-                                                gvc.event(() => {
-                                                  dialog.dataLoading({ visible: true });
-                                                  ApiUser.setPublicConfig({
-                                                    user_id: 'manager',
-                                                    key: 'shipment_config_' + dd.value,
-                                                    value: vm.config,
-                                                  }).then(() => {
-                                                    dialog.dataLoading({ visible: false });
-                                                    dialog.successMessage({ text: '設定成功' });
-                                                    gvc.closeDialog();
-                                                  });
-                                                })
-                                              ),
-                                            ].join('');
+                                          content: log_config.content ?? '',
+                                          callback: data => {
+                                            log_config.content = data;
                                           },
+                                          title: '物流配送說明',
+                                        }),
+                                      ].join('')}
+                                    </div>`
+                                  );
+                                  return html`<div class="w-100 d-flex flex-column" style="gap: 4px;">
+                                    ${view.join(html`<div class="w-100 border-bottom my-2"></div>`)}
+                                  </div>`;
+                                },
+                                footer_html: gvc => {
+                                  let array = [
+                                    BgWidget.cancel(
+                                      gvc.event(() => {
+                                        gvc.closeDialog();
+                                      })
+                                    ),
+                                    BgWidget.save(
+                                      gvc.event(() => {
+                                        dialog.dataLoading({ visible: true });
+                                        ApiUser.setPublicConfig({
+                                          user_id: 'manager',
+                                          key: 'shipment_config_' + dd.value,
+                                          value: log_config,
+                                        }).then(() => {
+                                          dialog.dataLoading({ visible: false });
+                                          dialog.successMessage({ text: '設定成功' });
+                                          gvc.closeDialog();
                                         });
-                                      }),
-                                    }),
+                                      })
+                                    ),
                                   ];
+                                  return array.join('');
+                                },
+                              });
+                            }),
+                          }),
+                          BgWidget.customButton({
+                            button: {
+                              color: 'gray',
+                              size: 'sm',
+                            },
+                            text: {
+                              name: '購物車設定',
+                            },
+                            event: gvc.event(async () => {
+                              const vm = {
+                                id: gvc.glitter.getUUID(),
+                                loading: true,
+                                config: {},
+                              };
+
+                              BgWidget.settingDialog({
+                                gvc: gvc,
+                                title: `「${dd.title}」購物車設定`,
+                                innerHTML: gvc => {
+                                  return gvc.bindView({
+                                    bind: id,
+                                    view: () => {
+                                      if (vm.loading) {
+                                        return BgWidget.spinner();
+                                      } else {
+                                        return ShoppingFinanceSetting.setCartSetting(gvc, vm.config, 'shipment');
+                                      }
+                                    },
+                                    onCreate: async () => {
+                                      if (vm.loading) {
+                                        const r = await ApiUser.getPublicConfig(
+                                          'shipment_config_' + dd.value,
+                                          'manager',
+                                          saasConfig.config.appName
+                                        );
+                                        vm.config = r.response.value;
+                                        vm.loading = false;
+                                        gvc.notifyDataChange(id);
+                                      }
+                                    },
+                                  });
+                                },
+                                footer_html: gvc => {
+                                  return [
+                                    BgWidget.cancel(
+                                      gvc.event(() => {
+                                        gvc.closeDialog();
+                                      })
+                                    ),
+                                    BgWidget.save(
+                                      gvc.event(() => {
+                                        dialog.dataLoading({ visible: true });
+                                        ApiUser.setPublicConfig({
+                                          user_id: 'manager',
+                                          key: 'shipment_config_' + dd.value,
+                                          value: vm.config,
+                                        }).then(() => {
+                                          dialog.dataLoading({ visible: false });
+                                          dialog.successMessage({ text: '設定成功' });
+                                          gvc.closeDialog();
+                                        });
+                                      })
+                                    ),
+                                  ].join('');
+                                },
+                              });
+                            }),
+                          }),
+                          BgWidget.customButton({
+                            button: {
+                              color: 'gray',
+                              size: 'sm',
+                            },
+                            text: {
+                              name: '運費設定',
+                            },
+                            event: gvc.event(() => {
+                              const vm = {
+                                gvc: gvc,
+                                key: dd.value,
+                                save_event: () => {
+                                  return new Promise(resolve => resolve(true));
+                                },
+                              };
+                              BgWidget.settingDialog({
+                                gvc: gvc,
+                                width: 1200,
+                                height: document.body.clientHeight - 100,
+                                title: `「${dd.title}」運費設定`,
+                                d_main_style: document.body.clientWidth < 768 ? 'padding:0px !important;' : '',
+                                innerHTML: (gvc: GVC) => {
+                                  vm.gvc = gvc;
+                                  return ShoppingShipmentSetting.main(vm);
+                                },
+                                footer_html: gvc => {
+                                  return [
+                                    BgWidget.cancel(
+                                      gvc.event(() => {
+                                        gvc.closeDialog();
+                                      })
+                                    ),
+                                    BgWidget.save(
+                                      gvc.event(() => {
+                                        vm.save_event().then(() => {});
+                                      })
+                                    ),
+                                  ].join('');
+                                },
+                              });
+                            }),
+                          }),
+                        ];
+
+                        if ((dd as any).custom) {
+                          button_action = [
+                            BgWidget.customButton({
+                              button: {
+                                color: 'gray',
+                                size: 'sm',
+                              },
+                              text: {
+                                name: '表單設定',
+                              },
+                              event: gvc.event(() => {
+                                updateCustomShipment({
+                                  function: 'replace',
+                                  data: vm.data.custom_delivery.find((d1: any) => dd.value === d1.id),
+                                });
+                              }),
+                            }),
+                            ...button_action,
+                          ];
+                        }
 
-                                  const shipment_fee = () => {
-                                    return BgWidget.customButton({
-                                      button: {
-                                        color: 'gray',
-                                        size: 'sm',
-                                      },
-                                      text: {
-                                        name: html`<i class="fa-regular fa-gear me-1"></i>運費`,
-                                      },
-                                      event: gvc.event(() => {
-                                        const vm = {
-                                          gvc: gvc,
-                                          key: dd.value,
-                                          save_event: () => {
-                                            return new Promise(resolve => resolve(true));
-                                          },
-                                        };
-                                        BgWidget.settingDialog({
-                                          gvc: gvc,
-                                          width: 1200,
-                                          height: document.body.clientHeight - 100,
-                                          title: `「${dd.title}」運費設定`,
-                                          d_main_style:
-                                            document.body.clientWidth < 768 ? 'padding:0px !important;' : '',
-                                          innerHTML: (gvc: GVC) => {
-                                            vm.gvc = gvc;
-                                            return ShoppingShipmentSetting.main(vm);
-                                          },
-                                          footer_html: gvc => {
-                                            return [
-                                              BgWidget.cancel(
-                                                gvc.event(() => {
-                                                  gvc.closeDialog();
-                                                })
-                                              ),
-                                              BgWidget.save(
-                                                gvc.event(() => {
-                                                  vm.save_event().then(() => {});
-                                                })
-                                              ),
-                                            ].join('');
-                                          },
+                        return this.card({
+                          title: dd.title,
+                          img: dd.type === 'font_awesome' ? dd.src : html` <img src="${dd.src}" />`,
+                          toggle: vm.data.support.some((d1: any) => dd.value === d1),
+                          toggleEvent: gvc.event(() => {
+                            if (vm.data.support.find((d1: any) => dd.value === d1)) {
+                              vm.data.support = vm.data.support.filter((d1: any) => dd.value !== d1);
+                            } else {
+                              vm.data.support.push(dd.value);
+                            }
+                            save();
+                            gvc.notifyDataChange(id);
+                          }),
+                          buttonAction: button_action,
+                          deleteEvent: (dd as any).custom
+                            ? gvc.event(() => {
+                                dialog.checkYesOrNot({
+                                  text: '是否確認刪除此物流？',
+                                  callback: async response => {
+                                    if (response) {
+                                      const data = await saasConfig.api.getPrivateConfig(
+                                        saasConfig.config.appName,
+                                        'logistics_setting'
+                                      );
+                                      if (data.response.result[0]) {
+                                        const keyData = data.response.result[0].value;
+
+                                        keyData.custom_delivery = keyData.custom_delivery.filter((d1: any) => {
+                                          return dd.value !== d1.id;
                                         });
-                                      }),
-                                    });
-                                  };
-
-                                  if ((dd as any).custom) {
-                                    button_action = button_action.concat([
-                                      shipment_fee(),
-                                      BgWidget.customButton({
-                                        button: {
-                                          color: 'gray',
-                                          size: 'sm',
-                                        },
-                                        text: {
-                                          name: html`<i class="fa-regular fa-gear me-1"></i>自訂表單`,
-                                        },
-                                        event: gvc.event(() => {
-                                          updateCustomShipment({
-                                            function: 'replace',
-                                            data: vm.data.custom_delivery.find((d1: any) => dd.value === d1.id),
-                                          });
-                                        }),
-                                      }),
-                                    ]);
-                                    return html`
-                                      <div class="d-flex flex-wrap justify-content-end gap-1 cursor_pointer">
-                                        <div class="flex-fill"></div>
-                                        ${button_action.join('')}
-                                      </div>
-                                    `;
-                                  } else {
-                                    button_action = button_action.concat([shipment_fee()]);
-                                    return html` <div class="d-flex flex-wrap justify-content-end gap-1 cursor_pointer">
-                                      <div class="flex-fill"></div>
-                                      ${button_action.join('')}
-                                    </div>`;
-                                  }
-                                })()}
-                              </div>
-                            </div>
-                          </div>
-                          ${document.body.clientWidth > 768 ? '' : BgWidget.mbContainer(8)}
-                        `;
+
+                                        dialog.dataLoading({ visible: true });
+                                        saasConfig.api.setPrivateConfig(
+                                          saasConfig.config.appName,
+                                          'logistics_setting',
+                                          keyData
+                                        );
+
+                                        dialog.dataLoading({ visible: false });
+                                        this.refresh();
+                                      }
+                                    }
+                                  },
+                                });
+                              })
+                            : undefined,
+                        });
                       })
                       .concat([
-                        html` <div
-                          class="col-12 col-lg-4 col-md-6 p-0 p-md-2"
-                          style="cursor: pointer;"
-                          onclick="${gvc.event(() => {
-                            updateCustomShipment({ function: 'plus' });
-                          })}"
-                        >
-                          <div
-                            class="w-100 main-card"
-                            style="min-height:173.59px;padding: 24px; background: white; overflow: hidden; flex-direction: column; justify-content: center; align-items: center; gap: 18px; display: inline-flex"
-                          >
-                            <div
-                              class="fw-bold"
-                              style="align-self: stretch; justify-content: center; align-items: center; gap: 14px; display: inline-flex;color:#4D86DB;"
-                            >
-                              <i class="fa-regular fa-circle-plus fs-5"></i>
-                              <div class="fs-5">新增自訂物流</div>
-                            </div>
-                          </div>
-                        </div>`,
+                        this.addCard(
+                          '新增自訂物流',
+                          gvc.event(() => updateCustomShipment({ function: 'plus' }))
+                        ),
                       ])
                       .join('');
                   },
@@ -2296,7 +2271,7 @@ export class ShoppingFinanceSetting {
                         language: vm.language,
                         callback: language => {
                           vm.language = language;
-                          gvc.notifyDataChange(vm.id);
+                          gvc.notifyDataChange(this.id);
                         },
                       })}
                     </div>`,
@@ -2317,7 +2292,7 @@ export class ShoppingFinanceSetting {
                                   BgWidget.fullDialog({
                                     gvc: gvc,
                                     title: gvc2 => {
-                                      return html`<div class="d-flex align-items-center" style="gap:10px;">
+                                      return html`<div class="d-flex align-items-center" style="gap: 10px;">
                                         ${'配送資訊' +
                                         BgWidget.aiChatButton({
                                           gvc: gvc2,
@@ -2325,7 +2300,7 @@ export class ShoppingFinanceSetting {
                                           click: () => {
                                             ProductAi.generateRichText(gvc, text => {
                                               language_data.info += text;
-                                              gvc.notifyDataChange(vm.id);
+                                              gvc.notifyDataChange(this.id);
                                               gvc2.recreateView();
                                             });
                                           },
@@ -2488,392 +2463,356 @@ export class ShoppingFinanceSetting {
                       },
                     ]
                       .map(dd => {
-                        return html`
-                          <div class="col-12 col-lg-3 col-md-4 p-0 p-md-2">
-                            <div
-                              class="w-100 position-relative main-card"
-                              style="padding: 24px 32px; background: white; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; display: inline-flex;"
-                            >
-                              ${(() => {
-                                return html` <div
-                                  class="position-absolute fw-500"
-                                  style="cursor:pointer;right:15px;top:15px;"
-                                >
-                                  ${BgWidget.customButton({
-                                    button: {
-                                      color: 'gray',
-                                      size: 'sm',
-                                    },
-                                    text: {
-                                      name: `串接設定`,
-                                    },
-                                    event: gvc.event(() => {
-                                      if (dd.value === 'ec_pay') {
-                                        BgWidget.dialog({
-                                          gvc: gvc,
-                                          title: '物流追蹤設定',
-                                          innerHTML: (gvc: GVC) => {
-                                            return gvc.bindView(
-                                              (() => {
-                                                const id = gvc.glitter.getUUID();
-                                                return {
-                                                  bind: id,
-                                                  view: () => {
-                                                    return [
-                                                      ...(() => {
-                                                        let array: any = [
-                                                          BgWidget.inlineCheckBox({
-                                                            title: '串接路徑',
-                                                            gvc: gvc,
-                                                            def: vm.delivery[dd.value].Action ?? 'test',
-                                                            array: [
-                                                              {
-                                                                title: '正式站',
-                                                                value: 'main',
-                                                              },
-                                                              {
-                                                                title: '測試站',
-                                                                value: 'test',
-                                                              },
-                                                            ],
-                                                            callback: (text: any) => {
-                                                              vm.delivery[dd.value].Action = text;
-                                                            },
-                                                            type: 'single',
-                                                          }),
-                                                          BgWidget.editeInput({
-                                                            gvc: gvc,
-                                                            title: '寄件人名稱',
-                                                            default: vm.delivery[dd.value].SenderName ?? '',
-                                                            callback: text => {
-                                                              vm.delivery[dd.value].SenderName = text;
-                                                            },
-                                                            placeHolder: '請輸入寄件人名稱 / 您的商家名稱',
-                                                          }),
-                                                          BgWidget.editeInput({
-                                                            gvc: gvc,
-                                                            title: '寄件人手機',
-                                                            default: vm.delivery[dd.value].SenderCellPhone ?? '',
-                                                            callback: text => {
-                                                              vm.delivery[dd.value].SenderCellPhone = text;
-                                                            },
-                                                            placeHolder: '請輸入寄件人手機 / 您的手機',
-                                                          }),
-                                                          BgWidget.editeInput({
-                                                            gvc: gvc,
-                                                            title: '寄件人地址',
-                                                            default: vm.delivery[dd.value].SenderAddress ?? '',
-                                                            callback: text => {
-                                                              vm.delivery[dd.value].SenderAddress = text;
-                                                            },
-                                                            placeHolder: '請輸入寄件人地址 / 商家地址',
-                                                          }),
-                                                          BgWidget.editeInput({
-                                                            gvc: gvc,
-                                                            title: '特店編號',
-                                                            default: vm.delivery[dd.value].MERCHANT_ID ?? '',
-                                                            callback: text => {
-                                                              vm.delivery[dd.value].MERCHANT_ID = text;
-                                                            },
-                                                            placeHolder: '請輸入特店編號',
-                                                          }),
-                                                          BgWidget.editeInput({
-                                                            gvc: gvc,
-                                                            title: 'HASH KEY',
-                                                            default: vm.delivery[dd.value].HASH_KEY ?? '',
-                                                            callback: text => {
-                                                              vm.delivery[dd.value].HASH_KEY = text;
-                                                            },
-                                                            placeHolder: '請輸入 HASH KEY',
-                                                          }),
-                                                          BgWidget.editeInput({
-                                                            gvc: gvc,
-                                                            title: 'HASH IV',
-                                                            default: vm.delivery[dd.value].HASH_IV ?? '',
-                                                            callback: text => {
-                                                              vm.delivery[dd.value].HASH_IV = text;
-                                                            },
-                                                            placeHolder: '請輸入 HASH IV',
-                                                          }),
-                                                        ];
-                                                        return array;
-                                                      })(),
-                                                    ].join(BgWidget.mbContainer(12));
+                        return this.card({
+                          title: dd.title,
+                          img: html`<img src="${dd.src || BgWidget.noImageURL}" />`,
+                          toggle: vm.delivery[dd.value].toggle,
+                          toggleEvent: gvc.event(() => {
+                            vm.delivery[dd.value].toggle = !vm.delivery[dd.value].toggle;
+                            saveDelivery();
+                            gvc.notifyDataChange(id);
+                          }),
+                          buttonAction: [
+                            BgWidget.customButton({
+                              button: {
+                                color: 'gray',
+                                size: 'sm',
+                              },
+                              text: {
+                                name: `串接設定`,
+                              },
+                              event: gvc.event(() => {
+                                if (dd.value === 'ec_pay') {
+                                  BgWidget.dialog({
+                                    gvc: gvc,
+                                    title: '物流追蹤設定',
+                                    innerHTML: (gvc: GVC) => {
+                                      const id = gvc.glitter.getUUID();
+
+                                      return gvc.bindView({
+                                        bind: id,
+                                        view: () => {
+                                          return [
+                                            ...(() => {
+                                              let array: any = [
+                                                BgWidget.inlineCheckBox({
+                                                  title: '串接路徑',
+                                                  gvc: gvc,
+                                                  def: vm.delivery[dd.value].Action ?? 'test',
+                                                  array: [
+                                                    {
+                                                      title: '正式站',
+                                                      value: 'main',
+                                                    },
+                                                    {
+                                                      title: '測試站',
+                                                      value: 'test',
+                                                    },
+                                                  ],
+                                                  callback: (text: any) => {
+                                                    vm.delivery[dd.value].Action = text;
                                                   },
-                                                };
-                                              })()
-                                            );
-                                          },
-                                          save: {
-                                            text: '儲存',
-                                            event: () => {
-                                              return new Promise<boolean>(resolve => {
-                                                function checkSenderPattern(input: string) {
-                                                  const senderPattern = /^[\u4e00-\u9fa5]{2,5}|[a-zA-Z]{4,10}$/;
-                                                  return senderPattern.test(input);
-                                                }
+                                                  type: 'single',
+                                                }),
+                                                BgWidget.editeInput({
+                                                  gvc: gvc,
+                                                  title: '寄件人名稱',
+                                                  default: vm.delivery[dd.value].SenderName ?? '',
+                                                  callback: text => {
+                                                    vm.delivery[dd.value].SenderName = text;
+                                                  },
+                                                  placeHolder: '請輸入寄件人名稱 / 您的商家名稱',
+                                                }),
+                                                BgWidget.editeInput({
+                                                  gvc: gvc,
+                                                  title: '寄件人手機',
+                                                  default: vm.delivery[dd.value].SenderCellPhone ?? '',
+                                                  callback: text => {
+                                                    vm.delivery[dd.value].SenderCellPhone = text;
+                                                  },
+                                                  placeHolder: '請輸入寄件人手機 / 您的手機',
+                                                }),
+                                                BgWidget.editeInput({
+                                                  gvc: gvc,
+                                                  title: '寄件人地址',
+                                                  default: vm.delivery[dd.value].SenderAddress ?? '',
+                                                  callback: text => {
+                                                    vm.delivery[dd.value].SenderAddress = text;
+                                                  },
+                                                  placeHolder: '請輸入寄件人地址 / 商家地址',
+                                                }),
+                                                BgWidget.editeInput({
+                                                  gvc: gvc,
+                                                  title: '商店代號',
+                                                  default: vm.delivery[dd.value].MERCHANT_ID ?? '',
+                                                  callback: text => {
+                                                    vm.delivery[dd.value].MERCHANT_ID = text;
+                                                  },
+                                                  placeHolder: '請輸入商店代號',
+                                                }),
+                                                BgWidget.editeInput({
+                                                  gvc: gvc,
+                                                  title: 'HASH KEY',
+                                                  default: vm.delivery[dd.value].HASH_KEY ?? '',
+                                                  callback: text => {
+                                                    vm.delivery[dd.value].HASH_KEY = text;
+                                                  },
+                                                  placeHolder: '請輸入 HASH KEY',
+                                                }),
+                                                BgWidget.editeInput({
+                                                  gvc: gvc,
+                                                  title: 'HASH IV',
+                                                  default: vm.delivery[dd.value].HASH_IV ?? '',
+                                                  callback: text => {
+                                                    vm.delivery[dd.value].HASH_IV = text;
+                                                  },
+                                                  placeHolder: '請輸入 HASH IV',
+                                                }),
+                                              ];
+                                              return array;
+                                            })(),
+                                          ].join(BgWidget.mbContainer(12));
+                                        },
+                                      });
+                                    },
+                                    save: {
+                                      text: '儲存',
+                                      event: gvc => {
+                                        return new Promise<boolean>(resolve => {
+                                          function checkSenderPattern(input: string) {
+                                            const senderPattern = /^[\u4e00-\u9fa5]{2,5}|[a-zA-Z]{4,10}$/;
+                                            return senderPattern.test(input);
+                                          }
 
-                                                function checkPhonePattern(input: string) {
-                                                  const phonePattern = /^09\d{8}$/;
-                                                  return phonePattern.test(input);
-                                                }
+                                          function checkPhonePattern(input: string) {
+                                            const phonePattern = /^09\d{8}$/;
+                                            return phonePattern.test(input);
+                                          }
 
-                                                function checkAddressPattern(input: any) {
-                                                  const addressPattern = /^.{6,60}$/;
-                                                  return addressPattern.test(input);
-                                                }
+                                          function checkAddressPattern(input: any) {
+                                            const addressPattern = /^.{6,60}$/;
+                                            return addressPattern.test(input);
+                                          }
 
-                                                if (
-                                                  CheckInput.isEmpty(vm.delivery[dd.value].SenderName) ||
-                                                  !checkSenderPattern(vm.delivery[dd.value].SenderName)
-                                                ) {
-                                                  dialog.infoMessage({
-                                                    text: html` <div class="text-center">
-                                                      寄件人名稱請設定最多10字元<br />（中文5個字, 英文10個字,<br />不得含指定特殊符號）
-                                                    </div>`,
-                                                  });
-                                                  resolve(false);
-                                                  return;
-                                                }
+                                          if (
+                                            CheckInput.isEmpty(vm.delivery[dd.value].SenderName) ||
+                                            !checkSenderPattern(vm.delivery[dd.value].SenderName)
+                                          ) {
+                                            dialog.infoMessage({
+                                              text: html` <div class="text-center">
+                                                寄件人名稱請設定最多10字元<br />（中文5個字, 英文10個字,<br />不得含指定特殊符號）
+                                              </div>`,
+                                            });
+                                            resolve(false);
+                                            return;
+                                          }
 
-                                                if (
-                                                  CheckInput.isEmpty(vm.delivery[dd.value].SenderCellPhone) ||
-                                                  !checkPhonePattern(vm.delivery[dd.value].SenderCellPhone)
-                                                ) {
-                                                  dialog.infoMessage({ text: '寄件人手機應為09開頭的手機格式' });
-                                                  resolve(false);
-                                                  return;
-                                                }
+                                          if (
+                                            CheckInput.isEmpty(vm.delivery[dd.value].SenderCellPhone) ||
+                                            !checkPhonePattern(vm.delivery[dd.value].SenderCellPhone)
+                                          ) {
+                                            dialog.infoMessage({ text: '寄件人手機應為09開頭的手機格式' });
+                                            resolve(false);
+                                            return;
+                                          }
 
-                                                if (
-                                                  !vm.delivery[dd.value].SenderAddress ||
-                                                  !checkAddressPattern(vm.delivery[dd.value].SenderAddress)
-                                                ) {
-                                                  dialog.infoMessage({
-                                                    text: html` <div class="text-center">
-                                                      請輸入正確的寄件人地址<br />（中文6~60個字）
-                                                    </div>`,
-                                                  });
-                                                  resolve(false);
-                                                  return;
-                                                }
+                                          if (
+                                            !vm.delivery[dd.value].SenderAddress ||
+                                            !checkAddressPattern(vm.delivery[dd.value].SenderAddress)
+                                          ) {
+                                            dialog.infoMessage({
+                                              text: html` <div class="text-center">
+                                                請輸入正確的寄件人地址<br />（中文6~60個字）
+                                              </div>`,
+                                            });
+                                            resolve(false);
+                                            return;
+                                          }
 
-                                                ApiPageConfig.setPrivateConfigV2({
-                                                  key: 'glitter_delivery',
-                                                  value: JSON.stringify(vm.delivery),
-                                                  appName: saasConfig.config.appName,
-                                                }).then((r: { response: any; result: boolean }) => {
-                                                  dialog.dataLoading({ visible: false });
-                                                  if (r.response) {
-                                                    dialog.successMessage({ text: '設定成功' });
-                                                  } else {
-                                                    dialog.errorMessage({ text: '設定失敗' });
-                                                  }
-                                                  resolve(true);
-                                                });
-                                              });
-                                            },
-                                          },
-                                          cancel: {},
+                                          ApiPageConfig.setPrivateConfigV2({
+                                            key: 'glitter_delivery',
+                                            value: JSON.stringify(vm.delivery),
+                                            appName: saasConfig.config.appName,
+                                          }).then((r: { response: any; result: boolean }) => {
+                                            dialog.dataLoading({ visible: false });
+                                            if (r.response) {
+                                              dialog.successMessage({ text: '設定成功' });
+                                            } else {
+                                              dialog.errorMessage({ text: '設定失敗' });
+                                            }
+                                            this.refresh(gvc);
+                                            resolve(true);
+                                          });
                                         });
-                                      } else if (dd.value === 'pay_now') {
-                                        BgWidget.dialog({
-                                          gvc: gvc,
-                                          title: '物流追蹤設定',
-                                          innerHTML: (gvc: GVC) => {
-                                            return gvc.bindView(
-                                              (() => {
-                                                const id = gvc.glitter.getUUID();
-                                                return {
-                                                  bind: id,
-                                                  view: () => {
-                                                    return [
-                                                      BgWidget.openBoxContainer({
-                                                        gvc,
-                                                        tag: 'delivery_alert_info',
-                                                        title: '注意事項',
-                                                        insideHTML: html` <div
-                                                          class="mt-2"
-                                                          style="white-space: normal;"
-                                                        >
-                                                          ${BgWidget.alertInfo('', [
-                                                            '1. 支援四大超商（7-ELEVEN、全家、萊爾富、OK超商）與黑貓',
-                                                            '2. 寄件人名稱請設定最多10字元（中文5個字, 英文10個字, 不得含指定特殊符號）',
-                                                            '3. 寄件人手機應為09開頭的格式',
-                                                          ])}
-                                                        </div>`,
-                                                        height: document.body.clientWidth > 768 ? 300 : 385,
-                                                      }),
-                                                      ...(() => {
-                                                        let array: any = [
-                                                          BgWidget.inlineCheckBox({
-                                                            title: '串接路徑',
-                                                            gvc: gvc,
-                                                            def: vm.delivery[dd.value].Action ?? 'test',
-                                                            array: [
-                                                              {
-                                                                title: '正式站',
-                                                                value: 'main',
-                                                              },
-                                                              {
-                                                                title: '測試站',
-                                                                value: 'test',
-                                                              },
-                                                            ],
-                                                            callback: (text: any) => {
-                                                              vm.delivery[dd.value].Action = text;
-                                                            },
-                                                            type: 'single',
-                                                          }),
-                                                          html` <div
-                                                            onclick="${gvc.event(() => {
-                                                              (window.parent as any).navigator.clipboard.writeText(
-                                                                (window.parent as any).saasConfig.config.url +
-                                                                  `/api-public/v1/delivery/notify?g-app=${(window.parent as any).appName}`
-                                                              );
-                                                              dialog.successMessage({ text: '已複製至剪貼簿' });
-                                                            })}"
-                                                          >
-                                                            ${BgWidget.editeInput({
-                                                              readonly: true,
-                                                              gvc: gvc,
-                                                              title: html` <div
-                                                                class="d-flex flex-column"
-                                                                style="gap:5px;"
-                                                              >
-                                                                物流追蹤通知
-                                                                ${BgWidget.grayNote(
-                                                                  '點擊複製此連結至PAYNOW後台的貨態回傳網址'
-                                                                )}
-                                                              </div>`,
-                                                              default:
-                                                                (window.parent as any).saasConfig.config.url +
-                                                                `/api-public/v1/delivery/notify?g-app=${(window.parent as any).appName}`,
-                                                              placeHolder: '',
-                                                              callback: text => {},
-                                                            })}
-                                                          </div>`,
-                                                          BgWidget.editeInput({
-                                                            gvc: gvc,
-                                                            title: '串接帳號',
-                                                            default: vm.delivery[dd.value].account ?? '',
-                                                            callback: text => {
-                                                              vm.delivery[dd.value].account = text;
-                                                            },
-                                                            placeHolder: '請輸入串接帳號',
-                                                          }),
-                                                          BgWidget.editeInput({
-                                                            gvc: gvc,
-                                                            title: '串接密碼',
-                                                            default: vm.delivery[dd.value].pwd ?? '',
-                                                            callback: text => {
-                                                              vm.delivery[dd.value].pwd = text;
-                                                            },
-                                                            placeHolder: '請輸入串接密碼',
-                                                          }),
-                                                          BgWidget.editeInput({
-                                                            gvc: gvc,
-                                                            title: '寄件人名稱',
-                                                            default: vm.delivery[dd.value].SenderName ?? '',
-                                                            callback: text => {
-                                                              vm.delivery[dd.value].SenderName = text;
-                                                            },
-                                                            placeHolder: '請輸入寄件人名稱 / 您的商家名稱',
-                                                          }),
-                                                          BgWidget.editeInput({
-                                                            gvc: gvc,
-                                                            title: '寄件人手機',
-                                                            default: vm.delivery[dd.value].SenderCellPhone ?? '',
-                                                            callback: text => {
-                                                              vm.delivery[dd.value].SenderCellPhone = text;
-                                                            },
-                                                            placeHolder: '請輸入寄件人手機 / 您的手機',
-                                                          }),
-                                                          BgWidget.editeInput({
-                                                            gvc: gvc,
-                                                            title: '寄件人地址',
-                                                            default: vm.delivery[dd.value].SenderAddress ?? '',
-                                                            callback: text => {
-                                                              vm.delivery[dd.value].SenderAddress = text;
-                                                            },
-                                                            placeHolder: '請輸入寄件人地址 / 商家地址',
-                                                          }),
-                                                          BgWidget.editeInput({
-                                                            gvc: gvc,
-                                                            title: '寄件人信箱',
-                                                            default: vm.delivery[dd.value].SenderEmail ?? '',
-                                                            callback: text => {
-                                                              vm.delivery[dd.value].SenderEmail = text;
-                                                            },
-                                                            placeHolder: '請輸入寄件人信箱',
-                                                          }),
-                                                        ];
-                                                        return array;
-                                                      })(),
-                                                    ].join(BgWidget.mbContainer(12));
+                                      },
+                                    },
+                                    cancel: {
+                                      text: '取消',
+                                      event: gvc => new Promise(() => this.refresh(gvc)),
+                                    },
+                                    xmark: gvc => new Promise(() => this.refresh(gvc)),
+                                  });
+                                } else if (dd.value === 'pay_now') {
+                                  BgWidget.dialog({
+                                    gvc: gvc,
+                                    title: '物流追蹤設定',
+                                    innerHTML: (gvc: GVC) => {
+                                      const id = gvc.glitter.getUUID();
+
+                                      return gvc.bindView({
+                                        bind: id,
+                                        view: () => {
+                                          return [
+                                            BgWidget.openBoxContainer({
+                                              gvc,
+                                              tag: 'delivery_alert_info',
+                                              title: '注意事項',
+                                              insideHTML: html` <div class="mt-2" style="white-space: normal;">
+                                                ${BgWidget.alertInfo('', [
+                                                  '1. 支援四大超商（7-ELEVEN、全家、萊爾富、OK超商）與黑貓',
+                                                  '2. 寄件人名稱請設定最多10字元（中文5個字, 英文10個字, 不得含指定特殊符號）',
+                                                  '3. 寄件人手機應為09開頭的格式',
+                                                ])}
+                                              </div>`,
+                                              height: document.body.clientWidth > 768 ? 300 : 385,
+                                            }),
+                                            ...(() => {
+                                              let array: any = [
+                                                BgWidget.inlineCheckBox({
+                                                  title: '串接路徑',
+                                                  gvc: gvc,
+                                                  def: vm.delivery[dd.value].Action ?? 'test',
+                                                  array: [
+                                                    {
+                                                      title: '正式站',
+                                                      value: 'main',
+                                                    },
+                                                    {
+                                                      title: '測試站',
+                                                      value: 'test',
+                                                    },
+                                                  ],
+                                                  callback: (text: any) => {
+                                                    vm.delivery[dd.value].Action = text;
                                                   },
-                                                };
-                                              })()
-                                            );
-                                          },
-                                          save: {
-                                            text: '儲存',
-                                            event: () => {
-                                              return new Promise<boolean>(resolve => {
-                                                ApiPageConfig.setPrivateConfigV2({
-                                                  key: 'glitter_delivery',
-                                                  value: JSON.stringify(vm.delivery),
-                                                  appName: saasConfig.config.appName,
-                                                }).then((r: { response: any; result: boolean }) => {
-                                                  dialog.dataLoading({ visible: false });
-                                                  if (r.response) {
-                                                    dialog.successMessage({ text: '設定成功' });
-                                                  } else {
-                                                    dialog.errorMessage({ text: '設定失敗' });
-                                                  }
-                                                  resolve(true);
-                                                });
-                                              });
-                                            },
-                                          },
-                                          cancel: {},
+                                                  type: 'single',
+                                                }),
+                                                html` <div
+                                                  onclick="${gvc.event(() => {
+                                                    (window.parent as any).navigator.clipboard.writeText(
+                                                      (window.parent as any).saasConfig.config.url +
+                                                        `/api-public/v1/delivery/notify?g-app=${(window.parent as any).appName}`
+                                                    );
+                                                    dialog.successMessage({ text: '已複製至剪貼簿' });
+                                                  })}"
+                                                >
+                                                  ${BgWidget.editeInput({
+                                                    readonly: true,
+                                                    gvc: gvc,
+                                                    title: html` <div class="d-flex flex-column" style="gap: 4px;">
+                                                      物流追蹤通知
+                                                      ${BgWidget.grayNote('點擊複製此連結至PAYNOW後台的貨態回傳網址')}
+                                                    </div>`,
+                                                    default:
+                                                      (window.parent as any).saasConfig.config.url +
+                                                      `/api-public/v1/delivery/notify?g-app=${(window.parent as any).appName}`,
+                                                    placeHolder: '',
+                                                    callback: text => {},
+                                                  })}
+                                                </div>`,
+                                                BgWidget.editeInput({
+                                                  gvc: gvc,
+                                                  title: '串接帳號',
+                                                  default: vm.delivery[dd.value].account ?? '',
+                                                  callback: text => {
+                                                    vm.delivery[dd.value].account = text;
+                                                  },
+                                                  placeHolder: '請輸入串接帳號',
+                                                }),
+                                                BgWidget.editeInput({
+                                                  gvc: gvc,
+                                                  title: '串接密碼',
+                                                  default: vm.delivery[dd.value].pwd ?? '',
+                                                  callback: text => {
+                                                    vm.delivery[dd.value].pwd = text;
+                                                  },
+                                                  placeHolder: '請輸入串接密碼',
+                                                }),
+                                                BgWidget.editeInput({
+                                                  gvc: gvc,
+                                                  title: '寄件人名稱',
+                                                  default: vm.delivery[dd.value].SenderName ?? '',
+                                                  callback: text => {
+                                                    vm.delivery[dd.value].SenderName = text;
+                                                  },
+                                                  placeHolder: '請輸入寄件人名稱 / 您的商家名稱',
+                                                }),
+                                                BgWidget.editeInput({
+                                                  gvc: gvc,
+                                                  title: '寄件人手機',
+                                                  default: vm.delivery[dd.value].SenderCellPhone ?? '',
+                                                  callback: text => {
+                                                    vm.delivery[dd.value].SenderCellPhone = text;
+                                                  },
+                                                  placeHolder: '請輸入寄件人手機 / 您的手機',
+                                                }),
+                                                BgWidget.editeInput({
+                                                  gvc: gvc,
+                                                  title: '寄件人地址',
+                                                  default: vm.delivery[dd.value].SenderAddress ?? '',
+                                                  callback: text => {
+                                                    vm.delivery[dd.value].SenderAddress = text;
+                                                  },
+                                                  placeHolder: '請輸入寄件人地址 / 商家地址',
+                                                }),
+                                                BgWidget.editeInput({
+                                                  gvc: gvc,
+                                                  title: '寄件人信箱',
+                                                  default: vm.delivery[dd.value].SenderEmail ?? '',
+                                                  callback: text => {
+                                                    vm.delivery[dd.value].SenderEmail = text;
+                                                  },
+                                                  placeHolder: '請輸入寄件人信箱',
+                                                }),
+                                              ];
+                                              return array;
+                                            })(),
+                                          ].join(BgWidget.mbContainer(12));
+                                        },
+                                      });
+                                    },
+                                    save: {
+                                      text: '儲存',
+                                      event: gvc => {
+                                        return new Promise<boolean>(resolve => {
+                                          ApiPageConfig.setPrivateConfigV2({
+                                            key: 'glitter_delivery',
+                                            value: JSON.stringify(vm.delivery),
+                                            appName: saasConfig.config.appName,
+                                          }).then((r: { response: any; result: boolean }) => {
+                                            dialog.dataLoading({ visible: false });
+                                            if (r.response) {
+                                              dialog.successMessage({ text: '設定成功' });
+                                            } else {
+                                              dialog.errorMessage({ text: '設定失敗' });
+                                            }
+                                            this.refresh(gvc);
+                                            resolve(true);
+                                          });
                                         });
-                                      }
-                                    }),
-                                  })}
-                                </div>`;
-                              })()}
-                              <div
-                                style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 28px; display: inline-flex"
-                              >
-                                <div style="min-width: 46px;max-width: 46px;">
-                                  <img src="${dd.src}" />
-                                </div>
-                                <div
-                                  style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: inline-flex"
-                                >
-                                  <div class="tx_normal">${dd.title}</div>
-                                  <div class="d-flex align-items-center" style="gap:4px;">
-                                    <div class="tx_normal">${vm.delivery[dd.value].toggle ? `開啟` : `關閉`}</div>
-                                    <div class="cursor_pointer form-check form-switch" style="margin-top: 10px;">
-                                      <input
-                                        class="form-check-input"
-                                        type="checkbox"
-                                        onchange="${gvc.event((e, event) => {
-                                          vm.delivery[dd.value].toggle = !vm.delivery[dd.value].toggle;
-                                          saveDelivery();
-                                          gvc.notifyDataChange(id);
-                                        })}"
-                                        ${vm.delivery[dd.value].toggle ? `checked` : ''}
-                                      />
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                          ${document.body.clientWidth > 768 ? '' : BgWidget.mbContainer(8)}
-                        `;
+                                      },
+                                    },
+                                    cancel: {
+                                      text: '取消',
+                                      event: gvc => new Promise(() => this.refresh(gvc)),
+                                    },
+                                    xmark: gvc => new Promise(() => this.refresh(gvc)),
+                                  });
+                                }
+                              }),
+                            }),
+                          ],
+                        });
                       })
                       .join('');
                   },
@@ -3161,17 +3100,36 @@ export class ShoppingFinanceSetting {
         divCreate: {
           class: `d-flex justify-content-center w-100 flex-column align-items-center `,
         },
+        onCreate: () => {
+          if (this.loading) {
+            saasConfig.api
+              .getPrivateConfig(saasConfig.config.appName, 'logistics_setting')
+              .then((r: { response: any; result: boolean }) => {
+                if (r.response.result[0]) {
+                  vm.data = r.response.result[0].value;
+                }
+                if (!vm.data.language_data) {
+                  vm.data.language_data = {
+                    'en-US': { info: '' },
+                    'zh-CN': { info: '' },
+                    'zh-TW': { info: vm.data.info || '' },
+                  };
+                }
+                this.loading = false;
+                gvc.notifyDataChange(this.id);
+              });
+          }
+        },
       };
     });
   }
 
+  // *發票設定頁
   static invoice_setting_v2(gvc: GVC, widget: any) {
     const dialog = new ShareDialog(gvc.glitter);
-    const saasConfig: {
-      config: any;
-      api: any;
-    } = (window.parent as any).saasConfig;
     const glitter = (window as any).glitter;
+    const saasConfig = this.saasConfig;
+
     const vm: {
       id: string;
       loading: boolean;
@@ -3235,7 +3193,7 @@ export class ShoppingFinanceSetting {
                               bind: id,
                               view: () => {
                                 return html`
-                                  <div class="d-flex flex-column" style="gap:18px;">
+                                  <div class="d-flex flex-column" style="gap: 18px;">
                                     <div class="tx_normal fw-bold">服務商選擇</div>
                                     ${[
                                       // {
@@ -3280,7 +3238,7 @@ export class ShoppingFinanceSetting {
                                           ${[
                                             html` <div
                                               class="d-flex align-items-center cursor_pointer"
-                                              style="gap:8px;"
+                                              style="gap: 8px;"
                                               onclick="${gvc.event(() => {
                                                 vm.data.fincial = dd.value;
                                                 gvc.notifyDataChange(id);
@@ -3296,7 +3254,7 @@ export class ShoppingFinanceSetting {
                                                 class="ms-2 border-end position-absolute h-100"
                                                 style="left: 0px;"
                                               ></div>
-                                              <div class="flex-fill" style="margin-left:30px;max-width: 518px;">
+                                              <div class="flex-fill" style="margin-left: 30px;max-width: 518px;">
                                                 ${(() => {
                                                   if (
                                                     vm.data.fincial === 'nouse' ||
@@ -3334,10 +3292,10 @@ export class ShoppingFinanceSetting {
                                                       }),
                                                       BgWidget.editeInput({
                                                         gvc: gvc,
-                                                        title: '特店編號',
+                                                        title: '商店代號',
                                                         default: vm.data.merchNO ?? '',
                                                         type: 'text',
-                                                        placeHolder: '請輸入特店編號',
+                                                        placeHolder: '請輸入商店代號',
                                                         callback: text => {
                                                           vm.data.merchNO = text;
                                                         },
@@ -3394,7 +3352,7 @@ export class ShoppingFinanceSetting {
                     },
                     divCreate: {
                       class: 'd-flex flex-column flex-column-reverse flex-md-row px-0',
-                      style: 'gap:10px;',
+                      style: 'gap: 10px;',
                     },
                   };
                 })
@@ -3403,9 +3361,7 @@ export class ShoppingFinanceSetting {
               html` <div class="update-bar-container">
                 ${BgWidget.save(
                   gvc.event(() => {
-                    save(() => {
-                      dialog.successMessage({ text: '設定成功' });
-                    });
+                    save(() => dialog.successMessage({ text: '設定成功' }));
                   })
                 )}
               </div>`,