pb-sxp-ui 1.14.1 → 14.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +590 -163
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +89 -0
- package/dist/index.js +590 -163
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +6 -6
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +6 -6
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +590 -163
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +6 -6
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/ConsentPopup.js +8 -8
- package/es/core/components/SxpPageRender/index.js +5 -2
- package/es/core/context/SxpDataSourceProvider.js +49 -24
- package/es/core/utils/materials.js +5 -3
- package/es/materials/sxp/consentPopup/Click/index.d.ts +19 -0
- package/es/materials/sxp/consentPopup/Click/index.js +19 -0
- package/es/materials/sxp/consentPopup/Click/material.d.ts +2 -0
- package/es/materials/sxp/consentPopup/Click/material.js +48 -0
- package/es/materials/sxp/consentPopup/Click/settingRender.d.ts +63 -0
- package/es/materials/sxp/consentPopup/Click/settingRender.js +210 -0
- package/es/materials/sxp/consentPopup/Display/index.d.ts +2 -2
- package/es/materials/sxp/consentPopup/Display/index.js +7 -5
- package/es/materials/sxp/consentPopup/Swipe/index.d.ts +12 -0
- package/es/materials/sxp/consentPopup/Swipe/index.js +44 -0
- package/es/materials/sxp/consentPopup/Swipe/material.d.ts +2 -0
- package/es/materials/sxp/consentPopup/Swipe/material.js +24 -0
- package/es/materials/sxp/consentPopup/Swipe/settingRender.d.ts +29 -0
- package/es/materials/sxp/consentPopup/Swipe/settingRender.js +43 -0
- package/es/materials/sxp/consentPopup/index.d.ts +2 -0
- package/es/materials/sxp/consentPopup/index.js +2 -0
- package/es/materials/sxp/popup/ConsentDetail/index.d.ts +2 -1
- package/es/materials/sxp/popup/ConsentDetail/index.js +2 -2
- package/es/materials/sxp/popup/Iframe/index.d.ts +0 -4
- package/es/materials/sxp/popup/Iframe/index.js +4 -5
- package/es/materials/sxp/popup/Iframe/settingRender.js +0 -15
- package/lib/core/components/SxpPageRender/ConsentPopup.js +7 -7
- package/lib/core/components/SxpPageRender/index.js +5 -2
- package/lib/core/context/SxpDataSourceProvider.js +49 -24
- package/lib/core/utils/materials.js +5 -3
- package/lib/materials/sxp/consentPopup/Click/index.d.ts +19 -0
- package/lib/materials/sxp/consentPopup/Click/index.js +21 -0
- package/lib/materials/sxp/consentPopup/Click/material.d.ts +2 -0
- package/lib/materials/sxp/consentPopup/Click/material.js +52 -0
- package/lib/materials/sxp/consentPopup/Click/settingRender.d.ts +63 -0
- package/lib/materials/sxp/consentPopup/Click/settingRender.js +212 -0
- package/lib/materials/sxp/consentPopup/Display/index.d.ts +2 -2
- package/lib/materials/sxp/consentPopup/Display/index.js +7 -5
- package/lib/materials/sxp/consentPopup/Swipe/index.d.ts +12 -0
- package/lib/materials/sxp/consentPopup/Swipe/index.js +46 -0
- package/lib/materials/sxp/consentPopup/Swipe/material.d.ts +2 -0
- package/lib/materials/sxp/consentPopup/Swipe/material.js +28 -0
- package/lib/materials/sxp/consentPopup/Swipe/settingRender.d.ts +29 -0
- package/lib/materials/sxp/consentPopup/Swipe/settingRender.js +45 -0
- package/lib/materials/sxp/consentPopup/index.d.ts +2 -0
- package/lib/materials/sxp/consentPopup/index.js +2 -0
- package/lib/materials/sxp/popup/ConsentDetail/index.d.ts +2 -1
- package/lib/materials/sxp/popup/ConsentDetail/index.js +2 -2
- package/lib/materials/sxp/popup/Iframe/index.d.ts +0 -4
- package/lib/materials/sxp/popup/Iframe/index.js +4 -5
- package/lib/materials/sxp/popup/Iframe/settingRender.js +0 -15
- package/package.json +1 -1
@@ -1,18 +1,20 @@
|
|
1
1
|
import { __rest } from "tslib";
|
2
2
|
import React, { memo, useCallback, useMemo, useState } from 'react';
|
3
3
|
import './index.less';
|
4
|
-
import { useEditorDataProvider } from '../../../../core/context/EditorDataProvider';
|
5
4
|
import closeSvg from './close.svg';
|
6
5
|
import tel from './tel.png';
|
7
6
|
import { setFontForText } from '../../../../core/utils/tool';
|
7
|
+
import { getContsentState } from '../../../../core/utils/localStore';
|
8
8
|
const Display = (_a) => {
|
9
9
|
var _b, _c;
|
10
|
-
var { isTel, isShowOnce, open, content, interaction, style, onClick,
|
11
|
-
const { consentPopupCate } = useEditorDataProvider();
|
10
|
+
var { isTel, isShowOnce, open, content, interaction, style, onClick, isShowClose, consentPopupCate } = _a, props = __rest(_a, ["isTel", "isShowOnce", "open", "content", "interaction", "style", "onClick", "isShowClose", "consentPopupCate"]);
|
12
11
|
const [isClose, setIsClose] = useState(false);
|
12
|
+
const contsentState = useMemo(() => {
|
13
|
+
return getContsentState();
|
14
|
+
}, []);
|
13
15
|
const visivle = useMemo(() => {
|
14
|
-
return consentPopupCate
|
15
|
-
}, [consentPopupCate, open, isClose]);
|
16
|
+
return consentPopupCate || (open && (isShowOnce || contsentState) && style && !isClose);
|
17
|
+
}, [consentPopupCate, open, isClose, contsentState]);
|
16
18
|
const handleClickClose = useCallback(() => {
|
17
19
|
setIsClose(true);
|
18
20
|
}, []);
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import './index.less';
|
3
|
+
export interface ISwipeProps {
|
4
|
+
open?: boolean;
|
5
|
+
content?: string;
|
6
|
+
style?: Record<string, any>;
|
7
|
+
isTel?: boolean;
|
8
|
+
consentPopupCate?: string;
|
9
|
+
swipeIcon?: string;
|
10
|
+
}
|
11
|
+
declare const _default: React.NamedExoticComponent<ISwipeProps>;
|
12
|
+
export default _default;
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import { __rest } from "tslib";
|
2
|
+
import React, { memo, useMemo, useRef } from 'react';
|
3
|
+
import './index.less';
|
4
|
+
import tel from './tel.png';
|
5
|
+
import ConsentDetail from '../../popup/ConsentDetail';
|
6
|
+
const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
|
7
|
+
const Swipe = (_a) => {
|
8
|
+
var { isTel, open, content, style, consentPopupCate, swipeIcon } = _a, props = __rest(_a, ["isTel", "open", "content", "style", "consentPopupCate", "swipeIcon"]);
|
9
|
+
const touchInfo = useRef();
|
10
|
+
const threshold = 50;
|
11
|
+
const handleTouchStart = (event) => {
|
12
|
+
const touch = event.touches[0];
|
13
|
+
touchInfo.current = { y: touch.clientY, d: 0 };
|
14
|
+
};
|
15
|
+
const handleTouchMove = (event) => {
|
16
|
+
var _a;
|
17
|
+
if (!touchInfo.current)
|
18
|
+
return;
|
19
|
+
const touch = event.touches[0];
|
20
|
+
const dy = touch.clientY - ((_a = touchInfo === null || touchInfo === void 0 ? void 0 : touchInfo.current) === null || _a === void 0 ? void 0 : _a.y);
|
21
|
+
const currentDistance = Math.abs(dy);
|
22
|
+
touchInfo.current = Object.assign(Object.assign({}, touchInfo.current), { d: currentDistance });
|
23
|
+
};
|
24
|
+
const handleTouchEnd = () => {
|
25
|
+
if (!touchInfo.current)
|
26
|
+
return;
|
27
|
+
const { d } = touchInfo.current || {};
|
28
|
+
if (d > threshold) {
|
29
|
+
}
|
30
|
+
touchInfo.current = {};
|
31
|
+
};
|
32
|
+
const handleClickReject = () => { };
|
33
|
+
const visivle = useMemo(() => {
|
34
|
+
return consentPopupCate || (open && style);
|
35
|
+
}, [consentPopupCate, open]);
|
36
|
+
return (React.createElement(React.Fragment, null, isTel ? (React.createElement("img", { src: tel, style: { objectFit: 'cover', width: '100%', height: '100%' } })) : (React.createElement(React.Fragment, null, visivle && (React.createElement("div", { className: 'consentPopupSwipe', onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd },
|
37
|
+
React.createElement("div", { className: 'consentPopupSwipe-container', style: style },
|
38
|
+
React.createElement(ConsentDetail, { content: content, style: { padding: 0 } }),
|
39
|
+
React.createElement("button", { "aria-label": 'close', className: 'consentPopupSwipe-container-close', onClick: handleClickReject },
|
40
|
+
React.createElement("img", { src: closeIcon, alt: 'close' })),
|
41
|
+
swipeIcon && (React.createElement("div", { className: 'consentPopupSwipe-container-swipeIcon', onClick: handleClickReject },
|
42
|
+
React.createElement("img", { src: swipeIcon, alt: 'Swipe Icon' }))))))))));
|
43
|
+
};
|
44
|
+
export default memo(Swipe);
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import settingRender from './settingRender';
|
2
|
+
import SwipeComponent from '.';
|
3
|
+
import { createMaterial } from '../../../../core/create';
|
4
|
+
const Swipe = createMaterial(SwipeComponent, {
|
5
|
+
displayName: 'Swipe Consent',
|
6
|
+
icon: '',
|
7
|
+
category: 'consentPopup',
|
8
|
+
type: 'Swipe',
|
9
|
+
related: {
|
10
|
+
settingRender,
|
11
|
+
bindableProps: []
|
12
|
+
},
|
13
|
+
defaulSetting: {
|
14
|
+
props: {
|
15
|
+
content: '<p><span style="font- size: 14px"><strong><span style="line - height: 3">Your Cookie Preferences</span></strong></span></p><p><span style="line- height: 1"><span style="font- size: 12px">We use cookie, including third-party cookies, to</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">ensure the proper functioning and security of</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">this site, to analyse its use, and to show you</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">personalised content.</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">You can authorise the use of all cookies by</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">clicking on 'Accept all cookies'. If you click on</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">'Reject all cookies', we will only use cookies</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">necessary for the proper functioning and </span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">security of this site. To personalise or adjust</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">your preferences at any time, click on 'Cookies</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">Settings' below or at the bottom of any</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">Fendi.com webpage.</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">For more information, <u>read our Cookie Policy</u>.</span></span></p>'
|
16
|
+
},
|
17
|
+
style: {
|
18
|
+
backgroundColor: '#fff',
|
19
|
+
padding: 18
|
20
|
+
}
|
21
|
+
},
|
22
|
+
sort: 3
|
23
|
+
});
|
24
|
+
export { Swipe };
|
@@ -0,0 +1,29 @@
|
|
1
|
+
declare const _default: ({
|
2
|
+
title: string;
|
3
|
+
child: ({
|
4
|
+
type: string;
|
5
|
+
label: string;
|
6
|
+
name: string[];
|
7
|
+
addonAfter?: undefined;
|
8
|
+
} | {
|
9
|
+
type: string;
|
10
|
+
label: string;
|
11
|
+
name: string[];
|
12
|
+
addonAfter: string;
|
13
|
+
})[];
|
14
|
+
} | {
|
15
|
+
title: string;
|
16
|
+
child: {
|
17
|
+
type: string;
|
18
|
+
name: string[];
|
19
|
+
}[];
|
20
|
+
} | {
|
21
|
+
title: string;
|
22
|
+
child: {
|
23
|
+
type: string;
|
24
|
+
label: string;
|
25
|
+
name: string[];
|
26
|
+
text: string;
|
27
|
+
}[];
|
28
|
+
})[];
|
29
|
+
export default _default;
|
@@ -0,0 +1,43 @@
|
|
1
|
+
export default [
|
2
|
+
{
|
3
|
+
title: '全局设置',
|
4
|
+
child: [
|
5
|
+
{
|
6
|
+
type: 'Switch',
|
7
|
+
label: '弹窗开关',
|
8
|
+
name: ['props', 'open']
|
9
|
+
},
|
10
|
+
{
|
11
|
+
type: 'Color',
|
12
|
+
label: '背景色',
|
13
|
+
name: ['style', 'backgroundColor']
|
14
|
+
},
|
15
|
+
{
|
16
|
+
type: 'Number',
|
17
|
+
label: '内边距',
|
18
|
+
name: ['style', 'padding'],
|
19
|
+
addonAfter: 'px'
|
20
|
+
}
|
21
|
+
]
|
22
|
+
},
|
23
|
+
{
|
24
|
+
title: '弹窗文本',
|
25
|
+
child: [
|
26
|
+
{
|
27
|
+
type: 'RichText',
|
28
|
+
name: ['props', 'content']
|
29
|
+
}
|
30
|
+
]
|
31
|
+
},
|
32
|
+
{
|
33
|
+
title: '滑动图标',
|
34
|
+
child: [
|
35
|
+
{
|
36
|
+
type: 'Upload',
|
37
|
+
label: '滑动图标',
|
38
|
+
name: ['props', 'swipeIcon'],
|
39
|
+
text: '建议尺寸:252 * 185'
|
40
|
+
}
|
41
|
+
]
|
42
|
+
}
|
43
|
+
];
|
@@ -1,8 +1,9 @@
|
|
1
|
-
import React from 'react';
|
1
|
+
import React, { CSSProperties } from 'react';
|
2
2
|
import './index.less';
|
3
3
|
export interface IConsentDetailProps {
|
4
4
|
content?: string;
|
5
5
|
isTel?: boolean;
|
6
|
+
style?: CSSProperties;
|
6
7
|
}
|
7
8
|
declare const _default: React.NamedExoticComponent<IConsentDetailProps>;
|
8
9
|
export default _default;
|
@@ -2,11 +2,11 @@ import { __rest } from "tslib";
|
|
2
2
|
import React, { memo } from 'react';
|
3
3
|
import './index.less';
|
4
4
|
const ConsentDetail = (_a) => {
|
5
|
-
var { content, isTel } = _a, props = __rest(_a, ["content", "isTel"]);
|
5
|
+
var { content, isTel, style } = _a, props = __rest(_a, ["content", "isTel", "style"]);
|
6
6
|
return (React.createElement("article", { className: 'consentDetail-article', dangerouslySetInnerHTML: {
|
7
7
|
__html: typeof content === 'string' ? content : ''
|
8
8
|
}, onClick: (e) => {
|
9
9
|
e.stopPropagation();
|
10
|
-
} }));
|
10
|
+
}, style: style }));
|
11
11
|
};
|
12
12
|
export default memo(ConsentDetail);
|
@@ -12,10 +12,6 @@ export interface IIframeProps {
|
|
12
12
|
submitButtonStyle?: CSSProperties;
|
13
13
|
contentStyle?: CSSProperties;
|
14
14
|
isTel?: boolean;
|
15
|
-
iframe?: {
|
16
|
-
src?: string;
|
17
|
-
allow?: string;
|
18
|
-
};
|
19
15
|
}
|
20
16
|
declare const _default: React.NamedExoticComponent<IIframeProps>;
|
21
17
|
export default _default;
|
@@ -5,12 +5,11 @@ import './index.less';
|
|
5
5
|
import { useSxpDataSource } from '../../../../core/hooks';
|
6
6
|
const Iframe = (_a) => {
|
7
7
|
var _b, _c;
|
8
|
-
var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle, contentStyle, isTel
|
8
|
+
var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle, contentStyle, isTel } = _a, props = __rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick", "submitButtonStyle", "contentStyle", "isTel"]);
|
9
9
|
const { popupDetailData } = useSxpDataSource();
|
10
|
-
const
|
11
|
-
|
12
|
-
|
13
|
-
React.createElement("iframe", { src: iframeUrl, allow: allow, scrolling: 'no', style: {
|
10
|
+
const iframeUrl = (_c = (_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.video) === null || _b === void 0 ? void 0 : _b.bindCta) === null || _c === void 0 ? void 0 : _c.remark;
|
11
|
+
return (React.createElement("div", Object.assign({ className: `${css(Object.assign({}, style))}` }, props),
|
12
|
+
React.createElement("iframe", { src: iframeUrl, style: {
|
14
13
|
width: '100%',
|
15
14
|
height: 'calc(100% - 50px)',
|
16
15
|
marginTop: '50px',
|
@@ -8,20 +8,5 @@ export default [
|
|
8
8
|
name: ['style', 'backgroundColor']
|
9
9
|
}
|
10
10
|
]
|
11
|
-
},
|
12
|
-
{
|
13
|
-
title: 'iframe',
|
14
|
-
child: [
|
15
|
-
{
|
16
|
-
type: 'TextArea',
|
17
|
-
label: 'url',
|
18
|
-
name: ['props', 'iframe', 'src']
|
19
|
-
},
|
20
|
-
{
|
21
|
-
type: 'TextArea',
|
22
|
-
label: 'allow',
|
23
|
-
name: ['props', 'iframe', 'allow']
|
24
|
-
}
|
25
|
-
]
|
26
11
|
}
|
27
12
|
];
|
@@ -4,15 +4,15 @@ const tslib_1 = require("tslib");
|
|
4
4
|
const react_1 = tslib_1.__importStar(require("react"));
|
5
5
|
require("./index.less");
|
6
6
|
const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
|
7
|
-
const
|
7
|
+
const EditorDataProvider_1 = require("../../../core/context/EditorDataProvider");
|
8
8
|
const Consent = ({ resolver, globalConfig }) => {
|
9
9
|
var _a, _b;
|
10
|
-
const
|
11
|
-
return (0, localStore_1.getContsentState)();
|
12
|
-
}, []);
|
13
|
-
const t = resolver === null || resolver === void 0 ? void 0 : resolver['Display'];
|
14
|
-
const Component = (0, withBindDataSource_1.default)(t);
|
10
|
+
const { consentPopupCate } = (0, EditorDataProvider_1.useEditorDataProvider)();
|
15
11
|
const value = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consentPopup) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item;
|
16
|
-
|
12
|
+
if (!value)
|
13
|
+
return null;
|
14
|
+
const t = resolver === null || resolver === void 0 ? void 0 : resolver[value === null || value === void 0 ? void 0 : value.type];
|
15
|
+
const Component = (0, withBindDataSource_1.default)(t);
|
16
|
+
return (react_1.default.createElement(Component, Object.assign({}, value === null || value === void 0 ? void 0 : value.props, { style: value === null || value === void 0 ? void 0 : value.style, event: (value === null || value === void 0 ? void 0 : value.event) || {}, consentPopupCate: consentPopupCate })));
|
17
17
|
};
|
18
18
|
exports.default = (0, react_1.memo)(Consent);
|
@@ -120,7 +120,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
120
120
|
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
121
121
|
productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
|
122
122
|
position: activeIndex + '',
|
123
|
-
fromKName: fk
|
123
|
+
fromKName: fk || fromKName,
|
124
124
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
125
125
|
ctatId: (_r = (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.bindCta) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
|
126
126
|
traceInfo: (_v = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_u = item === null || item === void 0 ? void 0 : item.product) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : ''
|
@@ -147,9 +147,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
147
147
|
setIsReload(new Date().getTime());
|
148
148
|
skipLinkRef.current = false;
|
149
149
|
}
|
150
|
+
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false);
|
150
151
|
handleH5EnterLink();
|
151
152
|
if (repCond) {
|
152
|
-
|
153
|
+
setTimeout(() => {
|
154
|
+
event_1.default.emit(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, item);
|
155
|
+
});
|
153
156
|
backMainFeed('external', selectTag);
|
154
157
|
}
|
155
158
|
}
|
@@ -4,13 +4,13 @@ exports.DEFAULT_TAG = exports.SxpDataSourceContext = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
5
5
|
const react_1 = tslib_1.__importStar(require("react"));
|
6
6
|
const qs_1 = tslib_1.__importDefault(require("qs"));
|
7
|
+
const lodash_1 = require("lodash");
|
7
8
|
const sessionStore_1 = require("../utils/sessionStore");
|
8
9
|
const localStore_1 = require("../utils/localStore");
|
9
10
|
const useIconLink_1 = require("../components/SxpPageRender/useIconLink");
|
10
11
|
const event_1 = tslib_1.__importStar(require("../utils/event"));
|
11
12
|
const Consent_1 = tslib_1.__importDefault(require("../components/Consent"));
|
12
13
|
const tool_1 = require("../utils/tool");
|
13
|
-
const lodash_1 = require("lodash");
|
14
14
|
exports.SxpDataSourceContext = (0, react_1.createContext)({
|
15
15
|
rtcList: [],
|
16
16
|
tagList: []
|
@@ -102,29 +102,32 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
102
102
|
const bffDataSource = (0, react_1.useMemo)(() => {
|
103
103
|
return dataSources === null || dataSources === void 0 ? void 0 : dataSources.find((d) => d.type === DataSourceType.BFF);
|
104
104
|
}, [dataSources]);
|
105
|
+
const fakeUserId = (0, react_1.useMemo)(() => {
|
106
|
+
var _a;
|
107
|
+
return ((_a = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _a === void 0 ? void 0 : _a['x-app-id']) + (0, localStore_1.storeAndLoadFeUserId)();
|
108
|
+
}, [bffDataSource]);
|
105
109
|
const bffFetch = (0, react_1.useCallback)((path, options) => {
|
106
110
|
if (!bffDataSource)
|
107
111
|
return;
|
108
112
|
const url = bffDataSource.url;
|
109
|
-
const fakeUserId = (0, localStore_1.storeAndLoadFeUserId)();
|
110
113
|
if (options === null || options === void 0 ? void 0 : options.query) {
|
111
114
|
const queryString = qs_1.default.stringify(options.query);
|
112
115
|
path = `${path}?${queryString}`;
|
113
116
|
}
|
114
117
|
if (options.type === 'beacon' && navigator.sendBeacon) {
|
115
|
-
return navigator.sendBeacon(`${url}/api
|
118
|
+
return navigator.sendBeacon(`${url}/api/${path}`, new Blob([
|
116
119
|
JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))
|
117
120
|
], { type: 'application/json;charset=UTF-8' }));
|
118
121
|
}
|
119
122
|
return window
|
120
|
-
.fetch(`${url}/api
|
123
|
+
.fetch(`${url}/api/${path}`, {
|
121
124
|
headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers),
|
122
125
|
method: options.method,
|
123
126
|
body: JSON.stringify(options.body)
|
124
127
|
})
|
125
128
|
.then((res) => res.json())
|
126
129
|
.catch((err) => Promise.reject(err));
|
127
|
-
}, [bffDataSource]);
|
130
|
+
}, [bffDataSource, fakeUserId]);
|
128
131
|
const getRecommendVideos = (0, react_1.useCallback)((query) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
129
132
|
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
130
133
|
query = {
|
@@ -161,14 +164,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
161
164
|
const recurveRecList = (query) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
162
165
|
var _v, _w, _x, _y, _z, _0;
|
163
166
|
query.pageNum = pageNum;
|
164
|
-
result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'POST', body: query }));
|
167
|
+
result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', { method: 'POST', body: query }));
|
165
168
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
166
169
|
return undefined;
|
167
170
|
}
|
168
171
|
setLoading(false);
|
169
172
|
list = list.concat((_y = (_x = (_w = (_v = result === null || result === void 0 ? void 0 : result.data) === null || _v === void 0 ? void 0 : _v.recList) === null || _w === void 0 ? void 0 : _w.filter) === null || _x === void 0 ? void 0 : _x.call(_w, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _y !== void 0 ? _y : []);
|
170
|
-
|
171
|
-
|
173
|
+
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
174
|
+
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
175
|
+
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
176
|
+
}
|
172
177
|
const isNotNullList = (_0 = (_z = result === null || result === void 0 ? void 0 : result.data) === null || _z === void 0 ? void 0 : _z.recList) === null || _0 === void 0 ? void 0 : _0.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
173
178
|
if (isNotNullList) {
|
174
179
|
pageNum = pageNum + 1;
|
@@ -178,12 +183,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
178
183
|
yield recurveRecList(query);
|
179
184
|
if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
|
180
185
|
setCurReqInfo({ rtc: (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.rtc, requestId: (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.requestId });
|
181
|
-
return Object.assign(Object.assign({}, result.data), { recList: list });
|
186
|
+
return Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list });
|
182
187
|
}
|
183
188
|
if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
|
184
189
|
query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_o = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _o !== void 0 ? _o : 1 });
|
185
190
|
}
|
186
|
-
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'POST', body: query }));
|
191
|
+
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', { method: 'POST', body: query }));
|
187
192
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
188
193
|
return undefined;
|
189
194
|
}
|
@@ -233,6 +238,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
233
238
|
return expire;
|
234
239
|
}, [data]);
|
235
240
|
const bffEventReport = (0, react_1.useCallback)(({ userInfo, eventInfo, reportLayId = true }) => {
|
241
|
+
var _a, _b;
|
236
242
|
if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
|
237
243
|
return;
|
238
244
|
}
|
@@ -240,7 +246,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
240
246
|
userInfo = {};
|
241
247
|
}
|
242
248
|
const sessionID = (0, sessionStore_1.storeAndLoadFeSessionId)();
|
243
|
-
const
|
249
|
+
const urlParams = new URLSearchParams((_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.search);
|
250
|
+
const cl_source = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('cl_source');
|
251
|
+
const ef = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, { playbookType }), (layoutVariantId && reportLayId && { layoutVariantId })), eventInfo), ((eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.position) && channel && { position: Number(eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.position) + 1 + '' })), (cl_source && { cl_source }));
|
244
252
|
const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
|
245
253
|
const realEventInfo = Object.entries(ef)
|
246
254
|
.map(([k, v]) => v && { name: k, value: v })
|
@@ -249,26 +257,35 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
249
257
|
console.log('userInfo:', userInfo);
|
250
258
|
console.log('eventInfo:', ef);
|
251
259
|
console.log('========= 结束 =========');
|
252
|
-
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(
|
260
|
+
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/event/report/CLD/${(_b = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _b === void 0 ? void 0 : _b['x-app-id']}/${eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.eventSubject}`, {
|
253
261
|
method: 'POST',
|
254
262
|
body: { userInfo: realUserInfo, eventInfo: realEventInfo },
|
255
263
|
type: 'beacon'
|
256
264
|
});
|
257
|
-
}, [
|
265
|
+
}, [
|
266
|
+
bffFetch,
|
267
|
+
curReqInfo,
|
268
|
+
enableReportEvent,
|
269
|
+
globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
|
270
|
+
layoutVariantId,
|
271
|
+
globalConfig,
|
272
|
+
playbookType,
|
273
|
+
bffDataSource
|
274
|
+
]);
|
258
275
|
const bffFbReport = (0, react_1.useCallback)(({ eventName, product }) => {
|
259
|
-
var _a, _b, _c, _d, _e;
|
276
|
+
var _a, _b, _c, _d, _e, _f;
|
260
277
|
if (!enableReportEvent ||
|
261
278
|
!enabledMetaConversionApi ||
|
262
279
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
|
263
280
|
!((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName])) {
|
264
281
|
return;
|
265
282
|
}
|
266
|
-
|
283
|
+
const jsonParams = (0, lodash_1.cloneDeep)((_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _b === void 0 ? void 0 : _b[eventName]);
|
267
284
|
const urlParams = new URLSearchParams(window.location.search);
|
268
285
|
const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
|
269
286
|
const fix_par = {
|
270
287
|
event_source_url: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
|
271
|
-
external_id:
|
288
|
+
external_id: fakeUserId,
|
272
289
|
client_user_agent: (_e = (_d = window === null || window === void 0 ? void 0 : window.navigator) === null || _d === void 0 ? void 0 : _d.userAgent) !== null && _e !== void 0 ? _e : '',
|
273
290
|
fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
|
274
291
|
fbp: (0, tool_1.getCookie)('_fbp') ? `fb.2.${new Date().getTime()}.${(0, tool_1.getCookie)('_fbp')}` : '',
|
@@ -320,22 +337,30 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
320
337
|
}
|
321
338
|
};
|
322
339
|
getEventParams(jsonParams);
|
323
|
-
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(
|
340
|
+
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/event/report/FB/${(_f = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _f === void 0 ? void 0 : _f['x-app-id']}/${eventName}`, {
|
324
341
|
method: 'POST',
|
325
342
|
body: jsonParams,
|
326
343
|
type: 'beacon'
|
327
344
|
});
|
328
|
-
}, [
|
345
|
+
}, [
|
346
|
+
bffFetch,
|
347
|
+
enableReportEvent,
|
348
|
+
enabledMetaConversionApi,
|
349
|
+
globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
|
350
|
+
globalConfig,
|
351
|
+
fakeUserId,
|
352
|
+
bffDataSource
|
353
|
+
]);
|
329
354
|
const bffMutateLike = (0, react_1.useCallback)((body) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
330
|
-
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/like', { method: 'POST', body }));
|
355
|
+
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/like', { method: 'POST', body }));
|
331
356
|
return res === null || res === void 0 ? void 0 : res.success;
|
332
357
|
}), [bffFetch]);
|
333
358
|
const bffMutateUnlike = (0, react_1.useCallback)((body) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
334
|
-
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/unlike', { method: 'POST', body }));
|
359
|
+
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/unlike', { method: 'POST', body }));
|
335
360
|
return res === null || res === void 0 ? void 0 : res.success;
|
336
361
|
}), [bffFetch]);
|
337
362
|
const bffSubmitForm = (0, react_1.useCallback)((body) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
338
|
-
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/customform', { method: 'POST', body }));
|
363
|
+
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/customform', { method: 'POST', body }));
|
339
364
|
return res === null || res === void 0 ? void 0 : res.success;
|
340
365
|
}), [bffFetch]);
|
341
366
|
const bffGetTagList = (0, react_1.useCallback)((data) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
@@ -349,7 +374,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
349
374
|
const key = val.split('=')[0];
|
350
375
|
return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
|
351
376
|
})) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
|
352
|
-
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
377
|
+
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
353
378
|
setTagList((_12 = (_11 = result === null || result === void 0 ? void 0 : result.data) === null || _11 === void 0 ? void 0 : _11.tags) !== null && _12 !== void 0 ? _12 : []);
|
354
379
|
}
|
355
380
|
catch (e) {
|
@@ -423,10 +448,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
423
448
|
let curData;
|
424
449
|
let gldata;
|
425
450
|
if (data === null || data === void 0 ? void 0 : data.layoutVariantId) {
|
451
|
+
layId = data === null || data === void 0 ? void 0 : data.layoutVariantId;
|
452
|
+
setLayoutVariantId(data === null || data === void 0 ? void 0 : data.layoutVariantId);
|
426
453
|
const id = (_b = (_a = data === null || data === void 0 ? void 0 : data.layoutVariantId) === null || _a === void 0 ? void 0 : _a.split('-')) === null || _b === void 0 ? void 0 : _b[1];
|
427
454
|
if (id) {
|
428
|
-
layId = id;
|
429
|
-
setLayoutVariantId(id);
|
430
455
|
curData = dataList === null || dataList === void 0 ? void 0 : dataList.find((item) => (item === null || item === void 0 ? void 0 : item.id) === id);
|
431
456
|
if (curData) {
|
432
457
|
setPageData(curData);
|
@@ -38,14 +38,16 @@ const getBgStyleByImg = (data) => {
|
|
38
38
|
exports.getBgStyleByImg = getBgStyleByImg;
|
39
39
|
const getPriceText = ({ product, enableFormattedPrice, globalConfig, isHiddenDef, style }) => {
|
40
40
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
41
|
+
let text = '';
|
41
42
|
if ((!(product === null || product === void 0 ? void 0 : product.currency) || !(product === null || product === void 0 ? void 0 : product.price)) && isHiddenDef)
|
42
43
|
return null;
|
43
|
-
let price = (product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price) ? product === null || product === void 0 ? void 0 : product.price : 7000;
|
44
|
-
|
44
|
+
let price = Number((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price) ? product === null || product === void 0 ? void 0 : product.price : 7000);
|
45
|
+
if (typeof price !== 'number')
|
46
|
+
return text;
|
45
47
|
let priceSymbol = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.priceSymbol;
|
46
48
|
let currency = (product === null || product === void 0 ? void 0 : product.currency) ? (_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 : '' : '$';
|
47
49
|
const isToLocStr = enableFormattedPrice === undefined || enableFormattedPrice;
|
48
|
-
let decPic = price.toString();
|
50
|
+
let decPic = price === null || price === void 0 ? void 0 : price.toString();
|
49
51
|
if (priceSymbol === null || priceSymbol === void 0 ? void 0 : priceSymbol.showTwoDecimalPoint) {
|
50
52
|
decPic = price === null || price === void 0 ? void 0 : price.toFixed(2);
|
51
53
|
}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
2
|
+
import './index.less';
|
3
|
+
export interface IClickProps {
|
4
|
+
open?: boolean;
|
5
|
+
content?: string;
|
6
|
+
style?: Record<string, any>;
|
7
|
+
isTel?: boolean;
|
8
|
+
acceptButton?: {
|
9
|
+
text?: string;
|
10
|
+
style?: CSSProperties;
|
11
|
+
};
|
12
|
+
rejectButton?: {
|
13
|
+
text?: string;
|
14
|
+
style?: CSSProperties;
|
15
|
+
};
|
16
|
+
consentPopupCate?: string;
|
17
|
+
}
|
18
|
+
declare const _default: React.NamedExoticComponent<IClickProps>;
|
19
|
+
export default _default;
|
@@ -0,0 +1,21 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
const tslib_1 = require("tslib");
|
4
|
+
const react_1 = tslib_1.__importStar(require("react"));
|
5
|
+
require("./index.less");
|
6
|
+
const tel_png_1 = tslib_1.__importDefault(require("./tel.png"));
|
7
|
+
const ConsentDetail_1 = tslib_1.__importDefault(require("../../popup/ConsentDetail"));
|
8
|
+
const Click = (_a) => {
|
9
|
+
var { isTel, open, content, style, consentPopupCate, acceptButton, rejectButton } = _a, props = tslib_1.__rest(_a, ["isTel", "open", "content", "style", "consentPopupCate", "acceptButton", "rejectButton"]);
|
10
|
+
const visivle = (0, react_1.useMemo)(() => {
|
11
|
+
return consentPopupCate || (open && style);
|
12
|
+
}, [consentPopupCate, open]);
|
13
|
+
const handleClickAccept = () => { };
|
14
|
+
const handleClickReject = () => { };
|
15
|
+
return (react_1.default.createElement(react_1.default.Fragment, null, isTel ? (react_1.default.createElement("img", { src: tel_png_1.default, style: { objectFit: 'cover', width: '100%', height: '100%' } })) : (react_1.default.createElement(react_1.default.Fragment, null, visivle && (react_1.default.createElement("div", { className: 'consentPopupClick' },
|
16
|
+
react_1.default.createElement("div", { className: 'consentPopupClick-container', style: style },
|
17
|
+
react_1.default.createElement(ConsentDetail_1.default, { content: content, style: { padding: 0 } }),
|
18
|
+
react_1.default.createElement("button", { style: acceptButton === null || acceptButton === void 0 ? void 0 : acceptButton.style, onClick: handleClickAccept }, acceptButton === null || acceptButton === void 0 ? void 0 : acceptButton.text),
|
19
|
+
react_1.default.createElement("button", { style: rejectButton === null || rejectButton === void 0 ? void 0 : rejectButton.style, onClick: handleClickReject }, rejectButton === null || rejectButton === void 0 ? void 0 : rejectButton.text))))))));
|
20
|
+
};
|
21
|
+
exports.default = (0, react_1.memo)(Click);
|