ts-glitter 22.5.7 → 22.5.8

package/lowcode/cms-plugin/pos-pages/payment-page.ts

@@ -75,6 +75,7 @@ export class PaymentPage {
     const gvc = obj.gvc;
     const vm = obj.vm;
     const dialog = new ShareDialog(gvc.glitter);
+    const saasConfig: { config: any; api: any } = (window.parent as any).saasConfig;
     PaymentPage.storeHistory(obj.ogOrderData);
     PaymentPage.addStyle(gvc);
 
@@ -1356,6 +1357,322 @@ export class PaymentPage {
                       }
                     });
 
+                    function drawIcon(black: boolean, type: string) {
+                      switch (type) {
+                        case 'cash':
+                          return html`
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="28"
+                              height="28"
+                              viewBox="0 0 28 28"
+                              fill="none"
+                            >
+                              <path
+                                d="M9.625 4.8125C9.625 4.81797 9.63047 4.84531 9.65781 4.89453C9.69063 4.96016 9.76719 5.06406 9.91484 5.19531C9.93672 5.21172 9.95859 5.23359 9.98047 5.25C8.95781 5.27187 7.9625 5.34297 7.00547 5.47422L7 4.8125C7 3.82812 7.53047 3.04062 8.15391 2.47734C8.77734 1.91406 9.61406 1.46562 10.5328 1.11563C12.3813 0.410156 14.8477 0 17.5 0C20.1523 0 22.6187 0.410156 24.4617 1.11016C25.3805 1.46016 26.2172 1.90859 26.8406 2.47187C27.4641 3.03516 28 3.82812 28 4.8125V10.5V16.1875C28 17.1719 27.4695 17.9594 26.8461 18.5227C26.2227 19.0859 25.3859 19.5344 24.4672 19.8844C23.9422 20.0867 23.368 20.2617 22.7555 20.4094V17.6914C23.0344 17.6094 23.2914 17.5219 23.532 17.4289C24.2758 17.1445 24.7898 16.8383 25.0906 16.5703C25.2383 16.4391 25.3148 16.3352 25.3477 16.2695C25.3805 16.2094 25.3805 16.1875 25.3805 16.1875V13.8031C25.0906 13.9453 24.7844 14.0766 24.4672 14.1969C23.9422 14.3992 23.368 14.5742 22.7555 14.7219V12.0039C23.0344 11.9219 23.2914 11.8344 23.532 11.7414C24.2758 11.457 24.7898 11.1508 25.0906 10.8828C25.2383 10.7516 25.3148 10.6477 25.3477 10.582C25.375 10.5328 25.3805 10.5055 25.3805 10.5V8.11562C25.0906 8.25781 24.7844 8.38906 24.4672 8.50938C23.718 8.79375 22.8594 9.03438 21.9352 9.21484C21.6562 8.80469 21.3336 8.45469 21.0164 8.17031C20.4641 7.67266 19.8242 7.26797 19.157 6.93438C20.8906 6.80859 22.4 6.48594 23.532 6.05391C24.2758 5.76953 24.7898 5.46328 25.0906 5.19531C25.2383 5.06406 25.3148 4.96016 25.3477 4.89453C25.375 4.84531 25.3805 4.81797 25.3805 4.8125C25.3805 4.8125 25.3805 4.78516 25.3477 4.73047C25.3148 4.66484 25.2383 4.56094 25.0906 4.42969C24.7898 4.15625 24.2758 3.85 23.532 3.57109C22.05 3.00234 19.9172 2.625 17.5 2.625C15.0828 2.625 12.95 3.00234 11.4734 3.56562C10.7297 3.85 10.2156 4.15625 9.91484 4.42422C9.76719 4.55547 9.69063 4.65938 9.65781 4.725C9.625 4.78516 9.625 4.80703 9.625 4.80703V4.8125ZM2.625 11.8125C2.625 11.818 2.63047 11.8453 2.65781 11.8945C2.69062 11.9602 2.76719 12.0641 2.91484 12.1953C3.21563 12.4688 3.72969 12.775 4.47344 13.0539C5.95 13.6172 8.08281 13.9945 10.5 13.9945C12.9172 13.9945 15.05 13.6172 16.5266 13.0539C17.2703 12.7695 17.7844 12.4633 18.0852 12.1953C18.2328 12.0641 18.3094 11.9602 18.3422 11.8945C18.3695 11.8453 18.375 11.818 18.375 11.8125C18.375 11.8125 18.375 11.7852 18.3422 11.7305C18.3094 11.6648 18.2328 11.5609 18.0852 11.4297C17.7844 11.1562 17.2703 10.85 16.5266 10.5711C15.05 10.0078 12.9172 9.63047 10.5 9.63047C8.08281 9.63047 5.95 10.0078 4.47344 10.5711C3.72969 10.8555 3.21563 11.1617 2.91484 11.4297C2.76719 11.5609 2.69062 11.6648 2.65781 11.7305C2.625 11.7906 2.625 11.8125 2.625 11.8125ZM0 11.8125C0 10.8281 0.530469 10.0406 1.15391 9.47734C1.77734 8.91406 2.61406 8.46562 3.53281 8.11562C5.38125 7.41016 7.84766 7 10.5 7C13.1523 7 15.6187 7.41016 17.4617 8.11016C18.3805 8.46016 19.2172 8.90859 19.8406 9.47188C20.4641 10.0352 21 10.8281 21 11.8125V17.5V23.1875C21 24.1719 20.4695 24.9594 19.8461 25.5227C19.2227 26.0859 18.3859 26.5344 17.4672 26.8844C15.6187 27.5898 13.1523 28 10.5 28C7.84766 28 5.38125 27.5898 3.53828 26.8898C2.61953 26.5398 1.78828 26.0914 1.15938 25.5281C0.530469 24.9648 0 24.1719 0 23.1875V17.5V11.8125ZM18.375 17.5V15.1156C18.0852 15.2578 17.7789 15.3891 17.4617 15.5094C15.6187 16.2148 13.1523 16.625 10.5 16.625C7.84766 16.625 5.38125 16.2148 3.53828 15.5148C3.22109 15.3945 2.91484 15.2633 2.625 15.1211V17.5C2.625 17.5055 2.63047 17.5328 2.65781 17.582C2.69062 17.6477 2.76719 17.7516 2.91484 17.8828C3.21563 18.1562 3.72969 18.4625 4.47344 18.7414C5.95 19.3047 8.08281 19.682 10.5 19.682C12.9172 19.682 15.05 19.3047 16.5266 18.7414C17.2703 18.457 17.7844 18.1508 18.0852 17.8828C18.2328 17.7516 18.3094 17.6477 18.3422 17.582C18.3695 17.5328 18.375 17.5055 18.375 17.5ZM3.53828 21.2023C3.22109 21.082 2.91484 20.9508 2.625 20.8086V23.1875C2.625 23.1875 2.625 23.2148 2.65781 23.2695C2.69062 23.3352 2.76719 23.4391 2.91484 23.5703C3.21563 23.8438 3.72969 24.15 4.47344 24.4289C5.95 24.9922 8.08281 25.3695 10.5 25.3695C12.9172 25.3695 15.05 24.9922 16.5266 24.4289C17.2703 24.1445 17.7844 23.8383 18.0852 23.5703C18.2328 23.4391 18.3094 23.3352 18.3422 23.2695C18.375 23.2094 18.375 23.1875 18.375 23.1875V20.8031C18.0852 20.9453 17.7789 21.0766 17.4617 21.1969C15.6187 21.9023 13.1523 22.3125 10.5 22.3125C7.84766 22.3125 5.38125 21.9023 3.53828 21.2023Z"
+                                fill="${black ? `#393939` : `#8D8D8D`}"
+                              />
+                            </svg>
+                          `;
+                        case 'creditCard':
+                          return html`
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="28"
+                              height="28"
+                              viewBox="0 0 28 28"
+                              fill="none"
+                            >
+                              <path
+                                d="M24.8889 5.84375C25.3167 5.84375 25.6667 6.19531 25.6667 6.625V8.1875H2.33333V6.625C2.33333 6.19531 2.68333 5.84375 3.11111 5.84375H24.8889ZM25.6667 12.875V22.25C25.6667 22.6797 25.3167 23.0312 24.8889 23.0312H3.11111C2.68333 23.0312 2.33333 22.6797 2.33333 22.25V12.875H25.6667ZM3.11111 3.5C1.39514 3.5 0 4.90137 0 6.625V22.25C0 23.9736 1.39514 25.375 3.11111 25.375H24.8889C26.6049 25.375 28 23.9736 28 22.25V6.625C28 4.90137 26.6049 3.5 24.8889 3.5H3.11111ZM5.83333 18.3437C5.18681 18.3437 4.66667 18.8662 4.66667 19.5156C4.66667 20.165 5.18681 20.6875 5.83333 20.6875H8.16667C8.81319 20.6875 9.33333 20.165 9.33333 19.5156C9.33333 18.8662 8.81319 18.3437 8.16667 18.3437H5.83333ZM12.0556 18.3437C11.409 18.3437 10.8889 18.8662 10.8889 19.5156C10.8889 20.165 11.409 20.6875 12.0556 20.6875H17.5C18.1465 20.6875 18.6667 20.165 18.6667 19.5156C18.6667 18.8662 18.1465 18.3437 17.5 18.3437H12.0556Z"
+                                fill="${black ? `#393939` : `#8D8D8D`}"
+                              />
+                            </svg>
+                          `;
+                        case 'line':
+                          return html`
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                              <path
+                                fill="${black ? `#393939` : `#8D8D8D`}"
+                                d="M311 196.8v81.3c0 2.1-1.6 3.7-3.7 3.7h-13c-1.3 0-2.4-.7-3-1.5l-37.3-50.3v48.2c0 2.1-1.6 3.7-3.7 3.7h-13c-2.1 0-3.7-1.6-3.7-3.7V196.9c0-2.1 1.6-3.7 3.7-3.7h12.9c1.1 0 2.4 .6 3 1.6l37.3 50.3V196.9c0-2.1 1.6-3.7 3.7-3.7h13c2.1-.1 3.8 1.6 3.8 3.5zm-93.7-3.7h-13c-2.1 0-3.7 1.6-3.7 3.7v81.3c0 2.1 1.6 3.7 3.7 3.7h13c2.1 0 3.7-1.6 3.7-3.7V196.8c0-1.9-1.6-3.7-3.7-3.7zm-31.4 68.1H150.3V196.8c0-2.1-1.6-3.7-3.7-3.7h-13c-2.1 0-3.7 1.6-3.7 3.7v81.3c0 1 .3 1.8 1 2.5c.7 .6 1.5 1 2.5 1h52.2c2.1 0 3.7-1.6 3.7-3.7v-13c0-1.9-1.6-3.7-3.5-3.7zm193.7-68.1H327.3c-1.9 0-3.7 1.6-3.7 3.7v81.3c0 1.9 1.6 3.7 3.7 3.7h52.2c2.1 0 3.7-1.6 3.7-3.7V265c0-2.1-1.6-3.7-3.7-3.7H344V247.7h35.5c2.1 0 3.7-1.6 3.7-3.7V230.9c0-2.1-1.6-3.7-3.7-3.7H344V213.5h35.5c2.1 0 3.7-1.6 3.7-3.7v-13c-.1-1.9-1.7-3.7-3.7-3.7zM512 93.4V419.4c-.1 51.2-42.1 92.7-93.4 92.6H92.6C41.4 511.9-.1 469.8 0 418.6V92.6C.1 41.4 42.2-.1 93.4 0H419.4c51.2 .1 92.7 42.1 92.6 93.4zM441.6 233.5c0-83.4-83.7-151.3-186.4-151.3s-186.4 67.9-186.4 151.3c0 74.7 66.3 137.4 155.9 149.3c21.8 4.7 19.3 12.7 14.4 42.1c-.8 4.7-3.8 18.4 16.1 10.1s107.3-63.2 146.5-108.2c27-29.7 39.9-59.8 39.9-93.1z"
+                              />
+                            </svg>
+                          `;
+                        default:
+                          return html` <i class="fa-regular fa-puzzle-piece-simple fs-4" aria-hidden="true"></i> `;
+                      }
+                    }
+
+                    const paymentView = () => {
+                      let custom_payment: any[] = [];
+                      let loading = true;
+
+                      return gvc.bindView({
+                        bind: 'payment',
+                        dataList: [{ obj: obj.ogOrderData.pos_info, key: 'payment' }],
+                        view: () => {
+                          if (loading) {
+                            return BgWidget.spinner();
+                          }
+
+                          if (
+                            obj.ogOrderData.pos_info.payment.length === 1 &&
+                            !obj.ogOrderData.pos_info.payment[0].paied
+                          ) {
+                            const btnArray = [
+                              {
+                                title: `現金`,
+                                value: 'cash',
+                                key: 'cash',
+                                event: () => {
+                                  obj.ogOrderData.pos_info.payment = [
+                                    {
+                                      method: 'cash',
+                                      total: 0,
+                                    },
+                                  ];
+                                },
+                              },
+                              {
+                                title: `刷卡`,
+                                value: 'creditCard',
+                                key: 'ut_credit_card',
+                                event: () => {
+                                  obj.ogOrderData.pos_info.payment = [
+                                    {
+                                      method: 'creditCard',
+                                      total: 0,
+                                    },
+                                  ];
+                                },
+                              },
+                              {
+                                title: `Line Pay`,
+                                value: 'line',
+                                key: 'line_pay_scan',
+                                event: () => {
+                                  obj.ogOrderData.pos_info.payment = [
+                                    {
+                                      method: 'line',
+                                      total: 0,
+                                    },
+                                  ];
+                                },
+                              },
+                            ].filter(dd => {
+                              return (
+                                dd.key === 'cash' || orderDetail.payment_setting.find((d1: any) => dd.key === d1.key)
+                              );
+                            });
+
+                            return [...btnArray, ...custom_payment]
+                              .map(btn => {
+                                const activeMethod = obj.ogOrderData.pos_info.payment.find(
+                                  (dd: any) => dd.method === btn.value
+                                );
+
+                                const boxStyle = `
+                                  min-width: 120px;
+                                  max-width: 120px;
+                                  flex: 1;
+                                  display: flex;
+                                  flex-direction: column;
+                                  justify-content: center;
+                                  align-items: center;
+                                  border-radius: 10px;
+                                  background: #f6f6f6;
+                                  border-radius: 10px;
+                                  padding: 15px 15px;
+                                  color: ${activeMethod ? '#393939' : '#8d8d8d'};
+                                  border: 3px solid ${activeMethod ? '#393939' : '#f6f6f6'};
+                                  box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, ${activeMethod ? '0.2' : '0'});
+                                `;
+
+                                return html`
+                                  <div style="${boxStyle}" onclick="${gvc.event(() => btn.event())}">
+                                    <div style="width: 28px; height: 28px;">${drawIcon(activeMethod, btn.value)}</div>
+                                    <div style="font-size: 16px; font-weight: 500; letter-spacing: 0.64px;">
+                                      ${btn.title}
+                                    </div>
+                                  </div>
+                                `;
+                              })
+                              .join('');
+                          } else {
+                            const getPaymentMethodLabel = (method: string) => {
+                              if (method === 'cash') {
+                                return '現金';
+                              }
+                              if (method === 'creditCard') {
+                                return '刷卡';
+                              }
+                              if (method === 'line') {
+                                return 'LINE PAY';
+                              }
+
+                              const payment = (custom_payment || []).find(item => item.key === method);
+                              if (!payment) {
+                                return '';
+                              }
+                              return payment.title;
+                            };
+
+                            return html` <div class="w-100 d-flex flex-column">
+                              <div class="d-flex align-items-center justify-content-center w-100 ">
+                                <div class="d-flex" style="flex:68;">${PosWidget.fontLight('付款方式')}</div>
+                                <div class="d-flex" style="flex:94;">${PosWidget.fontLight('付款金額')}</div>
+                                <div class="d-flex" style="flex:68;">${PosWidget.fontLight('狀態')}</div>
+                                <div class="d-flex" style="flex:34;"></div>
+                              </div>
+                              ${obj.ogOrderData.pos_info.payment
+                                .map((dd: any) => {
+                                  return html` <div
+                                    class="d-flex align-items-center justify-content-center w-100 mt-lg-4 mt-2"
+                                    style="height:50px;"
+                                  >
+                                    <div class="d-flex" style="flex:68;color:#36B;cursor: pointer;">
+                                      ${getPaymentMethodLabel(dd.method)}
+                                    </div>
+                                    <div class="d-flex" style="flex:94;">
+                                      <input
+                                        style="display: flex;width: calc(100% - 20px);padding: 9px 18px;border-radius: 10px;border: 1px solid #DDD;text-align: right;"
+                                        value="${dd.total}"
+                                        onclick="${gvc.event(() => {
+                                          if (dd.paied) {
+                                            dialog.errorMessage({ text: '此付款金額已結清，無法進行調整' });
+                                            return;
+                                          }
+                                          PosFunction.setMoney(gvc, dd.total, money => {
+                                            dd.total = money || 0;
+                                            refreshOrderView();
+                                          });
+                                        })}"
+                                      />
+                                    </div>
+                                    <div class="d-flex" style="flex:68;">${dd.paied ? `已付款` : `尚未付款`}</div>
+                                    <div class="d-flex" style="flex:34;">
+                                      ${!dd.paied
+                                        ? BgWidget.save(
+                                            gvc.event(() => {
+                                              switch (dd.method) {
+                                                case 'cash':
+                                                  PaymentFunction.cashFinish(gvc, dd.total, result => {
+                                                    if (result) {
+                                                      dd.paied = true;
+                                                      refreshOrderView();
+                                                    }
+                                                  });
+                                                  break;
+                                                case 'creditCard':
+                                                  PaymentFunction.creditFinish(gvc, dd.total, orderDetail, result => {
+                                                    if (result) {
+                                                      dd.paied = true;
+                                                      refreshOrderView();
+                                                    }
+                                                  });
+                                                  break;
+                                                case 'line':
+                                                  dd.line_prefix = dd.line_prefix || 0;
+                                                  dd.line_prefix++;
+                                                  PaymentFunction.lineFinish(
+                                                    gvc,
+                                                    dd.total,
+                                                    dd.line_prefix,
+                                                    orderDetail,
+                                                    result => {
+                                                      if (result) {
+                                                        dd.paied = true;
+                                                        refreshOrderView();
+                                                      }
+                                                    }
+                                                  );
+                                                  break;
+                                                default:
+                                                  PaymentFunction.customFinish(gvc, dd.total, result => {
+                                                    if (result) {
+                                                      dd.paied = true;
+                                                      refreshOrderView();
+                                                    }
+                                                  });
+                                                  break;
+                                              }
+                                            }),
+                                            '支付'
+                                          )
+                                        : BgWidget.danger(
+                                            gvc.event(() => {
+                                              dialog.checkYesOrNot({
+                                                text: '此款項已支付，是否確認移除付款資訊?',
+                                                callback: response => {
+                                                  if (response) {
+                                                    dd.paied = false;
+                                                    refreshOrderView();
+                                                  }
+                                                },
+                                              });
+                                            }),
+                                            '取消'
+                                          )}
+                                    </div>
+                                  </div>`;
+                                })
+                                .join('')}
+                            </div>`;
+                          }
+                        },
+                        divCreate: {
+                          style: `
+                            display: flex;
+                            justify-content: space-between;
+                            margin-top: 24px;
+                            gap: 15px;
+                            flex-wrap: wrap;
+                          `,
+                        },
+                        onCreate: () => {
+                          if (loading) {
+                            saasConfig.api
+                              .getPrivateConfig(saasConfig.config.appName, 'glitter_finance')
+                              .then((d: any) => {
+                                custom_payment = (() => {
+                                  try {
+                                    const val = d.response.result[0].value;
+
+                                    return val.payment_info_custom
+                                      .filter((item: any) => {
+                                        try {
+                                          return item.type === 'pos' && val[item.id].toggle;
+                                        } catch (error) {
+                                          return false;
+                                        }
+                                      })
+                                      .map((item: any) => {
+                                        return {
+                                          title: item.name,
+                                          value: item.id,
+                                          key: item.id,
+                                          event: () => {
+                                            obj.ogOrderData.pos_info.payment = [
+                                              {
+                                                method: item.id,
+                                                total: 0,
+                                              },
+                                            ];
+                                          },
+                                        };
+                                      });
+                                  } catch (error) {
+                                    return [];
+                                  }
+                                })();
+                                loading = false;
+                                gvc.notifyDataChange('payment');
+                              });
+                          }
+                        },
+                      });
+                    };
+
                     return {
                       bind: vm_id,
                       dataList: [{ obj: vm, key: 'paySelect' }],
@@ -1367,260 +1684,7 @@ export class PaymentPage {
                               ${parseInt(orderDetail.total as any, 10).toLocaleString()}
                             </div>
                           </div>`,
-                          html`${PosWidget.bigTitle('付款方式')}
-                          ${gvc.bindView({
-                            bind: 'payment',
-                            dataList: [{ obj: obj.ogOrderData.pos_info, key: 'payment' }],
-                            view: () => {
-                              if (
-                                obj.ogOrderData.pos_info.payment.length === 1 &&
-                                !obj.ogOrderData.pos_info.payment[0].paied
-                              ) {
-                                function drawIcon(black: boolean, type: string) {
-                                  switch (type) {
-                                    case 'cash':
-                                      return html`
-                                        <svg
-                                          xmlns="http://www.w3.org/2000/svg"
-                                          width="28"
-                                          height="28"
-                                          viewBox="0 0 28 28"
-                                          fill="none"
-                                        >
-                                          <path
-                                            d="M9.625 4.8125C9.625 4.81797 9.63047 4.84531 9.65781 4.89453C9.69063 4.96016 9.76719 5.06406 9.91484 5.19531C9.93672 5.21172 9.95859 5.23359 9.98047 5.25C8.95781 5.27187 7.9625 5.34297 7.00547 5.47422L7 4.8125C7 3.82812 7.53047 3.04062 8.15391 2.47734C8.77734 1.91406 9.61406 1.46562 10.5328 1.11563C12.3813 0.410156 14.8477 0 17.5 0C20.1523 0 22.6187 0.410156 24.4617 1.11016C25.3805 1.46016 26.2172 1.90859 26.8406 2.47187C27.4641 3.03516 28 3.82812 28 4.8125V10.5V16.1875C28 17.1719 27.4695 17.9594 26.8461 18.5227C26.2227 19.0859 25.3859 19.5344 24.4672 19.8844C23.9422 20.0867 23.368 20.2617 22.7555 20.4094V17.6914C23.0344 17.6094 23.2914 17.5219 23.532 17.4289C24.2758 17.1445 24.7898 16.8383 25.0906 16.5703C25.2383 16.4391 25.3148 16.3352 25.3477 16.2695C25.3805 16.2094 25.3805 16.1875 25.3805 16.1875V13.8031C25.0906 13.9453 24.7844 14.0766 24.4672 14.1969C23.9422 14.3992 23.368 14.5742 22.7555 14.7219V12.0039C23.0344 11.9219 23.2914 11.8344 23.532 11.7414C24.2758 11.457 24.7898 11.1508 25.0906 10.8828C25.2383 10.7516 25.3148 10.6477 25.3477 10.582C25.375 10.5328 25.3805 10.5055 25.3805 10.5V8.11562C25.0906 8.25781 24.7844 8.38906 24.4672 8.50938C23.718 8.79375 22.8594 9.03438 21.9352 9.21484C21.6562 8.80469 21.3336 8.45469 21.0164 8.17031C20.4641 7.67266 19.8242 7.26797 19.157 6.93438C20.8906 6.80859 22.4 6.48594 23.532 6.05391C24.2758 5.76953 24.7898 5.46328 25.0906 5.19531C25.2383 5.06406 25.3148 4.96016 25.3477 4.89453C25.375 4.84531 25.3805 4.81797 25.3805 4.8125C25.3805 4.8125 25.3805 4.78516 25.3477 4.73047C25.3148 4.66484 25.2383 4.56094 25.0906 4.42969C24.7898 4.15625 24.2758 3.85 23.532 3.57109C22.05 3.00234 19.9172 2.625 17.5 2.625C15.0828 2.625 12.95 3.00234 11.4734 3.56562C10.7297 3.85 10.2156 4.15625 9.91484 4.42422C9.76719 4.55547 9.69063 4.65938 9.65781 4.725C9.625 4.78516 9.625 4.80703 9.625 4.80703V4.8125ZM2.625 11.8125C2.625 11.818 2.63047 11.8453 2.65781 11.8945C2.69062 11.9602 2.76719 12.0641 2.91484 12.1953C3.21563 12.4688 3.72969 12.775 4.47344 13.0539C5.95 13.6172 8.08281 13.9945 10.5 13.9945C12.9172 13.9945 15.05 13.6172 16.5266 13.0539C17.2703 12.7695 17.7844 12.4633 18.0852 12.1953C18.2328 12.0641 18.3094 11.9602 18.3422 11.8945C18.3695 11.8453 18.375 11.818 18.375 11.8125C18.375 11.8125 18.375 11.7852 18.3422 11.7305C18.3094 11.6648 18.2328 11.5609 18.0852 11.4297C17.7844 11.1562 17.2703 10.85 16.5266 10.5711C15.05 10.0078 12.9172 9.63047 10.5 9.63047C8.08281 9.63047 5.95 10.0078 4.47344 10.5711C3.72969 10.8555 3.21563 11.1617 2.91484 11.4297C2.76719 11.5609 2.69062 11.6648 2.65781 11.7305C2.625 11.7906 2.625 11.8125 2.625 11.8125ZM0 11.8125C0 10.8281 0.530469 10.0406 1.15391 9.47734C1.77734 8.91406 2.61406 8.46562 3.53281 8.11562C5.38125 7.41016 7.84766 7 10.5 7C13.1523 7 15.6187 7.41016 17.4617 8.11016C18.3805 8.46016 19.2172 8.90859 19.8406 9.47188C20.4641 10.0352 21 10.8281 21 11.8125V17.5V23.1875C21 24.1719 20.4695 24.9594 19.8461 25.5227C19.2227 26.0859 18.3859 26.5344 17.4672 26.8844C15.6187 27.5898 13.1523 28 10.5 28C7.84766 28 5.38125 27.5898 3.53828 26.8898C2.61953 26.5398 1.78828 26.0914 1.15938 25.5281C0.530469 24.9648 0 24.1719 0 23.1875V17.5V11.8125ZM18.375 17.5V15.1156C18.0852 15.2578 17.7789 15.3891 17.4617 15.5094C15.6187 16.2148 13.1523 16.625 10.5 16.625C7.84766 16.625 5.38125 16.2148 3.53828 15.5148C3.22109 15.3945 2.91484 15.2633 2.625 15.1211V17.5C2.625 17.5055 2.63047 17.5328 2.65781 17.582C2.69062 17.6477 2.76719 17.7516 2.91484 17.8828C3.21563 18.1562 3.72969 18.4625 4.47344 18.7414C5.95 19.3047 8.08281 19.682 10.5 19.682C12.9172 19.682 15.05 19.3047 16.5266 18.7414C17.2703 18.457 17.7844 18.1508 18.0852 17.8828C18.2328 17.7516 18.3094 17.6477 18.3422 17.582C18.3695 17.5328 18.375 17.5055 18.375 17.5ZM3.53828 21.2023C3.22109 21.082 2.91484 20.9508 2.625 20.8086V23.1875C2.625 23.1875 2.625 23.2148 2.65781 23.2695C2.69062 23.3352 2.76719 23.4391 2.91484 23.5703C3.21563 23.8438 3.72969 24.15 4.47344 24.4289C5.95 24.9922 8.08281 25.3695 10.5 25.3695C12.9172 25.3695 15.05 24.9922 16.5266 24.4289C17.2703 24.1445 17.7844 23.8383 18.0852 23.5703C18.2328 23.4391 18.3094 23.3352 18.3422 23.2695C18.375 23.2094 18.375 23.1875 18.375 23.1875V20.8031C18.0852 20.9453 17.7789 21.0766 17.4617 21.1969C15.6187 21.9023 13.1523 22.3125 10.5 22.3125C7.84766 22.3125 5.38125 21.9023 3.53828 21.2023Z"
-                                            fill="${black ? `#393939` : `#8D8D8D`}"
-                                          />
-                                        </svg>
-                                      `;
-                                    case 'creditCard':
-                                      return html`
-                                        <svg
-                                          xmlns="http://www.w3.org/2000/svg"
-                                          width="28"
-                                          height="28"
-                                          viewBox="0 0 28 28"
-                                          fill="none"
-                                        >
-                                          <path
-                                            d="M24.8889 5.84375C25.3167 5.84375 25.6667 6.19531 25.6667 6.625V8.1875H2.33333V6.625C2.33333 6.19531 2.68333 5.84375 3.11111 5.84375H24.8889ZM25.6667 12.875V22.25C25.6667 22.6797 25.3167 23.0312 24.8889 23.0312H3.11111C2.68333 23.0312 2.33333 22.6797 2.33333 22.25V12.875H25.6667ZM3.11111 3.5C1.39514 3.5 0 4.90137 0 6.625V22.25C0 23.9736 1.39514 25.375 3.11111 25.375H24.8889C26.6049 25.375 28 23.9736 28 22.25V6.625C28 4.90137 26.6049 3.5 24.8889 3.5H3.11111ZM5.83333 18.3437C5.18681 18.3437 4.66667 18.8662 4.66667 19.5156C4.66667 20.165 5.18681 20.6875 5.83333 20.6875H8.16667C8.81319 20.6875 9.33333 20.165 9.33333 19.5156C9.33333 18.8662 8.81319 18.3437 8.16667 18.3437H5.83333ZM12.0556 18.3437C11.409 18.3437 10.8889 18.8662 10.8889 19.5156C10.8889 20.165 11.409 20.6875 12.0556 20.6875H17.5C18.1465 20.6875 18.6667 20.165 18.6667 19.5156C18.6667 18.8662 18.1465 18.3437 17.5 18.3437H12.0556Z"
-                                            fill="${black ? `#393939` : `#8D8D8D`}"
-                                          />
-                                        </svg>
-                                      `;
-                                    default:
-                                      return html`
-                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-                                          <path
-                                            fill="${black ? `#393939` : `#8D8D8D`}"
-                                            d="M311 196.8v81.3c0 2.1-1.6 3.7-3.7 3.7h-13c-1.3 0-2.4-.7-3-1.5l-37.3-50.3v48.2c0 2.1-1.6 3.7-3.7 3.7h-13c-2.1 0-3.7-1.6-3.7-3.7V196.9c0-2.1 1.6-3.7 3.7-3.7h12.9c1.1 0 2.4 .6 3 1.6l37.3 50.3V196.9c0-2.1 1.6-3.7 3.7-3.7h13c2.1-.1 3.8 1.6 3.8 3.5zm-93.7-3.7h-13c-2.1 0-3.7 1.6-3.7 3.7v81.3c0 2.1 1.6 3.7 3.7 3.7h13c2.1 0 3.7-1.6 3.7-3.7V196.8c0-1.9-1.6-3.7-3.7-3.7zm-31.4 68.1H150.3V196.8c0-2.1-1.6-3.7-3.7-3.7h-13c-2.1 0-3.7 1.6-3.7 3.7v81.3c0 1 .3 1.8 1 2.5c.7 .6 1.5 1 2.5 1h52.2c2.1 0 3.7-1.6 3.7-3.7v-13c0-1.9-1.6-3.7-3.5-3.7zm193.7-68.1H327.3c-1.9 0-3.7 1.6-3.7 3.7v81.3c0 1.9 1.6 3.7 3.7 3.7h52.2c2.1 0 3.7-1.6 3.7-3.7V265c0-2.1-1.6-3.7-3.7-3.7H344V247.7h35.5c2.1 0 3.7-1.6 3.7-3.7V230.9c0-2.1-1.6-3.7-3.7-3.7H344V213.5h35.5c2.1 0 3.7-1.6 3.7-3.7v-13c-.1-1.9-1.7-3.7-3.7-3.7zM512 93.4V419.4c-.1 51.2-42.1 92.7-93.4 92.6H92.6C41.4 511.9-.1 469.8 0 418.6V92.6C.1 41.4 42.2-.1 93.4 0H419.4c51.2 .1 92.7 42.1 92.6 93.4zM441.6 233.5c0-83.4-83.7-151.3-186.4-151.3s-186.4 67.9-186.4 151.3c0 74.7 66.3 137.4 155.9 149.3c21.8 4.7 19.3 12.7 14.4 42.1c-.8 4.7-3.8 18.4 16.1 10.1s107.3-63.2 146.5-108.2c27-29.7 39.9-59.8 39.9-93.1z"
-                                          />
-                                        </svg>
-                                      `;
-                                  }
-                                }
-
-                                let btnArray = [
-                                  {
-                                    title: `現金`,
-                                    value: 'cash',
-                                    key: 'cash',
-                                    event: () => {
-                                      obj.ogOrderData.pos_info.payment = [
-                                        {
-                                          method: 'cash',
-                                          total: 0,
-                                        },
-                                      ];
-                                    },
-                                  },
-                                  {
-                                    title: `刷卡`,
-                                    value: 'creditCard',
-                                    key: 'ut_credit_card',
-                                    event: () => {
-                                      obj.ogOrderData.pos_info.payment = [
-                                        {
-                                          method: 'creditCard',
-                                          total: 0,
-                                        },
-                                      ];
-                                    },
-                                  },
-                                  {
-                                    title: `Line Pay`,
-                                    value: 'line',
-                                    key: 'line_pay_scan',
-                                    event: () => {
-                                      obj.ogOrderData.pos_info.payment = [
-                                        {
-                                          method: 'line',
-                                          total: 0,
-                                        },
-                                      ];
-                                    },
-                                  },
-                                ].filter(dd => {
-                                  return (
-                                    dd.key === 'cash' ||
-                                    orderDetail.payment_setting.find((d1: any) => {
-                                      return dd.key === d1.key;
-                                    })
-                                  );
-                                });
-                                return btnArray
-                                  .map(btn => {
-                                    return html`
-                                      <div
-                                        style="flex:1;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 15px 15px;border-radius: 10px;background: #F6F6F6;${obj.ogOrderData.pos_info.payment.find(
-                                          (dd: any) => {
-                                            return dd.method === btn.value;
-                                          }
-                                        )
-                                          ? `color:#393939;border-radius: 10px;border: 3px solid #393939;box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.20);`
-                                          : 'color:#8D8D8D;'}"
-                                        onclick="${gvc.event(() => {
-                                          btn.event();
-                                        })}"
-                                      >
-                                        <div style="width: 28px;height: 28px;">
-                                          ${drawIcon(
-                                            obj.ogOrderData.pos_info.payment.find((dd: any) => {
-                                              return dd.method === btn.value;
-                                            }) !== undefined,
-                                            btn.value
-                                          )}
-                                        </div>
-                                        <div style="font-size: 16px;font-weight: 500;letter-spacing: 0.64px;">
-                                          ${btn.title}
-                                        </div>
-                                      </div>
-                                    `;
-                                  })
-                                  .join('');
-                              } else {
-                                return html` <div class="w-100 d-flex flex-column">
-                                  <div class="d-flex align-items-center justify-content-center w-100 ">
-                                    <div class="d-flex" style="flex:68;">${PosWidget.fontLight('付款方式')}</div>
-                                    <div class="d-flex" style="flex:94;">${PosWidget.fontLight('付款金額')}</div>
-                                    <div class="d-flex" style="flex:68;">${PosWidget.fontLight('狀態')}</div>
-                                    <div class="d-flex" style="flex:34;"></div>
-                                  </div>
-                                  ${obj.ogOrderData.pos_info.payment
-                                    .map((dd: any, index: number) => {
-                                      return html` <div
-                                        class="d-flex align-items-center justify-content-center w-100 mt-lg-4 mt-2"
-                                        style="height:50px;"
-                                      >
-                                        <div
-                                          class="d-flex"
-                                          style="flex:68;color:#36B;cursor: pointer;"
-                                          onclick="${gvc.event(() => {})}"
-                                        >
-                                          ${(() => {
-                                            switch (dd.method) {
-                                              case 'cash':
-                                                return `現金`;
-                                              case 'creditCard':
-                                                return `刷卡`;
-                                              case 'line':
-                                                return `LINE PAY`;
-                                            }
-                                          })()}
-                                        </div>
-                                        <div class="d-flex" style="flex:94;">
-                                          <input
-                                            style="display: flex;width: calc(100% - 20px);padding: 9px 18px;border-radius: 10px;border: 1px solid #DDD;text-align: right;"
-                                            value="${dd.total}"
-                                            onclick="${gvc.event(() => {
-                                              if (dd.paied) {
-                                                dialog.errorMessage({ text: '此付款金額已結清，無法進行調整' });
-                                                return;
-                                              }
-                                              PosFunction.setMoney(gvc, dd.total, money => {
-                                                dd.total = money || 0;
-                                                refreshOrderView();
-                                              });
-                                            })}"
-                                          />
-                                        </div>
-                                        <div class="d-flex" style="flex:68;">${dd.paied ? `已付款` : `尚未付款`}</div>
-                                        <div class="d-flex" style="flex:34;">
-                                          ${!dd.paied
-                                            ? BgWidget.save(
-                                                gvc.event(() => {
-                                                  switch (dd.method) {
-                                                    case 'cash':
-                                                      PaymentFunction.cashFinish(gvc, dd.total, result => {
-                                                        if (result) {
-                                                          dd.paied = true;
-                                                          refreshOrderView();
-                                                        }
-                                                      });
-                                                      break;
-                                                    case 'creditCard':
-                                                      PaymentFunction.creditFinish(
-                                                        gvc,
-                                                        dd.total,
-                                                        orderDetail,
-                                                        result => {
-                                                          if (result) {
-                                                            dd.paied = true;
-                                                            refreshOrderView();
-                                                          }
-                                                        }
-                                                      );
-                                                      break;
-                                                    case 'line':
-                                                      dd.line_prefix = dd.line_prefix || 0;
-                                                      dd.line_prefix++;
-                                                      PaymentFunction.lineFinish(
-                                                        gvc,
-                                                        dd.total,
-                                                        dd.line_prefix,
-                                                        orderDetail,
-                                                        result => {
-                                                          if (result) {
-                                                            dd.paied = true;
-                                                            refreshOrderView();
-                                                          }
-                                                        }
-                                                      );
-                                                      break;
-                                                  }
-                                                }),
-                                                '支付'
-                                              )
-                                            : BgWidget.danger(
-                                                gvc.event(() => {
-                                                  dialog.checkYesOrNot({
-                                                    text: '此款項已支付，是否確認移除付款資訊?',
-                                                    callback: response => {
-                                                      if (response) {
-                                                        dd.paied = false;
-                                                        refreshOrderView();
-                                                      }
-                                                    },
-                                                  });
-                                                }),
-                                                '取消'
-                                              )}
-                                        </div>
-                                      </div>`;
-                                    })
-                                    .join('')}
-                                </div>`;
-                              }
-                            },
-                            divCreate: {
-                              style: `
-                                display: flex;
-                                justify-content: space-between;
-                                margin-top: 24px;
-                                gap: 15px;
-                              `,
-                            },
-                          })}`,
+                          html`${PosWidget.bigTitle('付款方式')} ${paymentView()}`,
                           html` <div style="height:24px;"></div>`,
                           PosWidget.buttonSnow(
                             `新增付款方式`,
@@ -1804,6 +1868,7 @@ export class PaymentPage {
 
                         view.push(html`
                           <div style="margin-top: 32px;gap:10px;" class="d-flex align-items-center">
+                            <!-- 儲存訂單按鈕 -->
                             <div
                               style="width:49px;height: 49px;border-radius: 10px;background: #F6F6F6;cursor: pointer;"
                               class="d-flex align-items-center justify-content-center"
@@ -1818,22 +1883,22 @@ export class PaymentPage {
                             >
                               <i class="fa-solid fa-down-to-bracket fs-4"></i>
                             </div>
+
+                            <!-- 建立預購單按鈕 -->
                             <div
                               style="flex:1;display: flex;padding: 10px;justify-content: center;align-items: center;border-radius: 10px;background: #FF6C02;color: #FFF;font-size: 18px;font-style: normal;font-weight: 500;line-height: normal;letter-spacing: 0.72px;"
                               onclick="${gvc.event(() => {
-                                if (
+                                const hasUnpaidPayments =
                                   obj.ogOrderData.pos_info.payment.length > 1 &&
-                                  obj.ogOrderData.pos_info.payment.find((dd: any) => {
-                                    return !dd.paied;
-                                  })
-                                ) {
-                                  dialog.errorMessage({
-                                    text: `請結清所有款項`,
-                                  });
+                                  obj.ogOrderData.pos_info.payment.find((dd: any) => !dd.paied);
+
+                                if (hasUnpaidPayments) {
+                                  dialog.errorMessage({ text: '請結清所有款項' });
                                   return;
                                 }
+
                                 dialog.checkYesOrNot({
-                                  text: '是否確認建立預購單?',
+                                  text: '是否確認建立預購單？',
                                   callback: response => {
                                     if (response) {
                                       paymentNext(true);
@@ -1844,38 +1909,32 @@ export class PaymentPage {
                             >
                               建立預購單
                             </div>
+
+                            <!-- 前往結帳按鈕 -->
                             <div
                               style="flex:1;display: flex;padding: 10px;justify-content: center;align-items: center;border-radius: 10px;background: #393939;color: #FFF;font-size: 18px;font-style: normal;font-weight: 500;line-height: normal;letter-spacing: 0.72px;"
                               onclick="${gvc.event(() => {
-                                if (total - parseInt(orderDetail.total as any, 10) < 0) {
-                                  dialog.errorMessage({
-                                    text: `收款金額尚需要『 ${((total - parseInt(orderDetail.total as any, 10)) * -1).toLocaleString()} 』`,
-                                  });
-                                  return;
-                                } else if (
+                                const amountShortage = total - parseInt(orderDetail.total as any, 10);
+                                const hasUnpaidPayments =
                                   obj.ogOrderData.pos_info.payment.length > 1 &&
-                                  obj.ogOrderData.pos_info.payment.find((dd: any) => {
-                                    return !dd.paied;
-                                  })
-                                ) {
+                                  obj.ogOrderData.pos_info.payment.find((dd: any) => !dd.paied);
+                                const hasPreOrderItems = orderDetail.lineItems.find((dd: any) => dd.pre_order);
+
+                                if (amountShortage < 0) {
                                   dialog.errorMessage({
-                                    text: `請結清所有款項`,
+                                    text: `收款金額尚需要『 ${(amountShortage * -1).toLocaleString()} 』`,
                                   });
                                   return;
-                                } else if (
-                                  orderDetail.lineItems.find((dd: any) => {
-                                    return dd.pre_order;
-                                  })
-                                ) {
+                                } else if (hasUnpaidPayments) {
                                   dialog.errorMessage({
-                                    text: `庫存不足，請建立預購單`,
+                                    text: '請結清所有款項',
                                   });
                                   return;
                                 }
 
                                 PaymentPage.storeHistory(orderDetail);
                                 dialog.checkYesOrNot({
-                                  text: '是否確認前往結帳？',
+                                  text: hasPreOrderItems ? '是否確認建立預購單？' : '是否確認前往結帳？',
                                   callback: response => {
                                     if (response) {
                                       paymentNext(false);
@@ -1891,7 +1950,7 @@ export class PaymentPage {
                         return view.join('');
                       },
                       divCreate: {
-                        class: `d-flex flex-column w-100`,
+                        class: 'd-flex flex-column w-100',
                       },
                     };
                   })}
@@ -1900,8 +1959,8 @@ export class PaymentPage {
           });
         },
         divCreate: {
-          class: `${document.body.offsetWidth < 800 ? `w-100` : `d-flex flex-column flex-sm-row w-100`}`,
-          style: `overflow-y: auto;`,
+          class: `w-100 ${document.body.offsetWidth < 800 ? '' : 'd-flex flex-column flex-sm-row'}`,
+          style: 'overflow-y: auto;',
         },
       };
     });
@@ -2378,14 +2437,23 @@ export class PaymentPage {
                     ];
                     return btnArray
                       .map(btn => {
+                        const isActive = c_vm.invoice_select == btn.value;
+
+                        const boxStyle = `
+                          padding: 20px;
+                          border-radius: 10px;
+                          background: #f6f6f6;
+                          color: ${isActive ? '#393939' : '#8D8D8D'};
+                          border-radius: 10px;
+                          border: 3px solid ${isActive ? '#393939' : '#f6f6f6'};
+                          box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, ${isActive ? '0.2' : '0'});
+                        `;
+
                         return html`
                           <div class="col-6  mb-4">
                             <div
                               class="w-100 d-flex align-items-center flex-column justify-content-center"
-                              style="padding:  20px;border-radius: 10px;background: #F6F6F6;${c_vm.invoice_select ==
-                              btn.value
-                                ? `color:#393939;border-radius: 10px;border: 3px solid #393939;box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.20);`
-                                : 'color:#8D8D8D;'} "
+                              style="${boxStyle} "
                               onclick="${gvc.event(() => {
                                 c_vm.invoice_select = btn.value as any;
                                 c_vm.value = '';
@@ -2471,16 +2539,30 @@ export class PaymentPage {
                     return '';
                   }
                 })()}
-                <div
-                  class="d-flex align-items-center justify-content-center w-100"
-                  style="margin-top: 24px;font-size: 16px;font-weight: 700;letter-spacing: 0.64px;"
-                >
+                <div class="d-flex gap-2 w-100 px-2">
                   <div
-                    class="flex-fill"
-                    style="border-radius: 10px;background: #393939;padding: 12px 24px;color: #FFF;text-align:center;"
-                    onclick="${gvc.event(() => next())}"
+                    class="d-flex align-items-center justify-content-center w-100"
+                    style="margin-top: 24px;font-size: 16px;font-weight: 700;letter-spacing: 0.64px;"
                   >
-                    確定
+                    <div
+                      class="flex-fill"
+                      style="border: 1px solid #393939;border-radius: 10px;background: #fff;padding: 12px 24px;color: #393939;text-align:center;"
+                      onclick="${gvc.event(() => gvc.glitter.closeDiaLog())}"
+                    >
+                      取消
+                    </div>
+                  </div>
+                  <div
+                    class="d-flex align-items-center justify-content-center w-100"
+                    style="margin-top: 24px;font-size: 16px;font-weight: 700;letter-spacing: 0.64px;"
+                  >
+                    <div
+                      class="flex-fill"
+                      style="border-radius: 10px;background: #393939;padding: 12px 24px;color: #FFF;text-align:center;"
+                      onclick="${gvc.event(() => next())}"
+                    >
+                      確定
+                    </div>
                   </div>
                 </div>
               </div>