@gem-sdk/core 1.42.3-dev.63 → 1.42.3-dev.64

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 (3) hide show
  1. package/dist/cjs/components/ComponentToolbarPreview.js +66 -0
  2. package/dist/esm/components/ComponentToolbarPreview.js +66 -0
  3. package/package.json +2 -2
package/dist/cjs/components/ComponentToolbarPreview.js CHANGED
@@ -35,6 +35,7 @@ const isSection = (el)=>{
35
35
  const ComponentToolbarPreview = (props)=>{
36
36
  const isThemeSection = props.isThemeSection;
37
37
  const isShopifySection = props.isShopifySection;
38
+ const storefrontUrl = ShopContext.useShopStore((s)=>s.storefrontUrl);
38
39
  const editingPageType = ShopContext.useShopStore((s)=>s.pageType);
39
40
  const getParents = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getParents);
40
41
  const root = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getItem('ROOT'));
@@ -45,6 +46,7 @@ const ComponentToolbarPreview = (props)=>{
45
46
  const [parents, setParents] = react.useState([]);
46
47
  const [deleteTooltipPosition, setDeleteTooltipPosition] = react.useState('top');
47
48
  const [isDisableDelete, setIsUnableDelete] = react.useState(false);
49
+ const [parentProductUid, setParentProductUid] = react.useState('');
48
50
  const [tooltipText, setTooltipText] = react.useState({
49
51
  width: '',
50
52
  text: ''
@@ -84,6 +86,27 @@ const ComponentToolbarPreview = (props)=>{
84
86
  }, [
85
87
  props.tag
86
88
  ]);
89
+ const productId = react.useMemo(()=>{
90
+ const ele = document.querySelector(`[data-uid="${parentProductUid}"]`);
91
+ return ele?.getAttribute('data-product-id');
92
+ }, [
93
+ parentProductUid
94
+ ]);
95
+ const shopName = react.useMemo(()=>{
96
+ const pattern = /^(?:https?:\/\/)?([^/]+)\.myshopify\.com/;
97
+ if (storefrontUrl) {
98
+ return storefrontUrl.match(pattern)?.[1];
99
+ }
100
+ return '';
101
+ }, [
102
+ storefrontUrl
103
+ ]);
104
+ const shopifyEditLink = react.useMemo(()=>{
105
+ return productId ? `https://admin.shopify.com/store/${shopName}/products/${productId}` : '';
106
+ }, [
107
+ productId,
108
+ shopName
109
+ ]);
87
110
  // Get parents
88
111
  const onActiveComponent = react.useCallback((e)=>{
89
112
  const detail = e.detail;
@@ -102,6 +125,10 @@ const ComponentToolbarPreview = (props)=>{
102
125
  return true;
103
126
  }).slice(0, 3);
104
127
  setParents(currentParents);
128
+ const parentFindUid = currentParents.find((item)=>item.tag === 'Product')?.uid;
129
+ if (parentFindUid) {
130
+ setParentProductUid(parentFindUid);
131
+ }
105
132
  } else {
106
133
  setParents([]);
107
134
  setIsShowParent(false);
@@ -173,6 +200,9 @@ const ComponentToolbarPreview = (props)=>{
173
200
  });
174
201
  window.dispatchEvent(event);
175
202
  };
203
+ const goToShopifyEditLink = ()=>{
204
+ window.open(shopifyEditLink, '_blank');
205
+ };
176
206
  const onDelete = (e)=>{
177
207
  e.preventDefault();
178
208
  e.stopPropagation();
@@ -445,6 +475,42 @@ const ComponentToolbarPreview = (props)=>{
445
475
  })
446
476
  })
447
477
  }),
478
+ toolbarName() === 'Product Title' && /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
479
+ "data-toolbar-title": true,
480
+ enable: true,
481
+ "data-toolbar-disable": false,
482
+ text: "Edit content in Shopify",
483
+ position: "top",
484
+ onClick: goToShopifyEditLink,
485
+ "aria-hidden": "true",
486
+ children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
487
+ width: "16",
488
+ height: "16",
489
+ viewBox: "0 0 16 16",
490
+ fill: "none",
491
+ xmlns: "http://www.w3.org/2000/svg",
492
+ children: [
493
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
494
+ fillRule: "evenodd",
495
+ clipRule: "evenodd",
496
+ d: "M8.61129 2.47348C8.61129 2.47348 8.47099 2.51557 8.23248 2.59274C8.19039 2.46647 8.13427 2.30512 8.05009 2.15079C7.78352 1.6387 7.39068 1.37212 6.91366 1.36511C6.87858 1.36511 6.85052 1.36511 6.81545 1.37212C6.80843 1.36511 6.80142 1.35634 6.7944 1.34757C6.78739 1.3388 6.78037 1.33003 6.77336 1.32302C6.56992 1.09854 6.30335 0.993314 5.98768 1.00033C5.37737 1.02137 4.76706 1.46332 4.269 2.249C3.91825 2.80319 3.65869 3.49767 3.58153 4.03082C3.38823 4.09074 3.21092 4.14586 3.05516 4.19429C2.64595 4.32151 2.3851 4.40261 2.37494 4.40261C2.01718 4.51485 2.01016 4.52888 1.96106 4.85859C1.92598 5.11113 1 12.2945 1 12.2945L7.14764 13.3583C7.18955 13.118 7.30454 12.8953 7.47848 12.7214L8.70249 11.4974V2.45945C8.66741 2.45945 8.63234 2.46647 8.61129 2.47348ZM6.82948 3.02767L6.62554 3.09101C6.27515 3.19989 5.90094 3.31617 5.5317 3.42752C5.65797 2.94349 5.89648 2.46647 6.19111 2.15079C6.30335 2.03154 6.45067 1.90527 6.63306 1.8281C6.80142 2.18587 6.83649 2.68393 6.82948 3.02767ZM5.99469 1.4072C6.13499 1.4072 6.26126 1.43526 6.36649 1.50541C6.19813 1.58959 6.0438 1.71586 5.88947 1.87721C5.50364 2.29109 5.202 2.94349 5.08274 3.56783C4.74459 3.66991 4.41804 3.77199 4.10838 3.8688L4.01646 3.89753C4.22691 2.90841 5.05468 1.43526 5.99469 1.4072ZM4.80214 7.0122C4.81874 7.26957 5.09737 7.44833 5.43473 7.66478C5.95252 7.99699 6.60867 8.41798 6.66813 9.3482C6.7453 10.5548 6.02977 11.3826 4.99154 11.4457C3.7569 11.5229 3.06943 10.7933 3.06943 10.7933L3.32899 9.67791C3.32899 9.67791 4.01646 10.197 4.56363 10.1619C4.92139 10.1409 5.04767 9.84627 5.04065 9.64283C5.01607 9.26796 4.73308 9.06671 4.41569 8.84101C4.00848 8.55142 3.54465 8.22157 3.49735 7.4331C3.42018 6.24756 4.19885 5.05501 5.91051 4.94277C6.57694 4.90068 6.91366 5.06904 6.91366 5.06904L6.52082 6.53518C6.52082 6.53518 6.08589 6.33876 5.56678 6.36682C4.80915 6.41592 4.79512 6.89294 4.80214 7.0122ZM7.23635 2.9014C7.22934 2.59274 7.19426 2.15781 7.04695 1.78601C7.50994 1.87721 7.74143 2.39632 7.83964 2.71199C7.70008 2.75665 7.54275 2.80575 7.37118 2.8593L7.23635 2.9014Z",
497
+ fill: "currentColor"
498
+ }),
499
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
500
+ d: "M10.7719 3.44156C10.7757 3.47543 11.1733 6.16931 11.541 8.65883L8.95503 11.2448V2.57871C9.16548 2.78214 9.71265 3.31528 9.71265 3.31528C9.71265 3.31528 10.6106 3.32931 10.6597 3.33633C10.7088 3.34334 10.7649 3.37842 10.7719 3.44156Z",
501
+ fill: "currentColor"
502
+ }),
503
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
504
+ d: "M14.8056 8.644L14.0424 7.88088C13.7832 7.62163 13.3629 7.62163 13.1036 7.88088L12.1519 8.83258L13.8539 10.5345L14.8056 9.58282C15.0648 9.32357 15.0648 8.90325 14.8056 8.644Z",
505
+ fill: "currentColor"
506
+ }),
507
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
508
+ d: "M7.85018 13.0942L11.6419 9.30246L13.3438 11.0044L9.55212 14.7961C9.43782 14.9104 9.28573 14.9791 9.1244 14.9892L7.93427 15.0641C7.73484 15.0767 7.56961 14.9114 7.58216 14.712L7.65706 13.5219C7.66721 13.3606 7.73588 13.2085 7.85018 13.0942Z",
509
+ fill: "currentColor"
510
+ })
511
+ ]
512
+ })
513
+ }),
448
514
  /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
449
515
  enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
450
516
  text: "Page has reached Shopify’s 25 section-limit",
package/dist/esm/components/ComponentToolbarPreview.js CHANGED
@@ -31,6 +31,7 @@ const isSection = (el)=>{
31
31
  const ComponentToolbarPreview = (props)=>{
32
32
  const isThemeSection = props.isThemeSection;
33
33
  const isShopifySection = props.isShopifySection;
34
+ const storefrontUrl = useShopStore((s)=>s.storefrontUrl);
34
35
  const editingPageType = useShopStore((s)=>s.pageType);
35
36
  const getParents = useBuilderPreviewStore((s)=>s.getParents);
36
37
  const root = useBuilderPreviewStore((s)=>s.getItem('ROOT'));
@@ -41,6 +42,7 @@ const ComponentToolbarPreview = (props)=>{
41
42
  const [parents, setParents] = useState([]);
42
43
  const [deleteTooltipPosition, setDeleteTooltipPosition] = useState('top');
43
44
  const [isDisableDelete, setIsUnableDelete] = useState(false);
45
+ const [parentProductUid, setParentProductUid] = useState('');
44
46
  const [tooltipText, setTooltipText] = useState({
45
47
  width: '',
46
48
  text: ''
@@ -80,6 +82,27 @@ const ComponentToolbarPreview = (props)=>{
80
82
  }, [
81
83
  props.tag
82
84
  ]);
85
+ const productId = useMemo(()=>{
86
+ const ele = document.querySelector(`[data-uid="${parentProductUid}"]`);
87
+ return ele?.getAttribute('data-product-id');
88
+ }, [
89
+ parentProductUid
90
+ ]);
91
+ const shopName = useMemo(()=>{
92
+ const pattern = /^(?:https?:\/\/)?([^/]+)\.myshopify\.com/;
93
+ if (storefrontUrl) {
94
+ return storefrontUrl.match(pattern)?.[1];
95
+ }
96
+ return '';
97
+ }, [
98
+ storefrontUrl
99
+ ]);
100
+ const shopifyEditLink = useMemo(()=>{
101
+ return productId ? `https://admin.shopify.com/store/${shopName}/products/${productId}` : '';
102
+ }, [
103
+ productId,
104
+ shopName
105
+ ]);
83
106
  // Get parents
84
107
  const onActiveComponent = useCallback((e)=>{
85
108
  const detail = e.detail;
@@ -98,6 +121,10 @@ const ComponentToolbarPreview = (props)=>{
98
121
  return true;
99
122
  }).slice(0, 3);
100
123
  setParents(currentParents);
124
+ const parentFindUid = currentParents.find((item)=>item.tag === 'Product')?.uid;
125
+ if (parentFindUid) {
126
+ setParentProductUid(parentFindUid);
127
+ }
101
128
  } else {
102
129
  setParents([]);
103
130
  setIsShowParent(false);
@@ -169,6 +196,9 @@ const ComponentToolbarPreview = (props)=>{
169
196
  });
170
197
  window.dispatchEvent(event);
171
198
  };
199
+ const goToShopifyEditLink = ()=>{
200
+ window.open(shopifyEditLink, '_blank');
201
+ };
172
202
  const onDelete = (e)=>{
173
203
  e.preventDefault();
174
204
  e.stopPropagation();
@@ -441,6 +471,42 @@ const ComponentToolbarPreview = (props)=>{
441
471
  })
442
472
  })
443
473
  }),
474
+ toolbarName() === 'Product Title' && /*#__PURE__*/ jsx(Tooltip, {
475
+ "data-toolbar-title": true,
476
+ enable: true,
477
+ "data-toolbar-disable": false,
478
+ text: "Edit content in Shopify",
479
+ position: "top",
480
+ onClick: goToShopifyEditLink,
481
+ "aria-hidden": "true",
482
+ children: /*#__PURE__*/ jsxs("svg", {
483
+ width: "16",
484
+ height: "16",
485
+ viewBox: "0 0 16 16",
486
+ fill: "none",
487
+ xmlns: "http://www.w3.org/2000/svg",
488
+ children: [
489
+ /*#__PURE__*/ jsx("path", {
490
+ fillRule: "evenodd",
491
+ clipRule: "evenodd",
492
+ d: "M8.61129 2.47348C8.61129 2.47348 8.47099 2.51557 8.23248 2.59274C8.19039 2.46647 8.13427 2.30512 8.05009 2.15079C7.78352 1.6387 7.39068 1.37212 6.91366 1.36511C6.87858 1.36511 6.85052 1.36511 6.81545 1.37212C6.80843 1.36511 6.80142 1.35634 6.7944 1.34757C6.78739 1.3388 6.78037 1.33003 6.77336 1.32302C6.56992 1.09854 6.30335 0.993314 5.98768 1.00033C5.37737 1.02137 4.76706 1.46332 4.269 2.249C3.91825 2.80319 3.65869 3.49767 3.58153 4.03082C3.38823 4.09074 3.21092 4.14586 3.05516 4.19429C2.64595 4.32151 2.3851 4.40261 2.37494 4.40261C2.01718 4.51485 2.01016 4.52888 1.96106 4.85859C1.92598 5.11113 1 12.2945 1 12.2945L7.14764 13.3583C7.18955 13.118 7.30454 12.8953 7.47848 12.7214L8.70249 11.4974V2.45945C8.66741 2.45945 8.63234 2.46647 8.61129 2.47348ZM6.82948 3.02767L6.62554 3.09101C6.27515 3.19989 5.90094 3.31617 5.5317 3.42752C5.65797 2.94349 5.89648 2.46647 6.19111 2.15079C6.30335 2.03154 6.45067 1.90527 6.63306 1.8281C6.80142 2.18587 6.83649 2.68393 6.82948 3.02767ZM5.99469 1.4072C6.13499 1.4072 6.26126 1.43526 6.36649 1.50541C6.19813 1.58959 6.0438 1.71586 5.88947 1.87721C5.50364 2.29109 5.202 2.94349 5.08274 3.56783C4.74459 3.66991 4.41804 3.77199 4.10838 3.8688L4.01646 3.89753C4.22691 2.90841 5.05468 1.43526 5.99469 1.4072ZM4.80214 7.0122C4.81874 7.26957 5.09737 7.44833 5.43473 7.66478C5.95252 7.99699 6.60867 8.41798 6.66813 9.3482C6.7453 10.5548 6.02977 11.3826 4.99154 11.4457C3.7569 11.5229 3.06943 10.7933 3.06943 10.7933L3.32899 9.67791C3.32899 9.67791 4.01646 10.197 4.56363 10.1619C4.92139 10.1409 5.04767 9.84627 5.04065 9.64283C5.01607 9.26796 4.73308 9.06671 4.41569 8.84101C4.00848 8.55142 3.54465 8.22157 3.49735 7.4331C3.42018 6.24756 4.19885 5.05501 5.91051 4.94277C6.57694 4.90068 6.91366 5.06904 6.91366 5.06904L6.52082 6.53518C6.52082 6.53518 6.08589 6.33876 5.56678 6.36682C4.80915 6.41592 4.79512 6.89294 4.80214 7.0122ZM7.23635 2.9014C7.22934 2.59274 7.19426 2.15781 7.04695 1.78601C7.50994 1.87721 7.74143 2.39632 7.83964 2.71199C7.70008 2.75665 7.54275 2.80575 7.37118 2.8593L7.23635 2.9014Z",
493
+ fill: "currentColor"
494
+ }),
495
+ /*#__PURE__*/ jsx("path", {
496
+ d: "M10.7719 3.44156C10.7757 3.47543 11.1733 6.16931 11.541 8.65883L8.95503 11.2448V2.57871C9.16548 2.78214 9.71265 3.31528 9.71265 3.31528C9.71265 3.31528 10.6106 3.32931 10.6597 3.33633C10.7088 3.34334 10.7649 3.37842 10.7719 3.44156Z",
497
+ fill: "currentColor"
498
+ }),
499
+ /*#__PURE__*/ jsx("path", {
500
+ d: "M14.8056 8.644L14.0424 7.88088C13.7832 7.62163 13.3629 7.62163 13.1036 7.88088L12.1519 8.83258L13.8539 10.5345L14.8056 9.58282C15.0648 9.32357 15.0648 8.90325 14.8056 8.644Z",
501
+ fill: "currentColor"
502
+ }),
503
+ /*#__PURE__*/ jsx("path", {
504
+ d: "M7.85018 13.0942L11.6419 9.30246L13.3438 11.0044L9.55212 14.7961C9.43782 14.9104 9.28573 14.9791 9.1244 14.9892L7.93427 15.0641C7.73484 15.0767 7.56961 14.9114 7.58216 14.712L7.65706 13.5219C7.66721 13.3606 7.73588 13.2085 7.85018 13.0942Z",
505
+ fill: "currentColor"
506
+ })
507
+ ]
508
+ })
509
+ }),
444
510
  /*#__PURE__*/ jsx(Tooltip, {
445
511
  enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
446
512
  text: "Page has reached Shopify’s 25 section-limit",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/core",
3
- "version": "1.42.3-dev.63",
3
+ "version": "1.42.3-dev.64",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -28,7 +28,7 @@
28
28
  },
29
29
  "devDependencies": {
30
30
  "@gem-sdk/adapter-shopify": "1.42.3-dev.63",
31
- "@gem-sdk/styles": "1.42.3-dev.63",
31
+ "@gem-sdk/styles": "1.42.3-dev.64",
32
32
  "@types/classnames": "^2.3.1"
33
33
  },
34
34
  "dependencies": {