@okendo/shopify-hydrogen 2.2.2 → 2.2.4
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/README.md +79 -66
- package/dist/cjs/index.js +1 -1
- package/dist/esm/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -587,76 +587,89 @@ Append `OkendoProvider` to `body`, and pass it the promise — or the data — r
|
|
|
587
587
|
|
|
588
588
|
> This is only necessary if Content Security Policy is active in your project.
|
|
589
589
|
|
|
590
|
-
Locate the call to `createContentSecurityPolicy`, and
|
|
591
|
-
|
|
592
|
-
- `https://d3hw6dc1ow8pp2.cloudfront.net`, `https://d3g5hqndtiniji.cloudfront.net`, and `data:` to `defaultSrc`
|
|
593
|
-
- `https://d3hw6dc1ow8pp2.cloudfront.net` to `styleSrc`
|
|
594
|
-
- `https://api.okendo.io` to `connectSrc`
|
|
595
|
-
|
|
590
|
+
Locate the call to `createContentSecurityPolicy`, and ensure your configuration includes the entries below:
|
|
596
591
|
Note that it's necessary to to add the default values (`'self'`, etc.) when [extending the CSP](https://shopify.dev/docs/custom-storefronts/hydrogen/content-security-policy). The call to `createContentSecurityPolicy` should now look like the following:
|
|
597
592
|
|
|
598
593
|
```ts
|
|
599
594
|
const { nonce, header, NonceProvider } = createContentSecurityPolicy({
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
595
|
+
defaultSrc: [
|
|
596
|
+
"'self'",
|
|
597
|
+
"localhost:*",
|
|
598
|
+
"https://cdn.shopify.com",
|
|
599
|
+
"https://www.google.com",
|
|
600
|
+
"https://www.gstatic.com",
|
|
601
|
+
"https://d3hw6dc1ow8pp2.cloudfront.net",
|
|
602
|
+
"https://d3g5hqndtiniji.cloudfront.net",
|
|
603
|
+
"https://dov7r31oq5dkj.cloudfront.net",
|
|
604
|
+
"https://cdn-static.okendo.io",
|
|
605
|
+
"https://surveys.okendo.io",
|
|
606
|
+
"https://api.okendo.io",
|
|
607
|
+
"data:",
|
|
608
|
+
],
|
|
609
|
+
imgSrc: [
|
|
610
|
+
"'self'",
|
|
611
|
+
"https://cdn.shopify.com",
|
|
612
|
+
"data:",
|
|
613
|
+
"https://d3hw6dc1ow8pp2.cloudfront.net",
|
|
614
|
+
"https://d3g5hqndtiniji.cloudfront.net",
|
|
615
|
+
"https://dov7r31oq5dkj.cloudfront.net",
|
|
616
|
+
"https://cdn-static.okendo.io",
|
|
617
|
+
"https://surveys.okendo.io"
|
|
618
|
+
],
|
|
619
|
+
mediaSrc: [
|
|
620
|
+
"'self'",
|
|
621
|
+
"https://d3hw6dc1ow8pp2.cloudfront.net",
|
|
622
|
+
"https://d3g5hqndtiniji.cloudfront.net",
|
|
623
|
+
"https://dov7r31oq5dkj.cloudfront.net",
|
|
624
|
+
"https://cdn-static.okendo.io"
|
|
625
|
+
],
|
|
626
|
+
styleSrcElem: [
|
|
627
|
+
"'self'",
|
|
628
|
+
"'unsafe-inline'",
|
|
629
|
+
"https://cdn.shopify.com",
|
|
630
|
+
"https://fonts.googleapis.com",
|
|
631
|
+
"https://fonts.gstatic.com",
|
|
632
|
+
"https://d3hw6dc1ow8pp2.cloudfront.net",
|
|
633
|
+
"https://cdn-static.okendo.io",
|
|
634
|
+
"https://surveys.okendo.io"
|
|
635
|
+
],
|
|
636
|
+
scriptSrc: [
|
|
637
|
+
"'self'",
|
|
638
|
+
"https://cdn.shopify.com",
|
|
639
|
+
"https://d3hw6dc1ow8pp2.cloudfront.net",
|
|
640
|
+
"https://dov7r31oq5dkj.cloudfront.net",
|
|
641
|
+
"https://cdn-static.okendo.io",
|
|
642
|
+
"https://surveys.okendo.io",
|
|
643
|
+
"https://api.okendo.io",
|
|
644
|
+
"https://www.google.com",
|
|
645
|
+
"https://www.gstatic.com"
|
|
646
|
+
],
|
|
647
|
+
fontSrc: [
|
|
648
|
+
"'self'",
|
|
649
|
+
"https://fonts.gstatic.com",
|
|
650
|
+
"https://d3hw6dc1ow8pp2.cloudfront.net",
|
|
651
|
+
"https://dov7r31oq5dkj.cloudfront.net",
|
|
652
|
+
"https://cdn.shopify.com",
|
|
653
|
+
"https://cdn-static.okendo.io",
|
|
654
|
+
"https://surveys.okendo.io"
|
|
655
|
+
],
|
|
656
|
+
connectSrc: [
|
|
657
|
+
"'self'",
|
|
658
|
+
"https://monorail-edge.shopifysvc.com",
|
|
659
|
+
"localhost:*",
|
|
660
|
+
"ws://localhost:*",
|
|
661
|
+
"ws://127.0.0.1:*",
|
|
662
|
+
"https://api.okendo.io",
|
|
663
|
+
"https://cdn-static.okendo.io",
|
|
664
|
+
"https://surveys.okendo.io",
|
|
665
|
+
"https://api.raygun.com",
|
|
666
|
+
"https://www.google.com",
|
|
667
|
+
"https://www.gstatic.com",
|
|
668
|
+
],
|
|
669
|
+
frameSrc: [
|
|
670
|
+
"https://www.google.com",
|
|
671
|
+
"https://www.gstatic.com"
|
|
672
|
+
]
|
|
660
673
|
});
|
|
661
674
|
```
|
|
662
675
|
|
package/dist/cjs/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react"),t=require("@remix-run/react");const n=e.createContext(void 0),r=({children:t})=>{const[r,o]=e.useState(!1);return e.createElement(n.Provider,{value:{okendoDataLoaded:r,setOkendoDataLoaded:o}},t)},o=()=>{const t=e.useContext(n);return void 0===t?null:t},a="cdn-static.okendo.io",i=({nonce:t="",okendoProviderData:n,productUrlFormatter:r,awaited:i,cdnDomain:s})=>{const d=o();if(e.useEffect((()=>{if(n&&d?.setOkendoDataLoaded(!0),n&&i){const e=document.createElement("script");e.src=`https://${s||a}/reviews-widget-plus/js/okendo-reviews.js`,document.head.appendChild(e)}}),[n,d,i,s]),!n)return null;const{reviewsHeaderConfig:
|
|
1
|
+
"use strict";var e=require("react"),t=require("@remix-run/react");const n=e.createContext(void 0),r=({children:t})=>{const[r,o]=e.useState(!1);return e.createElement(n.Provider,{value:{okendoDataLoaded:r,setOkendoDataLoaded:o}},t)},o=()=>{const t=e.useContext(n);return void 0===t?null:t},a="cdn-static.okendo.io",i=({nonce:t="",okendoProviderData:n,productUrlFormatter:r,awaited:i,cdnDomain:s})=>{const d=o(),c=e.useRef(!1);if(e.useEffect((()=>{if(n&&d?.setOkendoDataLoaded(!0),n&&i&&!c.current){const e=document.createElement("script");e.src=`https://${s||a}/reviews-widget-plus/js/okendo-reviews.js`,document.head.appendChild(e),c.current=!0}}),[n,d,i,s]),!n)return null;const{reviewsHeaderConfig:l,cssVariables:u,customCss:p,initScriptContents:m,preRenderStyleTags:g,starSymbols:v}=n,k=(u??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),w=p?p.replace('<style id="oke-reviews-custom-css">',"").replace("</style>",""):"";return e.createElement(e.Fragment,null,e.createElement("script",{nonce:t,id:"oke-reviews-settings",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify(l)}}),e.createElement("style",{nonce:t,id:"oke-css-vars",dangerouslySetInnerHTML:{__html:k}}),w&&e.createElement("style",{nonce:t,id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:w}}),!i&&m&&e.createElement("script",{nonce:t,dangerouslySetInnerHTML:{__html:m}}),e.createElement("script",{nonce:t,type:"text/javascript",dangerouslySetInnerHTML:{__html:`window.okeProductUrlFormatter = ${"function"==typeof r?r.toString():"string"==typeof r?r:"(product) =>\n product && product.productHandle\n ? \"/products/\" + product.productHandle + \"/\" + (product.variantId ? '?variantId=' + product.variantId : '')\n : undefined"}`}}),g&&e.createElement("div",{dangerouslySetInnerHTML:{__html:g}}),v&&e.createElement("div",{dangerouslySetInnerHTML:{__html:v}}))};const s=({dataAttributes:t,metafieldContent:n=""})=>{const r=e.useRef(null),o=e.useRef(!1),a=function(t){const n=e.useRef();return e.useEffect((()=>{n.current=t})),n.current}(t),i=()=>{r.current&&(window.okeWidgetApi.initWidget(r.current),o.current=!0)};return e.useEffect((()=>{if(!a||t["data-oke-widget"]!==a["data-oke-widget"]||t["data-oke-star-rating"]!==a["data-oke-star-rating"]||t["data-oke-reviews-product-id"]!==a["data-oke-reviews-product-id"]||!o.current)return window.okeWidgetApi&&r.current?i():document.addEventListener("oke-script-loaded",i),()=>{document.removeEventListener("oke-script-loaded",i)}}),[t,a]),e.createElement("div",{ref:r,key:JSON.stringify(t),...t,dangerouslySetInnerHTML:n?{__html:n}:void 0})},d=/^[0-9]*$/;function c(e){if(e)return`shopify-${d.test(e)?e:e.split("/").slice(-1)[0]}`}exports.OKENDO_PRODUCT_REVIEWS_FRAGMENT='#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: "okendo"\n\t\t\tkey: "ReviewsWidgetSnippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n',exports.OKENDO_PRODUCT_STAR_RATING_FRAGMENT='#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: "okendo"\n\t\t\tkey: "StarRatingSnippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n',exports.OkendoProvider=({nonce:n="",okendoProviderData:o,productUrlFormatter:a,cdnDomain:s,children:d})=>e.createElement(r,null,o&&"then"in o?e.createElement(e.Suspense,null,e.createElement(t.Await,{resolve:o},(t=>e.createElement(i,{nonce:n,okendoProviderData:t,productUrlFormatter:a,cdnDomain:s,awaited:!0})))):e.createElement(i,{nonce:n,okendoProviderData:o,productUrlFormatter:a,cdnDomain:s}),d),exports.OkendoReviews=({productId:t,okendoReviewsSnippet:n,placeholder:r})=>{const a=o(),i={"data-oke-widget":"","data-oke-reviews-product-id":c(t)};return null===a||a.okendoDataLoaded?e.createElement(s,{dataAttributes:i,metafieldContent:n?.value}):r||e.createElement("div",{style:{height:"350px"}})},exports.OkendoStarRating=({productId:t,okendoStarRatingSnippet:n,placeholder:r})=>{const a=o(),i={"data-oke-star-rating":"","data-oke-reviews-product-id":c(t)};return null===a||a.okendoDataLoaded?e.createElement(s,{dataAttributes:i,metafieldContent:n?.value}):r||e.createElement("div",{style:{height:"20px"}})},exports.getOkendoProviderData=async({context:e,subscriberId:t,apiDomain:n,cdnDomain:r})=>{const o=`https://${n||"api.okendo.io/v1"}/stores/${t}/widget_plus_settings`,i=await fetch(o);if(!i.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${t}'.`),null;const{reviewsHeaderConfig:s,cssVariables:d,customCss:c,starSymbols:l}=await i.json(),u=await fetch(`https://${r||a}/reviews-widget-plus/js/okendo-reviews.js`);if(!u.ok)return console.error("Failed to retrieve widget initialisation script."),null;const p=await u.text(),{shop:{widgetPreRenderStyleTags:m}}=await e.storefront.query('#graphql\n\t\tquery metafields {\n\t\t\tshop {\n\t\t\t\twidgetPreRenderStyleTags: metafield(\n\t\t\t\t\tnamespace: "okendo"\n\t\t\t\t\tkey: "WidgetPreRenderStyleTags"\n\t\t\t\t) {\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t'),g=m?.value??"";return g||console.warn("Failed to retrieve pre-rendered widget style settings."),{reviewsHeaderConfig:s,cssVariables:d,customCss:c,initScriptContents:p,preRenderStyleTags:g,starSymbols:l}};
|
package/dist/esm/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{createContext as t,useState as n,useContext as r,Suspense as o,
|
|
1
|
+
import e,{createContext as t,useState as n,useContext as r,Suspense as o,useRef as a,useEffect as i}from"react";import{Await as d}from"@remix-run/react";const s=t(void 0),c=({children:t})=>{const[r,o]=n(!1);return e.createElement(s.Provider,{value:{okendoDataLoaded:r,setOkendoDataLoaded:o}},t)},l=()=>{const e=r(s);return void 0===e?null:e},u="cdn-static.okendo.io",p=async({context:e,subscriberId:t,apiDomain:n,cdnDomain:r})=>{const o=`https://${n||"api.okendo.io/v1"}/stores/${t}/widget_plus_settings`,a=await fetch(o);if(!a.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${t}'.`),null;const{reviewsHeaderConfig:i,cssVariables:d,customCss:s,starSymbols:c}=await a.json(),l=await fetch(`https://${r||u}/reviews-widget-plus/js/okendo-reviews.js`);if(!l.ok)return console.error("Failed to retrieve widget initialisation script."),null;const p=await l.text(),{shop:{widgetPreRenderStyleTags:m}}=await e.storefront.query('#graphql\n\t\tquery metafields {\n\t\t\tshop {\n\t\t\t\twidgetPreRenderStyleTags: metafield(\n\t\t\t\t\tnamespace: "okendo"\n\t\t\t\t\tkey: "WidgetPreRenderStyleTags"\n\t\t\t\t) {\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t'),g=m?.value??"";return g||console.warn("Failed to retrieve pre-rendered widget style settings."),{reviewsHeaderConfig:i,cssVariables:d,customCss:s,initScriptContents:p,preRenderStyleTags:g,starSymbols:c}},m=({nonce:t="",okendoProviderData:n,productUrlFormatter:r,cdnDomain:a,children:i})=>e.createElement(c,null,n&&"then"in n?e.createElement(o,null,e.createElement(d,{resolve:n},(n=>e.createElement(g,{nonce:t,okendoProviderData:n,productUrlFormatter:r,cdnDomain:a,awaited:!0})))):e.createElement(g,{nonce:t,okendoProviderData:n,productUrlFormatter:r,cdnDomain:a}),i),g=({nonce:t="",okendoProviderData:n,productUrlFormatter:r,awaited:o,cdnDomain:d})=>{const s=l(),c=a(!1);if(i((()=>{if(n&&s?.setOkendoDataLoaded(!0),n&&o&&!c.current){const e=document.createElement("script");e.src=`https://${d||u}/reviews-widget-plus/js/okendo-reviews.js`,document.head.appendChild(e),c.current=!0}}),[n,s,o,d]),!n)return null;const{reviewsHeaderConfig:p,cssVariables:m,customCss:g,initScriptContents:v,preRenderStyleTags:k,starSymbols:w}=n,y=(m??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),f=g?g.replace('<style id="oke-reviews-custom-css">',"").replace("</style>",""):"";return e.createElement(e.Fragment,null,e.createElement("script",{nonce:t,id:"oke-reviews-settings",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify(p)}}),e.createElement("style",{nonce:t,id:"oke-css-vars",dangerouslySetInnerHTML:{__html:y}}),f&&e.createElement("style",{nonce:t,id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:f}}),!o&&v&&e.createElement("script",{nonce:t,dangerouslySetInnerHTML:{__html:v}}),e.createElement("script",{nonce:t,type:"text/javascript",dangerouslySetInnerHTML:{__html:`window.okeProductUrlFormatter = ${"function"==typeof r?r.toString():"string"==typeof r?r:"(product) =>\n product && product.productHandle\n ? \"/products/\" + product.productHandle + \"/\" + (product.variantId ? '?variantId=' + product.variantId : '')\n : undefined"}`}}),k&&e.createElement("div",{dangerouslySetInnerHTML:{__html:k}}),w&&e.createElement("div",{dangerouslySetInnerHTML:{__html:w}}))};const v=({dataAttributes:t,metafieldContent:n=""})=>{const r=a(null),o=a(!1),d=function(e){const t=a();return i((()=>{t.current=e})),t.current}(t),s=()=>{r.current&&(window.okeWidgetApi.initWidget(r.current),o.current=!0)};return i((()=>{if(!d||t["data-oke-widget"]!==d["data-oke-widget"]||t["data-oke-star-rating"]!==d["data-oke-star-rating"]||t["data-oke-reviews-product-id"]!==d["data-oke-reviews-product-id"]||!o.current)return window.okeWidgetApi&&r.current?s():document.addEventListener("oke-script-loaded",s),()=>{document.removeEventListener("oke-script-loaded",s)}}),[t,d]),e.createElement("div",{ref:r,key:JSON.stringify(t),...t,dangerouslySetInnerHTML:n?{__html:n}:void 0})},k=/^[0-9]*$/;function w(e){if(e)return`shopify-${k.test(e)?e:e.split("/").slice(-1)[0]}`}const y=({productId:t,okendoReviewsSnippet:n,placeholder:r})=>{const o=l(),a={"data-oke-widget":"","data-oke-reviews-product-id":w(t)};return null===o||o.okendoDataLoaded?e.createElement(v,{dataAttributes:a,metafieldContent:n?.value}):r||e.createElement("div",{style:{height:"350px"}})},f=({productId:t,okendoStarRatingSnippet:n,placeholder:r})=>{const o=l(),a={"data-oke-star-rating":"","data-oke-reviews-product-id":w(t)};return null===o||o.okendoDataLoaded?e.createElement(v,{dataAttributes:a,metafieldContent:n?.value}):r||e.createElement("div",{style:{height:"20px"}})},S='#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: "okendo"\n\t\t\tkey: "StarRatingSnippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n',h='#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: "okendo"\n\t\t\tkey: "ReviewsWidgetSnippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n';export{h as OKENDO_PRODUCT_REVIEWS_FRAGMENT,S as OKENDO_PRODUCT_STAR_RATING_FRAGMENT,m as OkendoProvider,y as OkendoReviews,f as OkendoStarRating,p as getOkendoProviderData};
|