@gem-sdk/core 1.43.0-staging.30 → 1.43.0-staging.31

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 +71 -0
  2. package/dist/esm/components/ComponentToolbarPreview.js +71 -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: ''
@@ -54,6 +56,11 @@ const ComponentToolbarPreview = (props)=>{
54
56
  editingPageType
55
57
  ]);
56
58
  const { checkDisableDelete, getTooltipText, checkDisableDuplicate } = useToolbarPostPurchase.usePostPurchase(props.uid, props.tag || '');
59
+ const editProductElementList = [
60
+ 'Product Title',
61
+ 'Product Description',
62
+ 'Product Price'
63
+ ];
57
64
  const isOverToolbarPosition = (el, parent)=>{
58
65
  const parentLength = parents.length;
59
66
  const rect = el.getBoundingClientRect();
@@ -84,6 +91,27 @@ const ComponentToolbarPreview = (props)=>{
84
91
  }, [
85
92
  props.tag
86
93
  ]);
94
+ const productId = react.useMemo(()=>{
95
+ const ele = document.querySelector(`[data-uid="${parentProductUid}"]`);
96
+ return ele?.getAttribute('data-product-id');
97
+ }, [
98
+ parentProductUid
99
+ ]);
100
+ const shopName = react.useMemo(()=>{
101
+ const pattern = /^(?:https?:\/\/)?([^/]+)\.myshopify\.com/;
102
+ if (storefrontUrl) {
103
+ return storefrontUrl.match(pattern)?.[1];
104
+ }
105
+ return '';
106
+ }, [
107
+ storefrontUrl
108
+ ]);
109
+ const shopifyEditLink = react.useMemo(()=>{
110
+ return productId ? `https://admin.shopify.com/store/${shopName}/products/${productId}` : '';
111
+ }, [
112
+ productId,
113
+ shopName
114
+ ]);
87
115
  // Get parents
88
116
  const onActiveComponent = react.useCallback((e)=>{
89
117
  const detail = e.detail;
@@ -102,6 +130,10 @@ const ComponentToolbarPreview = (props)=>{
102
130
  return true;
103
131
  }).slice(0, 3);
104
132
  setParents(currentParents);
133
+ const parentFindUid = currentParents.find((item)=>item.tag === 'Product')?.uid;
134
+ if (parentFindUid) {
135
+ setParentProductUid(parentFindUid);
136
+ }
105
137
  } else {
106
138
  setParents([]);
107
139
  setIsShowParent(false);
@@ -173,6 +205,9 @@ const ComponentToolbarPreview = (props)=>{
173
205
  });
174
206
  window.dispatchEvent(event);
175
207
  };
208
+ const goToShopifyEditLink = ()=>{
209
+ window.open(shopifyEditLink, '_blank');
210
+ };
176
211
  const onDelete = (e)=>{
177
212
  e.preventDefault();
178
213
  e.stopPropagation();
@@ -445,6 +480,42 @@ const ComponentToolbarPreview = (props)=>{
445
480
  })
446
481
  })
447
482
  }),
483
+ editProductElementList.includes(toolbarName() ?? '') && /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
484
+ "data-toolbar-title": true,
485
+ enable: true,
486
+ "data-toolbar-disable": false,
487
+ text: "Edit content in Shopify",
488
+ position: "top",
489
+ onClick: goToShopifyEditLink,
490
+ "aria-hidden": "true",
491
+ children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
492
+ width: "16",
493
+ height: "16",
494
+ viewBox: "0 0 16 16",
495
+ fill: "none",
496
+ xmlns: "http://www.w3.org/2000/svg",
497
+ children: [
498
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
499
+ fillRule: "evenodd",
500
+ clipRule: "evenodd",
501
+ 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",
502
+ fill: "currentColor"
503
+ }),
504
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
505
+ 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",
506
+ fill: "currentColor"
507
+ }),
508
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
509
+ 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",
510
+ fill: "currentColor"
511
+ }),
512
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
513
+ 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",
514
+ fill: "currentColor"
515
+ })
516
+ ]
517
+ })
518
+ }),
448
519
  /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
449
520
  enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
450
521
  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: ''
@@ -50,6 +52,11 @@ const ComponentToolbarPreview = (props)=>{
50
52
  editingPageType
51
53
  ]);
52
54
  const { checkDisableDelete, getTooltipText, checkDisableDuplicate } = usePostPurchase(props.uid, props.tag || '');
55
+ const editProductElementList = [
56
+ 'Product Title',
57
+ 'Product Description',
58
+ 'Product Price'
59
+ ];
53
60
  const isOverToolbarPosition = (el, parent)=>{
54
61
  const parentLength = parents.length;
55
62
  const rect = el.getBoundingClientRect();
@@ -80,6 +87,27 @@ const ComponentToolbarPreview = (props)=>{
80
87
  }, [
81
88
  props.tag
82
89
  ]);
90
+ const productId = useMemo(()=>{
91
+ const ele = document.querySelector(`[data-uid="${parentProductUid}"]`);
92
+ return ele?.getAttribute('data-product-id');
93
+ }, [
94
+ parentProductUid
95
+ ]);
96
+ const shopName = useMemo(()=>{
97
+ const pattern = /^(?:https?:\/\/)?([^/]+)\.myshopify\.com/;
98
+ if (storefrontUrl) {
99
+ return storefrontUrl.match(pattern)?.[1];
100
+ }
101
+ return '';
102
+ }, [
103
+ storefrontUrl
104
+ ]);
105
+ const shopifyEditLink = useMemo(()=>{
106
+ return productId ? `https://admin.shopify.com/store/${shopName}/products/${productId}` : '';
107
+ }, [
108
+ productId,
109
+ shopName
110
+ ]);
83
111
  // Get parents
84
112
  const onActiveComponent = useCallback((e)=>{
85
113
  const detail = e.detail;
@@ -98,6 +126,10 @@ const ComponentToolbarPreview = (props)=>{
98
126
  return true;
99
127
  }).slice(0, 3);
100
128
  setParents(currentParents);
129
+ const parentFindUid = currentParents.find((item)=>item.tag === 'Product')?.uid;
130
+ if (parentFindUid) {
131
+ setParentProductUid(parentFindUid);
132
+ }
101
133
  } else {
102
134
  setParents([]);
103
135
  setIsShowParent(false);
@@ -169,6 +201,9 @@ const ComponentToolbarPreview = (props)=>{
169
201
  });
170
202
  window.dispatchEvent(event);
171
203
  };
204
+ const goToShopifyEditLink = ()=>{
205
+ window.open(shopifyEditLink, '_blank');
206
+ };
172
207
  const onDelete = (e)=>{
173
208
  e.preventDefault();
174
209
  e.stopPropagation();
@@ -441,6 +476,42 @@ const ComponentToolbarPreview = (props)=>{
441
476
  })
442
477
  })
443
478
  }),
479
+ editProductElementList.includes(toolbarName() ?? '') && /*#__PURE__*/ jsx(Tooltip, {
480
+ "data-toolbar-title": true,
481
+ enable: true,
482
+ "data-toolbar-disable": false,
483
+ text: "Edit content in Shopify",
484
+ position: "top",
485
+ onClick: goToShopifyEditLink,
486
+ "aria-hidden": "true",
487
+ children: /*#__PURE__*/ jsxs("svg", {
488
+ width: "16",
489
+ height: "16",
490
+ viewBox: "0 0 16 16",
491
+ fill: "none",
492
+ xmlns: "http://www.w3.org/2000/svg",
493
+ children: [
494
+ /*#__PURE__*/ jsx("path", {
495
+ fillRule: "evenodd",
496
+ clipRule: "evenodd",
497
+ 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",
498
+ fill: "currentColor"
499
+ }),
500
+ /*#__PURE__*/ jsx("path", {
501
+ 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",
502
+ fill: "currentColor"
503
+ }),
504
+ /*#__PURE__*/ jsx("path", {
505
+ 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",
506
+ fill: "currentColor"
507
+ }),
508
+ /*#__PURE__*/ jsx("path", {
509
+ 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",
510
+ fill: "currentColor"
511
+ })
512
+ ]
513
+ })
514
+ }),
444
515
  /*#__PURE__*/ jsx(Tooltip, {
445
516
  enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
446
517
  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.43.0-staging.30",
3
+ "version": "1.43.0-staging.31",
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.43.0-staging.26",
31
- "@gem-sdk/styles": "1.43.0-staging.29",
31
+ "@gem-sdk/styles": "1.43.0-staging.31",
32
32
  "@types/classnames": "^2.3.1"
33
33
  },
34
34
  "dependencies": {