@gem-sdk/core 1.43.3-staging.33 → 1.44.0-dev.123

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 (40) hide show
  1. package/dist/cjs/components/ComponentToolbarPreview.js +2 -2
  2. package/dist/cjs/components/RenderPreview.js +1 -0
  3. package/dist/cjs/components/ai-generator/icons/UpgradeIcon.js +2 -2
  4. package/dist/cjs/components/ai-generator/icons/WarningIcon.js +2 -2
  5. package/dist/cjs/components/constant.js +6 -2
  6. package/dist/cjs/components/theme-section/ThemeSectionStatus.js +14 -5
  7. package/dist/cjs/contexts/ArticleContext.js +39 -0
  8. package/dist/cjs/contexts/ArticleListContext.js +31 -0
  9. package/dist/cjs/contexts/BuilderPreviewContext.js +5 -1
  10. package/dist/cjs/contexts/SectionContext.js +1 -0
  11. package/dist/cjs/graphql/queries/articles.generated.js +55 -0
  12. package/dist/cjs/graphql/queries/blogs.generated.js +63 -0
  13. package/dist/cjs/helpers/align.js +19 -0
  14. package/dist/cjs/helpers/background.js +6 -3
  15. package/dist/cjs/helpers/colors.js +2 -2
  16. package/dist/cjs/helpers/shadow.js +1 -1
  17. package/dist/cjs/hooks/articles/useArticlesQuery.js +32 -0
  18. package/dist/cjs/hooks/useFormatMoney.js +61 -60
  19. package/dist/cjs/index.js +13 -0
  20. package/dist/esm/components/ComponentToolbarPreview.js +3 -3
  21. package/dist/esm/components/RenderPreview.js +1 -0
  22. package/dist/esm/components/ai-generator/icons/UpgradeIcon.js +2 -2
  23. package/dist/esm/components/ai-generator/icons/WarningIcon.js +2 -2
  24. package/dist/esm/components/constant.js +6 -2
  25. package/dist/esm/components/theme-section/ThemeSectionStatus.js +14 -5
  26. package/dist/esm/contexts/ArticleContext.js +36 -0
  27. package/dist/esm/contexts/ArticleListContext.js +27 -0
  28. package/dist/esm/contexts/BuilderPreviewContext.js +5 -1
  29. package/dist/esm/contexts/SectionContext.js +1 -0
  30. package/dist/esm/graphql/queries/articles.generated.js +53 -0
  31. package/dist/esm/graphql/queries/blogs.generated.js +61 -0
  32. package/dist/esm/helpers/align.js +17 -0
  33. package/dist/esm/helpers/background.js +6 -4
  34. package/dist/esm/helpers/colors.js +2 -2
  35. package/dist/esm/helpers/shadow.js +1 -1
  36. package/dist/esm/hooks/articles/useArticlesQuery.js +29 -0
  37. package/dist/esm/hooks/useFormatMoney.js +61 -61
  38. package/dist/esm/index.js +6 -2
  39. package/dist/types/index.d.ts +227 -42
  40. package/package.json +3 -3
@@ -562,7 +562,7 @@ const ComponentToolbarPreview = (props)=>{
562
562
  })
563
563
  ]
564
564
  }, props.uid),
565
- isEnableCreateThemeSection() && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(ThemeSectionStatus.ThemeSectionStatus, {
565
+ isEnableCreateThemeSection() && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(ThemeSectionStatus.ThemeSectionStatusWrapper, {
566
566
  ...props
567
567
  }),
568
568
  /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -625,6 +625,6 @@ const ComponentToolbarPreview = (props)=>{
625
625
  ]
626
626
  });
627
627
  };
628
- var ComponentToolbarPreview$1 = /*#__PURE__*/ react.memo(ComponentToolbarPreview);
628
+ var ComponentToolbarPreview$1 = /*#__PURE__*/ react.memo(ComponentToolbarPreview); /* gem-lint/disallow-import-from-package-path */
629
629
 
630
630
  exports.default = ComponentToolbarPreview$1;
@@ -45,6 +45,7 @@ const RenderPreview = ({ uid, ...passProps })=>{
45
45
  setting: item.settings,
46
46
  ...passProps,
47
47
  children: item.childrens.map((id)=>/*#__PURE__*/ jsxRuntime.jsx(RenderPreviewMemo, {
48
+ ...passProps,
48
49
  uid: id
49
50
  }, id))
50
51
  }) : /*#__PURE__*/ jsxRuntime.jsx(Component, {
@@ -15,8 +15,8 @@ const UpgradeIcon = ()=>{
15
15
  fill: "white"
16
16
  }),
17
17
  /*#__PURE__*/ jsxRuntime.jsx("path", {
18
- "fill-rule": "evenodd",
19
- "clip-rule": "evenodd",
18
+ fillRule: "evenodd",
19
+ clipRule: "evenodd",
20
20
  d: "M10.3586 6.31151C10.2145 5.37846 8.87693 5.36015 8.70733 6.2889L8.68345 6.41972C8.45531 7.66902 7.46634 8.63997 6.21306 8.84509C5.29358 8.99558 5.27456 10.3111 6.1893 10.4881L6.27325 10.5044C7.49956 10.7417 8.45849 11.7006 8.69579 12.9269L8.72136 13.0591C8.90841 14.0257 10.2917 14.0257 10.4788 13.0591L10.4987 12.9561C10.739 11.7146 11.7162 10.7476 12.9601 10.5204C13.9075 10.3474 13.8556 8.9775 12.9032 8.83444C11.5987 8.63847 10.56 7.61516 10.3586 6.31151ZM9.60348 11.8213C10.01 10.8962 10.7327 10.146 11.6365 9.70404C10.718 9.2961 9.96932 8.57183 9.53477 7.66527C9.12271 8.54399 8.41761 9.2538 7.54422 9.67221C8.46419 10.1164 9.19752 10.8797 9.60348 11.8213Z",
21
21
  fill: "white"
22
22
  })
@@ -19,8 +19,8 @@ const WarningIcon = ()=>{
19
19
  fill: "#251A00"
20
20
  }),
21
21
  /*#__PURE__*/ jsxRuntime.jsx("path", {
22
- "fill-rule": "evenodd",
23
- "clip-rule": "evenodd",
22
+ fillRule: "evenodd",
23
+ clipRule: "evenodd",
24
24
  d: "M10.0001 3.5C8.95474 3.5 8.21619 4.20232 7.84765 4.94672C7.65568 5.33448 6.75987 7.0441 5.84308 8.79353L5.81534 8.84646C4.92293 10.5493 4.01717 12.2777 3.80719 12.702C3.43513 13.4537 3.32934 14.4519 3.89956 15.316C4.46914 16.1791 5.44225 16.5 6.3636 16.5L13.6364 16.5C14.5577 16.5 15.5309 16.1791 16.1005 15.316C16.6707 14.4519 16.5649 13.4537 16.1928 12.702C15.9832 12.2784 15.08 10.555 14.189 8.85476L14.1569 8.79352C13.24 7.044 12.3443 5.33454 12.1525 4.94693C11.784 4.20242 11.0455 3.5 10.0001 3.5ZM9.19193 5.61225C9.59608 4.79592 10.4041 4.79592 10.8081 5.61225C11.0102 6.02061 11.9201 7.75686 12.8297 9.49243C13.7383 11.2262 14.6466 12.9594 14.8485 13.3673C15.2525 14.1837 14.8485 15 13.6364 15L6.3636 15C5.15153 15 4.74749 14.1837 5.15153 13.3673C5.35379 12.9587 6.26471 11.2205 7.17483 9.4838C8.08286 7.75111 8.99008 6.01994 9.19193 5.61225Z",
25
25
  fill: "#251A00"
26
26
  })
@@ -36,7 +36,10 @@ const disableWrap = [
36
36
  'ProductImagesV2',
37
37
  'PostPurchaseProductImages',
38
38
  'Sticky',
39
- 'Heading'
39
+ 'Heading',
40
+ 'ProductBadge',
41
+ 'Marquee',
42
+ 'MarqueeItem'
40
43
  ];
41
44
  const customRenderChildren = [
42
45
  'Accordion',
@@ -47,7 +50,8 @@ const customRenderChildren = [
47
50
  ];
48
51
  const excludeApplyStyle = [
49
52
  'IconListV2',
50
- 'IconList'
53
+ 'IconList',
54
+ 'ProductBadge'
51
55
  ];
52
56
  const postPurchaseRequiredElements = [
53
57
  'PostPurchaseProductOffer',
@@ -2,8 +2,17 @@
2
2
 
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
 
5
- const ThemeSectionStatus = ({ ...props })=>{
6
- const isRenderThemeSectionStatus = props.tag === 'Section' && props?.isThemeSection && props?.needPublishing;
5
+ const getStatusMessage = (status)=>{
6
+ switch(status){
7
+ case 'DRAFT':
8
+ return 'This Theme Section is Draft. Publish page will also publish Theme Section.';
9
+ case 'NEED_PUBLISHING':
10
+ return 'Need to republish. Go to global edit and publish this section';
11
+ }
12
+ };
13
+ const ThemeSectionStatusWrapper = ({ tag, status, isThemeSection })=>{
14
+ const isRenderThemeSectionStatus = tag === 'Section' && isThemeSection && (status === 'DRAFT' || status === 'NEED_PUBLISHING');
15
+ const statusMessage = getStatusMessage(status);
7
16
  return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
8
17
  children: isRenderThemeSectionStatus && /*#__PURE__*/ jsxRuntime.jsxs("div", {
9
18
  "data-theme-section-status": true,
@@ -24,13 +33,13 @@ const ThemeSectionStatus = ({ ...props })=>{
24
33
  })
25
34
  })
26
35
  }),
27
- /*#__PURE__*/ jsxRuntime.jsx("span", {
36
+ statusMessage && /*#__PURE__*/ jsxRuntime.jsx("span", {
28
37
  "data-theme-section-status-text": true,
29
- children: "Need to republish. Go to global edit and publish this section"
38
+ children: statusMessage
30
39
  })
31
40
  ]
32
41
  })
33
42
  });
34
43
  };
35
44
 
36
- exports.ThemeSectionStatus = ThemeSectionStatus;
45
+ exports.ThemeSectionStatusWrapper = ThemeSectionStatusWrapper;
@@ -0,0 +1,39 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var zustand = require('zustand');
5
+ var react = require('react');
6
+
7
+ // const { Provider, useStore } = createContext<StoreApi<ProductContextProps>>();
8
+ const ArticleContext = /*#__PURE__*/ react.createContext(null);
9
+ const createArticleStoreProvider = (data)=>zustand.createStore(()=>({
10
+ ...data
11
+ }));
12
+ const ArticleProvider = ({ children, article })=>{
13
+ const uniqueId = react.useId();
14
+ const store = react.useMemo(()=>{
15
+ return createArticleStoreProvider({
16
+ article,
17
+ uniqueId
18
+ });
19
+ }, [
20
+ article,
21
+ uniqueId
22
+ ]);
23
+ return /*#__PURE__*/ jsxRuntime.jsx(ArticleContext.Provider, {
24
+ value: store,
25
+ children: /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
26
+ children: children
27
+ })
28
+ });
29
+ };
30
+ const useArticleStore = (selector, equalityFn)=>{
31
+ const store = react.useContext(ArticleContext);
32
+ if (!store) {
33
+ throw new Error('Element of article must be used inside a Article');
34
+ }
35
+ return zustand.useStore(store, selector, equalityFn);
36
+ };
37
+
38
+ exports.ArticleProvider = ArticleProvider;
39
+ exports.useArticleStore = useArticleStore;
@@ -0,0 +1,31 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var react = require('react');
5
+ var zustand = require('zustand');
6
+
7
+ const ArticleListContext = /*#__PURE__*/ react.createContext(null);
8
+ const createArticleListProvider = (data)=>zustand.createStore(()=>({
9
+ ...data
10
+ }));
11
+ const ArticleListProvider = ({ articles, children, styles, settings })=>{
12
+ return /*#__PURE__*/ jsxRuntime.jsx(ArticleListContext.Provider, {
13
+ value: createArticleListProvider({
14
+ articles,
15
+ styles,
16
+ settings
17
+ }),
18
+ children: children
19
+ });
20
+ };
21
+ const useArticleListStore = (selector, equalityFn)=>{
22
+ const store = react.useContext(ArticleListContext);
23
+ if (!store) {
24
+ throw new Error('useArticleListStore must be used within a useArticleListStore');
25
+ }
26
+ return zustand.useStore(store, selector, equalityFn);
27
+ };
28
+
29
+ exports.ArticleListContext = ArticleListContext;
30
+ exports.ArticleListProvider = ArticleListProvider;
31
+ exports.useArticleListStore = useArticleListStore;
@@ -254,7 +254,11 @@ const createBuilderPreviewProvider = (args, pageName, isThemeSectionEditor)=>zus
254
254
  }
255
255
  },
256
256
  getItem: (id)=>{
257
- return get().state[id];
257
+ const item = get().state[id];
258
+ return {
259
+ ...item,
260
+ rawChildrens: item?.childrens?.map((v)=>get().state[v])
261
+ };
258
262
  },
259
263
  removeItem: (id)=>{
260
264
  if (id === 'ROOT') {
@@ -10,6 +10,7 @@ const SectionContext = /*#__PURE__*/ react.createContext(null);
10
10
  const createSectionProvider = (data)=>zustand.createStore((set, get)=>({
11
11
  data: data ?? {},
12
12
  getSection: (id)=>{
13
+ console.log('get().data', get().data);
13
14
  const section = get().data[id];
14
15
  return section ?? undefined;
15
16
  },
@@ -0,0 +1,55 @@
1
+ 'use strict';
2
+
3
+ const ArticlesDocument = `
4
+ query articles($after: Cursor, $before: Cursor, $first: Int, $last: Int, $orderBy: ArticleOrder, $where: ArticleWhereInput) {
5
+ articles(
6
+ after: $after
7
+ before: $before
8
+ first: $first
9
+ last: $last
10
+ orderBy: $orderBy
11
+ where: $where
12
+ ) {
13
+ edges {
14
+ cursor
15
+ node {
16
+ id
17
+ title
18
+ handle
19
+ description
20
+ templateSuffix
21
+ titleMeta
22
+ descriptionMeta
23
+ baseID
24
+ platform
25
+ tags
26
+ isSample
27
+ platformCreatedAt
28
+ author
29
+ blogs {
30
+ edges {
31
+ node {
32
+ title
33
+ }
34
+ }
35
+ }
36
+ media {
37
+ alt
38
+ width
39
+ src
40
+ height
41
+ }
42
+ }
43
+ }
44
+ pageInfo {
45
+ endCursor
46
+ hasNextPage
47
+ hasPreviousPage
48
+ startCursor
49
+ }
50
+ totalCount
51
+ }
52
+ }
53
+ `;
54
+
55
+ exports.ArticlesDocument = ArticlesDocument;
@@ -0,0 +1,63 @@
1
+ 'use strict';
2
+
3
+ const BlogsDocument = `
4
+ query blogs($after: Cursor, $before: Cursor, $first: Int, $last: Int, $orderBy: BlogOrder, $where: BlogWhereInput) {
5
+ blogs(
6
+ after: $after
7
+ before: $before
8
+ first: $first
9
+ last: $last
10
+ orderBy: $orderBy
11
+ where: $where
12
+ ) {
13
+ edges {
14
+ cursor
15
+ node {
16
+ baseID
17
+ description
18
+ descriptionMeta
19
+ handle
20
+ articles {
21
+ edges {
22
+ node {
23
+ id
24
+ title
25
+ handle
26
+ description
27
+ templateSuffix
28
+ titleMeta
29
+ descriptionMeta
30
+ baseID
31
+ tags
32
+ isSample
33
+ platformCreatedAt
34
+ author
35
+ media {
36
+ width
37
+ src
38
+ height
39
+ }
40
+ }
41
+ }
42
+ totalCount
43
+ }
44
+ id
45
+ platform
46
+ tags
47
+ templateSuffix
48
+ title
49
+ titleMeta
50
+ }
51
+ }
52
+ pageInfo {
53
+ endCursor
54
+ hasNextPage
55
+ hasPreviousPage
56
+ startCursor
57
+ }
58
+ totalCount
59
+ }
60
+ }
61
+ `;
62
+
63
+ exports.BlogsDocument = BlogsDocument;
@@ -0,0 +1,19 @@
1
+ 'use strict';
2
+
3
+ const convertTextAlignToJustify = (align)=>{
4
+ const devices = [
5
+ 'desktop',
6
+ 'tablet',
7
+ 'mobile'
8
+ ];
9
+ const result = {};
10
+ devices.forEach((device)=>{
11
+ const deviceType = device === 'desktop' ? '' : `${device}:`;
12
+ result[`${deviceType}gp-justify-start`] = align?.[device] === 'left';
13
+ result[`${deviceType}gp-justify-center`] = align?.[device] === 'center';
14
+ result[`${deviceType}gp-justify-end`] = align?.[device] === 'right';
15
+ });
16
+ return result;
17
+ };
18
+
19
+ exports.convertTextAlignToJustify = convertTextAlignToJustify;
@@ -9,7 +9,9 @@ const getStyleBackgroundByDevice = (background, options)=>{
9
9
  return {};
10
10
  }
11
11
  return {
12
- ...getStyleBgColor(background),
12
+ ...!options?.ignoreBackgroundColor ? {
13
+ ...getStyleBgColor(background)
14
+ } : {},
13
15
  ...!options?.ignoreBackgroundImage ? {
14
16
  ...getStyleBgImage(background, options),
15
17
  ...getStyleBgPosition(background),
@@ -203,7 +205,7 @@ const getGradientBgrStyleForButton = (backgroundStyle)=>{
203
205
  });
204
206
  return bgrStyle;
205
207
  };
206
- const getGradientBgrStyleByDevice = (backgroundStyle)=>{
208
+ const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage = false)=>{
207
209
  if (!backgroundStyle) return;
208
210
  const bgrStyle = {};
209
211
  [
@@ -214,7 +216,7 @@ const getGradientBgrStyleByDevice = (backgroundStyle)=>{
214
216
  if (backgroundStyle[device]?.color?.includes(GRADIENT_BGR_KEY)) {
215
217
  Object.assign(bgrStyle, {
216
218
  [`--bgc${device !== 'desktop' ? '-' + device : ''}`]: 'transparent',
217
- [`--bgi${device !== 'desktop' ? '-' + device : ''}`]: `${getBgImageByDevice(backgroundStyle, device) || 'url()'}, ${backgroundStyle[device]?.color}`
219
+ [`--bgi${device !== 'desktop' ? '-' + device : ''}`]: ignoreBackgroundImage ? `${backgroundStyle[device]?.color}` : `${getBgImageByDevice(backgroundStyle, device) || 'url()'}, ${backgroundStyle[device]?.color}`
218
220
  });
219
221
  }
220
222
  });
@@ -227,4 +229,5 @@ exports.getBgImageByDevice = getBgImageByDevice;
227
229
  exports.getGradientBgrStyleByDevice = getGradientBgrStyleByDevice;
228
230
  exports.getGradientBgrStyleForButton = getGradientBgrStyleForButton;
229
231
  exports.getStyleBackgroundByDevice = getStyleBackgroundByDevice;
232
+ exports.getStyleBgColor = getStyleBgColor;
230
233
  exports.makeFixedBgAttachment = makeFixedBgAttachment;
@@ -119,7 +119,7 @@ const getGlobalColorStateStyle = (type, data)=>{
119
119
  return Object.fromEntries(Object.entries(data).map(([state, value])=>{
120
120
  if (state === 'active') return [];
121
121
  return [
122
- `-${constant.stateMapping?.[state]}-${type}`,
122
+ `-${constant.stateMapping?.[state] || ''}-${type}`,
123
123
  getSingleColorVariable(value)
124
124
  ];
125
125
  }).filter(isDefined.isDefined));
@@ -156,7 +156,7 @@ const getSingleColorVariable = (color)=>{
156
156
  };
157
157
  function isColor(color) {
158
158
  if (!color || typeof color !== 'string') return false;
159
- return color?.startsWith('#') || color?.startsWith('rgb') || color?.startsWith('hsl') || color?.startsWith('transparent');
159
+ return color?.startsWith('#') || color?.startsWith('rgb') || color?.startsWith('hsl') || color?.startsWith('transparent') || color?.startsWith('linear-gradient');
160
160
  }
161
161
  const getGlobalColorStyle = (data)=>{
162
162
  if (!data) return {};
@@ -27,7 +27,7 @@ const getStyleShadow = (shadowStyle, isActiveState = false)=>{
27
27
  if (typeof value.distance == 'undefined') return {};
28
28
  const { value: distance, unit: unitDistance } = parseValueWithUnit(`${value?.distance}`);
29
29
  return {
30
- [`-${!isActiveState ? constant.stateMapping?.[state] : ''}-${getShortname.getShortName(styleAppliedFor)}`]: isEnableShadow ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${colors.getSingleColorVariable(value?.color)}` : 'none'
30
+ [`-${!isActiveState ? constant.stateMapping?.[state] || '' : ''}-${getShortname.getShortName(styleAppliedFor)}`]: isEnableShadow ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${colors.getSingleColorVariable(value?.color)}` : 'none'
31
31
  };
32
32
  };
33
33
  const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow)=>{
@@ -0,0 +1,32 @@
1
+ 'use strict';
2
+
3
+ var articles_generated = require('../../graphql/queries/articles.generated.js');
4
+ var useFetchHandle = require('../useFetchHandle.js');
5
+ var useSWR = require('swr');
6
+ var blogs_generated = require('../../graphql/queries/blogs.generated.js');
7
+
8
+ const useArticlesQuery = (variables, options)=>{
9
+ const fetcher = useFetchHandle.useFetchHandle();
10
+ const fetchArticles = ()=>fetcher([
11
+ articles_generated.ArticlesDocument,
12
+ variables ?? {}
13
+ ]);
14
+ return useSWR(variables ? [
15
+ 'query/articles',
16
+ variables
17
+ ] : null, fetchArticles, options);
18
+ };
19
+ const useBlogsQuery = (variables, options)=>{
20
+ const fetcher = useFetchHandle.useFetchHandle();
21
+ const fetchBlogs = ()=>fetcher([
22
+ blogs_generated.BlogsDocument,
23
+ variables ?? {}
24
+ ]);
25
+ return useSWR(variables ? [
26
+ 'query/blogs',
27
+ variables
28
+ ] : null, fetchBlogs, options);
29
+ };
30
+
31
+ exports.useArticlesQuery = useArticlesQuery;
32
+ exports.useBlogsQuery = useBlogsQuery;
@@ -5,70 +5,71 @@ var shop = require('./shop.js');
5
5
  const shopifyPriceRounding = (amount, precision)=>{
6
6
  return parseFloat(`${amount}`).toFixed(Number(precision) + 1).slice(0, -1);
7
7
  };
8
+ const formatMoney = function(cents, format) {
9
+ let value = '';
10
+ const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
11
+ const formatString = format || '${{amount}}';
12
+ /**
13
+ * check default
14
+ * @param opt opt
15
+ * @param def def
16
+ * @returns any
17
+ */ function defaultOption(opt, def) {
18
+ return typeof opt == 'undefined' ? def : opt;
19
+ }
20
+ /**
21
+ * formatWithDelimiters
22
+ * @param number number
23
+ * @param precision precision
24
+ * @param thousands thousands
25
+ * @param decimal decimal
26
+ * @returns any
27
+ */ // eslint-disable-next-line max-params
28
+ function formatWithDelimiters(number, precision, thousands, decimal) {
29
+ precision = defaultOption(precision, 2);
30
+ thousands = defaultOption(thousands, ',');
31
+ decimal = defaultOption(decimal, '.');
32
+ if (isNaN(number) || number == null) {
33
+ return 0;
34
+ }
35
+ // shopify làm tròn bằng cách cắt đi các số ở đằng sau chứ không sử dụng toFixed để làm tròn như toán học
36
+ number = shopifyPriceRounding(number, Number(precision));
37
+ const parts = number.split('.'), dollars = parts[0]?.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands), cents = parts[1] ? decimal + parts[1] : '';
38
+ return dollars + cents;
39
+ }
40
+ switch(formatString.match(placeholderRegex)[1]){
41
+ case 'amount':
42
+ value = formatWithDelimiters(cents, 2);
43
+ break;
44
+ case 'amount_no_decimals':
45
+ value = formatWithDelimiters(cents, 0);
46
+ break;
47
+ case 'amount_with_comma_separator':
48
+ value = formatWithDelimiters(cents, 2, '.', ',');
49
+ break;
50
+ case 'amount_no_decimals_with_comma_separator':
51
+ value = formatWithDelimiters(cents, 0, '.', ',');
52
+ break;
53
+ case 'amount_with_apostrophe_separator':
54
+ value = formatWithDelimiters(cents, 2, "'", '.');
55
+ break;
56
+ case 'amount_no_decimals_with_space_separator':
57
+ value = formatWithDelimiters(cents, 0, ' ');
58
+ break;
59
+ case 'amount_with_space_separator':
60
+ value = formatWithDelimiters(cents, 2, ' ', ',');
61
+ break;
62
+ case 'amount_with_period_and_space_separator':
63
+ value = formatWithDelimiters(cents, 2, ' ', '.');
64
+ break;
65
+ }
66
+ return formatString.replace(placeholderRegex, value);
67
+ };
8
68
  const useFormatMoney = (amount, withCurrency)=>{
9
69
  const { moneyFormat, moneyWithCurrencyFormat } = shop.useMoneyFormat();
10
- const formatMoney = function(cents, format) {
11
- let value = '';
12
- const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
13
- const formatString = format || '${{amount}}';
14
- /**
15
- * check default
16
- * @param opt opt
17
- * @param def def
18
- * @returns any
19
- */ function defaultOption(opt, def) {
20
- return typeof opt == 'undefined' ? def : opt;
21
- }
22
- /**
23
- * formatWithDelimiters
24
- * @param number number
25
- * @param precision precision
26
- * @param thousands thousands
27
- * @param decimal decimal
28
- * @returns any
29
- */ // eslint-disable-next-line max-params
30
- function formatWithDelimiters(number, precision, thousands, decimal) {
31
- precision = defaultOption(precision, 2);
32
- thousands = defaultOption(thousands, ',');
33
- decimal = defaultOption(decimal, '.');
34
- if (isNaN(number) || number == null) {
35
- return 0;
36
- }
37
- // shopify làm tròn bằng cách cắt đi các số ở đằng sau chứ không sử dụng toFixed để làm tròn như toán học
38
- number = shopifyPriceRounding(number, Number(precision));
39
- const parts = number.split('.'), dollars = parts[0]?.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands), cents = parts[1] ? decimal + parts[1] : '';
40
- return dollars + cents;
41
- }
42
- switch(formatString.match(placeholderRegex)[1]){
43
- case 'amount':
44
- value = formatWithDelimiters(cents, 2);
45
- break;
46
- case 'amount_no_decimals':
47
- value = formatWithDelimiters(cents, 0);
48
- break;
49
- case 'amount_with_comma_separator':
50
- value = formatWithDelimiters(cents, 2, '.', ',');
51
- break;
52
- case 'amount_no_decimals_with_comma_separator':
53
- value = formatWithDelimiters(cents, 0, '.', ',');
54
- break;
55
- case 'amount_with_apostrophe_separator':
56
- value = formatWithDelimiters(cents, 2, "'", '.');
57
- break;
58
- case 'amount_no_decimals_with_space_separator':
59
- value = formatWithDelimiters(cents, 0, ' ');
60
- break;
61
- case 'amount_with_space_separator':
62
- value = formatWithDelimiters(cents, 2, ' ', ',');
63
- break;
64
- case 'amount_with_period_and_space_separator':
65
- value = formatWithDelimiters(cents, 2, ' ', '.');
66
- break;
67
- }
68
- return formatString.replace(placeholderRegex, value);
69
- };
70
70
  return withCurrency ? formatMoney(`${amount}`, moneyWithCurrencyFormat || moneyFormat) : formatMoney(`${amount}`, moneyFormat);
71
71
  };
72
72
 
73
+ exports.formatMoney = formatMoney;
73
74
  exports.shopifyPriceRounding = shopifyPriceRounding;
74
75
  exports.useFormatMoney = useFormatMoney;
package/dist/cjs/index.js CHANGED
@@ -16,6 +16,8 @@ var ShopContext = require('./contexts/ShopContext.js');
16
16
  var PageContext = require('./contexts/PageContext.js');
17
17
  var CollectionContext = require('./contexts/CollectionContext.js');
18
18
  var ModalContext = require('./contexts/ModalContext.js');
19
+ var ArticleListContext = require('./contexts/ArticleListContext.js');
20
+ var ArticleContext = require('./contexts/ArticleContext.js');
19
21
  var pageViewUp_generated = require('./graphql/mutations/page-view-up.generated.js');
20
22
  var collectionDetailFilter_generated = require('./graphql/queries/collection-detail-filter.generated.js');
21
23
  var collection_generated = require('./graphql/queries/collection.generated.js');
@@ -58,6 +60,7 @@ var iconList = require('./helpers/icon-list.js');
58
60
  var isDefined = require('./helpers/is-defined.js');
59
61
  var layout = require('./helpers/layout.js');
60
62
  var makeStyle = require('./helpers/make-style.js');
63
+ var align = require('./helpers/align.js');
61
64
  var product = require('./helpers/product.js');
62
65
  var query = require('./helpers/query.js');
63
66
  var radius = require('./helpers/radius.js');
@@ -89,6 +92,7 @@ var useIsomorphicLayoutEffect = require('./hooks/useIsomorphicLayoutEffect.js');
89
92
  var useLoadScript = require('./hooks/useLoadScript.js');
90
93
  var useMoney = require('./hooks/useMoney.js');
91
94
  var usePrevious = require('./hooks/usePrevious.js');
95
+ var useArticlesQuery = require('./hooks/articles/useArticlesQuery.js');
92
96
  var useProduct = require('./hooks/useProduct.js');
93
97
  var useProductList = require('./hooks/useProductList.js');
94
98
  var useSuspenseFetch = require('./hooks/useSuspenseFetch.js');
@@ -136,6 +140,10 @@ exports.CollectionProvider = CollectionContext.CollectionProvider;
136
140
  exports.useCollectionStore = CollectionContext.useCollectionStore;
137
141
  exports.ModalProvider = ModalContext.ModalProvider;
138
142
  exports.useModalStore = ModalContext.useModalStore;
143
+ exports.ArticleListProvider = ArticleListContext.ArticleListProvider;
144
+ exports.useArticleListStore = ArticleListContext.useArticleListStore;
145
+ exports.ArticleProvider = ArticleContext.ArticleProvider;
146
+ exports.useArticleStore = ArticleContext.useArticleStore;
139
147
  exports.PageViewUpDocument = pageViewUp_generated.PageViewUpDocument;
140
148
  exports.CollectionDetailFilterDocument = collectionDetailFilter_generated.CollectionDetailFilterDocument;
141
149
  exports.CollectionDocument = collection_generated.CollectionDocument;
@@ -187,6 +195,7 @@ exports.getBgImageByDevice = background.getBgImageByDevice;
187
195
  exports.getGradientBgrStyleByDevice = background.getGradientBgrStyleByDevice;
188
196
  exports.getGradientBgrStyleForButton = background.getGradientBgrStyleForButton;
189
197
  exports.getStyleBackgroundByDevice = background.getStyleBackgroundByDevice;
198
+ exports.getStyleBgColor = background.getStyleBgColor;
190
199
  exports.makeFixedBgAttachment = background.makeFixedBgAttachment;
191
200
  exports.composeTextColorCss = colors.composeTextColorCss;
192
201
  exports.getGlobalColorCSSProp = colors.getGlobalColorCSSProp;
@@ -232,6 +241,7 @@ exports.makeStyleResponsiveState = makeStyle.makeStyleResponsiveState;
232
241
  exports.makeStyleState = makeStyle.makeStyleState;
233
242
  exports.makeWidth = makeStyle.makeWidth;
234
243
  exports.removeNullUndefined = makeStyle.removeNullUndefined;
244
+ exports.convertTextAlignToJustify = align.convertTextAlignToJustify;
235
245
  exports.checkAvailableVariantInStock = product.checkAvailableVariantInStock;
236
246
  exports.getSelectedVariant = product.getSelectedVariant;
237
247
  exports.parseSelectedOption = product.parseSelectedOption;
@@ -305,6 +315,7 @@ exports.useProductQuery = useProductQuery.useProductQuery;
305
315
  exports.useProductsQuery = useProductsQuery.useProductsQuery;
306
316
  exports.useProductsQueryAll = useProductsQuery.useProductsQueryAll;
307
317
  exports.useCurrentDevice = useCurrentDevice.useCurrentDevice;
318
+ exports.formatMoney = useFormatMoney.formatMoney;
308
319
  exports.shopifyPriceRounding = useFormatMoney.shopifyPriceRounding;
309
320
  exports.useFormatMoney = useFormatMoney.useFormatMoney;
310
321
  exports.useLazyVideo = useLazyVideo.useLazyVideo;
@@ -320,6 +331,8 @@ exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.default;
320
331
  exports.useLoadScript = useLoadScript.default;
321
332
  exports.useMoney = useMoney.default;
322
333
  exports.usePrevious = usePrevious.usePrevious;
334
+ exports.useArticlesQuery = useArticlesQuery.useArticlesQuery;
335
+ exports.useBlogsQuery = useArticlesQuery.useBlogsQuery;
323
336
  exports.useCheckAvailableVariantInStock = useProduct.useCheckAvailableVariantInStock;
324
337
  exports.useCurrentVariant = useProduct.useCurrentVariant;
325
338
  exports.useCurrentVariantInStock = useProduct.useCurrentVariantInStock;