@okendo/shopify-hydrogen 2.5.3 → 2.6.1
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
CHANGED
|
@@ -74,12 +74,12 @@ Locate the `Layout` component, add the `meta` tag `oke:subscriber_id` to `head`,
|
|
|
74
74
|
</head>
|
|
75
75
|
```
|
|
76
76
|
|
|
77
|
-
Locate the `App` function, append `OkendoProvider`, and pass it the promise returned by `getOkendoProviderData
|
|
77
|
+
Locate the `App` function, append `OkendoProvider`, and pass it the promise returned by `getOkendoProviderData`:
|
|
78
78
|
|
|
79
79
|
```tsx
|
|
80
80
|
<body>
|
|
81
81
|
return (
|
|
82
|
-
<OkendoProvider
|
|
82
|
+
<OkendoProvider okendoProviderData={data.okendoProviderData}>
|
|
83
83
|
<Analytics.Provider
|
|
84
84
|
cart={data.cart}
|
|
85
85
|
shop={data.shop}
|
|
@@ -95,12 +95,10 @@ Locate the `App` function, append `OkendoProvider`, and pass it the promise retu
|
|
|
95
95
|
|
|
96
96
|
### `app/entry.server.tsx`
|
|
97
97
|
|
|
98
|
-
> This is only
|
|
98
|
+
> This section is necessary only if Content Security Policy is active in your project.
|
|
99
99
|
|
|
100
100
|
Locate the call to `createContentSecurityPolicy`, and ensure your configuration includes the entries below:
|
|
101
101
|
|
|
102
|
-
> 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:
|
|
103
|
-
|
|
104
102
|
```ts
|
|
105
103
|
const { nonce, header, NonceProvider } = createContentSecurityPolicy({
|
|
106
104
|
shop: {
|
|
@@ -108,9 +106,6 @@ const { nonce, header, NonceProvider } = createContentSecurityPolicy({
|
|
|
108
106
|
storeDomain: context.env.PUBLIC_STORE_DOMAIN,
|
|
109
107
|
},
|
|
110
108
|
defaultSrc: [
|
|
111
|
-
"'self'",
|
|
112
|
-
'localhost:*',
|
|
113
|
-
'https://cdn.shopify.com',
|
|
114
109
|
'https://www.google.com',
|
|
115
110
|
'https://www.gstatic.com',
|
|
116
111
|
'https://d3hw6dc1ow8pp2.cloudfront.net',
|
|
@@ -121,59 +116,14 @@ const { nonce, header, NonceProvider } = createContentSecurityPolicy({
|
|
|
121
116
|
'https://api.okendo.io',
|
|
122
117
|
'data:',
|
|
123
118
|
],
|
|
124
|
-
imgSrc: [
|
|
125
|
-
"'self'",
|
|
126
|
-
'https://cdn.shopify.com',
|
|
127
|
-
'data:',
|
|
128
|
-
'https://d3hw6dc1ow8pp2.cloudfront.net',
|
|
129
|
-
'https://d3g5hqndtiniji.cloudfront.net',
|
|
130
|
-
'https://dov7r31oq5dkj.cloudfront.net',
|
|
131
|
-
'https://cdn-static.okendo.io',
|
|
132
|
-
'https://surveys.okendo.io',
|
|
133
|
-
],
|
|
134
|
-
mediaSrc: [
|
|
135
|
-
"'self'",
|
|
136
|
-
'https://d3hw6dc1ow8pp2.cloudfront.net',
|
|
137
|
-
'https://d3g5hqndtiniji.cloudfront.net',
|
|
138
|
-
'https://dov7r31oq5dkj.cloudfront.net',
|
|
139
|
-
'https://cdn-static.okendo.io',
|
|
140
|
-
],
|
|
141
119
|
styleSrc: [
|
|
142
|
-
"'self'",
|
|
143
|
-
"'unsafe-inline'",
|
|
144
|
-
'https://cdn.shopify.com',
|
|
145
120
|
'https://fonts.googleapis.com',
|
|
146
121
|
'https://fonts.gstatic.com',
|
|
147
122
|
'https://d3hw6dc1ow8pp2.cloudfront.net',
|
|
148
123
|
'https://cdn-static.okendo.io',
|
|
149
124
|
'https://surveys.okendo.io',
|
|
150
125
|
],
|
|
151
|
-
scriptSrc: [
|
|
152
|
-
"'self'",
|
|
153
|
-
'https://cdn.shopify.com',
|
|
154
|
-
'https://d3hw6dc1ow8pp2.cloudfront.net',
|
|
155
|
-
'https://dov7r31oq5dkj.cloudfront.net',
|
|
156
|
-
'https://cdn-static.okendo.io',
|
|
157
|
-
'https://surveys.okendo.io',
|
|
158
|
-
'https://api.okendo.io',
|
|
159
|
-
'https://www.google.com',
|
|
160
|
-
'https://www.gstatic.com',
|
|
161
|
-
],
|
|
162
|
-
fontSrc: [
|
|
163
|
-
"'self'",
|
|
164
|
-
'https://fonts.gstatic.com',
|
|
165
|
-
'https://d3hw6dc1ow8pp2.cloudfront.net',
|
|
166
|
-
'https://dov7r31oq5dkj.cloudfront.net',
|
|
167
|
-
'https://cdn.shopify.com',
|
|
168
|
-
'https://cdn-static.okendo.io',
|
|
169
|
-
'https://surveys.okendo.io',
|
|
170
|
-
],
|
|
171
126
|
connectSrc: [
|
|
172
|
-
"'self'",
|
|
173
|
-
'https://monorail-edge.shopifysvc.com',
|
|
174
|
-
'localhost:*',
|
|
175
|
-
'ws://localhost:*',
|
|
176
|
-
'ws://127.0.0.1:*',
|
|
177
127
|
'https://api.okendo.io',
|
|
178
128
|
'https://cdn-static.okendo.io',
|
|
179
129
|
'https://surveys.okendo.io',
|
|
@@ -562,7 +512,6 @@ return defer({
|
|
|
562
512
|
|
|
563
513
|
```tsx
|
|
564
514
|
<OkendoProvider
|
|
565
|
-
nonce={nonce}
|
|
566
515
|
okendoProviderData={data.okendoProviderData}
|
|
567
516
|
customerAccessToken={data.customerAccessToken}
|
|
568
517
|
>
|
package/dist/cjs/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react-router"),t=require("react");const
|
|
1
|
+
"use strict";var e=require("react-router"),t=require("react"),n=require("@shopify/hydrogen");const r=/^[0-9]*$/,s="app--1576377";function a(e){if(e)return`shopify-${r.test(e)?e:e.split("/").slice(-1)[0]}`}const o="cdn-static.okendo.io",i=({okendoProviderData:e,productUrlFormatter:r,cdnDomain:s})=>{const a=t.useRef(!1),i=t.useRef(!1);if(t.useEffect((()=>{if(e&&e.loyaltySettings&&!1===a.current){const t=document.createElement("script");t.src=`https://${s||o}/loyalty/js/init-onsite.js`,document.head.appendChild(t);const n=document.createElement("script");n.type="application/json",n.id="oke-loyalty-settings";const r=e.loyaltySettings?e.loyaltySettings.replaceAll(/<\/?script.*?>/g,""):"";n.innerHTML=r,document.head.appendChild(n),a.current=!0}}),[e,s]),t.useEffect((()=>{if(e&&!i.current){const e=document.createElement("script");e.src=`https://${s||o}/reviews-widget-plus/js/okendo-reviews.js`,document.head.appendChild(e),i.current=!0}}),[e,s]),!e)return null;const{reviewsHeaderConfig:d,cssVariables:l,customCss:c,preRenderStyleTags:u,starSymbols:p}=e,m=(l??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),y=c?c.replace('<style id="oke-reviews-custom-css">',"").replace("</style>",""):"";return t.createElement(t.Fragment,null,t.createElement(n.Script,{id:"oke-reviews-settings",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify(d)}}),t.createElement("style",{id:"oke-css-vars",dangerouslySetInnerHTML:{__html:m}}),y&&t.createElement("style",{id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:y}}),t.createElement(n.Script,{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"}`}}),u&&t.createElement("div",{dangerouslySetInnerHTML:{__html:u}}),p&&t.createElement("div",{dangerouslySetInnerHTML:{__html:p}}))};const d=({style:e,className:n,dataAttributes:r,metafieldContent:s=""})=>{const a=t.useRef(null),o=t.useRef(!1),i=function(e){const n=t.useRef();return t.useEffect((()=>{n.current=e})),n.current}(r),d=()=>{a.current&&(window.okeWidgetApi.initWidget(a.current),o.current=!0)};return t.useEffect((()=>{if(!i||r["data-oke-widget"]!==i["data-oke-widget"]||r["data-oke-star-rating"]!==i["data-oke-star-rating"]||r["data-oke-reviews-product-id"]!==i["data-oke-reviews-product-id"]||!o.current)return window.okeWidgetApi&&a.current?d():document.addEventListener("oke-script-loaded",d),()=>{document.removeEventListener("oke-script-loaded",d)}}),[r,i]),t.createElement("div",{ref:a,style:e,className:n,key:JSON.stringify(r),...r,dangerouslySetInnerHTML:s?{__html:s}:void 0})},l=`#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: "${s}--reviews"\n\t\t\tkey: "star_rating_snippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n`,c=`#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: "${s}--reviews"\n\t\t\tkey: "reviews_widget_snippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n`;exports.OKENDO_PRODUCT_REVIEWS_FRAGMENT=c,exports.OKENDO_PRODUCT_STAR_RATING_FRAGMENT=l,exports.OkendoLoyaltyEmbeddedWidget=function(){const n=e.useLocation();return t.useEffect((()=>{window?.okeLoyaltyApi?.initialiseWidgets()}),[n.pathname]),t.createElement("div",{"data-oke-loyalty-embedded-widget":""})},exports.OkendoProvider=({okendoProviderData:r,customerAccessToken:s,productUrlFormatter:a,cdnDomain:o,children:d})=>t.createElement(t.Fragment,null,t.createElement(t.Suspense,null,t.createElement(e.Await,{resolve:r},(e=>t.createElement(i,{okendoProviderData:e,productUrlFormatter:a,cdnDomain:o})))),s&&t.createElement(n.Script,{id:"oke-loyalty-customer-access-token",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify({customerAccessToken:s})}}),d),exports.OkendoReviews=({style:e,className:n,productId:r,okendoReviewsSnippet:s})=>{const o=r?.length?a(r):null,i=r?.length?s:null,l={"data-oke-widget":"","data-oke-reviews-product-id":o};return t.createElement(d,{style:e,className:n,dataAttributes:l,metafieldContent:i?.value})},exports.OkendoReviewsCarousel=({style:e,className:n,productId:r,groupId:s,headerBadgeUrl:o})=>{const i={"data-oke-carousel":"","data-oke-reviews-product-id":r?.length?a(r):null,"data-oke-reviews-group-id":s?.length?s:null,"data-oke-header-badge-url":o};return t.createElement(d,{style:e,className:n,dataAttributes:i})},exports.OkendoStarRating=({style:e,className:n,productId:r,okendoStarRatingSnippet:s})=>{const o={"data-oke-star-rating":"","data-oke-reviews-product-id":a(r)};return t.createElement(d,{style:e,className:n,dataAttributes:o,metafieldContent:s?.value})},exports.getOkendoProviderData=async({context:e,subscriberId:t,apiDomain:n,okendoProducts:r=["reviews"],appNamespace:a})=>{if(!r.length)return null;const o=`loyaltySettings: metafield(\n namespace: "${a??s}--loyalty",\n key: "loyalty_settings"\n ) {\n value\n }`,i=`widgetPreRenderStyleTags: metafield(\n namespace: "${a??s}--reviews",\n key: "widget_pre_render_style_tags"\n ) {\n value\n }`,d=`#graphql\n query metafields {\n shop {\n ${r.includes("loyalty")?o:""}\n ${r.includes("reviews")?i:""}\n }\n }\n `,{shop:{loyaltySettings:l,widgetPreRenderStyleTags:c}}=await e.storefront.query(d);let u=null;if(r.includes("loyalty")&&(u={...u??{},loyaltySettings:l?.value??""}),r.includes("reviews")){const e=`https://${n||"api.okendo.io/v1"}/stores/${t}/widget_plus_settings`,r=await fetch(e);if(!r.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${t}'.`),u;const{reviewsHeaderConfig:s,cssVariables:a,customCss:o,starSymbols:i}=await r.json(),d=c?.value??"";d||console.warn("Failed to retrieve pre-rendered widget style settings."),u={...u??{},reviewsHeaderConfig:s,cssVariables:a,customCss:o,preRenderStyleTags:d,starSymbols:i}}return u};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { WidgetPlus } from '@okendo/reviews-common';
|
|
2
|
-
import type
|
|
2
|
+
import { type CustomerAccount, type Storefront } from '@shopify/hydrogen';
|
|
3
3
|
import React, { type PropsWithChildren } from 'react';
|
|
4
4
|
type OkendoProviderData = Partial<OkendoReviewsProviderData & OkendoLoyaltyProviderData>;
|
|
5
5
|
type OkendoProduct = 'reviews' | 'loyalty';
|
|
@@ -48,5 +48,5 @@ interface OkendoProviderProps {
|
|
|
48
48
|
productUrlFormatter?: (product: ReviewProduct) => string;
|
|
49
49
|
cdnDomain?: string;
|
|
50
50
|
}
|
|
51
|
-
export declare const OkendoProvider: ({
|
|
51
|
+
export declare const OkendoProvider: ({ okendoProviderData, customerAccessToken, productUrlFormatter, cdnDomain, children, }: OkendoProviderProps & PropsWithChildren) => React.JSX.Element;
|
|
52
52
|
export {};
|
package/dist/esm/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useLocation as e,Await as t}from"react-router";import n,{useEffect as r,Suspense as a,useRef as s}from"react";function
|
|
1
|
+
import{useLocation as e,Await as t}from"react-router";import n,{useEffect as r,Suspense as a,useRef as s}from"react";import{Script as o}from"@shopify/hydrogen";function i(){const t=e();return r((()=>{window?.okeLoyaltyApi?.initialiseWidgets()}),[t.pathname]),n.createElement("div",{"data-oke-loyalty-embedded-widget":""})}const l=/^[0-9]*$/,d="app--1576377";function c(e){if(e)return`shopify-${l.test(e)?e:e.split("/").slice(-1)[0]}`}const u="cdn-static.okendo.io",p=async({context:e,subscriberId:t,apiDomain:n,okendoProducts:r=["reviews"],appNamespace:a})=>{if(!r.length)return null;const s=`loyaltySettings: metafield(\n namespace: "${a??d}--loyalty",\n key: "loyalty_settings"\n ) {\n value\n }`,o=`widgetPreRenderStyleTags: metafield(\n namespace: "${a??d}--reviews",\n key: "widget_pre_render_style_tags"\n ) {\n value\n }`,i=`#graphql\n query metafields {\n shop {\n ${r.includes("loyalty")?s:""}\n ${r.includes("reviews")?o:""}\n }\n }\n `,{shop:{loyaltySettings:l,widgetPreRenderStyleTags:c}}=await e.storefront.query(i);let u=null;if(r.includes("loyalty")&&(u={...u??{},loyaltySettings:l?.value??""}),r.includes("reviews")){const e=`https://${n||"api.okendo.io/v1"}/stores/${t}/widget_plus_settings`,r=await fetch(e);if(!r.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${t}'.`),u;const{reviewsHeaderConfig:a,cssVariables:s,customCss:o,starSymbols:i}=await r.json(),l=c?.value??"";l||console.warn("Failed to retrieve pre-rendered widget style settings."),u={...u??{},reviewsHeaderConfig:a,cssVariables:s,customCss:o,preRenderStyleTags:l,starSymbols:i}}return u},m=({okendoProviderData:e,customerAccessToken:r,productUrlFormatter:s,cdnDomain:i,children:l})=>n.createElement(n.Fragment,null,n.createElement(a,null,n.createElement(t,{resolve:e},(e=>n.createElement(y,{okendoProviderData:e,productUrlFormatter:s,cdnDomain:i})))),r&&n.createElement(o,{id:"oke-loyalty-customer-access-token",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify({customerAccessToken:r})}}),l),y=({okendoProviderData:e,productUrlFormatter:t,cdnDomain:a})=>{const i=s(!1),l=s(!1);if(r((()=>{if(e&&e.loyaltySettings&&!1===i.current){const t=document.createElement("script");t.src=`https://${a||u}/loyalty/js/init-onsite.js`,document.head.appendChild(t);const n=document.createElement("script");n.type="application/json",n.id="oke-loyalty-settings";const r=e.loyaltySettings?e.loyaltySettings.replaceAll(/<\/?script.*?>/g,""):"";n.innerHTML=r,document.head.appendChild(n),i.current=!0}}),[e,a]),r((()=>{if(e&&!l.current){const e=document.createElement("script");e.src=`https://${a||u}/reviews-widget-plus/js/okendo-reviews.js`,document.head.appendChild(e),l.current=!0}}),[e,a]),!e)return null;const{reviewsHeaderConfig:d,cssVariables:c,customCss:p,preRenderStyleTags:m,starSymbols:y}=e,g=(c??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),v=p?p.replace('<style id="oke-reviews-custom-css">',"").replace("</style>",""):"";return n.createElement(n.Fragment,null,n.createElement(o,{id:"oke-reviews-settings",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify(d)}}),n.createElement("style",{id:"oke-css-vars",dangerouslySetInnerHTML:{__html:g}}),v&&n.createElement("style",{id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:v}}),n.createElement(o,{type:"text/javascript",dangerouslySetInnerHTML:{__html:`window.okeProductUrlFormatter = ${"function"==typeof t?t.toString():"string"==typeof t?t:"(product) =>\n product && product.productHandle\n ? \"/products/\" + product.productHandle + (product.variantId ? '?variantId=' + product.variantId : '')\n : undefined"}`}}),m&&n.createElement("div",{dangerouslySetInnerHTML:{__html:m}}),y&&n.createElement("div",{dangerouslySetInnerHTML:{__html:y}}))};const g=({style:e,className:t,dataAttributes:a,metafieldContent:o=""})=>{const i=s(null),l=s(!1),d=function(e){const t=s();return r((()=>{t.current=e})),t.current}(a),c=()=>{i.current&&(window.okeWidgetApi.initWidget(i.current),l.current=!0)};return r((()=>{if(!d||a["data-oke-widget"]!==d["data-oke-widget"]||a["data-oke-star-rating"]!==d["data-oke-star-rating"]||a["data-oke-reviews-product-id"]!==d["data-oke-reviews-product-id"]||!l.current)return window.okeWidgetApi&&i.current?c():document.addEventListener("oke-script-loaded",c),()=>{document.removeEventListener("oke-script-loaded",c)}}),[a,d]),n.createElement("div",{ref:i,style:e,className:t,key:JSON.stringify(a),...a,dangerouslySetInnerHTML:o?{__html:o}:void 0})},v=({style:e,className:t,productId:r,okendoReviewsSnippet:a})=>{const s=r?.length?c(r):null,o=r?.length?a:null,i={"data-oke-widget":"","data-oke-reviews-product-id":s};return n.createElement(g,{style:e,className:t,dataAttributes:i,metafieldContent:o?.value})},k=({style:e,className:t,productId:r,groupId:a,headerBadgeUrl:s})=>{const o={"data-oke-carousel":"","data-oke-reviews-product-id":r?.length?c(r):null,"data-oke-reviews-group-id":a?.length?a:null,"data-oke-header-badge-url":s};return n.createElement(g,{style:e,className:t,dataAttributes:o})},w=({style:e,className:t,productId:r,okendoStarRatingSnippet:a})=>{const s={"data-oke-star-rating":"","data-oke-reviews-product-id":c(r)};return n.createElement(g,{style:e,className:t,dataAttributes:s,metafieldContent:a?.value})},f=`#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: "${d}--reviews"\n\t\t\tkey: "star_rating_snippet"\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: "${d}--reviews"\n\t\t\tkey: "reviews_widget_snippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n`;export{h as OKENDO_PRODUCT_REVIEWS_FRAGMENT,f as OKENDO_PRODUCT_STAR_RATING_FRAGMENT,i as OkendoLoyaltyEmbeddedWidget,m as OkendoProvider,v as OkendoReviews,k as OkendoReviewsCarousel,w as OkendoStarRating,p as getOkendoProviderData};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { WidgetPlus } from '@okendo/reviews-common';
|
|
2
|
-
import type
|
|
2
|
+
import { type CustomerAccount, type Storefront } from '@shopify/hydrogen';
|
|
3
3
|
import React, { type PropsWithChildren } from 'react';
|
|
4
4
|
type OkendoProviderData = Partial<OkendoReviewsProviderData & OkendoLoyaltyProviderData>;
|
|
5
5
|
type OkendoProduct = 'reviews' | 'loyalty';
|
|
@@ -48,5 +48,5 @@ interface OkendoProviderProps {
|
|
|
48
48
|
productUrlFormatter?: (product: ReviewProduct) => string;
|
|
49
49
|
cdnDomain?: string;
|
|
50
50
|
}
|
|
51
|
-
export declare const OkendoProvider: ({
|
|
51
|
+
export declare const OkendoProvider: ({ okendoProviderData, customerAccessToken, productUrlFormatter, cdnDomain, children, }: OkendoProviderProps & PropsWithChildren) => React.JSX.Element;
|
|
52
52
|
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -58,7 +58,7 @@ interface OkendoProviderProps {
|
|
|
58
58
|
productUrlFormatter?: (product: ReviewProduct) => string;
|
|
59
59
|
cdnDomain?: string;
|
|
60
60
|
}
|
|
61
|
-
declare const OkendoProvider: ({
|
|
61
|
+
declare const OkendoProvider: ({ okendoProviderData, customerAccessToken, productUrlFormatter, cdnDomain, children, }: OkendoProviderProps & PropsWithChildren) => React.JSX.Element;
|
|
62
62
|
|
|
63
63
|
interface MetafieldValue {
|
|
64
64
|
value: string;
|