@gem-sdk/core 1.22.31-staging.3 → 1.23.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.
- package/dist/cjs/hooks/useProduct.js +2 -1
- package/dist/cjs/index.js +0 -2
- package/dist/esm/hooks/useProduct.js +2 -1
- package/dist/esm/index.js +0 -1
- package/dist/types/index.d.ts +1 -3
- package/package.json +3 -3
- package/dist/cjs/components/src/product/helpers/variant-presets.js +0 -56
- package/dist/cjs/graphql/queries/product-value-label.generated.js +0 -11
- package/dist/cjs/hooks/useInitialSwatchesOptions.js +0 -111
- package/dist/esm/components/src/product/helpers/variant-presets.js +0 -54
- package/dist/esm/graphql/queries/product-value-label.generated.js +0 -9
- package/dist/esm/hooks/useInitialSwatchesOptions.js +0 -107
|
@@ -141,7 +141,8 @@ const useCurrentVariant = ()=>{
|
|
|
141
141
|
};
|
|
142
142
|
const useCurrentVariantInStock = ()=>{
|
|
143
143
|
const currentVariant = useCurrentVariant();
|
|
144
|
-
|
|
144
|
+
const isInStock = variant.checkInStock(currentVariant);
|
|
145
|
+
return isInStock;
|
|
145
146
|
};
|
|
146
147
|
const useVariantOutStock = (optionId, optionValue)=>{
|
|
147
148
|
const { selectedOptions } = useSelectedOption();
|
package/dist/cjs/index.js
CHANGED
|
@@ -83,7 +83,6 @@ var useProduct = require('./hooks/useProduct.js');
|
|
|
83
83
|
var useProductList = require('./hooks/useProductList.js');
|
|
84
84
|
var useSuspenseFetch = require('./hooks/useSuspenseFetch.js');
|
|
85
85
|
var useSwatchesOptions = require('./hooks/useSwatchesOptions.js');
|
|
86
|
-
var useInitialSwatchesOptions = require('./hooks/useInitialSwatchesOptions.js');
|
|
87
86
|
var shop$1 = require('./types/shop.js');
|
|
88
87
|
var globalStyle = require('./types/global-style.js');
|
|
89
88
|
var getCollection = require('./helpers/queries/get-collection.js');
|
|
@@ -285,7 +284,6 @@ exports.useProductListSettings = useProductList.useProductListSettings;
|
|
|
285
284
|
exports.useProductListStyles = useProductList.useProductListStyles;
|
|
286
285
|
exports.useSuspenseFetch = useSuspenseFetch.default;
|
|
287
286
|
exports.useSwatchesOptions = useSwatchesOptions.default;
|
|
288
|
-
exports.useInitialSwatchesOptions = useInitialSwatchesOptions.default;
|
|
289
287
|
exports.ShopType = shop$1;
|
|
290
288
|
exports.OptionNormalStyle = globalStyle.OptionNormalStyle;
|
|
291
289
|
exports.OptionSpecialStyle = globalStyle.OptionSpecialStyle;
|
|
@@ -139,7 +139,8 @@ const useCurrentVariant = ()=>{
|
|
|
139
139
|
};
|
|
140
140
|
const useCurrentVariantInStock = ()=>{
|
|
141
141
|
const currentVariant = useCurrentVariant();
|
|
142
|
-
|
|
142
|
+
const isInStock = checkInStock(currentVariant);
|
|
143
|
+
return isInStock;
|
|
143
144
|
};
|
|
144
145
|
const useVariantOutStock = (optionId, optionValue)=>{
|
|
145
146
|
const { selectedOptions } = useSelectedOption();
|
package/dist/esm/index.js
CHANGED
|
@@ -84,7 +84,6 @@ export { useCheckAvailableVariantInStock, useCurrentVariant, useCurrentVariantIn
|
|
|
84
84
|
export { useProductList, useProductListProducts, useProductListSettings, useProductListStyles } from './hooks/useProductList.js';
|
|
85
85
|
export { default as useSuspenseFetch } from './hooks/useSuspenseFetch.js';
|
|
86
86
|
export { default as useSwatchesOptions } from './hooks/useSwatchesOptions.js';
|
|
87
|
-
export { default as useInitialSwatchesOptions } from './hooks/useInitialSwatchesOptions.js';
|
|
88
87
|
import * as shop from './types/shop.js';
|
|
89
88
|
export { shop as ShopType };
|
|
90
89
|
export { OptionNormalStyle, OptionSpecialStyle } from './types/global-style.js';
|
package/dist/types/index.d.ts
CHANGED
|
@@ -9732,8 +9732,6 @@ declare const useSuspenseFetch: <T>(key: string | any[], promise: () => Promise<
|
|
|
9732
9732
|
|
|
9733
9733
|
declare const useSwatchesOptions: (options?: ProductOption[]) => ProductOption[];
|
|
9734
9734
|
|
|
9735
|
-
declare const useInitialSwatchesOptions: (options?: ProductOption[]) => never[] | undefined;
|
|
9736
|
-
|
|
9737
9735
|
type PublishedThemePageSelectFragment = Pick<PublishedThemePage, 'id' | 'name' | 'handle' | 'isMobile' | 'sectionPosition'> & {
|
|
9738
9736
|
pageSections?: Maybe<Array<Maybe<Pick<PublishedPageSection, 'cid' | 'component' | 'id'>>>>;
|
|
9739
9737
|
themePageCustomSections?: Maybe<Array<Maybe<Pick<PublishedCustomSection, 'cid' | 'component' | 'id' | 'type'>>>>;
|
|
@@ -9745,4 +9743,4 @@ type PublishedThemePageSelectFragment = Pick<PublishedThemePage, 'id' | 'name' |
|
|
|
9745
9743
|
|
|
9746
9744
|
declare const getProductBySlug: (fetcher: FetchFunc, slug?: string) => Promise<ProductSelectFragment>;
|
|
9747
9745
|
|
|
9748
|
-
export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageContext, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, Ratio$1 as Ratio, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StampedWidgetType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, VariantSelectFragment, VitalsWidgetType, WiserWidgetType, WrapRenderChildren, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeMemo, composeRadius, composeRadiusResponsive, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertOldLayout, dataStringify, fetchMedias, fetchVariants, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeNullUndefined, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney,
|
|
9746
|
+
export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageContext, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, Ratio$1 as Ratio, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StampedWidgetType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, VariantSelectFragment, VitalsWidgetType, WiserWidgetType, WrapRenderChildren, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeMemo, composeRadius, composeRadiusResponsive, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertOldLayout, dataStringify, fetchMedias, fetchVariants, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeNullUndefined, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsStorefrontProduct, useIsSyncProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/core",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.23.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
"type-check": "yarn tsc --noEmit"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@gem-sdk/adapter-shopify": "1.
|
|
28
|
-
"@gem-sdk/styles": "1.
|
|
27
|
+
"@gem-sdk/adapter-shopify": "1.23.0",
|
|
28
|
+
"@gem-sdk/styles": "1.23.0"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"react-error-boundary": "4.0.10",
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const colorPreset = {
|
|
4
|
-
black: '#000000',
|
|
5
|
-
white: '#FFFFFF',
|
|
6
|
-
gray: '#808080',
|
|
7
|
-
red: '#FF0000',
|
|
8
|
-
blue: '#0000FF',
|
|
9
|
-
green: '#008000',
|
|
10
|
-
yellow: '#FFFF00',
|
|
11
|
-
orange: '#FFA500',
|
|
12
|
-
pink: '#FFC0CB',
|
|
13
|
-
purple: '#800080',
|
|
14
|
-
brown: '#A52A2A',
|
|
15
|
-
cyan: '#00FFFF',
|
|
16
|
-
magenta: '#FF00FF',
|
|
17
|
-
teal: '#008080',
|
|
18
|
-
navy: '#000080',
|
|
19
|
-
maroon: '#800000',
|
|
20
|
-
gold: '#FFD700',
|
|
21
|
-
silver: '#C0C0C0',
|
|
22
|
-
beige: '#F5F5DC',
|
|
23
|
-
ivory: '#FFFFF0',
|
|
24
|
-
lavender: '#E6E6FA',
|
|
25
|
-
indigo: '#4B0082',
|
|
26
|
-
coral: '#FF7F50',
|
|
27
|
-
mint: '#98FF98',
|
|
28
|
-
'sky blue': '#87CEEB',
|
|
29
|
-
salmon: '#FA8072',
|
|
30
|
-
olive: '#808000',
|
|
31
|
-
lilac: '#C8A2C8',
|
|
32
|
-
peach: '#FFDAB9',
|
|
33
|
-
turquoise: '#40E0D0',
|
|
34
|
-
ruby: '#E0115F',
|
|
35
|
-
bronze: '#CD7F32',
|
|
36
|
-
slate: '#708090',
|
|
37
|
-
charcoal: '#36454F',
|
|
38
|
-
sand: '#C2B280',
|
|
39
|
-
mauve: '#E0B0FF',
|
|
40
|
-
tangerine: '#FF4500',
|
|
41
|
-
'mint green': '#00FF99',
|
|
42
|
-
'forest green': '#228B22',
|
|
43
|
-
'ruby red': '#9B111E',
|
|
44
|
-
marigold: '#FFB928',
|
|
45
|
-
eggplant: '#990066',
|
|
46
|
-
'coral pink': '#F88379',
|
|
47
|
-
mustard: '#FFDB58',
|
|
48
|
-
'sky gray': '#B0C4DE',
|
|
49
|
-
'dusty rose': '#FF9BAE',
|
|
50
|
-
'olive green': '#556B2F',
|
|
51
|
-
coffee: '#6F4E37',
|
|
52
|
-
'lilac gray': '#C8A2C8',
|
|
53
|
-
'steel blue': '#4682B4'
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
exports.colorPreset = colorPreset;
|
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var useSWR = require('swr');
|
|
6
|
-
var productValueLabel_generated = require('../graphql/queries/product-value-label.generated.js');
|
|
7
|
-
var variantPresets = require('../components/src/product/helpers/variant-presets.js');
|
|
8
|
-
var shop = require('./shop.js');
|
|
9
|
-
var useFetchHandle = require('./useFetchHandle.js');
|
|
10
|
-
var ShopContext = require('../contexts/ShopContext.js');
|
|
11
|
-
|
|
12
|
-
let swatchChange = false;
|
|
13
|
-
let colorChange = false;
|
|
14
|
-
const useInitialSwatchesOptions = (options)=>{
|
|
15
|
-
const fetcher = useFetchHandle.useFetchHandle();
|
|
16
|
-
const changeSwatches = ShopContext.useShopStore((s)=>s.changeSwatches);
|
|
17
|
-
const { swatches } = shop.useSwatches();
|
|
18
|
-
const { data: productOptionName } = useSWR([
|
|
19
|
-
'/query/productOptionName',
|
|
20
|
-
{}
|
|
21
|
-
], async ()=>fetchProductValueLabel(fetcher), {
|
|
22
|
-
revalidateOnMount: true
|
|
23
|
-
});
|
|
24
|
-
const swatchesTitleList = [];
|
|
25
|
-
swatches?.forEach((el)=>{
|
|
26
|
-
swatchesTitleList.push(el.optionTitle);
|
|
27
|
-
});
|
|
28
|
-
productOptionName?.productOptionName?.forEach((el)=>{
|
|
29
|
-
if (!swatchesTitleList.includes(el)) {
|
|
30
|
-
swatchChange = true;
|
|
31
|
-
swatches?.push({
|
|
32
|
-
optionTitle: el,
|
|
33
|
-
optionType: 'rectangle_list',
|
|
34
|
-
optionValues: []
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
if (!options) return [];
|
|
39
|
-
setDefaultSwatches(swatches, options);
|
|
40
|
-
if (swatches?.length && (swatchChange || colorChange)) {
|
|
41
|
-
window?.parent?.postMessage?.(JSON.stringify({
|
|
42
|
-
type: 'update-swatches',
|
|
43
|
-
swatches
|
|
44
|
-
}), '*');
|
|
45
|
-
changeSwatches(swatches);
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
const getColorDefault = (label, color)=>{
|
|
49
|
-
const colorByLabel = label ? variantPresets.colorPreset[label.toLocaleLowerCase()] : undefined;
|
|
50
|
-
const colorArray = colorByLabel ? [
|
|
51
|
-
colorByLabel
|
|
52
|
-
] : [];
|
|
53
|
-
const firstColor = color?.[0];
|
|
54
|
-
if (!firstColor && colorArray.length) colorChange = true;
|
|
55
|
-
return firstColor ? [
|
|
56
|
-
firstColor
|
|
57
|
-
] : colorArray;
|
|
58
|
-
};
|
|
59
|
-
const getProductOptionsLabelByName = (options, name)=>{
|
|
60
|
-
const labels = [];
|
|
61
|
-
const optionByName = options.find((op)=>op.name === name);
|
|
62
|
-
optionByName?.values.forEach((val)=>{
|
|
63
|
-
labels.push(val.label ?? '');
|
|
64
|
-
});
|
|
65
|
-
return labels;
|
|
66
|
-
};
|
|
67
|
-
const getSwatchesOptionsLabel = (options)=>{
|
|
68
|
-
const labels = [];
|
|
69
|
-
options.forEach((op)=>{
|
|
70
|
-
labels.push(op.label ?? '');
|
|
71
|
-
return;
|
|
72
|
-
});
|
|
73
|
-
return labels;
|
|
74
|
-
};
|
|
75
|
-
const setDefaultSwatches = (swatches, options)=>{
|
|
76
|
-
if (swatches) {
|
|
77
|
-
swatches?.map((sw)=>{
|
|
78
|
-
const productLabels = getProductOptionsLabelByName(options, sw.optionTitle);
|
|
79
|
-
const swLabels = getSwatchesOptionsLabel(sw.optionValues);
|
|
80
|
-
productLabels.forEach((label)=>{
|
|
81
|
-
if (!swLabels.includes(label)) {
|
|
82
|
-
sw.optionValues.push({
|
|
83
|
-
label,
|
|
84
|
-
colors: getColorDefault(label),
|
|
85
|
-
imageUrl: ''
|
|
86
|
-
});
|
|
87
|
-
}
|
|
88
|
-
});
|
|
89
|
-
sw.optionValues.map((op)=>{
|
|
90
|
-
return {
|
|
91
|
-
...op,
|
|
92
|
-
colors: getColorDefault(op.label, op.colors)
|
|
93
|
-
};
|
|
94
|
-
});
|
|
95
|
-
});
|
|
96
|
-
}
|
|
97
|
-
return swatches;
|
|
98
|
-
};
|
|
99
|
-
const fetchProductValueLabel = async (fetcher)=>{
|
|
100
|
-
const initVariables = {};
|
|
101
|
-
const query = async (variables)=>{
|
|
102
|
-
const response = await fetcher([
|
|
103
|
-
productValueLabel_generated.ProductOptionNameDocument,
|
|
104
|
-
variables
|
|
105
|
-
]);
|
|
106
|
-
return response;
|
|
107
|
-
};
|
|
108
|
-
return query(initVariables);
|
|
109
|
-
};
|
|
110
|
-
|
|
111
|
-
exports.default = useInitialSwatchesOptions;
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
const colorPreset = {
|
|
2
|
-
black: '#000000',
|
|
3
|
-
white: '#FFFFFF',
|
|
4
|
-
gray: '#808080',
|
|
5
|
-
red: '#FF0000',
|
|
6
|
-
blue: '#0000FF',
|
|
7
|
-
green: '#008000',
|
|
8
|
-
yellow: '#FFFF00',
|
|
9
|
-
orange: '#FFA500',
|
|
10
|
-
pink: '#FFC0CB',
|
|
11
|
-
purple: '#800080',
|
|
12
|
-
brown: '#A52A2A',
|
|
13
|
-
cyan: '#00FFFF',
|
|
14
|
-
magenta: '#FF00FF',
|
|
15
|
-
teal: '#008080',
|
|
16
|
-
navy: '#000080',
|
|
17
|
-
maroon: '#800000',
|
|
18
|
-
gold: '#FFD700',
|
|
19
|
-
silver: '#C0C0C0',
|
|
20
|
-
beige: '#F5F5DC',
|
|
21
|
-
ivory: '#FFFFF0',
|
|
22
|
-
lavender: '#E6E6FA',
|
|
23
|
-
indigo: '#4B0082',
|
|
24
|
-
coral: '#FF7F50',
|
|
25
|
-
mint: '#98FF98',
|
|
26
|
-
'sky blue': '#87CEEB',
|
|
27
|
-
salmon: '#FA8072',
|
|
28
|
-
olive: '#808000',
|
|
29
|
-
lilac: '#C8A2C8',
|
|
30
|
-
peach: '#FFDAB9',
|
|
31
|
-
turquoise: '#40E0D0',
|
|
32
|
-
ruby: '#E0115F',
|
|
33
|
-
bronze: '#CD7F32',
|
|
34
|
-
slate: '#708090',
|
|
35
|
-
charcoal: '#36454F',
|
|
36
|
-
sand: '#C2B280',
|
|
37
|
-
mauve: '#E0B0FF',
|
|
38
|
-
tangerine: '#FF4500',
|
|
39
|
-
'mint green': '#00FF99',
|
|
40
|
-
'forest green': '#228B22',
|
|
41
|
-
'ruby red': '#9B111E',
|
|
42
|
-
marigold: '#FFB928',
|
|
43
|
-
eggplant: '#990066',
|
|
44
|
-
'coral pink': '#F88379',
|
|
45
|
-
mustard: '#FFDB58',
|
|
46
|
-
'sky gray': '#B0C4DE',
|
|
47
|
-
'dusty rose': '#FF9BAE',
|
|
48
|
-
'olive green': '#556B2F',
|
|
49
|
-
coffee: '#6F4E37',
|
|
50
|
-
'lilac gray': '#C8A2C8',
|
|
51
|
-
'steel blue': '#4682B4'
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
export { colorPreset };
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
import useSWR from 'swr';
|
|
2
|
-
import { ProductOptionNameDocument } from '../graphql/queries/product-value-label.generated.js';
|
|
3
|
-
import { colorPreset } from '../components/src/product/helpers/variant-presets.js';
|
|
4
|
-
import { useSwatches } from './shop.js';
|
|
5
|
-
import { useFetchHandle } from './useFetchHandle.js';
|
|
6
|
-
import { useShopStore } from '../contexts/ShopContext.js';
|
|
7
|
-
|
|
8
|
-
let swatchChange = false;
|
|
9
|
-
let colorChange = false;
|
|
10
|
-
const useInitialSwatchesOptions = (options)=>{
|
|
11
|
-
const fetcher = useFetchHandle();
|
|
12
|
-
const changeSwatches = useShopStore((s)=>s.changeSwatches);
|
|
13
|
-
const { swatches } = useSwatches();
|
|
14
|
-
const { data: productOptionName } = useSWR([
|
|
15
|
-
'/query/productOptionName',
|
|
16
|
-
{}
|
|
17
|
-
], async ()=>fetchProductValueLabel(fetcher), {
|
|
18
|
-
revalidateOnMount: true
|
|
19
|
-
});
|
|
20
|
-
const swatchesTitleList = [];
|
|
21
|
-
swatches?.forEach((el)=>{
|
|
22
|
-
swatchesTitleList.push(el.optionTitle);
|
|
23
|
-
});
|
|
24
|
-
productOptionName?.productOptionName?.forEach((el)=>{
|
|
25
|
-
if (!swatchesTitleList.includes(el)) {
|
|
26
|
-
swatchChange = true;
|
|
27
|
-
swatches?.push({
|
|
28
|
-
optionTitle: el,
|
|
29
|
-
optionType: 'rectangle_list',
|
|
30
|
-
optionValues: []
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
if (!options) return [];
|
|
35
|
-
setDefaultSwatches(swatches, options);
|
|
36
|
-
if (swatches?.length && (swatchChange || colorChange)) {
|
|
37
|
-
window?.parent?.postMessage?.(JSON.stringify({
|
|
38
|
-
type: 'update-swatches',
|
|
39
|
-
swatches
|
|
40
|
-
}), '*');
|
|
41
|
-
changeSwatches(swatches);
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
const getColorDefault = (label, color)=>{
|
|
45
|
-
const colorByLabel = label ? colorPreset[label.toLocaleLowerCase()] : undefined;
|
|
46
|
-
const colorArray = colorByLabel ? [
|
|
47
|
-
colorByLabel
|
|
48
|
-
] : [];
|
|
49
|
-
const firstColor = color?.[0];
|
|
50
|
-
if (!firstColor && colorArray.length) colorChange = true;
|
|
51
|
-
return firstColor ? [
|
|
52
|
-
firstColor
|
|
53
|
-
] : colorArray;
|
|
54
|
-
};
|
|
55
|
-
const getProductOptionsLabelByName = (options, name)=>{
|
|
56
|
-
const labels = [];
|
|
57
|
-
const optionByName = options.find((op)=>op.name === name);
|
|
58
|
-
optionByName?.values.forEach((val)=>{
|
|
59
|
-
labels.push(val.label ?? '');
|
|
60
|
-
});
|
|
61
|
-
return labels;
|
|
62
|
-
};
|
|
63
|
-
const getSwatchesOptionsLabel = (options)=>{
|
|
64
|
-
const labels = [];
|
|
65
|
-
options.forEach((op)=>{
|
|
66
|
-
labels.push(op.label ?? '');
|
|
67
|
-
return;
|
|
68
|
-
});
|
|
69
|
-
return labels;
|
|
70
|
-
};
|
|
71
|
-
const setDefaultSwatches = (swatches, options)=>{
|
|
72
|
-
if (swatches) {
|
|
73
|
-
swatches?.map((sw)=>{
|
|
74
|
-
const productLabels = getProductOptionsLabelByName(options, sw.optionTitle);
|
|
75
|
-
const swLabels = getSwatchesOptionsLabel(sw.optionValues);
|
|
76
|
-
productLabels.forEach((label)=>{
|
|
77
|
-
if (!swLabels.includes(label)) {
|
|
78
|
-
sw.optionValues.push({
|
|
79
|
-
label,
|
|
80
|
-
colors: getColorDefault(label),
|
|
81
|
-
imageUrl: ''
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
});
|
|
85
|
-
sw.optionValues.map((op)=>{
|
|
86
|
-
return {
|
|
87
|
-
...op,
|
|
88
|
-
colors: getColorDefault(op.label, op.colors)
|
|
89
|
-
};
|
|
90
|
-
});
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
return swatches;
|
|
94
|
-
};
|
|
95
|
-
const fetchProductValueLabel = async (fetcher)=>{
|
|
96
|
-
const initVariables = {};
|
|
97
|
-
const query = async (variables)=>{
|
|
98
|
-
const response = await fetcher([
|
|
99
|
-
ProductOptionNameDocument,
|
|
100
|
-
variables
|
|
101
|
-
]);
|
|
102
|
-
return response;
|
|
103
|
-
};
|
|
104
|
-
return query(initVariables);
|
|
105
|
-
};
|
|
106
|
-
|
|
107
|
-
export { useInitialSwatchesOptions as default };
|