@gem-sdk/components 2.1.12 → 2.1.13-staging.1
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/cjs/builder.js +5 -1
- package/dist/cjs/index.js +4 -0
- package/dist/cjs/index.liquid.js +4 -0
- package/dist/cjs/post-purchase/product/components/ProductDiscountTag.js +5 -2
- package/dist/cjs/post-purchase/product/components/ProductOffer.js +16 -3
- package/dist/cjs/post-purchase/product/components/ProductPrice.js +3 -1
- package/dist/cjs/post-purchase/product/components/ProductPriceBreakdown.js +9 -21
- package/dist/cjs/post-purchase/product/constants/ProductOfferPlaceholder.js +127 -0
- package/dist/cjs/post-purchase/product/hooks/useDynamicProduct.js +28 -0
- package/dist/cjs/post-purchase/product/settings/ProductOffer.js +26 -0
- package/dist/cjs/third-party/components/HextomCountdownTimerBar.js +32 -0
- package/dist/cjs/third-party/components/HextomCountdownTimerBar.liquid.js +12 -0
- package/dist/cjs/third-party/components/TrustBadgesBear.js +32 -0
- package/dist/cjs/third-party/components/TrustBadgesBear.liquid.js +12 -0
- package/dist/cjs/third-party/configs/HextomCountdownTimerBar.js +12 -0
- package/dist/cjs/third-party/configs/TrustBadgesBear.js +12 -0
- package/dist/cjs/third-party/next.js +11 -1
- package/dist/cjs/third-party/setting/HextomCountdownTimerBar.js +128 -0
- package/dist/cjs/third-party/setting/TrustBadgesBear.js +128 -0
- package/dist/cjs/third-party/setting/index.js +5 -1
- package/dist/esm/builder.js +5 -1
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.liquid.js +2 -0
- package/dist/esm/post-purchase/product/components/ProductDiscountTag.js +5 -2
- package/dist/esm/post-purchase/product/components/ProductOffer.js +16 -3
- package/dist/esm/post-purchase/product/components/ProductPrice.js +3 -1
- package/dist/esm/post-purchase/product/components/ProductPriceBreakdown.js +9 -21
- package/dist/esm/post-purchase/product/constants/ProductOfferPlaceholder.js +125 -0
- package/dist/esm/post-purchase/product/hooks/useDynamicProduct.js +26 -0
- package/dist/esm/post-purchase/product/settings/ProductOffer.js +26 -0
- package/dist/esm/third-party/components/HextomCountdownTimerBar.js +28 -0
- package/dist/esm/third-party/components/HextomCountdownTimerBar.liquid.js +8 -0
- package/dist/esm/third-party/components/TrustBadgesBear.js +28 -0
- package/dist/esm/third-party/components/TrustBadgesBear.liquid.js +8 -0
- package/dist/esm/third-party/configs/HextomCountdownTimerBar.js +8 -0
- package/dist/esm/third-party/configs/TrustBadgesBear.js +8 -0
- package/dist/esm/third-party/next.js +11 -1
- package/dist/esm/third-party/setting/HextomCountdownTimerBar.js +124 -0
- package/dist/esm/third-party/setting/TrustBadgesBear.js +124 -0
- package/dist/esm/third-party/setting/index.js +206 -202
- package/dist/types/index.d.ts +34 -1
- package/package.json +2 -2
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var HextomCountdownTimerBar = require('../configs/HextomCountdownTimerBar.js');
|
|
6
|
+
|
|
7
|
+
const config = {
|
|
8
|
+
tag: HextomCountdownTimerBar.default.tag,
|
|
9
|
+
label: HextomCountdownTimerBar.default.label,
|
|
10
|
+
icon: '<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="https://cdn.shopify.com/app-store/listing_images/904be13e4bba460880341eba1a5579e1/icon/CKCYtc2d5oYDEAE=.png">',
|
|
11
|
+
editorConfigs: {
|
|
12
|
+
component: {
|
|
13
|
+
isThirdParty: true
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
presets: [
|
|
17
|
+
{
|
|
18
|
+
id: HextomCountdownTimerBar.default.id,
|
|
19
|
+
name: {
|
|
20
|
+
en: HextomCountdownTimerBar.default.label
|
|
21
|
+
},
|
|
22
|
+
hideTextContent: true,
|
|
23
|
+
icon: {
|
|
24
|
+
desktop: `<div class="w-full flex flex-col items-center">
|
|
25
|
+
<img class="w-24 border border-dark-200 rounded-medium" src="https://cdn.shopify.com/app-store/listing_images/904be13e4bba460880341eba1a5579e1/icon/CKCYtc2d5oYDEAE=.png">
|
|
26
|
+
<span class="preset-item-title">Hextom: Countdown Timer Bar</span>
|
|
27
|
+
</div>`
|
|
28
|
+
},
|
|
29
|
+
components: [
|
|
30
|
+
{
|
|
31
|
+
tag: HextomCountdownTimerBar.default.tag
|
|
32
|
+
}
|
|
33
|
+
]
|
|
34
|
+
}
|
|
35
|
+
],
|
|
36
|
+
settings: [
|
|
37
|
+
{
|
|
38
|
+
id: 'setting',
|
|
39
|
+
controls: [
|
|
40
|
+
{
|
|
41
|
+
id: 'appBlockId',
|
|
42
|
+
type: 'input',
|
|
43
|
+
default: ''
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
id: 'widgetType',
|
|
47
|
+
label: 'Choose widget',
|
|
48
|
+
type: 'select',
|
|
49
|
+
options: [
|
|
50
|
+
{
|
|
51
|
+
label: 'Fsb Custom Placement',
|
|
52
|
+
value: 'fsb-custom-placement'
|
|
53
|
+
}
|
|
54
|
+
],
|
|
55
|
+
default: 'fsb-custom-placement'
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
id: 'install',
|
|
59
|
+
type: 'open-link',
|
|
60
|
+
target: '_blank',
|
|
61
|
+
linkType: 'install',
|
|
62
|
+
href: 'https://apps.shopify.com/event-promotion-bar?utm_source=gempages',
|
|
63
|
+
appName: HextomCountdownTimerBar.default.label
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
id: 'openApp',
|
|
67
|
+
type: 'open-link',
|
|
68
|
+
target: '_blank',
|
|
69
|
+
linkType: 'openApp',
|
|
70
|
+
href: '',
|
|
71
|
+
appName: HextomCountdownTimerBar.default.label
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
id: 'align',
|
|
75
|
+
label: 'Alignment',
|
|
76
|
+
type: 'segment',
|
|
77
|
+
options: [
|
|
78
|
+
{
|
|
79
|
+
label: 'Left',
|
|
80
|
+
value: 'left',
|
|
81
|
+
type: 'align'
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
label: 'Center',
|
|
85
|
+
value: 'center',
|
|
86
|
+
type: 'align'
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
label: 'Right',
|
|
90
|
+
value: 'right',
|
|
91
|
+
type: 'align'
|
|
92
|
+
}
|
|
93
|
+
],
|
|
94
|
+
devices: {
|
|
95
|
+
desktop: {
|
|
96
|
+
default: 'left'
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
]
|
|
101
|
+
}
|
|
102
|
+
],
|
|
103
|
+
ui: [
|
|
104
|
+
{
|
|
105
|
+
type: 'control',
|
|
106
|
+
setting: {
|
|
107
|
+
id: 'install'
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
type: 'control',
|
|
112
|
+
setting: {
|
|
113
|
+
id: 'openApp'
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
type: 'control',
|
|
118
|
+
label: {
|
|
119
|
+
en: 'Align'
|
|
120
|
+
},
|
|
121
|
+
setting: {
|
|
122
|
+
id: 'align'
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
]
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
exports.default = config;
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var TrustBadgesBear = require('../configs/TrustBadgesBear.js');
|
|
6
|
+
|
|
7
|
+
const config = {
|
|
8
|
+
tag: TrustBadgesBear.default.tag,
|
|
9
|
+
label: TrustBadgesBear.default.label,
|
|
10
|
+
icon: '<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="https://cdn.shopify.com/app-store/listing_images/c9141bfba8db18a258f290a5a639986e/icon/CLDR_q6erfwCEAE=.png">',
|
|
11
|
+
editorConfigs: {
|
|
12
|
+
component: {
|
|
13
|
+
isThirdParty: true
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
presets: [
|
|
17
|
+
{
|
|
18
|
+
id: TrustBadgesBear.default.id,
|
|
19
|
+
name: {
|
|
20
|
+
en: TrustBadgesBear.default.label
|
|
21
|
+
},
|
|
22
|
+
hideTextContent: true,
|
|
23
|
+
icon: {
|
|
24
|
+
desktop: `<div class="w-full flex flex-col items-center">
|
|
25
|
+
<img class="w-24 border border-dark-200 rounded-medium" src="https://cdn.shopify.com/app-store/listing_images/c9141bfba8db18a258f290a5a639986e/icon/CLDR_q6erfwCEAE=.png">
|
|
26
|
+
<span class="preset-item-title">Trust Badges Bear</span>
|
|
27
|
+
</div>`
|
|
28
|
+
},
|
|
29
|
+
components: [
|
|
30
|
+
{
|
|
31
|
+
tag: TrustBadgesBear.default.tag
|
|
32
|
+
}
|
|
33
|
+
]
|
|
34
|
+
}
|
|
35
|
+
],
|
|
36
|
+
settings: [
|
|
37
|
+
{
|
|
38
|
+
id: 'setting',
|
|
39
|
+
controls: [
|
|
40
|
+
{
|
|
41
|
+
id: 'appBlockId',
|
|
42
|
+
type: 'input',
|
|
43
|
+
default: ''
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
id: 'widgetType',
|
|
47
|
+
label: 'Choose widget',
|
|
48
|
+
type: 'select',
|
|
49
|
+
options: [
|
|
50
|
+
{
|
|
51
|
+
label: 'Widget',
|
|
52
|
+
value: 'widget'
|
|
53
|
+
}
|
|
54
|
+
],
|
|
55
|
+
default: 'widget'
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
id: 'install',
|
|
59
|
+
type: 'open-link',
|
|
60
|
+
target: '_blank',
|
|
61
|
+
linkType: 'install',
|
|
62
|
+
href: 'https://apps.shopify.com/ultimate-trust-badges?utm_source=gempages',
|
|
63
|
+
appName: TrustBadgesBear.default.label
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
id: 'openApp',
|
|
67
|
+
type: 'open-link',
|
|
68
|
+
target: '_blank',
|
|
69
|
+
linkType: 'openApp',
|
|
70
|
+
href: 'https://admin.shopify.com/?redirect=/apps/ultimate-trust-badge',
|
|
71
|
+
appName: TrustBadgesBear.default.label
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
id: 'align',
|
|
75
|
+
label: 'Alignment',
|
|
76
|
+
type: 'segment',
|
|
77
|
+
options: [
|
|
78
|
+
{
|
|
79
|
+
label: 'Left',
|
|
80
|
+
value: 'left',
|
|
81
|
+
type: 'align'
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
label: 'Center',
|
|
85
|
+
value: 'center',
|
|
86
|
+
type: 'align'
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
label: 'Right',
|
|
90
|
+
value: 'right',
|
|
91
|
+
type: 'align'
|
|
92
|
+
}
|
|
93
|
+
],
|
|
94
|
+
devices: {
|
|
95
|
+
desktop: {
|
|
96
|
+
default: 'left'
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
]
|
|
101
|
+
}
|
|
102
|
+
],
|
|
103
|
+
ui: [
|
|
104
|
+
{
|
|
105
|
+
type: 'control',
|
|
106
|
+
setting: {
|
|
107
|
+
id: 'install'
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
type: 'control',
|
|
112
|
+
setting: {
|
|
113
|
+
id: 'openApp'
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
type: 'control',
|
|
118
|
+
label: {
|
|
119
|
+
en: 'Align'
|
|
120
|
+
},
|
|
121
|
+
setting: {
|
|
122
|
+
id: 'align'
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
]
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
exports.default = config;
|
|
@@ -103,8 +103,11 @@ var TrustreviewsProductReviews = require('./TrustreviewsProductReviews.js');
|
|
|
103
103
|
var MyappgurusProductReviews = require('./MyappgurusProductReviews.js');
|
|
104
104
|
var HulkProductOptions = require('./HulkProductOptions.js');
|
|
105
105
|
var TrustshopProductReviews = require('./TrustshopProductReviews.js');
|
|
106
|
+
var HextomCountdownTimerBar = require('./HextomCountdownTimerBar.js');
|
|
107
|
+
var TrustBadgesBear = require('./TrustBadgesBear.js');
|
|
106
108
|
|
|
107
109
|
var index = {
|
|
110
|
+
HextomCountdownTimerBar: HextomCountdownTimerBar.default,
|
|
108
111
|
TrustshopProductReviews: TrustshopProductReviews.default,
|
|
109
112
|
HulkProductOptions: HulkProductOptions.default,
|
|
110
113
|
TrustreviewsProductReviews: TrustreviewsProductReviews.default,
|
|
@@ -205,7 +208,8 @@ var index = {
|
|
|
205
208
|
KingProductOptions: KingProductOptions.default,
|
|
206
209
|
RequestQuoteHidePrice: RequestQuoteHidePrice.default,
|
|
207
210
|
BirdChime: BirdChime.default,
|
|
208
|
-
FordeerProductLabels: FordeerProductLabels.default
|
|
211
|
+
FordeerProductLabels: FordeerProductLabels.default,
|
|
212
|
+
TrustBadgesBear: TrustBadgesBear.default
|
|
209
213
|
};
|
|
210
214
|
|
|
211
215
|
exports.default = index;
|
package/dist/esm/builder.js
CHANGED
|
@@ -107,6 +107,8 @@ import TrustreviewsProductReviews from './third-party/components/TrustreviewsPro
|
|
|
107
107
|
import MyappgurusProductReviews from './third-party/components/MyappgurusProductReviews.js';
|
|
108
108
|
import HulkProductOptions from './third-party/components/HulkProductOptions.js';
|
|
109
109
|
import TrustshopProductReviews from './third-party/components/TrustshopProductReviews.js';
|
|
110
|
+
import HextomCountdownTimerBar from './third-party/components/HextomCountdownTimerBar.js';
|
|
111
|
+
import TrustBadgesBear from './third-party/components/TrustBadgesBear.js';
|
|
110
112
|
import CartLineVariant from './cart/components/CartLineVariant.js';
|
|
111
113
|
import Cart from './cart/components/Cart.js';
|
|
112
114
|
import CartList from './cart/components/CartList.js';
|
|
@@ -475,7 +477,9 @@ var builder = {
|
|
|
475
477
|
ArticleReadMore,
|
|
476
478
|
Marquee,
|
|
477
479
|
MarqueeItem,
|
|
478
|
-
ProductBadge
|
|
480
|
+
ProductBadge,
|
|
481
|
+
HextomCountdownTimerBar,
|
|
482
|
+
TrustBadgesBear
|
|
479
483
|
};
|
|
480
484
|
|
|
481
485
|
export { builder as default };
|
package/dist/esm/index.js
CHANGED
|
@@ -205,6 +205,8 @@ export { default as TrustreviewsProductReviews } from './third-party/components/
|
|
|
205
205
|
export { default as MyappgurusProductReviews } from './third-party/components/MyappgurusProductReviews.js';
|
|
206
206
|
export { default as HulkProductOptions } from './third-party/components/HulkProductOptions.js';
|
|
207
207
|
export { default as TrustshopProductReviews } from './third-party/components/TrustshopProductReviews.js';
|
|
208
|
+
export { default as HextomCountdownTimerBar } from './third-party/components/HextomCountdownTimerBar.js';
|
|
209
|
+
export { default as TrustBadgesBear } from './third-party/components/TrustBadgesBear.js';
|
|
208
210
|
export { default as thirdPartyInstantSetting } from './third-party-instant/setting/index.js';
|
|
209
211
|
export { default as InstantJudgemeReviews } from './third-party-instant/components/InstantJudgemeReviews.js';
|
|
210
212
|
export { default as InstantLooxReviews } from './third-party-instant/components/InstantLooxReviews.js';
|
package/dist/esm/index.liquid.js
CHANGED
|
@@ -159,6 +159,8 @@ export { default as SeoantTrustBadgesIcon } from './third-party/components/Seoan
|
|
|
159
159
|
export { default as TrustreviewsProductReviews } from './third-party/components/TrustreviewsProductReviews.liquid.js';
|
|
160
160
|
export { default as MyappgurusProductReviews } from './third-party/components/MyappgurusProductReviews.liquid.js';
|
|
161
161
|
export { default as HulkProductOptions } from './third-party/components/HulkProductOptions.liquid.js';
|
|
162
|
+
export { default as HextomCountdownTimerBar } from './third-party/components/HextomCountdownTimerBar.liquid.js';
|
|
163
|
+
export { default as TrustBadgesBear } from './third-party/components/TrustBadgesBear.liquid.js';
|
|
162
164
|
export { default as TrustshopProductReviews } from './third-party/components/TrustshopProductReviews.liquid.js';
|
|
163
165
|
export { default as ImageComparison } from './image-comparison/components/ImageComparison.liquid.js';
|
|
164
166
|
export { default as ThirdPartySlot } from './third-party-slot/components/ThirdPartySlot.liquid.js';
|
|
@@ -1,26 +1,29 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useProduct, useProductOfferDiscount, cls } from '@gem-sdk/core';
|
|
3
3
|
import Text from '../../text/Text.js';
|
|
4
|
+
import { useDynamicProduct } from '../hooks/useDynamicProduct.js';
|
|
4
5
|
|
|
5
6
|
const PostPurchaseProductDiscountTag = ({ setting = {}, styles = {}, style, builderAttrs, builderProps, children })=>{
|
|
6
7
|
const currentProduct = useProduct();
|
|
7
8
|
const currentProductId = currentProduct?.baseID?.replace('gid://shopify/Product/', '');
|
|
8
9
|
const currentOfferDiscount = useProductOfferDiscount();
|
|
10
|
+
const { isDynamicProduct, isEnableDynamicDiscount } = useDynamicProduct();
|
|
9
11
|
const { typo } = styles;
|
|
10
12
|
const { message } = setting;
|
|
13
|
+
const hasDiscount = !!currentOfferDiscount || isDynamicProduct && isEnableDynamicDiscount;
|
|
11
14
|
return /*#__PURE__*/ jsxs("div", {
|
|
12
15
|
...builderAttrs,
|
|
13
16
|
className: cls(builderProps?.uid, 'gp-flex gp-w-full'),
|
|
14
17
|
style: {
|
|
15
18
|
...style,
|
|
16
|
-
opacity:
|
|
19
|
+
opacity: hasDiscount ? 1 : 0.2
|
|
17
20
|
},
|
|
18
21
|
id: `shopify-text-element-${builderProps?.uid}`,
|
|
19
22
|
"data-product-id": currentProductId,
|
|
20
23
|
children: [
|
|
21
24
|
/*#__PURE__*/ jsx(Text, {
|
|
22
25
|
setting: {
|
|
23
|
-
text:
|
|
26
|
+
text: hasDiscount ? message : message?.replace(new RegExp(/\{\{Discount\}\}/, 'gi'), '0%')
|
|
24
27
|
},
|
|
25
28
|
styles: {
|
|
26
29
|
typo
|
|
@@ -7,14 +7,20 @@ import Loading from '../../../common/components/Loading.js';
|
|
|
7
7
|
import { DEVICES } from './ProductVariant.js';
|
|
8
8
|
import { postPurchaseViewSpacing } from '../../utils/helper.js';
|
|
9
9
|
import { hasPublicStoreFrontData, createStoreFrontFetcher } from '../helpers/index.js';
|
|
10
|
+
import { productOfferPlaceholder } from '../constants/ProductOfferPlaceholder.js';
|
|
11
|
+
import { useDynamicProduct } from '../hooks/useDynamicProduct.js';
|
|
10
12
|
|
|
11
13
|
const PostPurchaseProductOffer = ({ styles, builderAttrs, builderProps, children, setting })=>{
|
|
12
14
|
const mode = useEditorMode();
|
|
13
|
-
const { productSetting, productOfferLayout, inlineAlignment, ...rowSetting } = setting || {};
|
|
15
|
+
const { productSetting, productOfferLayout, inlineAlignment, discountAndShippingFee, ...rowSetting } = setting || {};
|
|
14
16
|
const { productOfferColumnGap, productOfferVerticalGutter, productOfferWidth, ...rowStyles } = styles || {};
|
|
15
17
|
const productOffers = usePageStore((s)=>s.productOffers);
|
|
16
18
|
const publicStoreFrontData = usePageStore((s)=>s.publicStoreFrontData);
|
|
17
|
-
const
|
|
19
|
+
const { isDynamicProduct } = useDynamicProduct();
|
|
20
|
+
const dynamicDiscountOffer = usePageStore((s)=>s.dynamicDiscountOffer);
|
|
21
|
+
const totalProduct = useMemo(()=>isDynamicProduct ? dynamicDiscountOffer?.appliedProductCount : productOffers?.length, [
|
|
22
|
+
dynamicDiscountOffer?.appliedProductCount,
|
|
23
|
+
isDynamicProduct,
|
|
18
24
|
productOffers?.length
|
|
19
25
|
]);
|
|
20
26
|
const sortedProductBaseIDs = useMemo(()=>{
|
|
@@ -40,7 +46,14 @@ const PostPurchaseProductOffer = ({ styles, builderAttrs, builderProps, children
|
|
|
40
46
|
const products = useMemo(()=>flattenConnection(productData.data?.products), [
|
|
41
47
|
productData.data?.products
|
|
42
48
|
]);
|
|
43
|
-
const productSortedById =
|
|
49
|
+
const productSortedById = useMemo(()=>{
|
|
50
|
+
return isDynamicProduct && dynamicDiscountOffer?.appliedProductCount ? Array(dynamicDiscountOffer.appliedProductCount).fill(productOfferPlaceholder) : sortedProductBaseIDs?.map((id)=>products?.find((el)=>el?.baseID === id)).filter(Boolean);
|
|
51
|
+
}, [
|
|
52
|
+
isDynamicProduct,
|
|
53
|
+
dynamicDiscountOffer?.appliedProductCount,
|
|
54
|
+
sortedProductBaseIDs,
|
|
55
|
+
products
|
|
56
|
+
]);
|
|
44
57
|
const getStyles = ()=>{
|
|
45
58
|
return {
|
|
46
59
|
...makeStyleResponsive('cg', productOfferColumnGap),
|
|
@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { useCurrentVariant, useProduct, shopifyPriceRounding, useProductOfferDiscount, useFormatMoney, cls } from '@gem-sdk/core';
|
|
3
3
|
import { useMemo } from 'react';
|
|
4
4
|
import Text from '../../text/Text.js';
|
|
5
|
+
import { useDynamicProduct } from '../hooks/useDynamicProduct.js';
|
|
5
6
|
|
|
6
7
|
const PostPurchaseProductPrice = ({ styles, style, builderAttrs, builderProps, children })=>{
|
|
7
8
|
const currentVariant = useCurrentVariant();
|
|
@@ -9,6 +10,7 @@ const PostPurchaseProductPrice = ({ styles, style, builderAttrs, builderProps, c
|
|
|
9
10
|
const price = currentVariant?.price ?? 0;
|
|
10
11
|
const salePrice = currentVariant?.salePrice ?? 0;
|
|
11
12
|
const discount = parseFloat(shopifyPriceRounding(useProductOfferDiscount(), 2));
|
|
13
|
+
const { isDynamicProduct } = useDynamicProduct();
|
|
12
14
|
const priceShow = useMemo(()=>{
|
|
13
15
|
if (!discount) {
|
|
14
16
|
if (styles?.priceType === 'compare') {
|
|
@@ -49,7 +51,7 @@ const PostPurchaseProductPrice = ({ styles, style, builderAttrs, builderProps, c
|
|
|
49
51
|
/*#__PURE__*/ jsx(Text, {
|
|
50
52
|
styles: styles,
|
|
51
53
|
setting: {
|
|
52
|
-
text: moneyFormatted
|
|
54
|
+
text: isDynamicProduct ? '$???' : moneyFormatted
|
|
53
55
|
},
|
|
54
56
|
className: cls({
|
|
55
57
|
'gp-money': styles?.priceType === 'regular',
|
|
@@ -3,6 +3,7 @@ import { useCurrentVariant, useProduct, useQuantity, useProductOfferDiscount, us
|
|
|
3
3
|
import { useMemo, useState, useEffect, Fragment as Fragment$1 } from 'react';
|
|
4
4
|
import { postPurchaseSpacing } from '../../utils/helper.js';
|
|
5
5
|
import MoneyLine from './priceBreakdown/MoneyLine.js';
|
|
6
|
+
import { useDynamicProduct } from '../hooks/useDynamicProduct.js';
|
|
6
7
|
|
|
7
8
|
const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, builderAttrs, builderProps, children })=>{
|
|
8
9
|
const currentVariant = useCurrentVariant();
|
|
@@ -17,6 +18,7 @@ const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, b
|
|
|
17
18
|
const discountShopifyFormat = shopifyPriceRounding(discountWithQuantity, 2);
|
|
18
19
|
const totalMoneyFormatted = useFormatMoney(subTotal - parseFloat(discountShopifyFormat), false);
|
|
19
20
|
const currentProductId = currentProduct?.baseID?.replace('gid://shopify/Product/', '');
|
|
21
|
+
const { isDynamicProduct, dynamicPrice, dynamicDiscount, isEnableDynamicDiscount } = useDynamicProduct();
|
|
20
22
|
const { labelStyle, moneyStyle, spacing, width, align, isShowPrice } = styles;
|
|
21
23
|
const itemGap = useMemo(()=>{
|
|
22
24
|
return postPurchaseSpacing[spacing || 'none'];
|
|
@@ -29,19 +31,19 @@ const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, b
|
|
|
29
31
|
}, [
|
|
30
32
|
isShowPrice
|
|
31
33
|
]);
|
|
32
|
-
const
|
|
34
|
+
const getMoneyLines = ()=>{
|
|
33
35
|
const data = [];
|
|
34
36
|
if (styles.isShowSubTotalLabel !== false) {
|
|
35
37
|
data.push({
|
|
36
38
|
title: setting.subTotalLabel,
|
|
37
|
-
money: subTotalMoneyFormatted,
|
|
39
|
+
money: isDynamicProduct ? dynamicPrice : subTotalMoneyFormatted,
|
|
38
40
|
uniqueId: 'subTotalLabel'
|
|
39
41
|
});
|
|
40
42
|
}
|
|
41
43
|
if (styles.isShowDiscountLabel !== false) {
|
|
42
44
|
data.push({
|
|
43
45
|
title: setting.discountLabel,
|
|
44
|
-
money: discount > 0 ? discountMoneyFormatted : 'No discount',
|
|
46
|
+
money: isDynamicProduct && dynamicDiscount && isEnableDynamicDiscount ? dynamicPrice : discount > 0 ? discountMoneyFormatted : 'No discount',
|
|
45
47
|
uniqueId: 'discountLabel'
|
|
46
48
|
});
|
|
47
49
|
}
|
|
@@ -67,25 +69,11 @@ const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, b
|
|
|
67
69
|
}
|
|
68
70
|
data.push({
|
|
69
71
|
title: setting.totalLabel,
|
|
70
|
-
money: totalMoneyFormatted,
|
|
72
|
+
money: isDynamicProduct ? dynamicPrice : totalMoneyFormatted,
|
|
71
73
|
uniqueId: 'totalLabel'
|
|
72
74
|
});
|
|
73
75
|
return data;
|
|
74
|
-
}
|
|
75
|
-
discount,
|
|
76
|
-
discountMoneyFormatted,
|
|
77
|
-
setting.discountLabel,
|
|
78
|
-
setting.shippingLabel,
|
|
79
|
-
setting.subTotalLabel,
|
|
80
|
-
setting.taxesLabel,
|
|
81
|
-
setting.totalLabel,
|
|
82
|
-
styles.isShowSubTotalLabel,
|
|
83
|
-
styles.isShowDiscountLabel,
|
|
84
|
-
styles.isShowShippingLabel,
|
|
85
|
-
styles.isShowTaxesLabel,
|
|
86
|
-
subTotalMoneyFormatted,
|
|
87
|
-
totalMoneyFormatted
|
|
88
|
-
]);
|
|
76
|
+
};
|
|
89
77
|
return /*#__PURE__*/ jsxs(Fragment, {
|
|
90
78
|
children: [
|
|
91
79
|
/*#__PURE__*/ jsxs("div", {
|
|
@@ -136,9 +124,9 @@ const PostPurchaseProductPriceBreakdown = ({ setting = {}, styles = {}, style, b
|
|
|
136
124
|
...makeStyleResponsive('w', width),
|
|
137
125
|
gap: itemGap
|
|
138
126
|
},
|
|
139
|
-
children:
|
|
127
|
+
children: getMoneyLines().map((item)=>/*#__PURE__*/ jsxs(Fragment$1, {
|
|
140
128
|
children: [
|
|
141
|
-
item.uniqueId === 'totalLabel' &&
|
|
129
|
+
item.uniqueId === 'totalLabel' && getMoneyLines().length > 1 && /*#__PURE__*/ jsx("hr", {}),
|
|
142
130
|
/*#__PURE__*/ jsx("div", {
|
|
143
131
|
children: /*#__PURE__*/ jsx(MoneyLine, {
|
|
144
132
|
uniqueId: item.uniqueId,
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
const productOfferPlaceholder = {
|
|
2
|
+
id: '',
|
|
3
|
+
title: 'Dynamic product',
|
|
4
|
+
description: 'This is a dynamic product. The actual product will appear here based on your setup',
|
|
5
|
+
descriptionHtml: '<p class="QN2lPu">This is a dynamic product. The actual product will</p>\n<p class="QN2lPu">appear here based on your setup</p>',
|
|
6
|
+
createdAt: '2024-07-01T04:19:51.286753Z',
|
|
7
|
+
handle: 'dynamic-product',
|
|
8
|
+
averageRating: 0,
|
|
9
|
+
isStorefront: true,
|
|
10
|
+
isSample: false,
|
|
11
|
+
baseID: '',
|
|
12
|
+
sku: '',
|
|
13
|
+
options: [
|
|
14
|
+
{
|
|
15
|
+
id: '1',
|
|
16
|
+
name: 'Variant',
|
|
17
|
+
optionType: '',
|
|
18
|
+
values: [
|
|
19
|
+
{
|
|
20
|
+
id: '1',
|
|
21
|
+
label: 'Variant option',
|
|
22
|
+
isDefault: true,
|
|
23
|
+
baseID: '1'
|
|
24
|
+
}
|
|
25
|
+
]
|
|
26
|
+
}
|
|
27
|
+
],
|
|
28
|
+
vendor: '',
|
|
29
|
+
featuredImage: {
|
|
30
|
+
id: '542178560626918105',
|
|
31
|
+
contentType: 'IMAGE',
|
|
32
|
+
previewImage: '',
|
|
33
|
+
src: 'https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-312cf60c-d923-4913-9873-66545effe9cc.png',
|
|
34
|
+
width: 449,
|
|
35
|
+
height: 449,
|
|
36
|
+
alt: ''
|
|
37
|
+
},
|
|
38
|
+
collections: {
|
|
39
|
+
edges: [
|
|
40
|
+
{
|
|
41
|
+
node: {
|
|
42
|
+
id: '502321959132988135',
|
|
43
|
+
title: 'Home page'
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
node: {
|
|
48
|
+
id: '539286505089204764',
|
|
49
|
+
title: 'b'
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
node: {
|
|
54
|
+
id: '539286505089401372',
|
|
55
|
+
title: 'e'
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
]
|
|
59
|
+
},
|
|
60
|
+
tags: [],
|
|
61
|
+
medias: {
|
|
62
|
+
edges: [
|
|
63
|
+
{
|
|
64
|
+
cursor: 'gqFpzweGNIc/AALZoXYB',
|
|
65
|
+
node: {
|
|
66
|
+
id: '542178560626918105',
|
|
67
|
+
contentType: 'IMAGE',
|
|
68
|
+
previewImage: '',
|
|
69
|
+
src: 'https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-312cf60c-d923-4913-9873-66545effe9cc.png',
|
|
70
|
+
width: 449,
|
|
71
|
+
height: 449,
|
|
72
|
+
alt: ''
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
],
|
|
76
|
+
pageInfo: {
|
|
77
|
+
endCursor: 'gqFpzweGNIc/AALZoXYB',
|
|
78
|
+
hasNextPage: true
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
variants: {
|
|
82
|
+
edges: [
|
|
83
|
+
{
|
|
84
|
+
cursor: 'gqFpzwc5ZqRtDAMIoXYC',
|
|
85
|
+
node: {
|
|
86
|
+
id: '520560088328176392',
|
|
87
|
+
title: 'Default Title',
|
|
88
|
+
barcode: '',
|
|
89
|
+
baseID: 'gid://shopify/ProductVariant/49298248925463',
|
|
90
|
+
costPrice: 88,
|
|
91
|
+
height: 0,
|
|
92
|
+
inventoryPolicy: 'DENY',
|
|
93
|
+
inventoryQuantity: 211,
|
|
94
|
+
inventoryStatus: '',
|
|
95
|
+
isDigital: true,
|
|
96
|
+
length: 0,
|
|
97
|
+
lowInventoryAmount: 0,
|
|
98
|
+
manageInventory: false,
|
|
99
|
+
mediaId: '0',
|
|
100
|
+
platform: 'SHOPIFY',
|
|
101
|
+
price: 88,
|
|
102
|
+
salePrice: 88,
|
|
103
|
+
sku: '',
|
|
104
|
+
soldIndividually: false,
|
|
105
|
+
weight: 0,
|
|
106
|
+
width: 0,
|
|
107
|
+
selectedOptions: [
|
|
108
|
+
{
|
|
109
|
+
name: 'Variant',
|
|
110
|
+
value: 'Variant option',
|
|
111
|
+
optionType: ''
|
|
112
|
+
}
|
|
113
|
+
],
|
|
114
|
+
media: undefined
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
],
|
|
118
|
+
pageInfo: {
|
|
119
|
+
hasNextPage: false,
|
|
120
|
+
endCursor: 'gaFpzwc5ZqRtDAMI'
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
export { productOfferPlaceholder };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { usePageStore } from '@gem-sdk/core';
|
|
2
|
+
import { useMemo } from 'react';
|
|
3
|
+
|
|
4
|
+
const useDynamicProduct = ()=>{
|
|
5
|
+
const dynamicDiscountOffer = usePageStore((s)=>s.dynamicDiscountOffer);
|
|
6
|
+
const isDynamicProduct = useMemo(()=>{
|
|
7
|
+
return !!dynamicDiscountOffer;
|
|
8
|
+
}, [
|
|
9
|
+
dynamicDiscountOffer
|
|
10
|
+
]);
|
|
11
|
+
// false = No discount
|
|
12
|
+
const isEnableDynamicDiscount = useMemo(()=>{
|
|
13
|
+
return dynamicDiscountOffer?.isEnabled;
|
|
14
|
+
}, [
|
|
15
|
+
dynamicDiscountOffer
|
|
16
|
+
]);
|
|
17
|
+
const dynamicPrice = '$???';
|
|
18
|
+
return {
|
|
19
|
+
isDynamicProduct,
|
|
20
|
+
dynamicPrice,
|
|
21
|
+
dynamicDiscount: dynamicDiscountOffer,
|
|
22
|
+
isEnableDynamicDiscount
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export { useDynamicProduct };
|