@gem-sdk/components 2.2.0 → 2.4.0

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.
@@ -129,7 +129,7 @@ const Button = ({ className, onClick, builderProps, builderAttrs, setting = {},
129
129
  disabled: disabled,
130
130
  children: [
131
131
  loading ? /*#__PURE__*/ jsxRuntime.jsxs("svg", {
132
- className: "gp-invisible gp-h-5 gp-w-5 gp-animate-spin group-data-[state=loading]:gp-visible gp-absolute",
132
+ className: "gp-invisible gp-h-5 gp-w-5 gp-animate-spin group-data-[state=loading]/button:gp-visible gp-absolute",
133
133
  xmlns: "http://www.w3.org/2000/svg",
134
134
  fill: "none",
135
135
  viewBox: "0 0 24 24",
@@ -156,7 +156,7 @@ const Button = ({ className, onClick, builderProps, builderAttrs, setting = {},
156
156
  children: [
157
157
  !!iconSvg && iconVisible && /*#__PURE__*/ jsxRuntime.jsx("span", {
158
158
  className: `
159
- gp-button-icon gp-transition-colors gp-duration-300 gp-z-1 gp-inline-flex gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]:gp-invisible [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)] ${shouldClearSpace && !label ? '!gp-m-0' : ''}`,
159
+ gp-button-icon gp-transition-colors gp-duration-300 gp-z-1 gp-inline-flex gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]/button:gp-invisible [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)] ${shouldClearSpace && !label ? '!gp-m-0' : ''}`,
160
160
  style: {
161
161
  ...iconSpacingStyle,
162
162
  '--height-desktop': `${size?.desktop}`,
@@ -169,7 +169,7 @@ const Button = ({ className, onClick, builderProps, builderAttrs, setting = {},
169
169
  }),
170
170
  (!!label || !shouldClearSpace) && /*#__PURE__*/ jsxRuntime.jsx("div", {
171
171
  "data-gp-text": true,
172
- className: core.cls(`gp-relative group-hover/button:!gp-text-inherit gp-flex gp-h-full gp-items-center gp-overflow-hidden gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line`, styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : '', mode === 'edit' && !options?.isCannotEditing ? 'gp-text button-text' : '', nodePrice ? appendTypoClass : {}),
172
+ className: core.cls(`gp-relative group-hover/button:!gp-text-inherit gp-flex gp-h-full gp-items-center gp-overflow-hidden gp-break-words group-data-[state=loading]/button:gp-invisible [&_p]:gp-whitespace-pre-line`, styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : '', mode === 'edit' && !options?.isCannotEditing ? 'gp-text button-text' : '', nodePrice ? appendTypoClass : {}),
173
173
  style: {
174
174
  ...core.makeStyle({
175
175
  tt: styles?.transform
@@ -127,7 +127,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
127
127
  }}"
128
128
  >
129
129
  ${!disabledLoading ? ` <svg
130
- class="gp-invisible gp-absolute gp-h-5 gp-w-5 group-data-[state=loading]:gp-animate-spin group-data-[state=loading]:gp-visible"
130
+ class="gp-invisible gp-absolute gp-h-5 gp-w-5 group-data-[state=loading]/button:gp-animate-spin group-data-[state=loading]/button:gp-visible"
131
131
  xmlns="http://www.w3.org/2000/svg"
132
132
  fill="none"
133
133
  viewBox="0 0 24 24"
@@ -151,7 +151,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
151
151
  'gp-flex-row-reverse': iconAlign === 'right'
152
152
  })}">
153
153
  ${core.RenderIf(!!iconSvg && iconVisible, core.template`<span
154
- class="${`gp-inline-flex gp-button-icon gp-transition-colors gp-duration-300 gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]:gp-invisible gp-z-1 [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)]`}"
154
+ class="${`gp-inline-flex gp-button-icon gp-transition-colors gp-duration-300 gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]/button:gp-invisible gp-z-1 [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)]`}"
155
155
  style="${{
156
156
  ...label ? iconSpacingStyle : {},
157
157
  '--height-desktop': `${size?.desktop}`,
@@ -161,7 +161,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
161
161
  >${iconSvg}</span>`)}
162
162
  <span
163
163
  data-gp-text
164
- class="${`group-hover/button:!gp-text-inherit gp-button-text-only gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
164
+ class="${`group-hover/button:!gp-text-inherit gp-button-text-only gp-break-words group-data-[state=loading]/button:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
165
165
  ${styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : ''}`}"
166
166
  style="${{
167
167
  ...nodePrice && appendTypoStyle,
@@ -5,17 +5,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var core = require('@gem-sdk/core');
6
6
 
7
7
  const EcomsendBackInStockAlert = ({ setting, advanced })=>{
8
- const { align } = setting ?? {};
8
+ const { align, productId } = setting ?? {};
9
9
  return core.template`
10
- <div
11
- class="${advanced?.cssClass}"
12
- style="${{
10
+ <div
11
+ class="${advanced?.cssClass}"
12
+ style="${{
13
13
  ...core.makeStyleResponsive('ta', align)
14
14
  }}"
15
- >
16
- <div id="sealapps-bis-widget"></div>
17
- </div>
18
- `;
15
+ >
16
+ ${productId ? `<div style="display: block" class="ecomsend-bis-block" data-product-id="${productId}"></div>` : `<div id="sealapps-bis-widget"></div>`}
17
+ </div>
18
+ `;
19
19
  };
20
20
 
21
21
  exports.default = EcomsendBackInStockAlert;
@@ -14,20 +14,44 @@ const AppConfig = {
14
14
  };
15
15
  const widgetTypeOptions = [
16
16
  {
17
- label: 'Fly Bundles: Volume Block',
18
- value: 'app-block-volume'
17
+ label: 'Fly Bundles: Quantity Breaks',
18
+ value: 'app-block-volume',
19
+ hideOnPage: [
20
+ 'GP_ARTICLE',
21
+ 'GP_BLOG',
22
+ 'GP_COLLECTION',
23
+ 'GP_INDEX',
24
+ 'GP_STATIC'
25
+ ]
19
26
  },
20
27
  {
21
- label: 'Fly Bundles: Upsell Block',
22
- value: 'app-block-upsell-block'
28
+ label: 'Fly Bundles: Frequently Bought Together',
29
+ value: 'app-block-upsell-block',
30
+ hideOnPage: [
31
+ 'GP_ARTICLE',
32
+ 'GP_BLOG',
33
+ 'GP_COLLECTION',
34
+ 'GP_INDEX',
35
+ 'GP_STATIC'
36
+ ]
23
37
  },
24
38
  {
25
- label: 'Fly Bundles: Fixed Block',
26
- value: 'app-block-fbt'
39
+ label: 'Fly Bundles: Product Bundles',
40
+ value: 'app-block-fbt',
41
+ hideOnPage: [
42
+ 'GP_ARTICLE',
43
+ 'GP_BLOG',
44
+ 'GP_COLLECTION',
45
+ 'GP_INDEX',
46
+ 'GP_STATIC'
47
+ ]
27
48
  },
28
49
  {
29
50
  label: 'Fly Bundles: Custom Block',
30
- value: 'app-block-custom'
51
+ value: 'app-block-custom',
52
+ hideOnPage: [
53
+ 'GP_PRODUCT'
54
+ ]
31
55
  }
32
56
  ];
33
57
  const FlyBundlesUpsellsFbtContent = ({ widgetName })=>{
@@ -54,6 +54,11 @@ const config = {
54
54
  ],
55
55
  default: 'product-restore-email'
56
56
  },
57
+ {
58
+ id: 'productId',
59
+ label: 'Product ID',
60
+ type: 'input'
61
+ },
57
62
  {
58
63
  id: 'install',
59
64
  type: 'open-link',
@@ -121,6 +126,17 @@ const config = {
121
126
  setting: {
122
127
  id: 'align'
123
128
  }
129
+ },
130
+ {
131
+ type: 'control',
132
+ setting: {
133
+ id: 'productId'
134
+ },
135
+ options: {
136
+ hideOnPages: [
137
+ 'GP_PRODUCT'
138
+ ]
139
+ }
124
140
  }
125
141
  ]
126
142
  };
@@ -114,6 +114,11 @@ const config = {
114
114
  },
115
115
  label: {
116
116
  en: 'Custom Block ID'
117
+ },
118
+ options: {
119
+ hideOnPages: [
120
+ 'GP_PRODUCT'
121
+ ]
117
122
  }
118
123
  },
119
124
  {
@@ -125,7 +125,7 @@ const Button = ({ className, onClick, builderProps, builderAttrs, setting = {},
125
125
  disabled: disabled,
126
126
  children: [
127
127
  loading ? /*#__PURE__*/ jsxs("svg", {
128
- className: "gp-invisible gp-h-5 gp-w-5 gp-animate-spin group-data-[state=loading]:gp-visible gp-absolute",
128
+ className: "gp-invisible gp-h-5 gp-w-5 gp-animate-spin group-data-[state=loading]/button:gp-visible gp-absolute",
129
129
  xmlns: "http://www.w3.org/2000/svg",
130
130
  fill: "none",
131
131
  viewBox: "0 0 24 24",
@@ -152,7 +152,7 @@ const Button = ({ className, onClick, builderProps, builderAttrs, setting = {},
152
152
  children: [
153
153
  !!iconSvg && iconVisible && /*#__PURE__*/ jsx("span", {
154
154
  className: `
155
- gp-button-icon gp-transition-colors gp-duration-300 gp-z-1 gp-inline-flex gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]:gp-invisible [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)] ${shouldClearSpace && !label ? '!gp-m-0' : ''}`,
155
+ gp-button-icon gp-transition-colors gp-duration-300 gp-z-1 gp-inline-flex gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]/button:gp-invisible [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)] ${shouldClearSpace && !label ? '!gp-m-0' : ''}`,
156
156
  style: {
157
157
  ...iconSpacingStyle,
158
158
  '--height-desktop': `${size?.desktop}`,
@@ -165,7 +165,7 @@ const Button = ({ className, onClick, builderProps, builderAttrs, setting = {},
165
165
  }),
166
166
  (!!label || !shouldClearSpace) && /*#__PURE__*/ jsx("div", {
167
167
  "data-gp-text": true,
168
- className: cls(`gp-relative group-hover/button:!gp-text-inherit gp-flex gp-h-full gp-items-center gp-overflow-hidden gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line`, styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : '', mode === 'edit' && !options?.isCannotEditing ? 'gp-text button-text' : '', nodePrice ? appendTypoClass : {}),
168
+ className: cls(`gp-relative group-hover/button:!gp-text-inherit gp-flex gp-h-full gp-items-center gp-overflow-hidden gp-break-words group-data-[state=loading]/button:gp-invisible [&_p]:gp-whitespace-pre-line`, styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : '', mode === 'edit' && !options?.isCannotEditing ? 'gp-text button-text' : '', nodePrice ? appendTypoClass : {}),
169
169
  style: {
170
170
  ...makeStyle({
171
171
  tt: styles?.transform
@@ -123,7 +123,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
123
123
  }}"
124
124
  >
125
125
  ${!disabledLoading ? ` <svg
126
- class="gp-invisible gp-absolute gp-h-5 gp-w-5 group-data-[state=loading]:gp-animate-spin group-data-[state=loading]:gp-visible"
126
+ class="gp-invisible gp-absolute gp-h-5 gp-w-5 group-data-[state=loading]/button:gp-animate-spin group-data-[state=loading]/button:gp-visible"
127
127
  xmlns="http://www.w3.org/2000/svg"
128
128
  fill="none"
129
129
  viewBox="0 0 24 24"
@@ -147,7 +147,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
147
147
  'gp-flex-row-reverse': iconAlign === 'right'
148
148
  })}">
149
149
  ${RenderIf(!!iconSvg && iconVisible, template`<span
150
- class="${`gp-inline-flex gp-button-icon gp-transition-colors gp-duration-300 gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]:gp-invisible gp-z-1 [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)]`}"
150
+ class="${`gp-inline-flex gp-button-icon gp-transition-colors gp-duration-300 gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]/button:gp-invisible gp-z-1 [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)]`}"
151
151
  style="${{
152
152
  ...label ? iconSpacingStyle : {},
153
153
  '--height-desktop': `${size?.desktop}`,
@@ -157,7 +157,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
157
157
  >${iconSvg}</span>`)}
158
158
  <span
159
159
  data-gp-text
160
- class="${`group-hover/button:!gp-text-inherit gp-button-text-only gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
160
+ class="${`group-hover/button:!gp-text-inherit gp-button-text-only gp-break-words group-data-[state=loading]/button:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
161
161
  ${styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : ''}`}"
162
162
  style="${{
163
163
  ...nodePrice && appendTypoStyle,
@@ -1,17 +1,17 @@
1
1
  import { template, makeStyleResponsive } from '@gem-sdk/core';
2
2
 
3
3
  const EcomsendBackInStockAlert = ({ setting, advanced })=>{
4
- const { align } = setting ?? {};
4
+ const { align, productId } = setting ?? {};
5
5
  return template`
6
- <div
7
- class="${advanced?.cssClass}"
8
- style="${{
6
+ <div
7
+ class="${advanced?.cssClass}"
8
+ style="${{
9
9
  ...makeStyleResponsive('ta', align)
10
10
  }}"
11
- >
12
- <div id="sealapps-bis-widget"></div>
13
- </div>
14
- `;
11
+ >
12
+ ${productId ? `<div style="display: block" class="ecomsend-bis-block" data-product-id="${productId}"></div>` : `<div id="sealapps-bis-widget"></div>`}
13
+ </div>
14
+ `;
15
15
  };
16
16
 
17
17
  export { EcomsendBackInStockAlert as default };
@@ -10,20 +10,44 @@ const AppConfig = {
10
10
  };
11
11
  const widgetTypeOptions = [
12
12
  {
13
- label: 'Fly Bundles: Volume Block',
14
- value: 'app-block-volume'
13
+ label: 'Fly Bundles: Quantity Breaks',
14
+ value: 'app-block-volume',
15
+ hideOnPage: [
16
+ 'GP_ARTICLE',
17
+ 'GP_BLOG',
18
+ 'GP_COLLECTION',
19
+ 'GP_INDEX',
20
+ 'GP_STATIC'
21
+ ]
15
22
  },
16
23
  {
17
- label: 'Fly Bundles: Upsell Block',
18
- value: 'app-block-upsell-block'
24
+ label: 'Fly Bundles: Frequently Bought Together',
25
+ value: 'app-block-upsell-block',
26
+ hideOnPage: [
27
+ 'GP_ARTICLE',
28
+ 'GP_BLOG',
29
+ 'GP_COLLECTION',
30
+ 'GP_INDEX',
31
+ 'GP_STATIC'
32
+ ]
19
33
  },
20
34
  {
21
- label: 'Fly Bundles: Fixed Block',
22
- value: 'app-block-fbt'
35
+ label: 'Fly Bundles: Product Bundles',
36
+ value: 'app-block-fbt',
37
+ hideOnPage: [
38
+ 'GP_ARTICLE',
39
+ 'GP_BLOG',
40
+ 'GP_COLLECTION',
41
+ 'GP_INDEX',
42
+ 'GP_STATIC'
43
+ ]
23
44
  },
24
45
  {
25
46
  label: 'Fly Bundles: Custom Block',
26
- value: 'app-block-custom'
47
+ value: 'app-block-custom',
48
+ hideOnPage: [
49
+ 'GP_PRODUCT'
50
+ ]
27
51
  }
28
52
  ];
29
53
  const FlyBundlesUpsellsFbtContent = ({ widgetName })=>{
@@ -50,6 +50,11 @@ const config = {
50
50
  ],
51
51
  default: 'product-restore-email'
52
52
  },
53
+ {
54
+ id: 'productId',
55
+ label: 'Product ID',
56
+ type: 'input'
57
+ },
53
58
  {
54
59
  id: 'install',
55
60
  type: 'open-link',
@@ -117,6 +122,17 @@ const config = {
117
122
  setting: {
118
123
  id: 'align'
119
124
  }
125
+ },
126
+ {
127
+ type: 'control',
128
+ setting: {
129
+ id: 'productId'
130
+ },
131
+ options: {
132
+ hideOnPages: [
133
+ 'GP_PRODUCT'
134
+ ]
135
+ }
120
136
  }
121
137
  ]
122
138
  };
@@ -110,6 +110,11 @@ const config = {
110
110
  },
111
111
  label: {
112
112
  en: 'Custom Block ID'
113
+ },
114
+ options: {
115
+ hideOnPages: [
116
+ 'GP_PRODUCT'
117
+ ]
113
118
  }
114
119
  },
115
120
  {
@@ -3532,6 +3532,7 @@ type EcomsendBackInStockAlertProps = BaseProps<{
3532
3532
  openApp?: any;
3533
3533
  install?: any;
3534
3534
  appBlockId?: string;
3535
+ productId?: string;
3535
3536
  widgetType?: string;
3536
3537
  }>;
3537
3538
  declare const EcomsendBackInStockAlert$1: React.FC<EcomsendBackInStockAlertProps>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/components",
3
- "version": "2.2.0",
3
+ "version": "2.4.0",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",