@gem-sdk/components 2.4.6 → 2.4.9

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.
Files changed (5) hide show
  1. package/dist/cjs/product/components/ProductBadge/index.liquid.js +2 -2
  2. package/dist/cjs/product/components/ProductImagesV2/jsx/ProductImages.js +11 -5
  3. package/dist/esm/product/components/ProductBadge/index.liquid.js +2 -2
  4. package/dist/esm/product/components/ProductImagesV2/jsx/ProductImages.js +12 -6
  5. package/package.json +3 -3
package/dist/cjs/product/components/ProductBadge/index.liquid.js CHANGED
@@ -53,10 +53,10 @@ const ProductBadge = ({ styles, builderProps, isInsideProductImage, builderAttrs
53
53
  class="gp-product-badge !gp-max-w-none gp-shrink-0 ${builderProps?.uid} ${builderProps?.builderData?.advanced?.cssClass || ''} {{className}}"
54
54
  id="g-product-badge-${builderProps?.uid}"
55
55
  gp-data='${core.dataStringify({
56
- minPrice: '{{ minPriceValue }}',
56
+ minPrice: `{{ minPriceValue | replace: '"', '\\"' | escape }}`,
57
57
  variantIDs: '{{ product.variants | map: "id" | json | escape }}',
58
58
  variantInventoryQuantities: '{{ product.variants | map: "inventory_quantity" | json | escape }}',
59
- amountDiscount: '{{amountDiscountValue}}',
59
+ amountDiscount: `{{amountDiscountValue | replace: '"', '\\"' | escape }}`,
60
60
  percentDiscount: '{{percentDiscountValue}}',
61
61
  price: '{{price}}',
62
62
  displayTrigger: setting?.displayTrigger,
package/dist/cjs/product/components/ProductImagesV2/jsx/ProductImages.js CHANGED
@@ -36,6 +36,7 @@ const ProductImagesV2 = (productImageProps)=>{
36
36
  const product = core.useProduct();
37
37
  const currentDevice = core.useCurrentDevice();
38
38
  const currentVariant = core.useCurrentVariant();
39
+ const { isChangeSelectedOption } = core.useSelectedOption();
39
40
  const mode = core.useEditorMode();
40
41
  const setProductFeaturedImage = core.useProductStore((s)=>s.setProductFeaturedImage);
41
42
  const extraClass = advanced?.cssClass;
@@ -53,8 +54,12 @@ const ProductImagesV2 = (productImageProps)=>{
53
54
  const getFirst3DModal = (product)=>{
54
55
  return product?.medias?.edges.find((item)=>item?.node?.contentType === 'MODEL_3D')?.node;
55
56
  };
57
+ const isFirstActiveFeatureImage = React.useMemo(()=>setting?.typeDisplay === 'all-images' && !isChangeSelectedOption, [
58
+ isChangeSelectedOption,
59
+ setting?.typeDisplay
60
+ ]);
56
61
  const priorityFeatureImage = React.useMemo(()=>{
57
- if (setting?.typeDisplay === 'all-images') {
62
+ if (isFirstActiveFeatureImage) {
58
63
  let priorityItem;
59
64
  switch(setting?.preDisplay){
60
65
  case '1st-images':
@@ -74,10 +79,10 @@ const ProductImagesV2 = (productImageProps)=>{
74
79
  return priorityItem;
75
80
  }
76
81
  }, [
77
- setting?.typeDisplay,
82
+ isFirstActiveFeatureImage,
78
83
  setting?.preDisplay,
79
- product,
80
84
  setProductFeaturedImage,
85
+ product,
81
86
  currentVariant?.media
82
87
  ]);
83
88
  const gallery = React.useMemo(()=>{
@@ -131,7 +136,7 @@ const ProductImagesV2 = (productImageProps)=>{
131
136
  }
132
137
  };
133
138
  React.useEffect(()=>{
134
- if (currentVariant) {
139
+ if (currentVariant && !isFirstActiveFeatureImage) {
135
140
  const index = galleryIndex[currentVariant?.mediaId];
136
141
  if (index !== undefined) {
137
142
  const fImage = gallery[index] ?? product?.featuredImage;
@@ -145,7 +150,8 @@ const ProductImagesV2 = (productImageProps)=>{
145
150
  galleryIndex,
146
151
  gallery,
147
152
  product?.featuredImage,
148
- setProductFeaturedImage
153
+ setProductFeaturedImage,
154
+ isFirstActiveFeatureImage
149
155
  ]);
150
156
  const isRenderLightBox = React.useMemo(()=>{
151
157
  const isRender = core.getResponsiveValueByScreen(setting?.ftClickOpenLightBox, currentDevice) === 'popup' || core.getResponsiveValueByScreen(setting?.clickOpenLightBox, currentDevice);
package/dist/esm/product/components/ProductBadge/index.liquid.js CHANGED
@@ -49,10 +49,10 @@ const ProductBadge = ({ styles, builderProps, isInsideProductImage, builderAttrs
49
49
  class="gp-product-badge !gp-max-w-none gp-shrink-0 ${builderProps?.uid} ${builderProps?.builderData?.advanced?.cssClass || ''} {{className}}"
50
50
  id="g-product-badge-${builderProps?.uid}"
51
51
  gp-data='${dataStringify({
52
- minPrice: '{{ minPriceValue }}',
52
+ minPrice: `{{ minPriceValue | replace: '"', '\\"' | escape }}`,
53
53
  variantIDs: '{{ product.variants | map: "id" | json | escape }}',
54
54
  variantInventoryQuantities: '{{ product.variants | map: "inventory_quantity" | json | escape }}',
55
- amountDiscount: '{{amountDiscountValue}}',
55
+ amountDiscount: `{{amountDiscountValue | replace: '"', '\\"' | escape }}`,
56
56
  percentDiscount: '{{percentDiscountValue}}',
57
57
  price: '{{price}}',
58
58
  displayTrigger: setting?.displayTrigger,
package/dist/esm/product/components/ProductImagesV2/jsx/ProductImages.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { checkAddOverFlowClass, getAspectRatio } from '../common/common.js';
3
- import { useProduct, useCurrentDevice, useCurrentVariant, useEditorMode, useProductStore, getResponsiveValueByScreen, composeBorderCss, composeCornerCss, cls, filterToolbarPreview } from '@gem-sdk/core';
3
+ import { useProduct, useCurrentDevice, useCurrentVariant, useSelectedOption, useEditorMode, useProductStore, getResponsiveValueByScreen, composeBorderCss, composeCornerCss, cls, filterToolbarPreview } from '@gem-sdk/core';
4
4
  import { useMemo, useState, useEffect, Children, isValidElement } from 'react';
5
5
  import FeatureImageWithGallery from './layouts/FeatureImageWithGallery.js';
6
6
  import GalleryOneCol from './layouts/GalleryOneCol.js';
@@ -32,6 +32,7 @@ const ProductImagesV2 = (productImageProps)=>{
32
32
  const product = useProduct();
33
33
  const currentDevice = useCurrentDevice();
34
34
  const currentVariant = useCurrentVariant();
35
+ const { isChangeSelectedOption } = useSelectedOption();
35
36
  const mode = useEditorMode();
36
37
  const setProductFeaturedImage = useProductStore((s)=>s.setProductFeaturedImage);
37
38
  const extraClass = advanced?.cssClass;
@@ -49,8 +50,12 @@ const ProductImagesV2 = (productImageProps)=>{
49
50
  const getFirst3DModal = (product)=>{
50
51
  return product?.medias?.edges.find((item)=>item?.node?.contentType === 'MODEL_3D')?.node;
51
52
  };
53
+ const isFirstActiveFeatureImage = useMemo(()=>setting?.typeDisplay === 'all-images' && !isChangeSelectedOption, [
54
+ isChangeSelectedOption,
55
+ setting?.typeDisplay
56
+ ]);
52
57
  const priorityFeatureImage = useMemo(()=>{
53
- if (setting?.typeDisplay === 'all-images') {
58
+ if (isFirstActiveFeatureImage) {
54
59
  let priorityItem;
55
60
  switch(setting?.preDisplay){
56
61
  case '1st-images':
@@ -70,10 +75,10 @@ const ProductImagesV2 = (productImageProps)=>{
70
75
  return priorityItem;
71
76
  }
72
77
  }, [
73
- setting?.typeDisplay,
78
+ isFirstActiveFeatureImage,
74
79
  setting?.preDisplay,
75
- product,
76
80
  setProductFeaturedImage,
81
+ product,
77
82
  currentVariant?.media
78
83
  ]);
79
84
  const gallery = useMemo(()=>{
@@ -127,7 +132,7 @@ const ProductImagesV2 = (productImageProps)=>{
127
132
  }
128
133
  };
129
134
  useEffect(()=>{
130
- if (currentVariant) {
135
+ if (currentVariant && !isFirstActiveFeatureImage) {
131
136
  const index = galleryIndex[currentVariant?.mediaId];
132
137
  if (index !== undefined) {
133
138
  const fImage = gallery[index] ?? product?.featuredImage;
@@ -141,7 +146,8 @@ const ProductImagesV2 = (productImageProps)=>{
141
146
  galleryIndex,
142
147
  gallery,
143
148
  product?.featuredImage,
144
- setProductFeaturedImage
149
+ setProductFeaturedImage,
150
+ isFirstActiveFeatureImage
145
151
  ]);
146
152
  const isRenderLightBox = useMemo(()=>{
147
153
  const isRender = getResponsiveValueByScreen(setting?.ftClickOpenLightBox, currentDevice) === 'popup' || getResponsiveValueByScreen(setting?.clickOpenLightBox, currentDevice);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/components",
3
- "version": "2.4.6",
3
+ "version": "2.4.9",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -21,8 +21,8 @@
21
21
  "format": "prettier --write \"./src/**/*.{ts,tsx}\""
22
22
  },
23
23
  "devDependencies": {
24
- "@gem-sdk/core": "2.2.0",
25
- "@gem-sdk/styles": "2.1.31",
24
+ "@gem-sdk/core": "2.4.7",
25
+ "@gem-sdk/styles": "2.4.8",
26
26
  "@types/react-transition-group": "^4.4.5"
27
27
  },
28
28
  "dependencies": {