ts-glitter 18.2.6 → 18.2.8

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

@@ -24,6 +24,7 @@ import { FakeOrder } from './fake-order.js';
 import { FormCheck } from '../../cms-plugin/module/form-check.js';
 import { Currency } from '../../glitter-base/global/currency.js';
 import { ShipmentConfig } from "../../glitter-base/global/shipment-config.js";
+import { Animation } from "../../glitterBundle/module/Animation.js";
 const html = String.raw;
 export class CheckoutIndex {
     static main(gvc, widget, subData) {
@@ -1271,28 +1272,31 @@ export class CheckoutIndex {
                                                                                 onclick="${gvc.event(() => {
                                                     var _a;
                                                     const titleFontColor = (_a = glitter.share.globalValue['theme_color.0.title']) !== null && _a !== void 0 ? _a : '#333333';
-                                                    console.log(`dd.content=>`, dd.content);
                                                     gvc.glitter.innerDialog((gvc) => {
                                                         var _a, _b;
-                                                        return html ` <div class="bg-white shadow rounded-3" style="overflow-y: auto; ${document.body.clientWidth > 768 ? `min-width: 400px; width: 1000px;` : 'width:calc(100vw - 20px);'}">
-                <div class="bg-white shadow rounded-3" style="width: 100%; overflow-y: auto; position: relative;">
-                    <div class="w-100 d-flex align-items-center p-3 border-bottom" style="position: sticky; top: 0; background: #fff;z-index:12;">
-                        <div class="fw-bold fs-5" style="color:${titleFontColor}; white-space: nowrap;text-overflow: ellipsis;max-width: calc(100% - 40px); overflow: hidden;">
-                            ${dd.content.title}
-                        </div>
-                        <div class="flex-fill"></div>
-                        <i
-                            class="fa-regular fa-circle-xmark fs-5 text-dark"
-                            style="cursor: pointer"
-                            onclick="${gvc.event(() => {
+                                                        return html `
+                                                                                        <div class=" bg-white shadow  ${document.body.clientWidth > 768 ? `rounded-3` : ` position-absolute bottom-0`}"
+                                                                                             style=" ${document.body.clientWidth > 768 ? `min-width: 400px; width: 1000px;max-height:calc(100% - 150px);overflow-y: auto;` : 'width:calc(100vw);height:100%;'}">
+                                                                                            <div class="bg-white shadow  ${document.body.clientWidth > 768 ? `rounded-3` : `h-100`}" style="
+                width: 100%;  position: relative;${document.body.clientWidth > 768 ? `` : `overflow-y: auto;`}">
+                                                                                                <div class="w-100 d-flex align-items-center p-3 border-bottom"
+                                                                                                     style="position: sticky; top: 0; background: #fff;z-index:12;">
+                                                                                                    <div class="fw-bold fs-5"
+                                                                                                         style="color:${titleFontColor}; white-space: nowrap;text-overflow: ellipsis;max-width: calc(100% - 40px); overflow: hidden;">
+                                                                                                        ${dd.content.title}
+                                                                                                    </div>
+                                                                                                    <div class="flex-fill"></div>
+                                                                                                    <i
+                                                                                                            class="fa-regular fa-circle-xmark fs-5 text-dark"
+                                                                                                            style="cursor: pointer"
+                                                                                                            onclick="${gvc.event(() => {
                                                             gvc.closeDialog();
                                                         })}"
-                        ></i>
-                    </div>
-                    <div class="c_dialog">
-                        <div class="c_dialog_body">
-                            <div class="c_dialog_main" style="gap: 24px;  max-height: calc(100vh - 100px); ${document.body.clientWidth < 800 ? `padding: 12px 20px;` : `padding: 30px;`}">
-                                ${PdClass.selectSpec({
+                                                                                                    ></i>
+                                                                                                </div>
+                                                                                                <div class="c_dialog_main"
+                                                                                                     style="gap: 24px;  max-height: calc(100% - 100px); ${document.body.clientWidth < 800 ? `padding: 12px 20px;` : `padding: 30px;`}">
+                                                                                                    ${PdClass.selectSpec({
                                                             gvc,
                                                             titleFontColor: (_a = glitter.share.globalValue['theme_color.0.title']) !== null && _a !== void 0 ? _a : '#333333',
                                                             prod: dd.content,
@@ -1337,65 +1341,13 @@ export class CheckoutIndex {
                                                                 }
                                                             },
                                                         })}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>`;
-                                                    }, Tool.randomString(7));
-                                                    return;
-                                                    return gvc.glitter.innerDialog((gvc) => {
-                                                        var _a, _b;
-                                                        return html ` <div
-                                                                                            class="bg-white shadow rounded-3"
-                                                                                            style="overflow-y: auto; ${document.body.clientWidth > 768
-                                                            ? `min-width: 400px; width: 600px;`
-                                                            : 'min-width: 90vw; max-width: 92.5vw;'}"
-                                                                                        >
-                                                                                            <div class="bg-white shadow rounded-3" style="width: 100%; overflow-y: auto; position: relative;">
-                                                                                                <div
-                                                                                                    class="w-100 d-flex align-items-center p-3 border-bottom"
-                                                                                                    style="position: sticky; top: 0; background: #fff;"
-                                                                                                >
-                                                                                                    <div class="flex-fill"></div>
-                                                                                                    <i
-                                                                                                        class="fa-regular fa-circle-xmark fs-5 text-dark"
-                                                                                                        style="cursor: pointer"
-                                                                                                        onclick="${gvc.event(() => {
-                                                            gvc.closeDialog();
-                                                        })}"
-                                                                                                    ></i>
-                                                                                                </div>
-                                                                                                <div class="c_dialog">
-                                                                                                    <div class="c_dialog_body">
-                                                                                                        <div
-                                                                                                            class="c_dialog_main"
-                                                                                                            style="gap: 24px; height: auto; max-height: 500px; padding: 12px 20px;"
-                                                                                                        >
-                                                                                                            ${PdClass.selectSpec({
-                                                            gvc,
-                                                            titleFontColor: (_a = glitter.share.globalValue['theme_color.0.title']) !== null && _a !== void 0 ? _a : '#333333',
-                                                            prod: dd.content,
-                                                            vm: {
-                                                                specs: dd.content.specs.map((spec) => {
-                                                                    return spec.option[0].title;
-                                                                }),
-                                                                quantity: '1',
-                                                                wishStatus: ((_b = glitter.share.wishList) !== null && _b !== void 0 ? _b : []).some((item) => {
-                                                                    return item.id === dd.id;
-                                                                }),
-                                                            },
-                                                            callback: () => {
-                                                                gvc.closeDialog();
-                                                                refreshCartData();
-                                                            },
-                                                        })}
-                                                                                                        </div>
-                                                                                                    </div>
+                                                                                                    <div class="d-sm-none" style="height:100px;"></div>
                                                                                                 </div>
                                                                                             </div>
                                                                                         </div>`;
-                                                    }, Tool.randomString(7));
+                                                    }, Tool.randomString(7), {
+                                                        animation: (document.body.clientWidth < 768) ? Animation.popup : Animation.fade
+                                                    });
                                                 })}"
                                                                             >
                                                                                 <span class="${gClass('button-text')}">${Language.text('add_to_cart')}</span>
@@ -1456,25 +1408,29 @@ export class CheckoutIndex {
                                             const titleFontColor = (_a = glitter.share.globalValue['theme_color.0.title']) !== null && _a !== void 0 ? _a : '#333333';
                                             gvc.glitter.innerDialog((gvc) => {
                                                 var _a, _b;
-                                                return html ` <div class="bg-white shadow rounded-3" style="overflow-y: auto; ${document.body.clientWidth > 768 ? `min-width: 400px; width: 1000px;` : 'width:calc(100vw - 20px);'}">
-                <div class="bg-white shadow rounded-3" style="width: 100%; overflow-y: auto; position: relative;">
-                    <div class="w-100 d-flex align-items-center p-3 border-bottom" style="position: sticky; top: 0; background: #fff;z-index:12;">
-                        <div class="fw-bold fs-5" style="color:${titleFontColor}; white-space: nowrap;text-overflow: ellipsis;max-width: calc(100% - 40px); overflow: hidden;">
-                            ${pd.title}
-                        </div>
-                        <div class="flex-fill"></div>
-                        <i
-                            class="fa-regular fa-circle-xmark fs-5 text-dark"
-                            style="cursor: pointer"
-                            onclick="${gvc.event(() => {
+                                                return html `
+                                                                                        <div class=" bg-white shadow  ${document.body.clientWidth > 768 ? `rounded-3` : ` position-absolute bottom-0`}"
+                                                                                             style=" ${document.body.clientWidth > 768 ? `min-width: 400px; width: 1000px;max-height:calc(100% - 150px);overflow-y: auto;` : 'width:calc(100vw);height:100%;'}">
+                                                                                            <div class="bg-white shadow  ${document.body.clientWidth > 768 ? `rounded-3` : `h-100`}" style="
+                width: 100%;  position: relative;${document.body.clientWidth > 768 ? `` : `overflow-y: auto;`}">
+                                                                                                <div class="w-100 d-flex align-items-center p-3 border-bottom"
+                                                                                                     style="position: sticky; top: 0; background: #fff;z-index:12;">
+                                                                                                    <div class="fw-bold fs-5"
+                                                                                                         style="color:${titleFontColor}; white-space: nowrap;text-overflow: ellipsis;max-width: calc(100% - 40px); overflow: hidden;">
+                                                                                                        ${pd.title}
+                                                                                                    </div>
+                                                                                                    <div class="flex-fill"></div>
+                                                                                                    <i
+                                                                                                            class="fa-regular fa-circle-xmark fs-5 text-dark"
+                                                                                                            style="cursor: pointer"
+                                                                                                            onclick="${gvc.event(() => {
                                                     gvc.closeDialog();
                                                 })}"
-                        ></i>
-                    </div>
-                    <div class="c_dialog">
-                        <div class="c_dialog_body">
-                            <div class="c_dialog_main" style="gap: 24px;  max-height: calc(100vh - 100px); ${document.body.clientWidth < 800 ? `padding: 12px 20px;` : `padding: 30px;`}">
-                                ${PdClass.selectSpec({
+                                                                                                    ></i>
+                                                                                                </div>
+                                                                                                <div class="c_dialog_main"
+                                                                                                     style="gap: 24px;  max-height: calc(100% - 100px); ${document.body.clientWidth < 800 ? `padding: 12px 20px;` : `padding: 30px;`}">
+                                                                                                    ${PdClass.selectSpec({
                                                     gvc,
                                                     titleFontColor: (_a = glitter.share.globalValue['theme_color.0.title']) !== null && _a !== void 0 ? _a : '#333333',
                                                     prod: pd,
@@ -1518,12 +1474,13 @@ export class CheckoutIndex {
                                                         }
                                                     },
                                                 })}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>`;
-                                            }, Tool.randomString(7));
+                                                                                                    <div class="d-sm-none" style="height:100px;"></div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>`;
+                                            }, Tool.randomString(7), {
+                                                animation: (document.body.clientWidth < 768) ? Animation.popup : Animation.fade
+                                            });
                                         })}"
                                                                         >
                                                                             <span class="${gClass('button-text')}"
@@ -2500,32 +2457,42 @@ export class CheckoutIndex {
                                                 return "paynow API失敗";
                                             }
                                             glitter.innerDialog((gvc) => {
+                                                document.body.style.setProperty('overflow-y', 'hidden', 'important');
                                                 return gvc.bindView({
                                                     bind: `paynow`,
                                                     view: () => {
                                                         return html `<div class="w-100 h-100 d-flex align-items-center justify-content-center">
-                                                                            <div class="p-3 bg-white position-relative">
+                                                                            ${document.body.clientWidth < 800 ? `
+                                                                            <div class="pt-5  bg-white position-relative vw-100" style="height: ${window.innerHeight}px;overflow-y: auto;">
+                                                                            ` : `<div class="p-3  bg-white position-relative" style="max-height: calc(100vh - 90px);overflow-y:auto;">`}
                                                                                 <div style="position: absolute; right: 15px;top:15px;z-index:1;" onclick="${gvc.event(() => {
                                                             gvc.closeDialog();
                                                         })}">
                                                                                     <i class="fa-regular fa-circle-xmark fs-5 text-dark cursor_pointer"></i>
                                                                                 </div>
-                                                                                <div id="paynow-container">
+                                                                                <div id="paynow-container" class="" style="">
                                                                                     <div style="width:200px;height:200px;">loading...</div>
                                                                                     
                                                                                 </div>
-                                                                                <div class="w-100 btn btn-primary" id="checkoutButton" onclick="${gvc.event(() => {
+                                                                                <div class="px-3 px-sm-0 w-100"><button class="${gClass(verify.length > 0 ? 'button-bgr-disable' : 'button-bgr')} " id="checkoutButton" onclick="${gvc.event(() => {
                                                             const PayNow = window.PayNow;
+                                                            const dialog = new ShareDialog(gvc.glitter);
+                                                            dialog.dataLoading({ visible: true });
                                                             PayNow.checkout().then((response) => {
+                                                                dialog.dataLoading({ visible: false });
                                                                 console.log("response -- ", response);
                                                                 if (response.error) {
+                                                                    dialog.errorMessage({
+                                                                        text: response.error.message
+                                                                    });
                                                                 }
                                                             });
-                                                        })}">送出</div>
-                                                                            </div>
+                                                        })}">
+                                                                                    <span class="${gClass('button-text')}">確認結帳</span>
+                                                                                </button></div>
                                                                         </div>`;
                                                     }, divCreate: {
-                                                        class: `w-100 h-100 d-flex align-items-center justify-content-center`
+                                                        class: ` h-100 d-flex align-items-center justify-content-center`, style: `max-width:100vw;${document.body.clientWidth < 800 ? 'width:100%;' : 'width:400px;'};`
                                                     }, onCreate: () => {
                                                         const publicKey = res.response.publicKey;
                                                         const secret = res.response.data.result.secret;
@@ -2552,21 +2519,14 @@ export class CheckoutIndex {
                                                         });
                                                     }
                                                 });
-                                            }, `paynow`);
-                                        }
-                                        const lineItemIds = vm.cartData.lineItems.map((item) => item.id);
-                                        const cartKeys = [ApiCart.cartPrefix, ApiCart.buyItNow, ApiCart.globalCart];
-                                        for (let i = 0; i < localStorage.length; i++) {
-                                            const key = localStorage.key(i);
-                                            if (key && cartKeys.some((cartKey) => key === null || key === void 0 ? void 0 : key.includes(cartKey))) {
-                                                const formatKey = key === null || key === void 0 ? void 0 : key.replace(window.appName, '');
-                                                const cart = new ApiCart(formatKey);
-                                                cart.setCart((cartItem) => {
-                                                    cartItem.line_items = cartItem.line_items.filter((item) => !lineItemIds.includes(item.id));
-                                                });
-                                            }
+                                            }, `paynow`, {
+                                                animation: (document.body.clientWidth > 800) ? Animation.fade : Animation.popup,
+                                                dismiss: () => {
+                                                    document.body.style.setProperty('overflow-y', 'auto');
+                                                }
+                                            });
                                         }
-                                        apiCart.clearCart();
+                                        localStorage.setItem('clear_cart_items', JSON.stringify(vm.cartData.lineItems.map((item) => item.id)));
                                         if (res.response.off_line || res.response.is_free) {
                                             location.href = res.response.return_url;
                                         }