@okendo/shopify-hydrogen 2.0.2 → 2.1.0

package/README.md

@@ -6,7 +6,7 @@ This package brings [Okendo's review widgets](https://www.okendo.io/blog/widget-
 
 ## Requirements
 
-- A Shopify store with the **Okendo: Product Reviews & UCG** app installed and configured.
+- A Shopify store with the [**Okendo: Product Reviews & UCG**](https://apps.shopify.com/okendo-reviews) app installed and configured.
 - For existing merchants, your store must be upgraded to Okendo's Widget Plus widgets. It is free to upgrade. For more information please [contact Okendo Support](mailto:support@okendo.io).
 - A current Okendo subscription.
 - A [Storefront access token](https://github.com/okendo/okendo-shopify-hydrogen-demo/wiki/Configure-Shopify-Storefront-API).
@@ -16,6 +16,8 @@ This package brings [Okendo's review widgets](https://www.okendo.io/blog/widget-
 
 Our demo store, which is based on the demo store provided by Shopify, can be found [here](https://github.com/okendo/okendo-shopify-hydrogen-demo).
 
+> Note: there have been multiple versions of Shopify's Hydrogen demo store. If you project is based on an old version of it, consult our version history to find out how to add Okendo to it.
+
 ## How it works
 
 This package provides:
@@ -25,7 +27,7 @@ This package provides:
 
 The function `getOkendoProviderData` needs to be called in the `loader` function of the `root.tsx` file in the Hydrogen 2 store. The data is then retrieved in `App` through `useLoaderData` and provided to `OkendoProvider` which is added in the `body` of the HTML returned by `App`.
 
-Then the components `OkendoStarRating` and `OkendoReviews` can be added on the store pages. There are a few more bits of configuration to do, please see below.
+Then, the components `OkendoStarRating` and `OkendoReviews` can be added on the store pages. There are a few more bits of configuration to do, please see below.
 
 ## Expose Shopify Metafields <a id="expose-shopify-metafields" name="expose-shopify-metafields"></a>
 
@@ -254,7 +256,7 @@ mutation {
 
 ## Installation
 
-> The code examples provided in this section are based on the [demo store provided by Shopify](https://github.com/Shopify/hydrogen/tree/2023-01/templates/demo-store). You will find the following steps already done in [our demo store](https://github.com/okendo/okendo-shopify-hydrogen-demo).
+> The code examples provided in this section are based on the [demo store provided by Shopify](https://github.com/Shopify/hydrogen/tree/main/templates/demo-store). You will find the following steps already done in [our demo store](https://github.com/okendo/okendo-shopify-hydrogen-demo).
 
 Run:
 
@@ -273,44 +275,11 @@ import {
 } from "@okendo/shopify-hydrogen";
 ```
 
-Locate the `meta` function, and append the property `oke:subscriber_id` containing your Okendo subscriber ID:
-
-```ts
-	'oke:subscriber_id': '<your-okendo-subscriber-id>',
-```
-
-The `meta` function should now look like the following:
-
-```ts
-export const meta: MetaFunction = () => ({
-	charset: "utf-8",
-	viewport: "width=device-width,initial-scale=1",
-	"oke:subscriber_id": "<your-okendo-subscriber-id>",
-});
-```
-
-Locate the `loader` function and append the `okendoProviderData` property to the returned data:
-
-```ts
-okendoProviderData: await getOkendoProviderData({
-	context,
-	subscriberId: '<your-okendo-subscriber-id>',
-}),
-```
-
-The `loader` function returned data should now look like the following:
+Locate the `loader` function, append the `okendoProviderData` property to the returned data, and set `subscriberId` to your Okendo subscriber ID:
 
 ```ts
 return defer({
-	isLoggedIn: Boolean(customerAccessToken),
-	layout,
-	selectedLocale: context.storefront.i18n,
-	cart: cartId ? getCart(context, cartId) : undefined,
-	analytics: {
-		shopifySalesChannel: ShopifySalesChannel.hydrogen,
-		shopId: layout.shop.id,
-	},
-	seo,
+	...
 	okendoProviderData: await getOkendoProviderData({
 		context,
 		subscriberId: "<your-okendo-subscriber-id>",
@@ -318,78 +287,131 @@ return defer({
 });
 ```
 
-Locate the `App` function, append `OkendoProvider` to `body`, and provide it with the data returned by `getOkendoProviderData`:
+Locate the `App` function, add the `meta` tag `oke:subscriber_id` to `head`, and place your Okendo subscriber ID in its content:
+
+```ts
+<head>
+	<meta charSet="utf-8" />
+	<meta name="viewport" content="width=device-width,initial-scale=1" />
+	<meta name="oke:subscriber_id" content="<your-okendo-subscriber-id>" />
+	...
+```
+
+Append `OkendoProvider` to `body`, and pass it the data returned by `getOkendoProviderData`. If Content Security Policy is active in your project, you also need to provide the `nonce` (available with `const nonce = useNonce()` in Shopify's Hydrogen demo store):
 
 ```tsx
 ...
 <body>
-	<OkendoProvider okendoProviderData={data.okendoProviderData} />
+	<OkendoProvider
+		nonce={nonce}
+		okendoProviderData={data.okendoProviderData}
+	/>
 	...
 </body>
 ...
 ```
 
-### `app/data/fragments.ts`
+### `app/entry.server.tsx`
 
-Open `app/data/fragments.ts` and add the following import:
+> This is only necessary if Content Security Policy is active in your project.
 
-```ts
-import { OKENDO_PRODUCT_STAR_RATING_FRAGMENT } from "@okendo/shopify-hydrogen";
-```
+Locate the call to `createContentSecurityPolicy`, and add:
+
+- `https://d3hw6dc1ow8pp2.cloudfront.net`, `https://d3g5hqndtiniji.cloudfront.net`, and `data:` to `defaultSrc`
+- `https://d3hw6dc1ow8pp2.cloudfront.net` to `styleSrc`
+- `https://api.okendo.io` to `connectSrc`
 
-Then add `${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}` and `...OkendoStarRatingSnippet` to `PRODUCT_CARD_FRAGMENT`:
+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:
 
 ```ts
-export const PRODUCT_CARD_FRAGMENT = `#graphql
-	${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}
-	fragment ProductCard on Product {
-		id
-		title
-		publishedAt
-		handle
-		...OkendoStarRatingSnippet
-		variants(first: 1) {
-		...
+const { nonce, header, NonceProvider } = createContentSecurityPolicy({
+	defaultSrc: [
+		"'self'",
+		"localhost:*",
+		"https://cdn.shopify.com",
+		"https://d3hw6dc1ow8pp2.cloudfront.net",
+		"https://d3g5hqndtiniji.cloudfront.net",
+		"data:",
+	],
+	styleSrc: [
+		"'self'",
+		"'unsafe-inline'",
+		"https://cdn.shopify.com",
+		"localhost:*",
+		"https://d3hw6dc1ow8pp2.cloudfront.net",
+	],
+	connectSrc: [
+		"'self'",
+		"https://monorail-edge.shopifysvc.com",
+		"localhost:*",
+		"ws://localhost:*",
+		"ws://127.0.0.1:*",
+		"https://api.okendo.io",
+	],
+});
 ```
 
-### `app/components/ProductCard.tsx`
+### `app/routes/_index.tsx`
 
-Open `app/components/ProductCard.tsx` and add the following import:
+Add the following imports:
 
 ```ts
 import {
+	OKENDO_PRODUCT_STAR_RATING_FRAGMENT,
 	OkendoStarRating,
 	WithOkendoStarRatingSnippet,
 } from "@okendo/shopify-hydrogen";
 ```
 
-Tweak the type of the `product` prop to be:
+Locate the `RECOMMENDED_PRODUCTS_QUERY` GraphQL query, and append `${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}` `...OkendoStarRatingSnippet` to it:
 
 ```ts
-product: SerializeFrom<Product & WithOkendoStarRatingSnippet>;
+const RECOMMENDED_PRODUCTS_QUERY = `#graphql
+	${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}
+	fragment RecommendedProduct on Product {
+		id
+		title
+		handle
+		priceRange {
+			minVariantPrice {
+				amount
+				currencyCode
+			}
+		}
+		images(first: 1) {
+			nodes {
+				id
+				url
+				altText
+				width
+				height
+			}
+		}
+		...OkendoStarRatingSnippet
+	}
+	query RecommendedProducts ($country: CountryCode, $language: LanguageCode)
+		@inContext(country: $country, language: $language) {
+		products(first: 4, sortKey: UPDATED_AT, reverse: true) {
+			nodes {
+				...RecommendedProduct
+			}
+		}
+	}
+` as const;
 ```
 
-`ProductCard` should now look like this:
+Tweak the type of the `products` prop of `RecommendedProducts`:
 
 ```ts
-export function ProductCard({
-	product,
-	label,
-	className,
-	loading,
-	onClick,
-	quickAdd,
-}: {
-	product: SerializeFrom<Product & WithOkendoStarRatingSnippet>;
-	label?: string;
-	className?: string;
-	loading?: HTMLImageElement['loading'];
-	onClick?: () => void;
-	quickAdd?: boolean;
-}) {
+products: Promise<{
+	products: {
+		nodes: (RecommendedProductsQuery['products']['nodes'][0] &
+			WithOkendoStarRatingSnippet)[];
+	};
+};
 ```
 
-Add the `OkendoStarRating` component:
+Add `OkendoStarRating` to `RecommendedProducts`:
 
 ```tsx
 <OkendoStarRating
@@ -398,144 +420,137 @@ Add the `OkendoStarRating` component:
 />
 ```
 
-For instance, you can add it below the product title, like this:
+For instance, we can add it below the product title, like this:
 
 ```tsx
-<Text
-	className="w-full overflow-hidden whitespace-nowrap text-ellipsis "
-	as="h3"
->
-	{product.title}
-</Text>
+<Image
+	data={product.images.nodes[0]}
+	aspectRatio="1/1"
+	sizes="(min-width: 45em) 20vw, 50vw"
+/>
+<h4>{product.title}</h4>
 <OkendoStarRating
 	productId={product.id}
 	okendoStarRatingSnippet={product.okendoStarRatingSnippet}
 />
+<small>
+	<Money data={product.priceRange.minVariantPrice} />
+</small>
 ```
 
-### `app/routes/($lang)/products/$productHandle.tsx`
+We now have the Okendo Star Rating widget visible on our page:
+
+![Okendo's Star Rating widget](./okendo-star-rating-widget.png)
+
+### `app/routes/products.$handle.tsx`
 
-Open `app/routes/($lang)/products/$productHandle.tsx` and add the following imports:
+Add the following imports:
 
 ```ts
 import {
+	OKENDO_PRODUCT_REVIEWS_FRAGMENT,
+	OKENDO_PRODUCT_STAR_RATING_FRAGMENT,
 	OkendoReviews,
 	OkendoStarRating,
-	WithOkendoStarRatingSnippet,
 	WithOkendoReviewsSnippet,
-	OKENDO_PRODUCT_STAR_RATING_FRAGMENT,
-	OKENDO_PRODUCT_REVIEWS_FRAGMENT,
+	WithOkendoStarRatingSnippet,
 } from "@okendo/shopify-hydrogen";
 ```
 
-In the storefront query, tweak the type of `product` to be:
-
-```ts
-product: ProductType & {
-	selectedVariant?: ProductVariant;
-} & WithOkendoStarRatingSnippet &
-	WithOkendoReviewsSnippet;
-```
-
-The storefront query should now look like this:
+Locate the `PRODUCT_FRAGMENT` GraphQL query, and append `${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}`, `${OKENDO_PRODUCT_REVIEWS_FRAGMENT}`, `...OkendoStarRatingSnippet`, and `...OkendoReviewsSnippet` to it:
 
 ```ts
-const { shop, product } = await context.storefront.query<{
-	product: ProductType & {
-		selectedVariant?: ProductVariant;
-	} & WithOkendoStarRatingSnippet &
-		WithOkendoReviewsSnippet;
-	shop: Shop;
-}>(PRODUCT_QUERY, {
-	variables: {
-		handle: productHandle,
-		selectedOptions,
-		country: context.storefront.i18n.country,
-		language: context.storefront.i18n.language,
-	},
-});
+const PRODUCT_FRAGMENT = `#graphql
+	${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}
+	${OKENDO_PRODUCT_REVIEWS_FRAGMENT}
+	fragment Product on Product {
+		id
+		title
+		vendor
+		handle
+		descriptionHtml
+		description
+		options {
+			name
+			values
+		}
+		selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions) {
+			...ProductVariant
+		}
+		variants(first: 1) {
+			nodes {
+				...ProductVariant
+			}
+		}
+		seo {
+			description
+			title
+		}
+		...OkendoStarRatingSnippet
+		...OkendoReviewsSnippet
+	}
+	${PRODUCT_VARIANT_FRAGMENT}
+` as const;
 ```
 
-Add the `OkendoStarRating` component:
+Add `OkendoReviews` to `Product`:
 
 ```tsx
-<OkendoStarRating
+<OkendoReviews
 	productId={product.id}
-	okendoStarRatingSnippet={product.okendoStarRatingSnippet}
+	okendoReviewsSnippet={product.okendoReviewsSnippet}
 />
 ```
 
-For instance, you can add it between the product title and the store name, like this:
+For instance, we can add it below the product section, like this:
 
 ```tsx
-<Heading as="h1" className="whitespace-normal">
-	{title}
-</Heading>
-<OkendoStarRating
-	productId={product.id}
-	okendoStarRatingSnippet={product.okendoStarRatingSnippet}
-/>
-{vendor && (
-	<Text className={'opacity-50 font-medium'}>{vendor}</Text>
-)}
+<>
+	<div className="product">
+		<ProductImage image={selectedVariant?.image} />
+		<ProductMain
+			selectedVariant={selectedVariant}
+			product={product}
+			variants={variants}
+		/>
+	</div>
+
+	<OkendoReviews
+		productId={product.id}
+		okendoReviewsSnippet={product.okendoReviewsSnippet}
+	/>
+</>
 ```
 
-Add the `OkendoReviews` component:
+Tweak the type of the `product` prop of `ProductMain`:
 
-```tsx
-<OkendoReviews
-	productId={product.id}
-	okendoReviewsSnippet={product.okendoReviewsSnippet}
-/>
+```ts
+product: ProductFragment &
+	WithOkendoStarRatingSnippet &
+	WithOkendoReviewsSnippet;
 ```
 
-For instance, you can add it below the product section:
+Add `OkendoStarRating` to `ProductMain`:
 
 ```tsx
-...
-</Section>
-<OkendoReviews
+<OkendoStarRating
 	productId={product.id}
-	okendoReviewsSnippet={product.okendoReviewsSnippet}
+	okendoStarRatingSnippet={product.okendoStarRatingSnippet}
 />
-<Suspense fallback={<Skeleton className="h-32" />}>
-...
 ```
 
-Locate `PRODUCT_QUERY` and add the following to it:
+For instance, we can add it below the product title, like this:
 
-```ts
-	...
-	${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}
-	${OKENDO_PRODUCT_REVIEWS_FRAGMENT}
-	...
-			...OkendoStarRatingSnippet
-			...OkendoReviewsSnippet
+```tsx
+<div className="product-main">
+	<h1>{title}</h1>
+	<OkendoStarRating
+		productId={product.id}
+		okendoStarRatingSnippet={product.okendoStarRatingSnippet}
+	/>
+	<ProductPrice selectedVariant={selectedVariant} />
 ```
 
-It should now look like this:
+We now have the Okendo Star Rating and Reviews widgets visible on our product page:
 
-```ts
-const PRODUCT_QUERY = `#graphql
-	${MEDIA_FRAGMENT}
-	${PRODUCT_VARIANT_FRAGMENT}
-	${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}
-	${OKENDO_PRODUCT_REVIEWS_FRAGMENT}
-query Product(
-		$country: CountryCode
-		$language: LanguageCode
-		$handle: String!
-		$selectedOptions: [SelectedOptionInput!]!
-	) @inContext(country: $country, language: $language) {
-		product(handle: $handle) {
-			id
-			title
-			vendor
-			handle
-			descriptionHtml
-			description
-			...OkendoStarRatingSnippet
-			...OkendoReviewsSnippet
-			options {
-			...
-```
+![Okendo's Star Rating and Reviews widgets](./okendo-star-rating-and-reviews-widgets.png)

package/dist/cjs/index.js

@@ -1 +1 @@
-"use strict";var t=require("react");const e=({dataAttributes:e,metafieldContent:n=""})=>{const r=t.useRef(null),s=()=>{r.current&&window.okeWidgetApi.initWidget(r.current)};return t.useEffect((()=>(window.okeWidgetApi&&r.current?s():document.addEventListener("oke-script-loaded",s),()=>{document.removeEventListener("oke-script-loaded",s)})),[e]),t.createElement("div",{ref:r,key:JSON.stringify(e),...e,dangerouslySetInnerHTML:{__html:n}})},n=/^[0-9]*$/;function r(t){if(t)return`shopify-${n.test(t)?t:t.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=({okendoProviderData:e})=>{if(!e)return null;const{reviewsHeaderConfig:n,cssVariables:r,customCss:s,initScriptContents:i,preRenderStyleTags:o,starSymbols:a}=e,d="(product) =>\n\t\tproduct && productHandle\n\t\t\t? \"/products/\" + product.productHandle + \"/\" + (product.variantId ? '?variantId=' + product.variantId : '')\n\t\t\t: undefined",l=(r??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),c=s?s.replace('<style id="oke-reviews-custom-css">',"").replace("</style>",""):"";return t.createElement("div",null,t.createElement("script",{id:"oke-reviews-settings",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify(n)}}),t.createElement("style",{id:"oke-css-vars",dangerouslySetInnerHTML:{__html:l}}),c&&t.createElement("style",{id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:c}}),i&&t.createElement("script",{dangerouslySetInnerHTML:{__html:i}}),t.createElement("script",{type:"text/javascript",dangerouslySetInnerHTML:{__html:`window.okeProductUrlFormatter = ${d.toString()}`}}),o&&t.createElement("div",{dangerouslySetInnerHTML:{__html:o}}),a&&t.createElement("div",{dangerouslySetInnerHTML:{__html:a}}))},exports.OkendoReviews=({productId:n,okendoReviewsSnippet:s})=>{const i={"data-oke-widget":"","data-oke-reviews-product-id":r(n)};return t.createElement(e,{dataAttributes:i,metafieldContent:s?.value})},exports.OkendoStarRating=({productId:n,okendoStarRatingSnippet:s})=>{const i={"data-oke-star-rating":"","data-oke-reviews-product-id":r(n)};return t.createElement(e,{dataAttributes:i,metafieldContent:s?.value})},exports.getOkendoProviderData=async({context:t,subscriberId:e,apiDomain:n,cdnDomain:r})=>{const s=`https://${n??"api.okendo.io/v1"}/stores/${e}/widget_plus_settings`,i=await fetch(s);if(!i.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${e}'.`),null;const{reviewsHeaderConfig:o,cssVariables:a,customCss:d,starSymbols:l}=await i.json(),c=await fetch(`https://${r??"cdn-static.okendo.io"}/reviews-widget-plus/js/okendo-reviews.js`);if(!c.ok)return console.error("Failed to retrieve widget initialisation script."),null;const p=await c.text(),{shop:{widgetPreRenderStyleTags:u}}=await t.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=u?.value??"";return g||console.warn("Failed to retrieve pre-rendered widget style settings."),{reviewsHeaderConfig:o,cssVariables:a,customCss:d,initScriptContents:p,preRenderStyleTags:g,starSymbols:l}};
+"use strict";var t=require("react");const e=({dataAttributes:e,metafieldContent:n=""})=>{const r=t.useRef(null),o=()=>{r.current&&window.okeWidgetApi.initWidget(r.current)};return t.useEffect((()=>(window.okeWidgetApi&&r.current?o():document.addEventListener("oke-script-loaded",o),()=>{document.removeEventListener("oke-script-loaded",o)})),[e]),t.createElement("div",{ref:r,key:JSON.stringify(e),...e,dangerouslySetInnerHTML:n?{__html:n}:void 0})},n=/^[0-9]*$/;function r(t){if(t)return`shopify-${n.test(t)?t:t.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:e,okendoProviderData:n,productUrlFormatter:r})=>{if(!n)return null;const{reviewsHeaderConfig:o,cssVariables:s,customCss:i,initScriptContents:a,preRenderStyleTags:d,starSymbols:c}=n,l="function"==typeof r?r.toString():"string"==typeof r?r:"(product) =>\n\t\t\t\t\tproduct && product.productHandle\n\t\t\t\t\t\t? \"/products/\" + product.productHandle + \"/\" + (product.variantId ? '?variantId=' + product.variantId : '')\n\t\t\t\t\t\t: undefined",p=(s??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),u=i?i.replace('<style id="oke-reviews-custom-css">',"").replace("</style>",""):"";return t.createElement(t.Fragment,null,t.createElement("script",{nonce:e||"",id:"oke-reviews-settings",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify(o)}}),t.createElement("style",{nonce:e||"",id:"oke-css-vars",dangerouslySetInnerHTML:{__html:p}}),u&&t.createElement("style",{nonce:e||"",id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:u}}),a&&t.createElement("script",{nonce:e||"",dangerouslySetInnerHTML:{__html:a}}),t.createElement("script",{nonce:e||"",type:"text/javascript",dangerouslySetInnerHTML:{__html:`window.okeProductUrlFormatter = ${l.toString()}`}}),d&&t.createElement("div",{dangerouslySetInnerHTML:{__html:d}}),c&&t.createElement("div",{dangerouslySetInnerHTML:{__html:c}}))},exports.OkendoReviews=({productId:n,okendoReviewsSnippet:o})=>{const s={"data-oke-widget":"","data-oke-reviews-product-id":r(n)};return t.createElement(e,{dataAttributes:s,metafieldContent:o?.value})},exports.OkendoStarRating=({productId:n,okendoStarRatingSnippet:o})=>{const s={"data-oke-star-rating":"","data-oke-reviews-product-id":r(n)};return t.createElement(e,{dataAttributes:s,metafieldContent:o?.value})},exports.getOkendoProviderData=async({context:t,subscriberId:e,apiDomain:n,cdnDomain:r})=>{const o=`https://${n||"api.okendo.io/v1"}/stores/${e}/widget_plus_settings`,s=await fetch(o);if(!s.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${e}'.`),null;const{reviewsHeaderConfig:i,cssVariables:a,customCss:d,starSymbols:c}=await s.json(),l=await fetch(`https://${r||"cdn-static.okendo.io"}/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:u}}=await t.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=u?.value??"";return g||console.warn("Failed to retrieve pre-rendered widget style settings."),{reviewsHeaderConfig:i,cssVariables:a,customCss:d,initScriptContents:p,preRenderStyleTags:g,starSymbols:c}};

package/dist/cjs/types/components/OkendoProvider/OkendoProvider.d.ts

@@ -23,8 +23,21 @@ export declare const getOkendoProviderData: ({ context, subscriberId, apiDomain,
     preRenderStyleTags: string;
     starSymbols: string;
 } | null>;
+interface ReviewProduct {
+    productHandle?: string;
+    productId: string;
+    variantId?: string;
+}
 interface OkendoProviderProps {
+    /**
+     * A nonce that will be added to Okendo's scripts;
+     * this is required if Content Security Policy is set up on your store.
+     */
+    nonce?: string;
+    /** The data returned by `getOkendoProviderData` */
     okendoProviderData: Partial<OkendoProviderData> | null;
+    /** An optional product URL formatter */
+    productUrlFormatter?: (product: ReviewProduct) => string;
 }
 export declare const OkendoProvider: FC<OkendoProviderProps>;
 export {};

package/dist/cjs/types/components/OkendoReviews/OkendoReviews.d.ts

@@ -5,7 +5,7 @@ export interface WithOkendoReviewsSnippet {
 }
 interface OkendoReviewsProps {
     productId: string;
-    okendoReviewsSnippet: MetafieldValue;
+    okendoReviewsSnippet?: MetafieldValue;
 }
 export declare const OkendoReviews: FC<OkendoReviewsProps>;
 export {};

package/dist/cjs/types/components/OkendoStarRating/OkendoStarRating.d.ts

@@ -5,7 +5,7 @@ export interface WithOkendoStarRatingSnippet {
 }
 interface OkendoStarRatingProps {
     productId: string;
-    okendoStarRatingSnippet: MetafieldValue;
+    okendoStarRatingSnippet?: MetafieldValue;
 }
 export declare const OkendoStarRating: FC<OkendoStarRatingProps>;
 export {};

package/dist/esm/index.js

@@ -1 +1 @@
-import t,{useRef as e,useEffect as n}from"react";const r=async({context:t,subscriberId:e,apiDomain:n,cdnDomain:r})=>{const i=`https://${n??"api.okendo.io/v1"}/stores/${e}/widget_plus_settings`,s=await fetch(i);if(!s.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${e}'.`),null;const{reviewsHeaderConfig:o,cssVariables:a,customCss:d,starSymbols:l}=await s.json(),c=await fetch(`https://${r??"cdn-static.okendo.io"}/reviews-widget-plus/js/okendo-reviews.js`);if(!c.ok)return console.error("Failed to retrieve widget initialisation script."),null;const p=await c.text(),{shop:{widgetPreRenderStyleTags:u}}=await t.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'),m=u?.value??"";return m||console.warn("Failed to retrieve pre-rendered widget style settings."),{reviewsHeaderConfig:o,cssVariables:a,customCss:d,initScriptContents:p,preRenderStyleTags:m,starSymbols:l}},i=({okendoProviderData:e})=>{if(!e)return null;const{reviewsHeaderConfig:n,cssVariables:r,customCss:i,initScriptContents:s,preRenderStyleTags:o,starSymbols:a}=e,d="(product) =>\n\t\tproduct && productHandle\n\t\t\t? \"/products/\" + product.productHandle + \"/\" + (product.variantId ? '?variantId=' + product.variantId : '')\n\t\t\t: undefined",l=(r??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),c=i?i.replace('<style id="oke-reviews-custom-css">',"").replace("</style>",""):"";return t.createElement("div",null,t.createElement("script",{id:"oke-reviews-settings",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify(n)}}),t.createElement("style",{id:"oke-css-vars",dangerouslySetInnerHTML:{__html:l}}),c&&t.createElement("style",{id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:c}}),s&&t.createElement("script",{dangerouslySetInnerHTML:{__html:s}}),t.createElement("script",{type:"text/javascript",dangerouslySetInnerHTML:{__html:`window.okeProductUrlFormatter = ${d.toString()}`}}),o&&t.createElement("div",{dangerouslySetInnerHTML:{__html:o}}),a&&t.createElement("div",{dangerouslySetInnerHTML:{__html:a}}))},s=({dataAttributes:r,metafieldContent:i=""})=>{const s=e(null),o=()=>{s.current&&window.okeWidgetApi.initWidget(s.current)};return n((()=>(window.okeWidgetApi&&s.current?o():document.addEventListener("oke-script-loaded",o),()=>{document.removeEventListener("oke-script-loaded",o)})),[r]),t.createElement("div",{ref:s,key:JSON.stringify(r),...r,dangerouslySetInnerHTML:{__html:i}})},o=/^[0-9]*$/;function a(t){if(t)return`shopify-${o.test(t)?t:t.split("/").slice(-1)[0]}`}const d=({productId:e,okendoReviewsSnippet:n})=>{const r={"data-oke-widget":"","data-oke-reviews-product-id":a(e)};return t.createElement(s,{dataAttributes:r,metafieldContent:n?.value})},l=({productId:e,okendoStarRatingSnippet:n})=>{const r={"data-oke-star-rating":"","data-oke-reviews-product-id":a(e)};return t.createElement(s,{dataAttributes:r,metafieldContent:n?.value})},c='#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',p='#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{p as OKENDO_PRODUCT_REVIEWS_FRAGMENT,c as OKENDO_PRODUCT_STAR_RATING_FRAGMENT,i as OkendoProvider,d as OkendoReviews,l as OkendoStarRating,r as getOkendoProviderData};
+import t,{useRef as e,useEffect as n}from"react";const r=async({context:t,subscriberId:e,apiDomain:n,cdnDomain:r})=>{const o=`https://${n||"api.okendo.io/v1"}/stores/${e}/widget_plus_settings`,i=await fetch(o);if(!i.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${e}'.`),null;const{reviewsHeaderConfig:s,cssVariables:a,customCss:d,starSymbols:c}=await i.json(),l=await fetch(`https://${r||"cdn-static.okendo.io"}/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:u}}=await t.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'),m=u?.value??"";return m||console.warn("Failed to retrieve pre-rendered widget style settings."),{reviewsHeaderConfig:s,cssVariables:a,customCss:d,initScriptContents:p,preRenderStyleTags:m,starSymbols:c}},o=({nonce:e,okendoProviderData:n,productUrlFormatter:r})=>{if(!n)return null;const{reviewsHeaderConfig:o,cssVariables:i,customCss:s,initScriptContents:a,preRenderStyleTags:d,starSymbols:c}=n,l="function"==typeof r?r.toString():"string"==typeof r?r:"(product) =>\n\t\t\t\t\tproduct && product.productHandle\n\t\t\t\t\t\t? \"/products/\" + product.productHandle + \"/\" + (product.variantId ? '?variantId=' + product.variantId : '')\n\t\t\t\t\t\t: undefined",p=(i??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),u=s?s.replace('<style id="oke-reviews-custom-css">',"").replace("</style>",""):"";return t.createElement(t.Fragment,null,t.createElement("script",{nonce:e||"",id:"oke-reviews-settings",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify(o)}}),t.createElement("style",{nonce:e||"",id:"oke-css-vars",dangerouslySetInnerHTML:{__html:p}}),u&&t.createElement("style",{nonce:e||"",id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:u}}),a&&t.createElement("script",{nonce:e||"",dangerouslySetInnerHTML:{__html:a}}),t.createElement("script",{nonce:e||"",type:"text/javascript",dangerouslySetInnerHTML:{__html:`window.okeProductUrlFormatter = ${l.toString()}`}}),d&&t.createElement("div",{dangerouslySetInnerHTML:{__html:d}}),c&&t.createElement("div",{dangerouslySetInnerHTML:{__html:c}}))},i=({dataAttributes:r,metafieldContent:o=""})=>{const i=e(null),s=()=>{i.current&&window.okeWidgetApi.initWidget(i.current)};return n((()=>(window.okeWidgetApi&&i.current?s():document.addEventListener("oke-script-loaded",s),()=>{document.removeEventListener("oke-script-loaded",s)})),[r]),t.createElement("div",{ref:i,key:JSON.stringify(r),...r,dangerouslySetInnerHTML:o?{__html:o}:void 0})},s=/^[0-9]*$/;function a(t){if(t)return`shopify-${s.test(t)?t:t.split("/").slice(-1)[0]}`}const d=({productId:e,okendoReviewsSnippet:n})=>{const r={"data-oke-widget":"","data-oke-reviews-product-id":a(e)};return t.createElement(i,{dataAttributes:r,metafieldContent:n?.value})},c=({productId:e,okendoStarRatingSnippet:n})=>{const r={"data-oke-star-rating":"","data-oke-reviews-product-id":a(e)};return t.createElement(i,{dataAttributes:r,metafieldContent:n?.value})},l='#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',p='#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{p as OKENDO_PRODUCT_REVIEWS_FRAGMENT,l as OKENDO_PRODUCT_STAR_RATING_FRAGMENT,o as OkendoProvider,d as OkendoReviews,c as OkendoStarRating,r as getOkendoProviderData};

package/dist/esm/types/components/OkendoProvider/OkendoProvider.d.ts

@@ -23,8 +23,21 @@ export declare const getOkendoProviderData: ({ context, subscriberId, apiDomain,
     preRenderStyleTags: string;
     starSymbols: string;
 } | null>;
+interface ReviewProduct {
+    productHandle?: string;
+    productId: string;
+    variantId?: string;
+}
 interface OkendoProviderProps {
+    /**
+     * A nonce that will be added to Okendo's scripts;
+     * this is required if Content Security Policy is set up on your store.
+     */
+    nonce?: string;
+    /** The data returned by `getOkendoProviderData` */
     okendoProviderData: Partial<OkendoProviderData> | null;
+    /** An optional product URL formatter */
+    productUrlFormatter?: (product: ReviewProduct) => string;
 }
 export declare const OkendoProvider: FC<OkendoProviderProps>;
 export {};

package/dist/esm/types/components/OkendoReviews/OkendoReviews.d.ts

@@ -5,7 +5,7 @@ export interface WithOkendoReviewsSnippet {
 }
 interface OkendoReviewsProps {
     productId: string;
-    okendoReviewsSnippet: MetafieldValue;
+    okendoReviewsSnippet?: MetafieldValue;
 }
 export declare const OkendoReviews: FC<OkendoReviewsProps>;
 export {};

package/dist/esm/types/components/OkendoStarRating/OkendoStarRating.d.ts

@@ -5,7 +5,7 @@ export interface WithOkendoStarRatingSnippet {
 }
 interface OkendoStarRatingProps {
     productId: string;
-    okendoStarRatingSnippet: MetafieldValue;
+    okendoStarRatingSnippet?: MetafieldValue;
 }
 export declare const OkendoStarRating: FC<OkendoStarRatingProps>;
 export {};

package/dist/index.d.ts

@@ -25,8 +25,21 @@ declare const getOkendoProviderData: ({ context, subscriberId, apiDomain, cdnDom
     preRenderStyleTags: string;
     starSymbols: string;
 } | null>;
+interface ReviewProduct {
+    productHandle?: string;
+    productId: string;
+    variantId?: string;
+}
 interface OkendoProviderProps {
+    /**
+     * A nonce that will be added to Okendo's scripts;
+     * this is required if Content Security Policy is set up on your store.
+     */
+    nonce?: string;
+    /** The data returned by `getOkendoProviderData` */
     okendoProviderData: Partial<OkendoProviderData> | null;
+    /** An optional product URL formatter */
+    productUrlFormatter?: (product: ReviewProduct) => string;
 }
 declare const OkendoProvider: FC<OkendoProviderProps>;
 
@@ -39,7 +52,7 @@ interface WithOkendoReviewsSnippet {
 }
 interface OkendoReviewsProps {
     productId: string;
-    okendoReviewsSnippet: MetafieldValue;
+    okendoReviewsSnippet?: MetafieldValue;
 }
 declare const OkendoReviews: FC<OkendoReviewsProps>;
 
@@ -48,11 +61,11 @@ interface WithOkendoStarRatingSnippet {
 }
 interface OkendoStarRatingProps {
     productId: string;
-    okendoStarRatingSnippet: MetafieldValue;
+    okendoStarRatingSnippet?: MetafieldValue;
 }
 declare const OkendoStarRating: FC<OkendoStarRatingProps>;
 
 declare const 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";
 declare const 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";
 
-export { OKENDO_PRODUCT_REVIEWS_FRAGMENT, OKENDO_PRODUCT_STAR_RATING_FRAGMENT, OkendoProvider, OkendoReviews, OkendoStarRating, WithOkendoReviewsSnippet, WithOkendoStarRatingSnippet, getOkendoProviderData };
+export { OKENDO_PRODUCT_REVIEWS_FRAGMENT, OKENDO_PRODUCT_STAR_RATING_FRAGMENT, OkendoProvider, OkendoReviews, OkendoStarRating, type WithOkendoReviewsSnippet, type WithOkendoStarRatingSnippet, getOkendoProviderData };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@okendo/shopify-hydrogen",
-    "version": "2.0.2",
+    "version": "2.1.0",
     "description": "Okendo React components for Shopify Hydrogen 2 (Remix)",
     "author": "Okendo",
     "license": "SEE LICENSE IN LICENSE.txt",
@@ -15,32 +15,33 @@
     "types": "dist/index.d.ts",
     "scripts": {
         "build": "npm run eslint -- --max-warnings=0 && rimraf dist && rollup -c",
+        "prepack": "npm run build",
         "eslint": "eslint src"
     },
     "devDependencies": {
-        "@okendo/reviews-common": "^5.38.0",
-        "@okendo/reviews-widget-plus": "^0.67.0",
+        "@okendo/reviews-common": "^5.163.1",
+        "@okendo/reviews-widget-plus": "^0.68.3",
         "@okendo/tsconfig": "0.0.2",
-        "@rollup/plugin-commonjs": "^24.1.0",
-        "@rollup/plugin-node-resolve": "^15.0.2",
-        "@rollup/plugin-terser": "^0.4.1",
-        "@rollup/plugin-typescript": "^11.1.0",
-        "@types/react": "^18.0.20",
-        "@types/react-dom": "^18.0.6",
-        "@typescript-eslint/eslint-plugin": "^5.58.0",
-        "@typescript-eslint/parser": "^5.58.0",
-        "eslint": "^8.20.0",
-        "eslint-plugin-react": "^7.32.2",
+        "@rollup/plugin-commonjs": "^25.0.7",
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-terser": "^0.4.4",
+        "@rollup/plugin-typescript": "^11.1.5",
+        "@types/react": "^18.2.45",
+        "@types/react-dom": "^18.2.18",
+        "@typescript-eslint/eslint-plugin": "^6.15.0",
+        "@typescript-eslint/parser": "^6.15.0",
+        "eslint": "^8.56.0",
+        "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
-        "rimraf": "^5.0.0",
-        "rollup": "^3.20.2",
-        "rollup-plugin-dts": "^5.3.0",
+        "rimraf": "^5.0.5",
+        "rollup": "^4.9.1",
+        "rollup-plugin-dts": "^6.1.0",
         "rollup-plugin-peer-deps-external": "^2.2.4",
-        "typescript": "^4.9.5"
+        "typescript": "^5.3.3"
     },
     "peerDependencies": {
-        "@shopify/hydrogen": "^2023.1.6",
-        "@shopify/remix-oxygen": "^1.0.4",
+        "@shopify/hydrogen": "*",
+        "@shopify/remix-oxygen": "*",
         "react": "^18.2.0"
     }
 }