pb-sxp-ui 1.0.0

package/es/materials/sxp/popup/AppointForm/settingRender.d.ts

@@ -0,0 +1,65 @@
+declare const _default: ({
+    type: string;
+    label: string;
+    name: string;
+    title?: undefined;
+    child?: undefined;
+} | {
+    title: string;
+    child: ({
+        type: string;
+        label: string;
+        name: string[];
+        child?: undefined;
+        options?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
+            type: string;
+            name: string[];
+            options?: undefined;
+            addonAfter?: undefined;
+        } | {
+            type: string;
+            name: string[];
+            options: {
+                label: string;
+                value: string;
+            }[];
+            addonAfter?: undefined;
+        } | {
+            type: string;
+            name: string[];
+            addonAfter: string;
+            options?: undefined;
+        })[];
+        name?: undefined;
+        options?: undefined;
+    } | {
+        label: string;
+        type: string;
+        options: ({
+            label: string;
+            value: string;
+        } | {
+            label: string;
+            value: undefined;
+        })[];
+        name: string[];
+        child?: undefined;
+    })[];
+    type?: undefined;
+    label?: undefined;
+    name?: undefined;
+} | {
+    title: string;
+    child: {
+        type: string;
+        name: string[];
+    }[];
+    type?: undefined;
+    label?: undefined;
+    name?: undefined;
+})[];
+export default _default;

package/es/materials/sxp/popup/AppointForm/settingRender.js

@@ -0,0 +1,90 @@
+export default [
+    {
+        type: 'Text',
+        label: '组件名称',
+        name: 'name'
+    },
+    {
+        title: '表单信息',
+        child: [
+            {
+                type: 'Text',
+                label: '标题',
+                name: ['props', 'title']
+            },
+            {
+                type: 'Group',
+                label: '标题字体',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['textStyle', 'color']
+                    },
+                    {
+                        type: 'Select',
+                        name: ['textStyle', 'fontFamily'],
+                        options: [{ label: '黑体', value: '黑体' }]
+                    },
+                    {
+                        type: 'Number',
+                        name: ['textStyle', 'fontSize'],
+                        addonAfter: 'px'
+                    }
+                ]
+            },
+            {
+                label: '标题样式',
+                type: 'TextStyle',
+                name: ['textStyle']
+            },
+            {
+                label: '标题对齐',
+                type: 'TextAlign',
+                name: ['textStyle']
+            },
+            {
+                label: '表单布局',
+                type: 'Radius',
+                options: [
+                    {
+                        label: '左右',
+                        value: 'horizontal'
+                    },
+                    {
+                        label: '上下',
+                        value: 'vertical'
+                    },
+                    {
+                        label: '提示',
+                        value: undefined
+                    }
+                ],
+                name: ['props', 'layoutType']
+            },
+            {
+                label: '提交按钮文本',
+                type: 'Text',
+                name: ['props', 'submitText']
+            },
+            {
+                label: '提交文本颜色',
+                type: 'Color',
+                name: ['props', 'submitColor']
+            },
+            {
+                label: '提交按钮颜色',
+                type: 'Color',
+                name: ['props', 'submitBgColor']
+            }
+        ]
+    },
+    {
+        title: '表单项',
+        child: [
+            {
+                type: 'AddFormItems',
+                name: ['props', 'columns']
+            }
+        ]
+    }
+];

package/es/materials/sxp/popup/CommodityDetail/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { IEditorContext } from '../../../../core/context/EditorContext';
+import './index.less';
+export interface ICommodityDetailProps {
+    content?: string;
+    style?: Record<string, any>;
+    bgImg?: Record<string, any> | string;
+    onClick?: () => void;
+    schema?: IEditorContext['schema'];
+    isDefault?: boolean;
+    bottom_image?: string;
+}
+declare const _default: React.NamedExoticComponent<ICommodityDetailProps>;
+export default _default;

package/es/materials/sxp/popup/CommodityDetail/index.js

@@ -0,0 +1,85 @@
+import { __rest } from "tslib";
+import { css } from '@emotion/css';
+import React, { memo, useEffect, useMemo, useRef } from 'react';
+import { useSxpDataSource } from '../../../../core/hooks';
+import './index.less';
+import { Autoplay, Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { useEventReport } from '../../../../core/hooks/useEventReport';
+const CommodityDetail = (_a) => {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var { content, style, bgImg, onClick, schema, isDefault, bottom_image } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image"]);
+    const { sxpParameter } = useSxpDataSource();
+    const { popupDetailData, bffEventReport, isPreview, waterFallData } = useSxpDataSource();
+    const { jumpToWeb, productView } = useEventReport();
+    const curTimeRef = useRef(null);
+    const product = (_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
+    const cta = (_d = (_c = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.bindCta;
+    const handleLink = () => {
+        if (product === null || product === void 0 ? void 0 : product.link) {
+            jumpToWeb(popupDetailData, product, cta);
+            productView(popupDetailData, product, cta, curTimeRef.current);
+            window.location.href = window.getJointUtmLink(product.link);
+        }
+    };
+    useEffect(() => {
+        const initTime = () => {
+            curTimeRef.current = new Date();
+        };
+        initTime();
+        window.addEventListener('pageshow', initTime);
+        return () => {
+            window.removeEventListener('pageshow', initTime);
+        };
+    }, []);
+    const priceText = useMemo(() => {
+        var _a, _b, _c, _d, _e;
+        if ((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price)) {
+            return `${(_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''}${(_e = (_d = product === null || product === void 0 ? void 0 : product.price) === null || _d === void 0 ? void 0 : _d.toLocaleString('zh', {
+                minimumFractionDigits: 0
+            })) !== null && _e !== void 0 ? _e : ''}`;
+        }
+        else {
+            return '$7,000';
+        }
+    }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
+    const width = isPreview ? 375 : window.innerWidth;
+    return (React.createElement("div", { className: 'pb-commondity' },
+        React.createElement("div", Object.assign({ className: css(Object.assign({}, style)) }, props),
+            product && ((_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, loop: true, autoplay: {
+                    delay: 3000
+                } }, (_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.map((src) => {
+                return (React.createElement(SwiperSlide, { key: src },
+                    React.createElement("div", { style: {
+                            overflow: 'hidden',
+                            width,
+                            height: width
+                        } },
+                        React.createElement("img", { src: src, style: { height: '100%', width: '100%', objectFit: 'cover' } }))));
+            }))),
+            !((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) && (React.createElement("div", { className: css({
+                    position: 'relative',
+                    height: 0,
+                    width: '100%',
+                    paddingBottom: '100%',
+                    overflow: 'hidden'
+                }) },
+                React.createElement("img", { className: css({
+                        position: 'absolute',
+                        left: 0,
+                        top: 0,
+                        objectFit: 'cover',
+                        width: '100%'
+                    }), src: (_h = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _h !== void 0 ? _h : bottom_image, alt: '' }))),
+            React.createElement("div", { className: 'pb-commondity-content' },
+                React.createElement("div", { className: 'pb-commondity-content-collection' }, (_j = product === null || product === void 0 ? void 0 : product.collection) !== null && _j !== void 0 ? _j : 'Tiffany Lock'),
+                React.createElement("div", { className: 'pb-commondity-content-title' }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Pendant in Yellow Gold with Diamonds, Medium'),
+                React.createElement("div", { className: 'pb-commondity-content-price' }, priceText),
+                React.createElement("div", { className: 'pb-commondity-content-info' }, (_l = product === null || product === void 0 ? void 0 : product.info) !== null && _l !== void 0 ? _l : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
+            bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
+            collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
+            necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
+            18-karat gold, this necklace is embellished with hand-set diamonds.`))),
+        (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondity-btn' }, (_m = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _m !== void 0 ? _m : 'Purchase on Website'))));
+};
+export default memo(CommodityDetail);

package/es/materials/sxp/popup/CommodityDetail/material.d.ts

@@ -0,0 +1,2 @@
+declare const CommodityDetail: import("../../../../core/create").MaterialComponet<import(".").ICommodityDetailProps>;
+export { CommodityDetail };

package/es/materials/sxp/popup/CommodityDetail/material.js

@@ -0,0 +1,16 @@
+import CommodityDetailComponent from '.';
+import { createMaterial } from '../../../../core/create';
+const CommodityDetail = createMaterial(CommodityDetailComponent, {
+    displayName: '商品详情',
+    icon: '',
+    category: 'popup',
+    type: 'CommodityDetail',
+    defaulSetting: {
+        props: {},
+        style: {}
+    },
+    w: 100,
+    h: 40,
+    sort: 1
+});
+export { CommodityDetail };

package/es/materials/sxp/popup/CommodityDetailDiro/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { IEditorContext } from '../../../../core/context/EditorContext';
+import { RecItemType } from '../../../../core/components/SxpPageRender/typing';
+import './index.less';
+export interface ICommodityDetailDiroProps {
+    content?: string;
+    style?: Record<string, any>;
+    bgImg?: Record<string, any> | string;
+    onClick?: () => void;
+    schema?: IEditorContext['schema'];
+    isDefault?: boolean;
+    rec?: RecItemType;
+    viewTime?: any;
+    isPost?: boolean;
+    bottom_image?: string;
+}
+declare const _default: React.NamedExoticComponent<ICommodityDetailDiroProps>;
+export default _default;

package/es/materials/sxp/popup/CommodityDetailDiro/index.js

@@ -0,0 +1,162 @@
+import { __rest } from "tslib";
+import { css } from '@emotion/css';
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { useSxpDataSource } from '../../../../core/hooks';
+import './index.less';
+import { Autoplay, Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import arrow from './arrow.png';
+import { useEventReport } from '../../../../core/hooks/useEventReport';
+const CommodityDetailDiro = (_a) => {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var { style, isDefault, rec, viewTime, isPost, bottom_image } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image"]);
+    const [spread, setSpread] = useState(true);
+    const { sxpParameter } = useSxpDataSource();
+    const { popupDetailData, bffEventReport, isPreview, swiperRef, waterFallData } = useSxpDataSource();
+    const { jumpToWeb, productView } = useEventReport();
+    const scrollRef = useRef(null);
+    const touchRef = useRef(null);
+    const touchMoveRef = useRef(null);
+    const [stopSlide, setStopSlide] = useState(false);
+    const [isBottom, setIsBottom] = useState(false);
+    const [isTop, setIsTop] = useState(true);
+    const curTimeRef = useRef(null);
+    const data = isPost ? rec : popupDetailData;
+    const product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
+    const cta = isPost ? (_c = data === null || data === void 0 ? void 0 : data.product) === null || _c === void 0 ? void 0 : _c.bindCta : (_e = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProduct) === null || _e === void 0 ? void 0 : _e.bindCta;
+    const handleLink = () => {
+        if (product === null || product === void 0 ? void 0 : product.link) {
+            jumpToWeb(data, product, cta);
+            if (!isPost) {
+                productView(data, product, cta, viewTime || curTimeRef.current);
+            }
+            window.location.href = window.getJointUtmLink(product.link);
+        }
+    };
+    useEffect(() => {
+        const initTime = () => {
+            curTimeRef.current = new Date();
+        };
+        initTime();
+        window.addEventListener('pageshow', initTime);
+        return () => {
+            window.removeEventListener('pageshow', initTime);
+        };
+    }, []);
+    const priceText = useMemo(() => {
+        var _a, _b, _c, _d, _e;
+        if ((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price)) {
+            return `${(_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''}${(_e = (_d = product === null || product === void 0 ? void 0 : product.price) === null || _d === void 0 ? void 0 : _d.toLocaleString('zh', {
+                minimumFractionDigits: 0
+            })) !== null && _e !== void 0 ? _e : ''}`;
+        }
+        else {
+            return '$7,000';
+        }
+    }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
+    const width = isPreview ? 375 : window.innerWidth;
+    const handleClickCollapse = () => {
+        setSpread(!spread);
+    };
+    useEffect(() => {
+        var _a, _b;
+        console.log((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight, window.innerHeight);
+        if ((scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) && ((_b = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) > window.innerHeight) {
+            setStopSlide(true);
+        }
+    }, [scrollRef]);
+    useEffect(() => {
+        const handleScroll = () => {
+            if (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) {
+                const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+                const isBottom = scrollTop + clientHeight === scrollHeight;
+                if (isBottom) {
+                    setIsBottom(true);
+                }
+                else {
+                    setIsBottom(false);
+                }
+                if (scrollTop === 0) {
+                    setIsTop(true);
+                }
+                else {
+                    setIsTop(false);
+                }
+            }
+        };
+        if (scrollRef.current) {
+            scrollRef.current.addEventListener('scroll', handleScroll);
+        }
+        return () => {
+            if (scrollRef.current) {
+                scrollRef.current.removeEventListener('scroll', handleScroll);
+            }
+        };
+    }, [scrollRef]);
+    const handleTouchStart = (event) => {
+        event.stopPropagation();
+        touchRef.current = event.touches[0].clientY;
+        touchMoveRef.current = true;
+    };
+    const handleTouchMove = (event) => {
+        var _a, _b, _c, _d;
+        if (touchMoveRef.current) {
+            touchMoveRef.current = false;
+            const currentY = event.touches[0].clientY;
+            const diff = touchRef.current - currentY;
+            if (diff > 0 && (isBottom || !stopSlide)) {
+                (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideNext();
+            }
+            else if (diff < 0 && (isTop || !stopSlide)) {
+                (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.slidePrev();
+            }
+        }
+    };
+    return (React.createElement("div", { className: 'pb-commondityDiro' },
+        React.createElement("div", Object.assign({ ref: scrollRef, className: css(Object.assign({}, style)) }, props, { onTouchStart: handleTouchStart, onTouchMove: (e) => {
+                e.stopPropagation();
+                handleTouchMove(e);
+            } }),
+            product && ((_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, loop: true, autoplay: {
+                    delay: 3000
+                } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.map((src) => {
+                return (React.createElement(SwiperSlide, { key: src },
+                    React.createElement("div", { style: {
+                            overflow: 'hidden',
+                            width,
+                            height: width
+                        } },
+                        React.createElement("img", { src: src, style: { height: '100%', width: '100%', objectFit: 'cover' } }))));
+            }))),
+            !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement("div", { className: css({
+                    position: 'relative',
+                    height: 0,
+                    width: '100%',
+                    paddingBottom: '100%',
+                    overflow: 'hidden'
+                }) },
+                React.createElement("img", { className: css({
+                        position: 'absolute',
+                        left: 0,
+                        top: 0,
+                        objectFit: 'cover',
+                        width: '100%'
+                    }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
+            React.createElement("div", { className: 'pb-commondityDiro-content' },
+                React.createElement("div", { className: 'pb-commondityDiro-content-title' }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'MEDIUM LADY D-LITE BAG'),
+                React.createElement("div", { className: 'pb-commondityDiro-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === '') }, (product === null || product === void 0 ? void 0 : product.collection) || 'Gold-Tone and White Butterfly Zodiac Embroidery'),
+                React.createElement("div", { className: 'pb-commondityDiro-content-scrollRef', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.itemId) }, (product === null || product === void 0 ? void 0 : product.itemId) ? `Reference: ${product === null || product === void 0 ? void 0 : product.itemId}` : 'Reference: M0565OESU_M01E'),
+                React.createElement("div", { className: 'pb-commondityDiro-content-line' }),
+                React.createElement("div", { className: 'pb-commondityDiro-content-price' }, priceText)),
+            React.createElement("div", { className: 'pb-commondityDiro-desc', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
+                React.createElement("div", { className: 'pb-commondityDiro-desc-collapse', onClick: handleClickCollapse },
+                    React.createElement("div", { className: 'pb-commondityDiro-desc-collapse-title' }, "DESCRIPTION"),
+                    React.createElement("img", { className: `pb-commondityDiro-desc-collapse-icon ${spread ? 'pb-commondityDiro-desc-collapse-iconActive' : ''}`, src: arrow, alt: '' })),
+                React.createElement("div", { className: 'pb-commondityDiro-desc-info', hidden: !spread }, (product === null || product === void 0 ? void 0 : product.info) ||
+                    'The Lady D-Lite bag combines classic elegance with House modernity. The style is fully embroidered with a gold-tone and white Butterfly Zodiac motif by Pietro Ruffo, showcasing a constellation enhanced by astrological signs and adorned with butterflies. A Christian Dior Paris signature adorns the front, while D.I.O.R. charms in pale gold-finish metal further enhance and highlight the silhouette. Featuring a wide, removable embroidered shoulder strap, the medium Lady D-Lite bag can be carried by hand or worn crossbody.')),
+            (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: 'pb-commondityDiro-h90' }),
+                React.createElement("div", { className: 'pb-commondityDiro-bottom' },
+                    React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiro-bottom-btn' }, (_l = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _l !== void 0 ? _l : 'SHOP NOW')))))));
+};
+export default memo(CommodityDetailDiro);

package/es/materials/sxp/popup/CommodityDetailDiro/material.d.ts

@@ -0,0 +1,2 @@
+declare const CommodityDetailDiro: import("../../../../core/create").MaterialComponet<import(".").ICommodityDetailDiroProps>;
+export { CommodityDetailDiro };

package/es/materials/sxp/popup/CommodityDetailDiro/material.js

@@ -0,0 +1,16 @@
+import CommodityDetailDiroComponent from '.';
+import { createMaterial } from '../../../../core/create';
+const CommodityDetailDiro = createMaterial(CommodityDetailDiroComponent, {
+    displayName: '商品详情',
+    icon: '',
+    category: 'popup',
+    type: 'CommodityDetailDiro',
+    defaulSetting: {
+        props: {},
+        style: {}
+    },
+    w: 100,
+    h: 40,
+    sort: 1
+});
+export { CommodityDetailDiro };

package/es/materials/sxp/popup/CommodityDetailDiroNew/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IEditorContext } from '../../../../core/context/EditorContext';
+import { RecItemType } from '../../../../core/components/SxpPageRender/typing';
+import './index.less';
+export interface ICommodityDetailDiroNewProps {
+    content?: string;
+    style?: Record<string, any>;
+    bgImg?: Record<string, any> | string;
+    onClick?: () => void;
+    schema?: IEditorContext['schema'];
+    isDefault?: boolean;
+    rec?: RecItemType;
+    viewTime?: any;
+    isPost?: boolean;
+    bottom_image?: string;
+    tipText?: {
+        foldText?: string;
+        unfoldText?: string;
+    };
+}
+declare const _default: React.NamedExoticComponent<ICommodityDetailDiroNewProps>;
+export default _default;

package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js

@@ -0,0 +1,129 @@
+import { __rest } from "tslib";
+import { css } from '@emotion/css';
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { useSxpDataSource } from '../../../../core/hooks';
+import './index.less';
+import { Autoplay, Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import Modal from '../../../../core/components/SxpPageRender/Modal';
+import ExpandableText from '../../../../core/components/SxpPageRender/ExpandableText';
+import { useEventReport } from '../../../../core/hooks/useEventReport';
+const CommodityDetailDiroNew = (_a) => {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText"]);
+    const [spread, setSpread] = useState(true);
+    const { sxpParameter } = useSxpDataSource();
+    const { popupDetailData, bffEventReport, isPreview, swiperRef, waterFallData } = useSxpDataSource();
+    const { jumpToWeb, productView } = useEventReport();
+    const scrollRef = useRef(null);
+    const touchRef = useRef(null);
+    const touchMoveRef = useRef(null);
+    const [stopSlide, setStopSlide] = useState(false);
+    const [isBottom, setIsBottom] = useState(false);
+    const [isTop, setIsTop] = useState(true);
+    const [showModal, setShowModal] = useState(false);
+    const curTimeRef = useRef(null);
+    const data = isPost ? rec : popupDetailData;
+    const product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
+    const cta = isPost ? (_c = data === null || data === void 0 ? void 0 : data.product) === null || _c === void 0 ? void 0 : _c.bindCta : (_e = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProduct) === null || _e === void 0 ? void 0 : _e.bindCta;
+    const handleLink = () => {
+        if (product === null || product === void 0 ? void 0 : product.link) {
+            jumpToWeb(data, product, cta);
+            if (!isPost) {
+                productView(data, product, cta, viewTime || curTimeRef.current);
+            }
+            window.location.href = window.getJointUtmLink(product.link);
+        }
+    };
+    useEffect(() => {
+        const initTime = () => {
+            curTimeRef.current = new Date();
+        };
+        initTime();
+        window.addEventListener('pageshow', initTime);
+        return () => {
+            window.removeEventListener('pageshow', initTime);
+        };
+    }, []);
+    const priceText = useMemo(() => {
+        var _a, _b, _c, _d, _e;
+        if ((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price)) {
+            return `${(_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''}${(_e = (_d = product === null || product === void 0 ? void 0 : product.price) === null || _d === void 0 ? void 0 : _d.toLocaleString('zh', {
+                minimumFractionDigits: 0
+            })) !== null && _e !== void 0 ? _e : ''}`;
+        }
+        else {
+            return '£102,300.00';
+        }
+    }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
+    const width = isPreview ? 375 : window.innerWidth;
+    const handleClickCollapse = () => {
+        setSpread(!spread);
+    };
+    const handleTouchStart = (event) => {
+        event.stopPropagation();
+        touchRef.current = event.touches[0].clientY;
+        touchMoveRef.current = true;
+    };
+    const handleTouchMove = (event) => {
+        var _a, _b, _c, _d;
+        if (touchMoveRef.current) {
+            touchMoveRef.current = false;
+            const currentY = event.touches[0].clientY;
+            const diff = touchRef.current - currentY;
+            if (diff > 0 && (isBottom || !stopSlide)) {
+                (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideNext();
+            }
+            else if (diff < 0 && (isTop || !stopSlide)) {
+                (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.slidePrev();
+            }
+        }
+    };
+    return (React.createElement("div", { className: 'pb-commondityDiroNew' },
+        React.createElement("div", Object.assign({ ref: scrollRef, className: css(Object.assign({}, style)) }, props),
+            product && ((_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
+                    clickable: true,
+                    bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
+                    clickableClass: 'commondityDiroNew-swiper-clickable'
+                }, loop: true, autoplay: {
+                    delay: 3000
+                } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.map((src) => {
+                return (React.createElement(SwiperSlide, { key: src },
+                    React.createElement("div", { style: {
+                            overflow: 'hidden',
+                            width,
+                            height: width
+                        } },
+                        React.createElement("img", { src: src, style: { height: '100%', width: '100%', objectFit: 'cover' } }))));
+            }))),
+            !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement("div", { className: css({
+                    position: 'relative',
+                    height: 0,
+                    width: '100%',
+                    paddingBottom: '100%',
+                    overflow: 'hidden'
+                }) },
+                React.createElement("img", { className: css({
+                        position: 'absolute',
+                        left: 0,
+                        top: 0,
+                        objectFit: 'cover',
+                        width: '100%'
+                    }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
+            React.createElement("div", { className: 'pb-commondityDiroNew-content' },
+                React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
+                    React.createElement("div", { className: 'pb-commondityDiroNew-content-top-title' }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
+                    React.createElement("div", { className: 'pb-commondityDiroNew-content-top-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText)),
+                React.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === '') }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin'),
+                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn' }, (_l = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _l !== void 0 ? _l : 'Shop now')),
+                React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') }, isPost ? (React.createElement(ExpandableText, { onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
+                        `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
+Made in Italy` })) : (React.createElement("div", { className: 'pb-commondityDiroNew-info' }, (product === null || product === void 0 ? void 0 : product.info) ||
+                    `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
+Made in Italy`))))),
+        React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) },
+            React.createElement("div", { className: 'pb-commondityDiroNew-info', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') }, (product === null || product === void 0 ? void 0 : product.info) ||
+                `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
+Made in Italy`))));
+};
+export default memo(CommodityDetailDiroNew);

package/es/materials/sxp/popup/CommodityDetailDiroNew/material.d.ts

@@ -0,0 +1,2 @@
+declare const CommodityDetailDiroNew: import("../../../../core/create").MaterialComponet<import(".").ICommodityDetailDiroNewProps>;
+export { CommodityDetailDiroNew };