ts-glitter 22.5.7 → 22.5.8

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

@@ -7,6 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var _a;
 import { EditorElem } from '../glitterBundle/plugins/editor-elem.js';
 import { ShareDialog } from '../glitterBundle/dialog/ShareDialog.js';
 import { BgWidget } from '../backend-manager/bg-widget.js';
@@ -25,839 +26,174 @@ import { ShoppingShipmentSetting } from './shopping-shipment-setting.js';
 const html = String.raw;
 export class ShoppingFinanceSetting {
     static main(gvc, pos) {
+        this.gvc = gvc;
+        this.id = 'shopping-finance-setting-main';
+        this.loading = true;
         pos = `${pos}` === 'true';
-        const dialog = new ShareDialog(gvc.glitter);
-        const saasConfig = window.parent.saasConfig;
+        let keyData = { payment_info_custom: [] };
         const vm = {
-            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',
         };
-        let keyData = { 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) {
+        const dialog = new ShareDialog(gvc.glitter);
+        const saasConfig = this.saasConfig;
+        const saveData = () => {
+            saasConfig.api.setPrivateConfig(saasConfig.config.appName, 'glitter_finance', keyData).then(() => this.refresh());
+        };
+        const customFinance = (obj) => {
             const custom_finance = structuredClone(obj.data || {
                 id: gvc.glitter.getUUID(),
                 name: '',
                 text: '',
                 shipmentSupport: [],
             });
-            let form = 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,
-                        },
-                    ]);
+            const 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,
+                },
+            ]);
+            const setting = {
+                title: '金流設定',
+                key: 'setting',
+                html: (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 note = {
+                title: '付款說明',
+                key: 'note',
+                html: (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('');
+                },
+            };
+            const shipment = {
+                key: 'shipment',
+                title: '指定物流',
+                html: (gvc) => {
                     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 shipment = {
-                                key: 'shipment',
-                                title: '指定物流',
-                                html: gvc.bindView({
-                                    bind: gvc.glitter.getUUID(),
-                                    view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, custom_finance),
-                                }),
-                            };
-                            const cartSetting = {
-                                key: 'cartSetting',
-                                title: '購物車設定',
-                                html: gvc.bindView({
-                                    bind: gvc.glitter.getUUID(),
-                                    view: () => ShoppingFinanceSetting.setCartSetting(gvc, custom_finance),
-                                }),
-                            };
-                            return ShoppingFinanceSetting.tabView(gvc, [setting, note, shipment, cartSetting]);
-                        },
+                        bind: gvc.glitter.getUUID(),
+                        view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, custom_finance),
                     });
                 },
-                footer_html: gvc => {
-                    const saveButton = BgWidget.save(gvc.event(() => {
-                        return new Promise(() => __awaiter(this, void 0, void 0, function* () {
-                            var _a;
-                            if (!custom_finance.name) {
-                                dialog.errorMessage({ text: '請輸入金流名稱' });
-                                return;
-                            }
-                            keyData.payment_info_custom = (_a = keyData.payment_info_custom) !== null && _a !== void 0 ? _a : [];
-                            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) => d1.id === custom_finance.id);
-                                if (index !== -1) {
-                                    keyData.payment_info_custom[index] = custom_finance;
-                                }
-                                else {
-                                    console.error('找不到對應的金流設定 ID:', custom_finance.id);
+            };
+            const cartSetting = {
+                key: 'cartSetting',
+                title: '購物車設定',
+                html: (gvc) => {
+                    return gvc.bindView({
+                        bind: gvc.glitter.getUUID(),
+                        view: () => ShoppingFinanceSetting.setCartSetting(gvc, custom_finance),
+                    });
+                },
+            };
+            return (obj.function === 'plus' ? [setting] : [setting, note, shipment, cartSetting]).map(item => {
+                return {
+                    button: { color: 'gray', size: 'sm' },
+                    text: { name: item.title },
+                    event: gvc.event(() => __awaiter(this, void 0, void 0, function* () {
+                        this.settingDialog(gvc, item.title, gvc => html `<div>${item.html(gvc)}</div>`, gvc => {
+                            return BgWidget.save(gvc.event(() => __awaiter(this, void 0, void 0, function* () {
+                                var _b;
+                                if (!custom_finance.name) {
+                                    dialog.errorMessage({ text: '請輸入金流名稱' });
                                     return;
                                 }
-                            }
-                            dialog.dataLoading({ visible: true });
-                            try {
-                                yield form.save();
-                                yield 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();
-                        }));
-                    }));
-                    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) => {
-                                            return obj.data.id !== d1.id;
-                                        });
-                                        dialog.dataLoading({ visible: true });
-                                        saasConfig.api.setPrivateConfig(saasConfig.config.appName, 'glitter_finance', keyData);
-                                        dialog.dataLoading({ visible: false });
-                                        gvc.closeDialog();
-                                        refresh();
+                                if (vm.page === 'pos') {
+                                    custom_finance.type = 'pos';
+                                }
+                                keyData.payment_info_custom = (_b = keyData.payment_info_custom) !== null && _b !== void 0 ? _b : [];
+                                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) => d1.id === custom_finance.id);
+                                    if (index !== -1) {
+                                        keyData.payment_info_custom[index] = custom_finance;
                                     }
-                                },
-                            });
-                        })),
-                        saveButton,
-                    ].join('');
-                },
+                                    else {
+                                        console.error('找不到對應的金流設定 ID:', custom_finance.id);
+                                        return;
+                                    }
+                                }
+                                dialog.dataLoading({ visible: true });
+                                try {
+                                    yield form.save();
+                                    yield 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 });
+                                }
+                                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>`,
+        };
+        return BgWidget.container([
+            html ` <div class="title-container ${pos ? 'd-none' : ''}">
+          ${BgWidget.title('金流設定')}
+          <div class="flex-fill"></div>
+        </div>`,
             gvc.bindView({
                 bind: vm.id,
                 view: () => {
-                    var _a;
-                    if (vm.loading) {
+                    if (this.loading) {
                         return BgWidget.spinner();
                     }
                     try {
-                        keyData.off_line_support = (_a = keyData.off_line_support) !== null && _a !== void 0 ? _a : Object.assign({ line: false, atm: false, cash_on_delivery: false }, keyData.payment_info_custom.map((dd) => {
-                            return {
-                                [dd.id]: false,
-                            };
-                        }));
-                        Object.keys(keyData.off_line_support).map(key => {
-                            if (['line', 'atm', 'cash_on_delivery'].includes(key) ||
-                                keyData.payment_info_custom.some((item) => item.id === key)) {
-                                return;
-                            }
-                            delete keyData.off_line_support[key];
-                        });
-                        let h = '';
-                        const cloneData = structuredClone(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 => {
-                                var _a;
-                                keyData[dd.key] = (_a = keyData[dd.key]) !== null && _a !== void 0 ? _a : {};
-                                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) => {
-                                                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) => {
-                                                                                key_d.ActionURL = text;
-                                                                            },
-                                                                        }),
-                                                                        BgWidget.inlineCheckBox({
-                                                                            title: '開通付款方式',
-                                                                            gvc: gvc,
-                                                                            def: [
-                                                                                'credit',
-                                                                                'atm',
-                                                                                'web_atm',
-                                                                                'c_code',
-                                                                                'c_bar_code',
-                                                                            ].filter(dd => {
-                                                                                return key_d[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) => {
-                                                                                ['credit', 'atm', 'web_atm', 'c_code', 'c_bar_code'].map(dd => {
-                                                                                    key_d[dd] = !!array.find((d1) => {
-                                                                                        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) => {
-                                                                                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) => {
-                                                                                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) => {
-                                                                                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),
-                                                        }),
-                                                    };
-                                                    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>`;
-                        }
-                        if (vm.page === 'offline') {
-                            const offlinePayArray = [
-                                ...PaymentConfig.defalutOfflinePay,
-                                ...keyData.payment_info_custom.map((dd) => {
-                                    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) => {
-                                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[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[dd.key] = !keyData.off_line_support[dd.key];
-                                    saveData();
-                                })}"
-                                        ${keyData.off_line_support[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) => dd.key === d1.id),
-                                            });
-                                            return;
-                                        }
-                                        BgWidget.settingDialog({
-                                            gvc: gvc,
-                                            title: '金流設定',
-                                            width: 800,
-                                            innerHTML: gvc => {
-                                                const keyMap = {
-                                                    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>`;
-                        }
-                        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>
-
-                              <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) => {
-                                                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>`;
-                        }
+                        this.initOfflineSupport(keyData);
+                        this.cleanupOfflineSupport(keyData);
                         return [
-                            pos
-                                ? ''
-                                : BgWidget.tab([
-                                    { key: 'online', title: '線上金流' },
-                                    { key: 'offline', title: '線下金流' },
-                                ], gvc, vm.page, (key) => {
-                                    vm.page = key;
-                                    gvc.notifyDataChange(vm.id);
-                                }),
-                            h,
+                            pos ? '' : this.renderTabs(gvc, vm),
+                            this.renderPageContent(gvc, vm, keyData, saveData, customFinance),
                         ].join('');
                     }
                     catch (e) {
                         console.error(e);
-                        return `${e}`;
+                        return '發生錯誤';
                     }
                 },
                 onCreate: () => {
-                    if (vm.loading) {
+                    if (this.loading) {
                         return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
                             const data = yield saasConfig.api.getPrivateConfig(saasConfig.config.appName, 'glitter_finance');
                             if (data.response.result[0]) {
@@ -865,7 +201,7 @@ export class ShoppingFinanceSetting {
                             }
                             resolve();
                         })).then(() => {
-                            vm.loading = false;
+                            this.loading = false;
                             gvc.notifyDataChange(vm.id);
                         });
                     }
@@ -878,23 +214,240 @@ export class ShoppingFinanceSetting {
                     }
                 },
             }),
-        ].join('')}
-        ${pos ? '' : BgWidget.mbContainer(240)}
-      `, {
-            style: pos ? `margin-top: 0px !important;` : '',
+            pos ? '' : BgWidget.mbContainer(240),
+        ].join(''), {
+            style: pos ? 'margin-top: 0px !important;' : '',
+        });
+    }
+    static initOfflineSupport(keyData) {
+        var _b;
+        keyData.off_line_support = (_b = keyData.off_line_support) !== null && _b !== void 0 ? _b : Object.assign({ line: false, atm: false, cash_on_delivery: false }, keyData.payment_info_custom.map((dd) => ({
+            [dd.id]: false,
+        })));
+    }
+    static cleanupOfflineSupport(keyData) {
+        Object.keys(keyData.off_line_support).forEach(key => {
+            const isValidKey = ['line', 'atm', 'cash_on_delivery'].includes(key) ||
+                keyData.payment_info_custom.some((item) => item.id === key);
+            if (!isValidKey) {
+                delete keyData.off_line_support[key];
+            }
         });
     }
+    static renderTabs(gvc, vm) {
+        return BgWidget.tab([
+            { key: 'online', title: '線上金流' },
+            { key: 'offline', title: '線下金流' },
+        ], gvc, vm.page, (key) => {
+            vm.page = key;
+            gvc.notifyDataChange(vm.id);
+        });
+    }
+    static renderPageContent(gvc, vm, keyData, saveData, setCustomFinance) {
+        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, keyData, saveData) {
+        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 => {
+            var _b;
+            keyData[dd.key] = (_b = keyData[dd.key]) !== null && _b !== void 0 ? _b : {};
+            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, keyData, saveData, offlineCustomFinance) {
+        const dialog = new ShareDialog(gvc.glitter);
+        const saasConfig = this.saasConfig;
+        const offlinePayArray = [
+            ...PaymentConfig.defalutOfflinePay,
+            ...keyData.payment_info_custom
+                .filter((dd) => {
+                return dd.type !== 'pos';
+            })
+                .map((dd) => {
+                return {
+                    key: dd.id,
+                    name: html `${Language.getLanguageCustomText(dd.name)}`,
+                    custom: true,
+                };
+            }),
+        ];
+        const deleteEvent = (key) => gvc.event(() => {
+            dialog.checkYesOrNot({
+                text: '是否確認刪除此金流？',
+                callback: (response) => __awaiter(this, void 0, void 0, function* () {
+                    if (response) {
+                        const data = yield 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) => {
+                                return key !== d1.id;
+                            });
+                            dialog.dataLoading({ visible: true });
+                            saasConfig.api.setPrivateConfig(saasConfig.config.appName, 'glitter_finance', keyData);
+                            dialog.dataLoading({ visible: false });
+                            this.refresh();
+                        }
+                    }
+                }),
+            });
+        });
+        const keyMap = key => {
+            const maps = {
+                atm: this.atm(gvc, key, keyData),
+                line: this.lineIPassMoney(gvc, key, keyData),
+                cash_on_delivery: this.cashOnDelivery(gvc, key, keyData),
+            };
+            return maps[key] || [];
+        };
+        return html ` <div class="px-md-0 px-2 mb-2">
+        ${BgWidget.normalInsignia('透過設定線下金流，結帳後訂單將進入手動核款的流程，亦可使用超商取貨付款')}
+      </div>
+      <div class="row m-0">
+        ${offlinePayArray
+            .map((dd) => {
+            var _b;
+            keyData[dd.key] = (_b = keyData[dd.key]) !== null && _b !== void 0 ? _b : {};
+            const button_action = dd.custom
+                ? offlineCustomFinance({
+                    function: 'replace',
+                    data: keyData.payment_info_custom.find((d1) => 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>`;
+    }
+    static posPayment(gvc, keyData, saveData, posCustomFinance) {
+        const dialog = new ShareDialog(gvc.glitter);
+        const saasConfig = this.saasConfig;
+        const posCashflow = [
+            ...PaymentConfig.onlinePay.filter(item => item.type === 'pos'),
+            ...keyData.payment_info_custom
+                .filter((dd) => {
+                return dd.type === 'pos';
+            })
+                .map((dd) => {
+                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) => gvc.event(() => {
+            dialog.checkYesOrNot({
+                text: '是否確認刪除此金流？',
+                callback: (response) => __awaiter(this, void 0, void 0, function* () {
+                    if (response) {
+                        const data = yield 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) => {
+                                return key !== d1.id;
+                            });
+                            dialog.dataLoading({ visible: true });
+                            saasConfig.api.setPrivateConfig(saasConfig.config.appName, 'glitter_finance', keyData);
+                            dialog.dataLoading({ visible: false });
+                            this.refresh();
+                        }
+                    }
+                }),
+            });
+        });
+        return html `<div class="px-md-0 px-2 mb-2">${BgWidget.normalInsignia('設定實體店面所需串接的付款方式')}</div>
+      <div class="row m-0">
+        ${posCashflow
+            .map(dd => {
+            var _b;
+            keyData[dd.key] = (_b = keyData[dd.key]) !== null && _b !== void 0 ? _b : {};
+            const data = structuredClone(keyData[dd.key]);
+            const button_action = (() => {
+                if (dd.custom) {
+                    return posCustomFinance({
+                        function: 'replace',
+                        data: keyData.payment_info_custom.find((d1) => dd.key === d1.id),
+                    }).map(item => {
+                        return BgWidget.customButton(item);
+                    });
+                }
+                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>`;
+    }
     static tabView(gvc, viewList) {
-        var _a;
+        var _b;
         const vm = {
             id: gvc.glitter.getUUID(),
-            key: ((_a = viewList[0].key) !== null && _a !== void 0 ? _a : ''),
+            key: ((_b = viewList[0].key) !== null && _b !== void 0 ? _b : ''),
         };
         return gvc.bindView({
             bind: vm.id,
             view: () => {
-                var _a, _b;
-                const page = (_b = (_a = viewList.find(view => view.key === vm.key)) === null || _a === void 0 ? void 0 : _a.html) !== null && _b !== void 0 ? _b : '';
+                var _b, _c;
+                const page = (_c = (_b = viewList.find(view => view.key === vm.key)) === null || _b === void 0 ? void 0 : _b.html) !== null && _c !== void 0 ? _c : '';
                 return [
                     BgWidget.tab(viewList, gvc, vm.key, res => {
                         vm.key = res;
@@ -905,15 +458,53 @@ export class ShoppingFinanceSetting {
             },
         });
     }
+    static settingDialog(gvc, title, innerHTML, footerHTML, closeCallback) {
+        return BgWidget.settingDialog({
+            gvc,
+            title,
+            innerHTML: gvc => innerHTML(gvc),
+            footer_html: gvc => footerHTML(gvc),
+            closeCallback: closeCallback,
+        });
+    }
+    static buttonListView(gvc, key, keyData, viewList) {
+        return viewList.map(item => {
+            return BgWidget.customButton({
+                button: { color: 'gray', size: 'sm' },
+                text: { name: item.title },
+                event: gvc.event(() => __awaiter(this, void 0, void 0, function* () {
+                    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(() => __awaiter(this, void 0, void 0, function* () {
+                                try {
+                                    const saasConfig = this.saasConfig;
+                                    const data = yield 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 setShipmentSupport(gvc, data) {
         return __awaiter(this, void 0, void 0, function* () {
             const id = gvc.glitter.getUUID();
-            const saasConfig = window.parent.saasConfig;
+            const saasConfig = this.saasConfig;
             const logiData = yield saasConfig.api.getPrivateConfig(saasConfig.config.appName, 'logistics_setting');
             const custom_delivery = (() => {
-                var _a, _b, _c;
+                var _b, _c, _d;
                 try {
-                    return ((_c = (_b = (_a = logiData === null || logiData === void 0 ? void 0 : logiData.response) === null || _a === void 0 ? void 0 : _a.result[0]) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.custom_delivery) || [];
+                    return ((_d = (_c = (_b = logiData === null || logiData === void 0 ? void 0 : logiData.response) === null || _b === void 0 ? void 0 : _b.result[0]) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.custom_delivery) || [];
                 }
                 catch (error) {
                     console.error(error);
@@ -932,26 +523,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);
@@ -994,7 +575,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
@@ -1035,11 +616,11 @@ export class ShoppingFinanceSetting {
         });
     }
     static setCartSetting(gvc, data, type = 'cashflow') {
-        var _a;
+        var _b;
         const id = gvc.glitter.getUUID();
         const dialog = new ShareDialog(gvc.glitter);
         const t = type === 'cashflow' ? '金' : '物';
-        data.cartSetting = Object.assign({ minimumTotal: 0, maximumTotal: 0, freeShipmnetTarget: 0, orderFormula: [] }, ((_a = data.cartSetting) !== null && _a !== void 0 ? _a : {}));
+        data.cartSetting = Object.assign({ minimumTotal: 0, maximumTotal: 0, freeShipmnetTarget: 0, orderFormula: [] }, ((_b = data.cartSetting) !== null && _b !== void 0 ? _b : {}));
         function questionDialog(text) {
             return BgWidget.questionButton(gvc.event(() => {
                 BgWidget.quesDialog({
@@ -1080,44 +661,48 @@ 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: '運費',
-                        },
-                    ], data.cartSetting.orderFormula, result => {
-                        data.cartSetting.orderFormula = result;
-                    }, { single: false }),
+                    [
+                        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;
+                        }, { 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',
@@ -1128,7 +713,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',
@@ -1140,7 +725,7 @@ 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>
+                        title: html `<div class="tx_700">滿額免運 (輸入 0 則不啟用)</div>
               ${BgWidget.grayNote('購物車達到此金額即享有免運優惠')}`,
                         default: `${data.cartSetting.freeShipmnetTarget}`,
                         type: 'number',
@@ -1149,103 +734,418 @@ export class ShoppingFinanceSetting {
                         },
                         placeHolder: '請輸入金額',
                     }),
-                ].join('');
+                ].join(BgWidget.mbContainer(18));
+            },
+        });
+    }
+    static ePayForm(gvc, key_d, brand) {
+        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) => {
+                    key_d.ActionURL = text;
+                },
+            }),
+            BgWidget.inlineCheckBox({
+                title: '開通付款方式',
+                gvc: gvc,
+                def: ['credit', 'atm', 'web_atm', 'c_code', 'c_bar_code'].filter(dd => {
+                    return key_d[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) => {
+                    ['credit', 'atm', 'web_atm', 'c_code', 'c_bar_code'].map(dd => {
+                        key_d[dd] = !!array.find((d1) => {
+                            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('');
+    }
+    static paypalForm(gvc, key_d) {
+        return [
+            BgWidget.inlineCheckBox({
+                title: '串接路徑',
+                gvc: gvc,
+                def: `${key_d.BETA}`,
+                array: [
+                    {
+                        title: '正式站',
+                        value: `false`,
+                    },
+                    {
+                        title: '測試站',
+                        value: `true`,
+                    },
+                ],
+                callback: (text) => {
+                    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('');
+    }
+    static linepayForm(gvc, key_d) {
+        return [
+            BgWidget.inlineCheckBox({
+                title: '串接路徑',
+                gvc: gvc,
+                def: `${key_d.BETA}`,
+                array: [
+                    {
+                        title: '正式站',
+                        value: `false`,
+                    },
+                    {
+                        title: '測試站',
+                        value: `true`,
+                    },
+                ],
+                callback: (text) => {
+                    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, key_d) {
+        return [
+            BgWidget.editeInput({
+                gvc: gvc,
+                title: 'STORE_ID',
+                default: key_d.STORE_ID,
+                callback: text => {
+                    key_d.STORE_ID = text;
+                },
+                placeHolder: '請輸入STORE_ID',
+            }),
+        ].join('');
+    }
+    static paynowForm(gvc, key_d) {
+        return [
+            BgWidget.inlineCheckBox({
+                title: '串接路徑',
+                gvc: gvc,
+                def: `${key_d.BETA}`,
+                array: [
+                    {
+                        title: '正式站',
+                        value: `false`,
+                    },
+                    {
+                        title: '測試站',
+                        value: `true`,
+                    },
+                ],
+                callback: (text) => {
+                    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, key, key_d) {
+        const setting = {
+            key: 'setting',
+            title: '基本設定',
+            html: (gvc) => {
+                return 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 (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) => {
+                return gvc.bindView({
+                    bind: gvc.glitter.getUUID(),
+                    view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, key_d),
+                });
+            },
+        };
+        const cartSetting = {
+            key: 'cartSetting',
+            title: '購物車設定',
+            html: (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, keyData) {
-        var _a;
-        keyData.cash_on_delivery = (_a = keyData.cash_on_delivery) !== null && _a !== void 0 ? _a : { shipmentSupport: [] };
+    static cashOnDelivery(gvc, key, keyData) {
+        var _b;
+        keyData.cash_on_delivery = (_b = keyData.cash_on_delivery) !== null && _b !== void 0 ? _b : { shipmentSupport: [] };
         const shipment = {
             key: 'shipment',
             title: '指定物流',
-            html: gvc.bindView({
-                bind: gvc.glitter.getUUID(),
-                view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, keyData.cash_on_delivery),
-            }),
+            html: (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) => {
+                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]);
     }
-    static lineIPassMoney(gvc, keyData) {
-        var _a;
-        keyData.payment_info_line_pay = (_a = keyData.payment_info_line_pay) !== null && _a !== void 0 ? _a : { text: '' };
+    static lineIPassMoney(gvc, key, keyData) {
+        var _b;
+        keyData.payment_info_line_pay = (_b = keyData.payment_info_line_pay) !== null && _b !== void 0 ? _b : { 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>`;
-                return gvc.bindView({
-                    bind: id,
-                    view: () => {
-                        var _a;
-                        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: (_a = keyData.payment_info_line_pay.text) !== null && _a !== void 0 ? _a : '',
-                                callback: content => {
-                                    keyData.payment_info_line_pay.text = content;
-                                },
-                                title: '付款說明',
-                            }),
-                        ].join('');
-                    },
-                });
-            })(),
+            html: (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: () => {
+                            var _b;
+                            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: (_b = keyData.payment_info_line_pay.text) !== null && _b !== void 0 ? _b : '',
+                                    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) => {
+                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) => {
+                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,
+        ]);
     }
-    static atm(gvc, keyData) {
-        var _a;
-        keyData.payment_info_atm = (_a = keyData.payment_info_atm) !== null && _a !== void 0 ? _a : {
+    static atm(gvc, key, keyData) {
+        var _b;
+        keyData.payment_info_atm = (_b = keyData.payment_info_atm) !== null && _b !== void 0 ? _b : {
             bank_account: '',
             bank_code: '',
             bank_name: '',
@@ -1254,224 +1154,248 @@ 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> `;
-                return gvc.bindView({
-                    bind: id,
-                    view: () => {
-                        var _a, _b;
-                        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: (_b = (_a = keyData.payment_info_atm) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : '',
-                                callback: content => {
-                                    keyData.payment_info_atm.text = content;
+            html: (gvc) => {
+                return (() => {
+                    const id = gvc.glitter.getUUID();
+                    const defText = html `<p>當日下單匯款，隔日出貨，後天到貨。</p>
+            <p>若有需要統一編號 請提早告知</p>
+            <p>------------------------------------------------------------------</p>
+            <p>＊採臨櫃匯款者，電匯單上匯款人姓名與聯絡電話請務必填寫。</p> `;
+                    return gvc.bindView({
+                        bind: id,
+                        view: () => {
+                            var _b, _c;
+                            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);
-                                },
-                                title: '付款說明',
-                            }),
-                        ].join('');
-                    },
-                    divCreate: { class: 'guide2-5' },
-                });
-            })(),
+                                }))}
+                </div>`,
+                                BgWidget.richTextEditor({
+                                    gvc: gvc,
+                                    content: (_c = (_b = keyData.payment_info_atm) === null || _b === void 0 ? void 0 : _b.text) !== null && _c !== void 0 ? _c : '',
+                                    callback: content => {
+                                        keyData.payment_info_atm.text = content;
+                                        gvc.notifyDataChange(id);
+                                    },
+                                    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) => {
+                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) => {
+                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]);
     }
-    static linePayScan(gvc, data) {
+    static linePayScan(gvc, key, data) {
         const cashflow = {
             key: 'cashflow',
             title: '基本設定',
-            html: html ` ${[
-                BgWidget.inlineCheckBox({
-                    title: '串接路徑',
-                    gvc: gvc,
-                    def: `${data.BETA}`,
-                    array: [
-                        {
-                            title: '正式站',
-                            value: `false`,
+            html: (gvc) => {
+                return [
+                    BgWidget.inlineCheckBox({
+                        title: '串接路徑',
+                        gvc: gvc,
+                        def: `${data.BETA}`,
+                        array: [
+                            {
+                                title: '正式站',
+                                value: `false`,
+                            },
+                            {
+                                title: '測試站',
+                                value: `true`,
+                            },
+                        ],
+                        callback: (text) => {
+                            data.BETA = text;
                         },
-                        {
-                            title: '測試站',
-                            value: `true`,
+                    }),
+                    BgWidget.editeInput({
+                        gvc: gvc,
+                        title: 'CLIENT_ID',
+                        default: data.CLIENT_ID,
+                        callback: text => {
+                            data.CLIENT_ID = text;
                         },
-                    ],
-                    callback: (text) => {
-                        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: '請輸入CLIENT_ID',
+                    }),
+                    BgWidget.editeInput({
+                        gvc: gvc,
+                        title: 'SECRET',
+                        default: data.SECRET,
+                        callback: text => {
+                            data.SECRET = text;
+                        },
+                        placeHolder: '請輸入SECRET',
+                    }),
+                ].join('');
+            },
         };
         const shipment = {
             key: 'shipment',
             title: '指定物流',
-            html: gvc.bindView({
-                bind: gvc.glitter.getUUID(),
-                view: () => ShoppingFinanceSetting.setShipmentSupport(gvc, data),
-            }),
+            html: (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) => {
+                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]);
     }
-    static utCreditCard(gvc, data) {
+    static utCreditCard(gvc, key, data) {
         const cashflow = {
             key: 'cashflow',
             title: '基本設定',
-            html: BgWidget.editeInput({
-                gvc: gvc,
-                title: '商家ID',
-                default: data.pwd,
-                callback: text => {
-                    data.pwd = text;
-                },
-                placeHolder: '請輸入商家ID',
-            }),
+            html: (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) => {
+                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) => {
+                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]);
     }
     static myPayPos(gvc, data) {
         const cashflow = {
             key: 'cashflow',
             title: '基本設定',
-            html: BgWidget.editeInput({
-                gvc: gvc,
-                title: '刷卡機密碼',
-                default: data.pwd,
-                callback: text => {
-                    data.pwd = text;
-                },
-                placeHolder: '請輸入刷卡機密碼',
-            }),
+            html: (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) => {
+                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) => {
+                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, keyData, id) {
         const fi_ = keyData.payment_info_custom.find((id_) => id_ === id);
@@ -1498,12 +1422,71 @@ export class ShoppingFinanceSetting {
             };
         });
     }
+    static card(obj) {
+        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, event) {
+        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, widget) {
+        this.id = 'shopping-logistics-setting-main';
+        this.loading = true;
+        this.gvc = gvc;
         const dialog = new ShareDialog(gvc.glitter);
-        const saasConfig = window.parent.saasConfig;
+        const saasConfig = this.saasConfig;
         const vm = {
-            id: gvc.glitter.getUUID(),
-            loading: true,
             data: {},
             delivery: {
                 ec_pay: {
@@ -1526,34 +1509,18 @@ export class ShoppingFinanceSetting {
             language: window.parent.store_info.language_setting.def,
             page: 'delivery_setting',
         };
-        saasConfig.api
-            .getPrivateConfig(saasConfig.config.appName, 'logistics_setting')
-            .then((r) => {
-            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 = [
@@ -1568,7 +1535,7 @@ export class ShoppingFinanceSetting {
                             { title: '配送備註', key: 'delivery_note' },
                         ], gvc, vm.page, text => {
                             vm.page = text;
-                            gvc.notifyDataChange(vm.id);
+                            gvc.notifyDataChange(this.id);
                         }, 'margin-bottom:0px;'),
                     ];
                     if (vm.page === 'delivery_setting') {
@@ -1578,9 +1545,6 @@ export class ShoppingFinanceSetting {
               </div>`,
                             gvc.bindView(() => {
                                 const id = gvc.glitter.getUUID();
-                                function refresh() {
-                                    gvc.notifyDataChange(id);
-                                }
                                 function updateCustomShipment(obj) {
                                     const custom_delivery = JSON.parse(JSON.stringify(obj.data || {
                                         name: '',
@@ -1589,7 +1553,7 @@ export class ShoppingFinanceSetting {
                                     let form = 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, [
                                                 {
@@ -1605,9 +1569,9 @@ export class ShoppingFinanceSetting {
                                                 },
                                             ]);
                                             return gvc.bindView((() => {
-                                                var _a;
+                                                var _b;
                                                 const id = gvc.glitter.getUUID();
-                                                custom_delivery.system_form = (_a = custom_delivery.system_form) !== null && _a !== void 0 ? _a : [];
+                                                custom_delivery.system_form = (_b = custom_delivery.system_form) !== null && _b !== void 0 ? _b : [];
                                                 return {
                                                     bind: id,
                                                     view: () => {
@@ -1652,373 +1616,294 @@ export class ShoppingFinanceSetting {
                                             })());
                                         },
                                         footer_html: gvc => {
-                                            let array = [
-                                                BgWidget.save(gvc.event(() => {
-                                                    return new Promise(() => __awaiter(this, void 0, void 0, function* () {
-                                                        var _a;
-                                                        if (!custom_delivery.name) {
-                                                            dialog.errorMessage({ text: `請輸入物流名稱` });
-                                                            return;
-                                                        }
-                                                        vm.data.custom_delivery = (_a = vm.data.custom_delivery) !== null && _a !== void 0 ? _a : [];
-                                                        if (obj.function === 'plus') {
-                                                            vm.data.custom_delivery.push(custom_delivery);
-                                                        }
-                                                        else {
-                                                            vm.data.custom_delivery[vm.data.custom_delivery.findIndex((d1) => {
-                                                                return d1.id === custom_delivery.id;
-                                                            })] = custom_delivery;
-                                                        }
-                                                        dialog.dataLoading({ visible: true });
-                                                        yield form.save();
-                                                        yield 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: (response) => __awaiter(this, void 0, void 0, function* () {
-                                                                if (response) {
-                                                                    vm.data.custom_delivery = vm.data.custom_delivery.filter((d1) => {
-                                                                        return obj.data.id !== d1.id;
-                                                                    });
-                                                                    dialog.dataLoading({ visible: true });
-                                                                    yield saasConfig.api.setPrivateConfig(saasConfig.config.appName, 'logistics_setting', vm.data);
-                                                                    dialog.dataLoading({ visible: false });
-                                                                    refresh();
-                                                                    gvc.closeDialog();
+                                            return BgWidget.save(gvc.event(() => {
+                                                return new Promise(() => __awaiter(this, void 0, void 0, function* () {
+                                                    var _b;
+                                                    if (!custom_delivery.name) {
+                                                        dialog.errorMessage({ text: `請輸入物流名稱` });
+                                                        return;
+                                                    }
+                                                    vm.data.custom_delivery = (_b = vm.data.custom_delivery) !== null && _b !== void 0 ? _b : [];
+                                                    if (obj.function === 'plus') {
+                                                        vm.data.custom_delivery.push(custom_delivery);
+                                                    }
+                                                    else {
+                                                        vm.data.custom_delivery[vm.data.custom_delivery.findIndex((d1) => {
+                                                            return d1.id === custom_delivery.id;
+                                                        })] = custom_delivery;
+                                                    }
+                                                    dialog.dataLoading({ visible: true });
+                                                    yield form.save();
+                                                    yield saasConfig.api.setPrivateConfig(saasConfig.config.appName, 'logistics_setting', vm.data);
+                                                    dialog.dataLoading({ visible: false });
+                                                    dialog.successMessage({ text: '設定成功' });
+                                                    ShoppingFinanceSetting.refresh(gvc);
+                                                }));
+                                            }));
+                                        },
+                                    });
+                                }
+                                return {
+                                    bind: id,
+                                    view: () => {
+                                        var _b;
+                                        return ShipmentConfig.list
+                                            .concat(((_b = vm.data.custom_delivery) !== null && _b !== void 0 ? _b : []).map((dd) => {
+                                            return {
+                                                title: Language.getLanguageCustomText(dd.name),
+                                                value: dd.id,
+                                                custom: true,
+                                                type: 'font_awesome',
+                                                src: html `<i class="fa-regular fa-puzzle-piece-simple fs-4"></i>`,
+                                            };
+                                        }))
+                                            .map(dd => {
+                                            let button_action = [
+                                                BgWidget.customButton({
+                                                    button: {
+                                                        color: 'gray',
+                                                        size: 'sm',
+                                                    },
+                                                    text: {
+                                                        name: '配送設定',
+                                                    },
+                                                    event: gvc.event(() => __awaiter(this, void 0, void 0, function* () {
+                                                        const log_config = (yield ApiUser.getPublicConfig('shipment_config_' + dd.value, 'manager', saasConfig.config.appName)).response.value;
+                                                        BgWidget.settingDialog({
+                                                            gvc: gvc,
+                                                            title: `「${dd.title}」配送設定`,
+                                                            innerHTML: gvc => {
+                                                                var _b;
+                                                                const view = [];
+                                                                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,
+                                                                        content: (_b = log_config.content) !== null && _b !== void 0 ? _b : '',
+                                                                        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('');
+                                                            },
                                                         });
                                                     })),
-                                                ].concat(array);
-                                            }
-                                            return array.join('');
-                                        },
-                                    });
-                                }
-                                return {
-                                    bind: id,
-                                    view: () => {
-                                        var _a;
-                                        return ShipmentConfig.list
-                                            .concat(((_a = vm.data.custom_delivery) !== null && _a !== void 0 ? _a : []).map((dd) => {
-                                            return {
-                                                title: Language.getLanguageCustomText(dd.name),
-                                                value: dd.id,
-                                                custom: true,
-                                                type: 'font_awesome',
-                                                src: html `<i class="fa-regular fa-puzzle-piece-simple fs-4"></i>`,
-                                            };
-                                        }))
-                                            .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) => 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) => {
-                                                    return dd.value === d1;
-                                                })) {
-                                                    vm.data.support = vm.data.support.filter((d1) => {
-                                                        return dd.value !== d1;
-                                                    });
-                                                }
-                                                else {
-                                                    vm.data.support.push(dd.value);
-                                                }
-                                                save();
-                                                gvc.notifyDataChange(id);
-                                            })}"
-                                        ${vm.data.support.find((d1) => {
-                                                return dd.value === d1;
-                                            })
-                                                ? `checked`
-                                                : ''}
-                                      />
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <div class="w-100 border-top pt-3 mt-n2">
-                                ${(() => {
-                                                let button_action = [
-                                                    BgWidget.customButton({
-                                                        button: {
-                                                            color: 'gray',
-                                                            size: 'sm',
-                                                        },
-                                                        text: {
-                                                            name: html `<i class="fa-regular fa-gear me-1"></i>配送`,
-                                                        },
-                                                        event: gvc.event(() => __awaiter(this, void 0, void 0, function* () {
-                                                            const log_config = (yield ApiUser.getPublicConfig('shipment_config_' + dd.value, 'manager', saasConfig.config.appName)).response.value;
-                                                            BgWidget.settingDialog({
-                                                                gvc: gvc,
-                                                                title: `「${dd.title}」配送設定`,
-                                                                innerHTML: gvc => {
-                                                                    var _a;
-                                                                    const view = [];
-                                                                    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: (_a = log_config.content) !== null && _a !== void 0 ? _a : '',
-                                                                            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(() => {
+                                                }),
+                                                BgWidget.customButton({
+                                                    button: {
+                                                        color: 'gray',
+                                                        size: 'sm',
+                                                    },
+                                                    text: {
+                                                        name: '購物車設定',
+                                                    },
+                                                    event: gvc.event(() => __awaiter(this, void 0, void 0, function* () {
+                                                        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: () => __awaiter(this, void 0, void 0, function* () {
+                                                                        if (vm.loading) {
+                                                                            const r = yield 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();
-                                                                        })),
-                                                                        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('');
-                                                                },
-                                                            });
-                                                        })),
+                                                                        });
+                                                                    })),
+                                                                ].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) => {
+                                                                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.custom) {
+                                                button_action = [
                                                     BgWidget.customButton({
                                                         button: {
                                                             color: 'gray',
                                                             size: 'sm',
                                                         },
                                                         text: {
-                                                            name: html `<i class="fa-regular fa-gear me-1"></i>購物車`,
-                                                        },
-                                                        event: gvc.event(() => __awaiter(this, void 0, void 0, function* () {
-                                                            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: () => __awaiter(this, void 0, void 0, function* () {
-                                                                            if (vm.loading) {
-                                                                                const r = yield 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('');
-                                                                },
-                                                            });
-                                                        })),
-                                                    }),
-                                                ];
-                                                const shipment_fee = () => {
-                                                    return BgWidget.customButton({
-                                                        button: {
-                                                            color: 'gray',
-                                                            size: 'sm',
-                                                        },
-                                                        text: {
-                                                            name: html `<i class="fa-regular fa-gear me-1"></i>運費`,
+                                                            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) => {
-                                                                    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('');
-                                                                },
+                                                            updateCustomShipment({
+                                                                function: 'replace',
+                                                                data: vm.data.custom_delivery.find((d1) => dd.value === d1.id),
                                                             });
                                                         }),
-                                                    });
-                                                };
-                                                if (dd.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) => dd.value === d1.id),
-                                                                });
+                                                    }),
+                                                    ...button_action,
+                                                ];
+                                            }
+                                            return this.card({
+                                                title: dd.title,
+                                                img: dd.type === 'font_awesome' ? dd.src : html ` <img src="${dd.src}" />`,
+                                                toggle: vm.data.support.some((d1) => dd.value === d1),
+                                                toggleEvent: gvc.event(() => {
+                                                    if (vm.data.support.find((d1) => dd.value === d1)) {
+                                                        vm.data.support = vm.data.support.filter((d1) => dd.value !== d1);
+                                                    }
+                                                    else {
+                                                        vm.data.support.push(dd.value);
+                                                    }
+                                                    save();
+                                                    gvc.notifyDataChange(id);
+                                                }),
+                                                buttonAction: button_action,
+                                                deleteEvent: dd.custom
+                                                    ? gvc.event(() => {
+                                                        dialog.checkYesOrNot({
+                                                            text: '是否確認刪除此物流？',
+                                                            callback: (response) => __awaiter(this, void 0, void 0, function* () {
+                                                                if (response) {
+                                                                    const data = yield 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) => {
+                                                                            return dd.value !== d1.id;
+                                                                        });
+                                                                        dialog.dataLoading({ visible: true });
+                                                                        saasConfig.api.setPrivateConfig(saasConfig.config.appName, 'logistics_setting', keyData);
+                                                                        dialog.dataLoading({ visible: false });
+                                                                        this.refresh();
+                                                                    }
+                                                                }
                                                             }),
-                                                        }),
-                                                    ]);
-                                                    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)}
-                        `;
+                                                        });
+                                                    })
+                                                    : 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('');
                                     },
@@ -2046,7 +1931,7 @@ export class ShoppingFinanceSetting {
                                     language: vm.language,
                                     callback: language => {
                                         vm.language = language;
-                                        gvc.notifyDataChange(vm.id);
+                                        gvc.notifyDataChange(this.id);
                                     },
                                 })}
                     </div>`,
@@ -2066,7 +1951,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,
@@ -2074,7 +1959,7 @@ export class ShoppingFinanceSetting {
                                                                 click: () => {
                                                                     ProductAi.generateRichText(gvc, text => {
                                                                         language_data.info += text;
-                                                                        gvc.notifyDataChange(vm.id);
+                                                                        gvc.notifyDataChange(this.id);
                                                                         gvc2.recreateView();
                                                                     });
                                                                 },
@@ -2213,44 +2098,42 @@ 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) => {
-                                                                    return gvc.bindView((() => {
+                                            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) => {
                                                                         const id = gvc.glitter.getUUID();
-                                                                        return {
+                                                                        return gvc.bindView({
                                                                             bind: id,
                                                                             view: () => {
                                                                                 return [
                                                                                     ...(() => {
-                                                                                        var _a, _b, _c, _d, _e, _f, _g;
+                                                                                        var _b, _c, _d, _e, _f, _g, _h;
                                                                                         let array = [
                                                                                             BgWidget.inlineCheckBox({
                                                                                                 title: '串接路徑',
                                                                                                 gvc: gvc,
-                                                                                                def: (_a = vm.delivery[dd.value].Action) !== null && _a !== void 0 ? _a : 'test',
+                                                                                                def: (_b = vm.delivery[dd.value].Action) !== null && _b !== void 0 ? _b : 'test',
                                                                                                 array: [
                                                                                                     {
                                                                                                         title: '正式站',
@@ -2269,7 +2152,7 @@ export class ShoppingFinanceSetting {
                                                                                             BgWidget.editeInput({
                                                                                                 gvc: gvc,
                                                                                                 title: '寄件人名稱',
-                                                                                                default: (_b = vm.delivery[dd.value].SenderName) !== null && _b !== void 0 ? _b : '',
+                                                                                                default: (_c = vm.delivery[dd.value].SenderName) !== null && _c !== void 0 ? _c : '',
                                                                                                 callback: text => {
                                                                                                     vm.delivery[dd.value].SenderName = text;
                                                                                                 },
@@ -2278,7 +2161,7 @@ export class ShoppingFinanceSetting {
                                                                                             BgWidget.editeInput({
                                                                                                 gvc: gvc,
                                                                                                 title: '寄件人手機',
-                                                                                                default: (_c = vm.delivery[dd.value].SenderCellPhone) !== null && _c !== void 0 ? _c : '',
+                                                                                                default: (_d = vm.delivery[dd.value].SenderCellPhone) !== null && _d !== void 0 ? _d : '',
                                                                                                 callback: text => {
                                                                                                     vm.delivery[dd.value].SenderCellPhone = text;
                                                                                                 },
@@ -2287,7 +2170,7 @@ export class ShoppingFinanceSetting {
                                                                                             BgWidget.editeInput({
                                                                                                 gvc: gvc,
                                                                                                 title: '寄件人地址',
-                                                                                                default: (_d = vm.delivery[dd.value].SenderAddress) !== null && _d !== void 0 ? _d : '',
+                                                                                                default: (_e = vm.delivery[dd.value].SenderAddress) !== null && _e !== void 0 ? _e : '',
                                                                                                 callback: text => {
                                                                                                     vm.delivery[dd.value].SenderAddress = text;
                                                                                                 },
@@ -2295,17 +2178,17 @@ export class ShoppingFinanceSetting {
                                                                                             }),
                                                                                             BgWidget.editeInput({
                                                                                                 gvc: gvc,
-                                                                                                title: '特店編號',
-                                                                                                default: (_e = vm.delivery[dd.value].MERCHANT_ID) !== null && _e !== void 0 ? _e : '',
+                                                                                                title: '商店代號',
+                                                                                                default: (_f = vm.delivery[dd.value].MERCHANT_ID) !== null && _f !== void 0 ? _f : '',
                                                                                                 callback: text => {
                                                                                                     vm.delivery[dd.value].MERCHANT_ID = text;
                                                                                                 },
-                                                                                                placeHolder: '請輸入特店編號',
+                                                                                                placeHolder: '請輸入商店代號',
                                                                                             }),
                                                                                             BgWidget.editeInput({
                                                                                                 gvc: gvc,
                                                                                                 title: 'HASH KEY',
-                                                                                                default: (_f = vm.delivery[dd.value].HASH_KEY) !== null && _f !== void 0 ? _f : '',
+                                                                                                default: (_g = vm.delivery[dd.value].HASH_KEY) !== null && _g !== void 0 ? _g : '',
                                                                                                 callback: text => {
                                                                                                     vm.delivery[dd.value].HASH_KEY = text;
                                                                                                 },
@@ -2314,7 +2197,7 @@ export class ShoppingFinanceSetting {
                                                                                             BgWidget.editeInput({
                                                                                                 gvc: gvc,
                                                                                                 title: 'HASH IV',
-                                                                                                default: (_g = vm.delivery[dd.value].HASH_IV) !== null && _g !== void 0 ? _g : '',
+                                                                                                default: (_h = vm.delivery[dd.value].HASH_IV) !== null && _h !== void 0 ? _h : '',
                                                                                                 callback: text => {
                                                                                                     vm.delivery[dd.value].HASH_IV = text;
                                                                                                 },
@@ -2325,79 +2208,82 @@ export class ShoppingFinanceSetting {
                                                                                     })(),
                                                                                 ].join(BgWidget.mbContainer(12));
                                                                             },
-                                                                        };
-                                                                    })());
-                                                                },
-                                                                save: {
-                                                                    text: '儲存',
-                                                                    event: () => {
-                                                                        return new Promise(resolve => {
-                                                                            function checkSenderPattern(input) {
-                                                                                const senderPattern = /^[\u4e00-\u9fa5]{2,5}|[a-zA-Z]{4,10}$/;
-                                                                                return senderPattern.test(input);
-                                                                            }
-                                                                            function checkPhonePattern(input) {
-                                                                                const phonePattern = /^09\d{8}$/;
-                                                                                return phonePattern.test(input);
-                                                                            }
-                                                                            function checkAddressPattern(input) {
-                                                                                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].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;
-                                                                            }
-                                                                            ApiPageConfig.setPrivateConfigV2({
-                                                                                key: 'glitter_delivery',
-                                                                                value: JSON.stringify(vm.delivery),
-                                                                                appName: saasConfig.config.appName,
-                                                                            }).then((r) => {
-                                                                                dialog.dataLoading({ visible: false });
-                                                                                if (r.response) {
-                                                                                    dialog.successMessage({ text: '設定成功' });
+                                                                        });
+                                                                    },
+                                                                    save: {
+                                                                        text: '儲存',
+                                                                        event: gvc => {
+                                                                            return new Promise(resolve => {
+                                                                                function checkSenderPattern(input) {
+                                                                                    const senderPattern = /^[\u4e00-\u9fa5]{2,5}|[a-zA-Z]{4,10}$/;
+                                                                                    return senderPattern.test(input);
                                                                                 }
-                                                                                else {
-                                                                                    dialog.errorMessage({ text: '設定失敗' });
+                                                                                function checkPhonePattern(input) {
+                                                                                    const phonePattern = /^09\d{8}$/;
+                                                                                    return phonePattern.test(input);
                                                                                 }
-                                                                                resolve(true);
+                                                                                function checkAddressPattern(input) {
+                                                                                    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].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;
+                                                                                }
+                                                                                ApiPageConfig.setPrivateConfigV2({
+                                                                                    key: 'glitter_delivery',
+                                                                                    value: JSON.stringify(vm.delivery),
+                                                                                    appName: saasConfig.config.appName,
+                                                                                }).then((r) => {
+                                                                                    dialog.dataLoading({ visible: false });
+                                                                                    if (r.response) {
+                                                                                        dialog.successMessage({ text: '設定成功' });
+                                                                                    }
+                                                                                    else {
+                                                                                        dialog.errorMessage({ text: '設定失敗' });
+                                                                                    }
+                                                                                    this.refresh(gvc);
+                                                                                    resolve(true);
+                                                                                });
                                                                             });
-                                                                        });
+                                                                        },
                                                                     },
-                                                                },
-                                                                cancel: {},
-                                                            });
-                                                        }
-                                                        else if (dd.value === 'pay_now') {
-                                                            BgWidget.dialog({
-                                                                gvc: gvc,
-                                                                title: '物流追蹤設定',
-                                                                innerHTML: (gvc) => {
-                                                                    return gvc.bindView((() => {
+                                                                    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) => {
                                                                         const id = gvc.glitter.getUUID();
-                                                                        return {
+                                                                        return gvc.bindView({
                                                                             bind: id,
                                                                             view: () => {
                                                                                 return [
@@ -2405,25 +2291,22 @@ export class ShoppingFinanceSetting {
                                                                                         gvc,
                                                                                         tag: 'delivery_alert_info',
                                                                                         title: '注意事項',
-                                                                                        insideHTML: html ` <div
-                                                          class="mt-2"
-                                                          style="white-space: normal;"
-                                                        >
-                                                          ${BgWidget.alertInfo('', [
+                                                                                        insideHTML: html ` <div class="mt-2" style="white-space: normal;">
+                                                ${BgWidget.alertInfo('', [
                                                                                             '1. 支援四大超商（7-ELEVEN、全家、萊爾富、OK超商）與黑貓',
                                                                                             '2. 寄件人名稱請設定最多10字元（中文5個字, 英文10個字, 不得含指定特殊符號）',
                                                                                             '3. 寄件人手機應為09開頭的格式',
                                                                                         ])}
-                                                        </div>`,
+                                              </div>`,
                                                                                         height: document.body.clientWidth > 768 ? 300 : 385,
                                                                                     }),
                                                                                     ...(() => {
-                                                                                        var _a, _b, _c, _d, _e, _f, _g;
+                                                                                        var _b, _c, _d, _e, _f, _g, _h;
                                                                                         let array = [
                                                                                             BgWidget.inlineCheckBox({
                                                                                                 title: '串接路徑',
                                                                                                 gvc: gvc,
-                                                                                                def: (_a = vm.delivery[dd.value].Action) !== null && _a !== void 0 ? _a : 'test',
+                                                                                                def: (_b = vm.delivery[dd.value].Action) !== null && _b !== void 0 ? _b : 'test',
                                                                                                 array: [
                                                                                                     {
                                                                                                         title: '正式站',
@@ -2440,32 +2323,29 @@ export class ShoppingFinanceSetting {
                                                                                                 type: 'single',
                                                                                             }),
                                                                                             html ` <div
-                                                            onclick="${gvc.event(() => {
+                                                  onclick="${gvc.event(() => {
                                                                                                 window.parent.navigator.clipboard.writeText(window.parent.saasConfig.config.url +
                                                                                                     `/api-public/v1/delivery/notify?g-app=${window.parent.appName}`);
                                                                                                 dialog.successMessage({ text: '已複製至剪貼簿' });
                                                                                             })}"
-                                                          >
-                                                            ${BgWidget.editeInput({
+                                                >
+                                                  ${BgWidget.editeInput({
                                                                                                 readonly: true,
                                                                                                 gvc: gvc,
-                                                                                                title: html ` <div
-                                                                class="d-flex flex-column"
-                                                                style="gap:5px;"
-                                                              >
-                                                                物流追蹤通知
-                                                                ${BgWidget.grayNote('點擊複製此連結至PAYNOW後台的貨態回傳網址')}
-                                                              </div>`,
+                                                                                                title: html ` <div class="d-flex flex-column" style="gap: 4px;">
+                                                      物流追蹤通知
+                                                      ${BgWidget.grayNote('點擊複製此連結至PAYNOW後台的貨態回傳網址')}
+                                                    </div>`,
                                                                                                 default: window.parent.saasConfig.config.url +
                                                                                                     `/api-public/v1/delivery/notify?g-app=${window.parent.appName}`,
                                                                                                 placeHolder: '',
                                                                                                 callback: text => { },
                                                                                             })}
-                                                          </div>`,
+                                                </div>`,
                                                                                             BgWidget.editeInput({
                                                                                                 gvc: gvc,
                                                                                                 title: '串接帳號',
-                                                                                                default: (_b = vm.delivery[dd.value].account) !== null && _b !== void 0 ? _b : '',
+                                                                                                default: (_c = vm.delivery[dd.value].account) !== null && _c !== void 0 ? _c : '',
                                                                                                 callback: text => {
                                                                                                     vm.delivery[dd.value].account = text;
                                                                                                 },
@@ -2474,7 +2354,7 @@ export class ShoppingFinanceSetting {
                                                                                             BgWidget.editeInput({
                                                                                                 gvc: gvc,
                                                                                                 title: '串接密碼',
-                                                                                                default: (_c = vm.delivery[dd.value].pwd) !== null && _c !== void 0 ? _c : '',
+                                                                                                default: (_d = vm.delivery[dd.value].pwd) !== null && _d !== void 0 ? _d : '',
                                                                                                 callback: text => {
                                                                                                     vm.delivery[dd.value].pwd = text;
                                                                                                 },
@@ -2483,7 +2363,7 @@ export class ShoppingFinanceSetting {
                                                                                             BgWidget.editeInput({
                                                                                                 gvc: gvc,
                                                                                                 title: '寄件人名稱',
-                                                                                                default: (_d = vm.delivery[dd.value].SenderName) !== null && _d !== void 0 ? _d : '',
+                                                                                                default: (_e = vm.delivery[dd.value].SenderName) !== null && _e !== void 0 ? _e : '',
                                                                                                 callback: text => {
                                                                                                     vm.delivery[dd.value].SenderName = text;
                                                                                                 },
@@ -2492,7 +2372,7 @@ export class ShoppingFinanceSetting {
                                                                                             BgWidget.editeInput({
                                                                                                 gvc: gvc,
                                                                                                 title: '寄件人手機',
-                                                                                                default: (_e = vm.delivery[dd.value].SenderCellPhone) !== null && _e !== void 0 ? _e : '',
+                                                                                                default: (_f = vm.delivery[dd.value].SenderCellPhone) !== null && _f !== void 0 ? _f : '',
                                                                                                 callback: text => {
                                                                                                     vm.delivery[dd.value].SenderCellPhone = text;
                                                                                                 },
@@ -2501,7 +2381,7 @@ export class ShoppingFinanceSetting {
                                                                                             BgWidget.editeInput({
                                                                                                 gvc: gvc,
                                                                                                 title: '寄件人地址',
-                                                                                                default: (_f = vm.delivery[dd.value].SenderAddress) !== null && _f !== void 0 ? _f : '',
+                                                                                                default: (_g = vm.delivery[dd.value].SenderAddress) !== null && _g !== void 0 ? _g : '',
                                                                                                 callback: text => {
                                                                                                     vm.delivery[dd.value].SenderAddress = text;
                                                                                                 },
@@ -2510,7 +2390,7 @@ export class ShoppingFinanceSetting {
                                                                                             BgWidget.editeInput({
                                                                                                 gvc: gvc,
                                                                                                 title: '寄件人信箱',
-                                                                                                default: (_g = vm.delivery[dd.value].SenderEmail) !== null && _g !== void 0 ? _g : '',
+                                                                                                default: (_h = vm.delivery[dd.value].SenderEmail) !== null && _h !== void 0 ? _h : '',
                                                                                                 callback: text => {
                                                                                                     vm.delivery[dd.value].SenderEmail = text;
                                                                                                 },
@@ -2521,68 +2401,41 @@ export class ShoppingFinanceSetting {
                                                                                     })(),
                                                                                 ].join(BgWidget.mbContainer(12));
                                                                             },
-                                                                        };
-                                                                    })());
-                                                                },
-                                                                save: {
-                                                                    text: '儲存',
-                                                                    event: () => {
-                                                                        return new Promise(resolve => {
-                                                                            ApiPageConfig.setPrivateConfigV2({
-                                                                                key: 'glitter_delivery',
-                                                                                value: JSON.stringify(vm.delivery),
-                                                                                appName: saasConfig.config.appName,
-                                                                            }).then((r) => {
-                                                                                dialog.dataLoading({ visible: false });
-                                                                                if (r.response) {
-                                                                                    dialog.successMessage({ text: '設定成功' });
-                                                                                }
-                                                                                else {
-                                                                                    dialog.errorMessage({ text: '設定失敗' });
-                                                                                }
-                                                                                resolve(true);
-                                                                            });
                                                                         });
                                                                     },
-                                                                },
-                                                                cancel: {},
-                                                            });
-                                                        }
+                                                                    save: {
+                                                                        text: '儲存',
+                                                                        event: gvc => {
+                                                                            return new Promise(resolve => {
+                                                                                ApiPageConfig.setPrivateConfigV2({
+                                                                                    key: 'glitter_delivery',
+                                                                                    value: JSON.stringify(vm.delivery),
+                                                                                    appName: saasConfig.config.appName,
+                                                                                }).then((r) => {
+                                                                                    dialog.dataLoading({ visible: false });
+                                                                                    if (r.response) {
+                                                                                        dialog.successMessage({ text: '設定成功' });
+                                                                                    }
+                                                                                    else {
+                                                                                        dialog.errorMessage({ text: '設定失敗' });
+                                                                                    }
+                                                                                    this.refresh(gvc);
+                                                                                    resolve(true);
+                                                                                });
+                                                                            });
+                                                                        },
+                                                                    },
+                                                                    cancel: {
+                                                                        text: '取消',
+                                                                        event: gvc => new Promise(() => this.refresh(gvc)),
+                                                                    },
+                                                                    xmark: gvc => new Promise(() => this.refresh(gvc)),
+                                                                });
+                                                            }
+                                                        }),
                                                     }),
-                                                })}
-                                </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)}
-                        `;
+                                                ],
+                                            });
                                         })
                                             .join('');
                                     },
@@ -2662,7 +2515,7 @@ export class ShoppingFinanceSetting {
                                         onCreate: () => {
                                             if (loading) {
                                                 ApiPageConfig.getPrivateConfig(window.parent.appName, 'logistics_setting').then((dd) => {
-                                                    var _a;
+                                                    var _b;
                                                     if (dd.result && dd.response.result[0]) {
                                                         const shipment_setting = dd.response.result[0].value;
                                                         const combinedList = [
@@ -2670,7 +2523,7 @@ export class ShoppingFinanceSetting {
                                                                 name: dd.title,
                                                                 value: dd.value,
                                                             })),
-                                                            ...((_a = shipment_setting.custom_delivery) !== null && _a !== void 0 ? _a : []).map((dd) => ({
+                                                            ...((_b = shipment_setting.custom_delivery) !== null && _b !== void 0 ? _b : []).map((dd) => ({
                                                                 form: dd.form,
                                                                 name: dd.name,
                                                                 value: dd.id,
@@ -2816,9 +2669,9 @@ export class ShoppingFinanceSetting {
                                     onCreate: () => {
                                         if (dvm.loading) {
                                             ApiUser.getPublicConfig('logistics_group', 'manager').then(r => {
-                                                var _a;
+                                                var _b;
                                                 if (r.result) {
-                                                    dvm.dataList = (_a = r.response.value) !== null && _a !== void 0 ? _a : [];
+                                                    dvm.dataList = (_b = r.response.value) !== null && _b !== void 0 ? _b : [];
                                                 }
                                                 setTimeout(() => {
                                                     dvm.loading = false;
@@ -2837,13 +2690,33 @@ 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) => {
+                            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, widget) {
         const dialog = new ShareDialog(gvc.glitter);
-        const saasConfig = window.parent.saasConfig;
         const glitter = window.glitter;
+        const saasConfig = this.saasConfig;
         const vm = {
             id: glitter.getUUID(),
             loading: true,
@@ -2880,25 +2753,25 @@ export class ShoppingFinanceSetting {
                             bind: id,
                             view: () => {
                                 return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
-                                    var _a, _b;
+                                    var _b, _c;
                                     const data = yield saasConfig.api.getPrivateConfig(saasConfig.config.appName, `invoice_setting`);
                                     if (data.response.result[0]) {
                                         vm.data = data.response.result[0].value;
                                     }
                                     if (vm.data.point === 'beta') {
-                                        vm.data.whiteList = (_a = vm.data.whiteList) !== null && _a !== void 0 ? _a : [];
-                                        vm.data.whiteListExpand = (_b = vm.data.whiteListExpand) !== null && _b !== void 0 ? _b : {};
+                                        vm.data.whiteList = (_b = vm.data.whiteList) !== null && _b !== void 0 ? _b : [];
+                                        vm.data.whiteListExpand = (_c = vm.data.whiteListExpand) !== null && _c !== void 0 ? _c : {};
                                     }
                                     resolve(gvc.bindView(() => {
-                                        var _a, _b;
-                                        vm.data.fincial = (_a = vm.data.fincial) !== null && _a !== void 0 ? _a : 'ezpay';
-                                        vm.data.point = (_b = vm.data.point) !== null && _b !== void 0 ? _b : 'beta';
+                                        var _b, _c;
+                                        vm.data.fincial = (_b = vm.data.fincial) !== null && _b !== void 0 ? _b : 'ezpay';
+                                        vm.data.point = (_c = vm.data.point) !== null && _c !== void 0 ? _c : 'beta';
                                         const id = gvc.glitter.getUUID();
                                         return {
                                             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>
                                     ${[
                                                     {
@@ -2934,7 +2807,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);
@@ -2950,9 +2823,9 @@ 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;">
                                                 ${(() => {
-                                                            var _a, _b, _c;
+                                                            var _b, _c, _d;
                                                             if (vm.data.fincial === 'nouse' ||
                                                                 vm.data.fincial === 'off_line' ||
                                                                 vm.data.fincial !== dd.value) {
@@ -2989,10 +2862,10 @@ export class ShoppingFinanceSetting {
                                                                     }),
                                                                     BgWidget.editeInput({
                                                                         gvc: gvc,
-                                                                        title: '特店編號',
-                                                                        default: (_a = vm.data.merchNO) !== null && _a !== void 0 ? _a : '',
+                                                                        title: '商店代號',
+                                                                        default: (_b = vm.data.merchNO) !== null && _b !== void 0 ? _b : '',
                                                                         type: 'text',
-                                                                        placeHolder: '請輸入特店編號',
+                                                                        placeHolder: '請輸入商店代號',
                                                                         callback: text => {
                                                                             vm.data.merchNO = text;
                                                                         },
@@ -3000,7 +2873,7 @@ export class ShoppingFinanceSetting {
                                                                     BgWidget.editeInput({
                                                                         gvc: gvc,
                                                                         title: 'HashKey',
-                                                                        default: (_b = vm.data.hashkey) !== null && _b !== void 0 ? _b : '',
+                                                                        default: (_c = vm.data.hashkey) !== null && _c !== void 0 ? _c : '',
                                                                         type: 'text',
                                                                         placeHolder: '請輸入HashKey',
                                                                         callback: text => {
@@ -3016,7 +2889,7 @@ export class ShoppingFinanceSetting {
                                                                     BgWidget.editeInput({
                                                                         gvc: gvc,
                                                                         title: 'HashIV',
-                                                                        default: (_c = vm.data.hashiv) !== null && _c !== void 0 ? _c : '',
+                                                                        default: (_d = vm.data.hashiv) !== null && _d !== void 0 ? _d : '',
                                                                         type: 'text',
                                                                         placeHolder: '請輸入HashIV',
                                                                         callback: text => {
@@ -3050,16 +2923,14 @@ export class ShoppingFinanceSetting {
                             },
                             divCreate: {
                                 class: 'd-flex flex-column flex-column-reverse flex-md-row px-0',
-                                style: 'gap:10px;',
+                                style: 'gap: 10px;',
                             },
                         };
                     })),
                     BgWidget.mbContainer(240),
                     html ` <div class="update-bar-container">
                 ${BgWidget.save(gvc.event(() => {
-                        save(() => {
-                            dialog.successMessage({ text: '設定成功' });
-                        });
+                        save(() => dialog.successMessage({ text: '設定成功' }));
                     }))}
               </div>`,
                 ].join(''))}
@@ -3068,4 +2939,22 @@ export class ShoppingFinanceSetting {
         });
     }
 }
+_a = ShoppingFinanceSetting;
+ShoppingFinanceSetting.gvc = null;
+ShoppingFinanceSetting.id = '';
+ShoppingFinanceSetting.loading = true;
+ShoppingFinanceSetting.saasConfig = window.parent.saasConfig;
+ShoppingFinanceSetting.refresh = (dialogGVC) => {
+    _a.loading = true;
+    if (dialogGVC) {
+        dialogGVC.closeDialog();
+    }
+    if (_a.gvc === null) {
+        console.error('Refresh GVC 並不存在');
+        return;
+    }
+    const pageGVC = _a.gvc;
+    pageGVC.closeDialog();
+    setTimeout(() => pageGVC.notifyDataChange(_a.id), 300);
+};
 window.glitter.setModule(import.meta.url, ShoppingFinanceSetting);