pb-sxp-ui 1.0.98 → 1.0.100

package/lib/core/utils/tool.d.ts

@@ -2,4 +2,9 @@ declare function uuid(len: number, radix: number): string;
 declare const getIndexByblockType: (type: string, index: number) => number | "initial";
 export declare const generateRandomString: (length: number) => string;
 export declare const getUid: () => string;
+interface IfontType {
+    'fontFamily-cn': string;
+    'fontFamily-en': string;
+}
+export declare const setFontForText: (textContent?: string | null, style?: IfontType | any) => string;
 export { uuid, getIndexByblockType };

package/lib/core/utils/tool.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getIndexByblockType = exports.uuid = exports.getUid = exports.generateRandomString = void 0;
+exports.getIndexByblockType = exports.uuid = exports.setFontForText = exports.getUid = exports.generateRandomString = void 0;
 const uuid_1 = require("uuid");
 function uuid(len, radix) {
     const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
@@ -52,3 +52,47 @@ const getUid = () => {
     return uid;
 };
 exports.getUid = getUid;
+const setFontForText = (textContent, style) => {
+    if (!textContent)
+        return '';
+    let content = '';
+    const cn = style === null || style === void 0 ? void 0 : style['fontFamily-cn'];
+    const en = style === null || style === void 0 ? void 0 : style['fontFamily-en'];
+    if (!cn && !en) {
+        return textContent;
+    }
+    let text = textContent;
+    const chineseRegex = /[\u4e00-\u9fa5]/g;
+    const englishRegex = /[^\u4e00-\u9fa5]/g;
+    const cnStyle = `font-family:${cn !== null && cn !== void 0 ? cn : 'inherit'}`;
+    const enStyle = `font-family:${en !== null && en !== void 0 ? en : 'inherit'}`;
+    const fn = (str) => {
+        let chineseStartIndex = str.search(chineseRegex);
+        let englishStartIndex = str.search(englishRegex);
+        if (chineseStartIndex !== -1 && englishStartIndex !== -1 && chineseStartIndex < englishStartIndex) {
+            content += `<span style="${cnStyle}">${str.substring(chineseStartIndex, englishStartIndex)}</span>`;
+            text = str.substring(englishStartIndex, str === null || str === void 0 ? void 0 : str.length);
+        }
+        if (chineseStartIndex !== -1 && englishStartIndex !== -1 && chineseStartIndex > englishStartIndex) {
+            content += `<span style="${enStyle}">${str.substring(englishStartIndex, chineseStartIndex)}</span>`;
+            text = str.substring(chineseStartIndex, str === null || str === void 0 ? void 0 : str.length);
+        }
+        if (chineseStartIndex === -1) {
+            content += `<span style="${enStyle}">${str.substring(englishStartIndex, str === null || str === void 0 ? void 0 : str.length)}</span>`;
+            text = '';
+            return false;
+        }
+        if (englishStartIndex === -1) {
+            content += `<span style="${cnStyle}">${str.substring(chineseStartIndex, str === null || str === void 0 ? void 0 : str.length)}</span>`;
+            text = '';
+            return false;
+        }
+        return true;
+    };
+    let w = true;
+    while (w) {
+        w = fn(text);
+    }
+    return content;
+};
+exports.setFontForText = setFontForText;

package/lib/index.d.ts

@@ -8,5 +8,4 @@ export { default as SxpDataSourceProvider } from './core/context/SxpDataSourcePr
 export { default as SxpPageCore } from './core/components/SxpPageCore';
 export { default as EditorDataProvider } from './core/context/EditorDataProvider';
 export { useEditorDataProvider } from './core/context/EditorDataProvider';
-export { default as defaultSetting } from './materials/sxp/defaultSetting';
 export default Pagebuilder;

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultSetting = exports.useEditorDataProvider = exports.EditorDataProvider = exports.SxpPageCore = exports.SxpDataSourceProvider = exports.Modal = exports.DiyPortalPreview = exports.SxpPageRender = exports.materials = exports.core = void 0;
+exports.useEditorDataProvider = exports.EditorDataProvider = exports.SxpPageCore = exports.SxpDataSourceProvider = exports.Modal = exports.DiyPortalPreview = exports.SxpPageRender = exports.materials = exports.core = void 0;
 const tslib_1 = require("tslib");
 const Pagebuilder_1 = require("./core/Pagebuilder");
 exports.core = tslib_1.__importStar(require("./core"));
@@ -19,6 +19,4 @@ var EditorDataProvider_1 = require("./core/context/EditorDataProvider");
 Object.defineProperty(exports, "EditorDataProvider", { enumerable: true, get: function () { return tslib_1.__importDefault(EditorDataProvider_1).default; } });
 var EditorDataProvider_2 = require("./core/context/EditorDataProvider");
 Object.defineProperty(exports, "useEditorDataProvider", { enumerable: true, get: function () { return EditorDataProvider_2.useEditorDataProvider; } });
-var defaultSetting_1 = require("./materials/sxp/defaultSetting");
-Object.defineProperty(exports, "defaultSetting", { enumerable: true, get: function () { return tslib_1.__importDefault(defaultSetting_1).default; } });
 exports.default = Pagebuilder_1.Pagebuilder;

package/lib/materials/sxp/HashTag/settingRender.d.ts

@@ -38,27 +38,25 @@ declare const _default: ({
         } | {
             type: string;
             label: string;
-            child: ({
+            child: {
                 type: string;
                 name: string[];
-                options?: undefined;
-                initialValue?: undefined;
-                addonAfter?: undefined;
-            } | {
+                bottomText: string;
+            }[];
+            options?: undefined;
+            name?: undefined;
+            initialValue?: undefined;
+        } | {
+            type: string;
+            label: string;
+            child: ({
                 type: string;
-                options: {
-                    label: string;
-                    value: string;
-                }[];
                 name: string[];
-                initialValue: string;
                 addonAfter?: undefined;
             } | {
                 type: string;
                 addonAfter: string;
                 name: string[];
-                options?: undefined;
-                initialValue?: undefined;
             })[];
             options?: undefined;
             name?: undefined;
@@ -105,19 +103,19 @@ declare const _default: ({
     } | {
         type: string;
         label: string;
-        child: ({
+        child: {
             type: string;
             name: string[];
-            initialValue: string;
-            options?: undefined;
-            addonAfter?: undefined;
-        } | {
+            bottomText: string;
+        }[];
+        name?: undefined;
+        initialValue?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
             type: string;
             name: string[];
-            options: {
-                label: string;
-                value: string;
-            }[];
             initialValue: string;
             addonAfter?: undefined;
         } | {
@@ -125,7 +123,6 @@ declare const _default: ({
             name: string[];
             addonAfter: string;
             initialValue?: undefined;
-            options?: undefined;
         })[];
         name?: undefined;
         initialValue?: undefined;

package/lib/materials/sxp/HashTag/settingRender.js

@@ -1,7 +1,5 @@
 "use strict";
-var _a, _b;
 Object.defineProperty(exports, "__esModule", { value: true });
-const defaultSetting_1 = require("../defaultSetting");
 exports.default = [
     {
         title: 'Banner',
@@ -70,14 +68,24 @@ exports.default = [
                         label: '标题字体',
                         child: [
                             {
-                                type: 'Color',
-                                name: ['color']
+                                type: 'Select',
+                                name: ['fontFamily-cn'],
+                                bottomText: '中文字体'
                             },
                             {
                                 type: 'Select',
-                                options: defaultSetting_1.fontOptions,
-                                name: ['fontFamily'],
-                                initialValue: (_a = defaultSetting_1.fontOptions === null || defaultSetting_1.fontOptions === void 0 ? void 0 : defaultSetting_1.fontOptions[0]) === null || _a === void 0 ? void 0 : _a.value
+                                name: ['fontFamily-en'],
+                                bottomText: '英文/其他字体'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'Group',
+                        label: '',
+                        child: [
+                            {
+                                type: 'Color',
+                                name: ['color']
                             },
                             {
                                 type: 'Number',
@@ -144,15 +152,25 @@ exports.default = [
                 label: '字体',
                 child: [
                     {
-                        type: 'Color',
-                        name: ['props', 'buttonStyle', 'color'],
-                        initialValue: '#fff'
+                        type: 'Select',
+                        name: ['props', 'buttonStyle', 'fontFamily-cn'],
+                        bottomText: '中文字体'
                     },
                     {
                         type: 'Select',
-                        name: ['props', 'buttonStyle', 'fontFamily'],
-                        options: defaultSetting_1.fontOptions,
-                        initialValue: (_b = defaultSetting_1.fontOptions === null || defaultSetting_1.fontOptions === void 0 ? void 0 : defaultSetting_1.fontOptions[0]) === null || _b === void 0 ? void 0 : _b.value
+                        name: ['props', 'buttonStyle', 'fontFamily-en'],
+                        bottomText: '英文/其他字体'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['props', 'buttonStyle', 'color'],
+                        initialValue: '#fff'
                     },
                     {
                         type: 'Number',

package/lib/materials/sxp/popup/AppointForm/Form.d.ts

@@ -0,0 +1,14 @@
+import { IAppointFormProps } from '.';
+import React from 'react';
+interface IFormProps {
+    columns?: {
+        title?: string;
+        dataIndex?: string;
+        valueType?: string;
+        key?: string;
+    }[];
+    layout?: IAppointFormProps['layoutType'];
+    onChange?: (data: Record<string, any>) => void;
+}
+declare const _default: React.NamedExoticComponent<IFormProps>;
+export default _default;

package/lib/materials/sxp/popup/AppointForm/Form.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const react_2 = tslib_1.__importDefault(require("react"));
+const Form = ({ layout, columns, onChange }) => {
+    return (react_2.default.createElement(react_2.default.Fragment, null, columns === null || columns === void 0 ? void 0 : columns.map((item, index) => (react_2.default.createElement("div", { key: index, className: 'pb-appoint-form-container-item', style: { flexDirection: layout === 'horizontal' ? 'row' : 'column' } },
+        layout !== 'inline' && react_2.default.createElement("label", { className: 'pb-appoint-form-container-label' }, item === null || item === void 0 ? void 0 : item.title),
+        (item === null || item === void 0 ? void 0 : item.valueType) === 'text' && (react_2.default.createElement("input", { className: 'pb-appoint-form-container-input', type: 'text', placeholder: layout === 'inline' ? item === null || item === void 0 ? void 0 : item.title : '请输入', name: item === null || item === void 0 ? void 0 : item.dataIndex, onChange: onChange })))))));
+};
+exports.default = (0, react_1.memo)(Form);

package/lib/materials/sxp/popup/AppointForm/index.js

@@ -7,11 +7,12 @@ const lodash_1 = require("lodash");
 const hooks_1 = require("../../../../core/hooks");
 require("./index.less");
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
+const tool_1 = require("../../../../core/utils/tool");
+const Form_1 = tslib_1.__importDefault(require("./Form"));
 const AppointForm = (_a) => {
-    var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType, isExternalLink, isPopup, onClick, onClose, submitButtonStyle } = _a, props = tslib_1.__rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "isExternalLink", "isPopup", "onClick", "onClose", "submitButtonStyle"]);
+    var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType = 'inline', isExternalLink, isPopup, onClick, onClose, submitButtonStyle } = _a, props = tslib_1.__rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "isExternalLink", "isPopup", "onClick", "onClose", "submitButtonStyle"]);
     const { submitForm, popupDetailData } = (0, hooks_1.useSxpDataSource)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
-    const formRef = (0, react_1.useRef)();
     const [loading, setLoading] = (0, react_1.useState)(false);
     const defaultColumns = (0, react_1.useMemo)(() => [
         {
@@ -39,27 +40,26 @@ const AppointForm = (_a) => {
             key: '4'
         }
     ], []);
+    const [formData, setFormData] = (0, react_1.useState)({});
     const columnsData = (0, react_1.useMemo)(() => {
-        if (layoutType === undefined) {
-            const list = (0, lodash_1.cloneDeep)(columns) || defaultColumns;
-            return list === null || list === void 0 ? void 0 : list.map((obj) => (Object.assign(Object.assign({}, obj), { title: undefined, fieldProps: { placeholder: obj === null || obj === void 0 ? void 0 : obj.title } })));
-        }
-        else {
-            return (0, lodash_1.cloneDeep)(columns) || defaultColumns;
-        }
-    }, [layoutType, columns, defaultColumns]);
+        return (0, lodash_1.cloneDeep)(columns) || defaultColumns;
+    }, [columns, defaultColumns]);
+    const handleChange = (0, react_1.useCallback)((e) => {
+        const { name, value } = e.target;
+        setFormData(Object.assign(Object.assign({}, formData), { [name]: value }));
+    }, [formData]);
     const handleSubmit = (0, lodash_1.debounce)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        var _b, _c, _d, _e, _f, _g;
-        const vals = yield ((_b = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _b === void 0 ? void 0 : _b.getFieldsValue());
+        var _b, _c, _d, _e, _f;
+        const vals = formData;
         if (!vals)
             return;
-        const arr = (_d = (_c = Object.keys(vals)) === null || _c === void 0 ? void 0 : _c.map((key) => {
+        const arr = (_c = (_b = Object.keys(vals)) === null || _b === void 0 ? void 0 : _b.map((key) => {
             var _a;
             return ({
                 name: key,
                 value: (_a = vals[key]) !== null && _a !== void 0 ? _a : ''
             });
-        })) === null || _d === void 0 ? void 0 : _d.filter((item) => item === null || item === void 0 ? void 0 : item.value);
+        })) === null || _c === void 0 ? void 0 : _c.filter((item) => item === null || item === void 0 ? void 0 : item.value);
         if (!arr || !(arr === null || arr === void 0 ? void 0 : arr.length))
             return;
         setLoading(true);
@@ -68,8 +68,8 @@ const AppointForm = (_a) => {
         if (res) {
             if (isExternalLink) {
                 const data = popupDetailData;
-                const product = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProduct;
-                const cta = (_g = (_f = data === null || data === void 0 ? void 0 : data.video) === null || _f === void 0 ? void 0 : _f.bindProduct) === null || _g === void 0 ? void 0 : _g.bindCta;
+                const product = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProduct;
+                const cta = (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.bindCta;
                 const position = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
                 jumpToWeb(data, product, cta, position);
             }
@@ -80,10 +80,15 @@ const AppointForm = (_a) => {
         }
     }), 1000);
     return (react_1.default.createElement("div", { className: 'pb-appoint-form' },
-        react_1.default.createElement("div", { className: `pb-appoint-form-title ${(0, css_1.css)(Object.assign({}, textStyle))}` }, title),
+        react_1.default.createElement("div", { className: `pb-appoint-form-title ${(0, css_1.css)(Object.assign({}, textStyle))}`, dangerouslySetInnerHTML: {
+                __html: (0, tool_1.setFontForText)(title, textStyle)
+            } }),
         react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
-            react_1.default.createElement("div", { className: 'pb-appoint-form-container' })),
+            react_1.default.createElement("div", { className: 'pb-appoint-form-container' },
+                react_1.default.createElement(Form_1.default, { columns: columnsData, layout: layoutType, onChange: handleChange }))),
         react_1.default.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },
-            react_1.default.createElement("button", { "aria-label": submitText, onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle) }, loading ? react_1.default.createElement(react_1.default.Fragment, null, "loading...") : submitText))));
+            react_1.default.createElement("button", { "aria-label": submitText, onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle), dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)(loading ? 'loading...' : submitText, submitButtonStyle)
+                } }))));
 };
 exports.default = (0, react_1.memo)(AppointForm);

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

@@ -15,27 +15,24 @@ declare const _default: ({
     } | {
         type: string;
         label: string;
-        child: ({
+        child: {
             type: string;
             name: string[];
-            options?: undefined;
-            initialValue?: undefined;
-            addonAfter?: undefined;
-        } | {
+            bottomText: string;
+        }[];
+        name?: undefined;
+        options?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
             type: string;
             name: string[];
-            options: {
-                label: string;
-                value: string;
-            }[];
-            initialValue: string;
             addonAfter?: undefined;
         } | {
             type: string;
             name: string[];
             addonAfter: string;
-            options?: undefined;
-            initialValue?: undefined;
         })[];
         name?: undefined;
         options?: undefined;
@@ -58,20 +55,12 @@ declare const _default: ({
             type: string;
             name: string[];
             initialValue: string;
-            options?: undefined;
-            addonAfter?: undefined;
-        } | {
-            type: string;
-            name: string[];
-            options: any[];
-            initialValue: any;
             addonAfter?: undefined;
         } | {
             type: string;
             name: string[];
             addonAfter: string;
             initialValue: number;
-            options?: undefined;
         })[];
         name?: undefined;
         options?: undefined;

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

@@ -1,8 +1,5 @@
 "use strict";
-var _a, _b, _c;
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const defaultSetting_1 = tslib_1.__importStar(require("../../defaultSetting"));
 exports.default = [
     {
         type: 'Text',
@@ -22,14 +19,24 @@ exports.default = [
                 label: '标题字体',
                 child: [
                     {
-                        type: 'Color',
-                        name: ['textStyle', 'color']
+                        type: 'Select',
+                        name: ['testStyle', 'fontFamily-cn'],
+                        bottomText: '中文字体'
                     },
                     {
                         type: 'Select',
-                        name: ['textStyle', 'fontFamily'],
-                        options: defaultSetting_1.fontOptions,
-                        initialValue: (_a = defaultSetting_1.fontOptions === null || defaultSetting_1.fontOptions === void 0 ? void 0 : defaultSetting_1.fontOptions[0]) === null || _a === void 0 ? void 0 : _a.value
+                        name: ['testStyle', 'fontFamily-en'],
+                        bottomText: '英文/其他字体'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['textStyle', 'color']
                     },
                     {
                         type: 'Number',
@@ -77,15 +84,25 @@ exports.default = [
                 label: '提交按钮字体',
                 child: [
                     {
-                        type: 'Color',
-                        name: ['props', 'submitButtonStyle', 'color'],
-                        initialValue: '#fff'
+                        type: 'Select',
+                        name: ['props', 'submitButtonStyle', 'fontFamily-cn'],
+                        bottomText: '中文字体'
                     },
                     {
                         type: 'Select',
-                        name: ['props', 'submitButtonStyle', 'fontFamily'],
-                        options: defaultSetting_1.default === null || defaultSetting_1.default === void 0 ? void 0 : defaultSetting_1.default.fontOptions,
-                        initialValue: (_c = (_b = defaultSetting_1.default === null || defaultSetting_1.default === void 0 ? void 0 : defaultSetting_1.default.fontOptions) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.value
+                        name: ['props', 'submitButtonStyle', 'fontFamily-en'],
+                        bottomText: '英文/其他字体'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['props', 'submitButtonStyle', 'color'],
+                        initialValue: '#fff'
                     },
                     {
                         type: 'Number',

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

@@ -11,6 +11,7 @@ const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const Modal_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/Modal"));
 const ExpandableText_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/ExpandableText"));
 const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
+const tool_1 = require("../../../../core/utils/tool");
 const CommodityDetail = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index"]);
@@ -64,9 +65,15 @@ const CommodityDetail = (_a) => {
     const renderContent = ({ isPost }) => {
         var _a, _b, _c;
         return (react_1.default.createElement("div", null,
-            react_1.default.createElement("div", { className: 'pb-commondity-content-collection', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection), hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === '') }, (_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock'),
-            react_1.default.createElement("div", { className: 'pb-commondity-content-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title), hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title) }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
-            react_1.default.createElement("div", { className: 'pb-commondity-content-price', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price), hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText),
+            react_1.default.createElement("div", { className: 'pb-commondity-content-collection', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection), hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)((_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
+                } }),
+            react_1.default.createElement("div", { className: 'pb-commondity-content-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title), hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title), dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)((_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
+                } }),
+            react_1.default.createElement("div", { className: 'pb-commondity-content-price', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price), hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)(priceText, commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
+                } }),
             react_1.default.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
                 react_1.default.createElement(ExpandableText_1.default, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `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
@@ -76,7 +83,9 @@ const CommodityDetail = (_a) => {
     };
     const renderBtn = () => {
         var _a, _b;
-        return (react_1.default.createElement(react_1.default.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle }, (_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website'))));
+        return (react_1.default.createElement(react_1.default.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle, dangerouslySetInnerHTML: {
+                __html: (0, tool_1.setFontForText)((_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website', buttonStyle)
+            } }))));
     };
     const getStyle = (0, react_1.useCallback)((style) => {
         if (style === null || style === void 0 ? void 0 : style.lineClamp) {

package/lib/materials/sxp/popup/CommodityDetail/settingRender.d.ts

@@ -62,27 +62,25 @@ declare const _default: ({
         } | {
             type: string;
             label: string;
-            child: ({
+            child: {
                 type: string;
                 name: string[];
-                options?: undefined;
-                initialValue?: undefined;
-                addonAfter?: undefined;
-            } | {
+                bottomText: string;
+            }[];
+            options?: undefined;
+            name?: undefined;
+            initialValue?: undefined;
+        } | {
+            type: string;
+            label: string;
+            child: ({
                 type: string;
-                options: {
-                    label: string;
-                    value: string;
-                }[];
                 name: string[];
-                initialValue: string;
                 addonAfter?: undefined;
             } | {
                 type: string;
                 addonAfter: string;
                 name: string[];
-                options?: undefined;
-                initialValue?: undefined;
             })[];
             options?: undefined;
             name?: undefined;
@@ -136,19 +134,19 @@ declare const _default: ({
     } | {
         type: string;
         label: string;
-        child: ({
+        child: {
             type: string;
             name: string[];
-            initialValue: string;
-            options?: undefined;
-            addonAfter?: undefined;
-        } | {
+            bottomText: string;
+        }[];
+        name?: undefined;
+        initialValue?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
             type: string;
             name: string[];
-            options: {
-                label: string;
-                value: string;
-            }[];
             initialValue: string;
             addonAfter?: undefined;
         } | {
@@ -156,7 +154,6 @@ declare const _default: ({
             name: string[];
             addonAfter: string;
             initialValue?: undefined;
-            options?: undefined;
         })[];
         name?: undefined;
         initialValue?: undefined;