@okendo/shopify-hydrogen 2.1.6 → 2.2.0

package/README.md

@@ -1,4 +1,4 @@
-> Note: this package is to be used on stores built with Hydrogen v2, based on Remix. If your store is built with the now deprecated Hydrogen v1, please use [version 1 of this package](https://www.npmjs.com/package/@okendo/shopify-hydrogen/v/1.3.0).
+> Note: this package is to be used on stores built with Hydrogen v2, based on Remix. If your store is built with the deprecated Hydrogen v1, please use the [version 1](https://www.npmjs.com/package/@okendo/shopify-hydrogen/v/1.3.0) of this package.
 
 # Okendo Hydrogen 2 (Remix) React Components
 
@@ -15,24 +15,13 @@ 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 your project is based on an old version of it, consult our version history to find out how to add Okendo to it.
+> Note: there have been multiple versions of Shopify's Hydrogen demo store. If your project is based on an old version of it, consult the history of our dome store's repository.
 
-## How it works
+## Exposition of Shopify Metafields <a id="expose-shopify-metafields" name="expose-shopify-metafields"></a>
 
-This package provides:
-
-- one function: `getOkendoProviderData`
-- three React components: `OkendoProvider`, `OkendoStarRating`, and `OkendoReviews`
-
-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.
-
-## Expose Shopify Metafields <a id="expose-shopify-metafields" name="expose-shopify-metafields"></a>
-
-Okendo Reviews use Product and Shop [metafields](https://shopify.dev/api/examples/metafields). You will need to expose these metafields so that they can be retrieved by your Hydrogen app.
+Okendo Reviews use Product and Shop [metafields](https://help.shopify.com/en/manual/custom-data/metafields). You will need to expose these metafields so that they can be retrieved by your Hydrogen app.
 
-At the moment, Shopify does not have a way of exposing Shop Metafields through their admin UI, so the preferred method is to [contact Okendo Support](mailto:support@okendo.io).
+At the moment, Shopify does not have a way of exposing Shop Metafields through their admin UI, so the preferred method is to [contact Okendo's Support](mailto:support@okendo.io).
 
 <details>
 
@@ -502,6 +491,18 @@ mutation {
 
 ## Installation
 
+This package provides:
+
+- one function: `getOkendoProviderData`,
+- one provider: `OkendoProvider`,
+- two React components: `OkendoStarRating` and `OkendoReviews`.
+
+The function `getOkendoProviderData` needs to be called in the `loader` function of `root.tsx` in the Hydrogen 2 store. The data is then passed to `OkendoProvider`, which is added to your website's `body` and wraps everything in it.
+
+> Important: `OkendoProvider` supports two ways of loading the data returned by `getOkendoProviderData`: either as a promise, or as the data itself. Its behaviour is different between the two ways — this is explained 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.
+
 > The code examples provided in this section are based on the Shopify template store created by running `npm create @shopify/hydrogen@latest` (see [Shopify's documentation](https://shopify.dev/docs/custom-storefronts/hydrogen/getting-started)). You will find the following steps already done in [our demo store](https://github.com/okendo/okendo-shopify-hydrogen-demo).
 
 Run:
@@ -512,6 +513,26 @@ npm i @okendo/shopify-hydrogen
 
 ### `app/root.tsx`
 
+`OkendoProvider` supports two ways of loading the data returned by `getOkendoProviderData`:
+
+- **as a promise**: in this case, the query getting the data is deferred, which allows your page to load as quickly as it does without Okendo's widgets. When the data is ready, it is sent to the browser, and Okendo's widgets are rendered. Blank placeholders are shown until the widgets are rendered. You can customise these placeholders to show loading spinners or skeletons that fit well with your store's theme.
+- **as the data**: in this case, the query getting the data needs to complete before your page loads, which can add a couple hundreds milliseconds of loading time. Widgets are then rendered server-side, and so appear as soon as your page loads.
+
+To summarise the differences between the two behaviours:
+
+- Pass the promise to `OkendoProvider` — so don't use `await` with `getOkendoProviderData`:
+
+  - The page loading time won't be increased at all.
+  - The widgets will be rendered client-side.
+  - Placeholders (which are customisable) are shown until the widgets are rendered.
+
+- Pass the data to `OkendoProvider` — so use `await` with `getOkendoProviderData`:
+  - The page loading time can be increased by a couple hundreds milliseconds.
+  - The widgets will be rendered server-side.
+  - The widgets are shown as soon as the page loads — no placeholders needed.
+
+You can easily experiment with the two ways, and decide which is the one you'd like to keep for your store.
+
 Open `app/root.tsx` and add the following import:
 
 ```ts
@@ -521,17 +542,19 @@ import {
 } from "@okendo/shopify-hydrogen";
 ```
 
-Locate the `loader` function, append `okendoProviderData` to the returned data as shown below, and set `subscriberId` to your Okendo subscriber ID:
+Locate the `loader` function, append `okendoProviderData` to the returned data as shown below, and set `subscriberId` to your Okendo subscriber ID.
+
+As explained above, set `okendoProviderData` to either `getOkendoProviderData(...)`, or `await getOkendoProviderData(...)`:
 
 ```ts
 return defer(
 	{
 		...
-		okendoProviderData: await getOkendoProviderData({
+		okendoProviderData: /* place `await` here if you want server-rendered widgets */ getOkendoProviderData({
 			context,
 			subscriberId: "<your-okendo-subscriber-id>",
 		}),
-	}
+	},
 );
 ```
 
@@ -545,7 +568,7 @@ Locate the `App` function, add the `meta` tag `oke:subscriber_id` to `head`, and
 	...
 ```
 
-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):
+Append `OkendoProvider` to `body`, and pass it the promise — or 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
 ...
@@ -553,8 +576,9 @@ Append `OkendoProvider` to `body`, and pass it the data returned by `getOkendoPr
 	<OkendoProvider
 		nonce={nonce}
 		okendoProviderData={data.okendoProviderData}
-	/>
-	...
+	>
+		...
+	</OkendoProvider>
 </body>
 ...
 ```
@@ -737,6 +761,8 @@ For instance, we can add it below the product title, like this:
 </small>
 ```
 
+> Note: if the widgets are rendered client-side (if you don't use `await` when calling `getOkendoProviderData`), you can provide your own placeholder by using the `placeholder` property of `OkendoStarRating`.
+
 We now have the Okendo Star Rating widget visible on our page:
 
 ![Okendo's Star Rating widget](./okendo-star-rating-widget.png)
@@ -847,6 +873,8 @@ For instance, we can add it below the product section, like this:
 </>
 ```
 
+> Note: if the widgets are rendered client-side (if you don't use `await` when calling `getOkendoProviderData`), you can provide your own placeholder by using the `placeholder` property of `OkendoReviews`.
+
 Tweak the type of the `product` prop of `ProductMain`:
 
 ```ts

package/dist/cjs/index.js

@@ -1 +1 @@
-"use strict";var t=require("react");const e=({dataAttributes:e,metafieldContent:n=""})=>{const r=t.useRef(null),o=function(e){const n=t.useRef();return t.useEffect((()=>{n.current=e})),n.current}(e),i=()=>{r.current&&window.okeWidgetApi.initWidget(r.current)};return t.useEffect((()=>{if(!o||e["data-oke-widget"]!==o["data-oke-widget"]||e["data-oke-star-rating"]!==o["data-oke-star-rating"]||e["data-oke-reviews-product-id"]!==o["data-oke-reviews-product-id"])return window.okeWidgetApi&&r.current?i():document.addEventListener("oke-script-loaded",i),()=>{document.removeEventListener("oke-script-loaded",i)}}),[e,o]),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: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",u=(i??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),p=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:u}}),p&&t.createElement("style",{nonce:e,id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:p}}),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 i={"data-oke-widget":"","data-oke-reviews-product-id":r(n)};return t.createElement(e,{dataAttributes:i,metafieldContent:o?.value})},exports.OkendoStarRating=({productId:n,okendoStarRatingSnippet:o})=>{const i={"data-oke-star-rating":"","data-oke-reviews-product-id":r(n)};return t.createElement(e,{dataAttributes:i,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`,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 u=await l.text(),{shop:{widgetPreRenderStyleTags:p}}=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=p?.value??"";return g||console.warn("Failed to retrieve pre-rendered widget style settings."),{reviewsHeaderConfig:s,cssVariables:a,customCss:d,initScriptContents:u,preRenderStyleTags:g,starSymbols:c}};
+"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);if(void 0===t)throw new Error("useOkendoContext must be within OkendoContext");return t},a="cdn-static.okendo.io",i=({nonce:t="",okendoProviderData:n,productUrlFormatter:r,awaited:i,cdnDomain:s})=>{const{setOkendoDataLoaded:d}=o();if(e.useEffect((()=>{if(n&&d(!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:c,cssVariables:l,customCss:u,initScriptContents:p,preRenderStyleTags:m,starSymbols:g}=n,v=(l??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),k=u?u.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(c)}}),e.createElement("style",{nonce:t,id:"oke-css-vars",dangerouslySetInnerHTML:{__html:v}}),k&&e.createElement("style",{nonce:t,id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:k}}),!i&&p&&e.createElement("script",{nonce:t,dangerouslySetInnerHTML:{__html:p}}),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"}`}}),m&&e.createElement("div",{dangerouslySetInnerHTML:{__html:m}}),g&&e.createElement("div",{dangerouslySetInnerHTML:{__html:g}}))};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{okendoDataLoaded:a}=o(),i={"data-oke-widget":"","data-oke-reviews-product-id":c(t)};return a?e.createElement(s,{dataAttributes:i,metafieldContent:n?.value}):r||e.createElement("div",{style:{height:"350px"}})},exports.OkendoStarRating=({productId:t,okendoStarRatingSnippet:n,placeholder:r})=>{const{okendoDataLoaded:a}=o(),i={"data-oke-star-rating":"","data-oke-reviews-product-id":c(t)};return a?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/cjs/types/components/OkendoProvider/OkendoProvider.d.ts

@@ -1,7 +1,8 @@
-import type { Storefront } from "@shopify/hydrogen";
-import { type FC } from "react";
+import type { WidgetPlus } from '@okendo/reviews-common';
+import type { Storefront } from '@shopify/hydrogen';
+import React, { type PropsWithChildren } from 'react';
 interface OkendoProviderData {
-    reviewsHeaderConfig: Record<string, unknown>;
+    reviewsHeaderConfig: WidgetPlus.ReviewsHeaderConfig;
     cssVariables: string;
     customCss?: string;
     initScriptContents: string;
@@ -15,14 +16,7 @@ export declare const getOkendoProviderData: ({ context, subscriberId, apiDomain,
     subscriberId: string;
     apiDomain?: string;
     cdnDomain?: string;
-}) => Promise<{
-    reviewsHeaderConfig: import("@okendo/reviews-common").WidgetPlus.ReviewsHeaderConfig;
-    cssVariables: string;
-    customCss: string | undefined;
-    initScriptContents: string;
-    preRenderStyleTags: string;
-    starSymbols: string;
-} | null>;
+}) => Promise<OkendoProviderData | null>;
 interface ReviewProduct {
     productHandle?: string;
     productId: string;
@@ -34,10 +28,17 @@ interface OkendoProviderProps {
      * this is required if Content Security Policy is set up on your store.
      */
     nonce?: string;
-    /** The data returned by `getOkendoProviderData` */
-    okendoProviderData: Partial<OkendoProviderData> | null;
+    /**
+     * Either:
+     * - the data returned by the promise returned by `getOkendoProviderData`, using this will allow the
+     * Okendo widgets to show instantly on page load, but it will slightly increase the page load time;
+     * - the promise returned by `getOkendoProviderData`, using this will make the Okendo widgets
+     * show slightly after page load, but it have the advantage of not increasing the page load time.
+     */
+    okendoProviderData: Partial<OkendoProviderData> | null | Promise<Partial<OkendoProviderData> | null>;
     /** An optional product URL formatter */
     productUrlFormatter?: (product: ReviewProduct) => string;
+    cdnDomain?: string;
 }
-export declare const OkendoProvider: FC<OkendoProviderProps>;
+export declare const OkendoProvider: ({ nonce, okendoProviderData, productUrlFormatter, cdnDomain, children, }: OkendoProviderProps & PropsWithChildren) => React.JSX.Element;
 export {};

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

@@ -1,11 +1,16 @@
-import { type FC } from "react";
-import { type MetafieldValue } from "../../internal/types";
+import React from 'react';
+import { type MetafieldValue } from '../../internal/types';
 export interface WithOkendoReviewsSnippet {
     okendoReviewsSnippet?: MetafieldValue | null;
 }
 interface OkendoReviewsProps {
     productId: string;
     okendoReviewsSnippet?: MetafieldValue | null;
+    /**
+     * Only used if the promise returned by `getOkendoProviderData` is given to the OkendoProvider
+     * without being awaited; in this case, the placeholder here will be shown until the widget is ready
+     */
+    placeholder?: JSX.Element;
 }
-export declare const OkendoReviews: FC<OkendoReviewsProps>;
+export declare const OkendoReviews: ({ productId, okendoReviewsSnippet, placeholder }: OkendoReviewsProps) => React.JSX.Element;
 export {};

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

@@ -1,11 +1,16 @@
-import { type FC } from "react";
-import { type MetafieldValue } from "../../internal/types";
+import React, { type ReactNode } from 'react';
+import { type MetafieldValue } from '../../internal/types';
 export interface WithOkendoStarRatingSnippet {
     okendoStarRatingSnippet?: MetafieldValue | null;
 }
 interface OkendoStarRatingProps {
     productId: string;
     okendoStarRatingSnippet?: MetafieldValue | null;
+    /**
+     * Only used if the promise returned by `getOkendoProviderData` is given to the OkendoProvider
+     * without being awaited; in this case, the placeholder here will be shown until the widget is ready
+     */
+    placeholder?: ReactNode;
 }
-export declare const OkendoStarRating: FC<OkendoStarRatingProps>;
+export declare const OkendoStarRating: ({ productId, okendoStarRatingSnippet, placeholder }: OkendoStarRatingProps) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
 export {};

package/dist/cjs/types/internal/OkendoContext.d.ts

@@ -0,0 +1,10 @@
+import React, { type Dispatch, type PropsWithChildren, type SetStateAction } from 'react';
+export declare const OkendoContext: React.Context<{
+    okendoDataLoaded: boolean;
+    setOkendoDataLoaded: Dispatch<SetStateAction<boolean>>;
+} | undefined>;
+export declare const OkendoContextProvider: ({ children }: PropsWithChildren) => React.JSX.Element;
+export declare const useOkendoContext: () => {
+    okendoDataLoaded: boolean;
+    setOkendoDataLoaded: Dispatch<SetStateAction<boolean>>;
+};

package/dist/cjs/types/internal/OkendoWidget/OkendoWidget.d.ts

@@ -1,10 +1,10 @@
-import type { ReviewsWidgetPlus } from "@okendo/reviews-widget-plus/dist-utils/ReviewsWidgetPlus";
-import { type FC } from "react";
+import type { ReviewsWidgetPlus } from '@okendo/reviews-widget-plus/dist-utils/ReviewsWidgetPlus';
+import React from 'react';
 export interface OkendoWidgetProps {
     dataAttributes: {
-        "data-oke-widget"?: string;
-        "data-oke-star-rating"?: string;
-        "data-oke-reviews-product-id": string | undefined;
+        'data-oke-widget'?: string;
+        'data-oke-star-rating'?: string;
+        'data-oke-reviews-product-id': string | undefined;
     };
     metafieldContent?: string;
 }
@@ -13,4 +13,4 @@ declare global {
         okeWidgetApi: ReviewsWidgetPlus.WidgetWindowApi;
     }
 }
-export declare const OkendoWidget: FC<OkendoWidgetProps>;
+export declare const OkendoWidget: ({ dataAttributes, metafieldContent }: OkendoWidgetProps) => React.JSX.Element;

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 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:a,cssVariables:s,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 u=await l.text(),{shop:{widgetPreRenderStyleTags:p}}=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=p?.value??"";return g||console.warn("Failed to retrieve pre-rendered widget style settings."),{reviewsHeaderConfig:a,cssVariables:s,customCss:d,initScriptContents:u,preRenderStyleTags:g,starSymbols:c}},o=({nonce:e="",okendoProviderData:n,productUrlFormatter:r})=>{if(!n)return null;const{reviewsHeaderConfig:o,cssVariables:i,customCss:a,initScriptContents:s,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",u=(i??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),p=a?a.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:u}}),p&&t.createElement("style",{nonce:e,id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:p}}),s&&t.createElement("script",{nonce:e,dangerouslySetInnerHTML:{__html:s}}),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}}))};const i=({dataAttributes:r,metafieldContent:o=""})=>{const i=e(null),a=function(t){const r=e();return n((()=>{r.current=t})),r.current}(r),s=()=>{i.current&&window.okeWidgetApi.initWidget(i.current)};return n((()=>{if(!a||r["data-oke-widget"]!==a["data-oke-widget"]||r["data-oke-star-rating"]!==a["data-oke-star-rating"]||r["data-oke-reviews-product-id"]!==a["data-oke-reviews-product-id"])return window.okeWidgetApi&&i.current?s():document.addEventListener("oke-script-loaded",s),()=>{document.removeEventListener("oke-script-loaded",s)}}),[r,a]),t.createElement("div",{ref:i,key:JSON.stringify(r),...r,dangerouslySetInnerHTML:o?{__html:o}:void 0})},a=/^[0-9]*$/;function s(t){if(t)return`shopify-${a.test(t)?t:t.split("/").slice(-1)[0]}`}const d=({productId:e,okendoReviewsSnippet:n})=>{const r={"data-oke-widget":"","data-oke-reviews-product-id":s(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":s(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',u='#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{u as OKENDO_PRODUCT_REVIEWS_FRAGMENT,l as OKENDO_PRODUCT_STAR_RATING_FRAGMENT,o as OkendoProvider,d as OkendoReviews,c as OkendoStarRating,r as getOkendoProviderData};
+import e,{createContext as t,useState as n,useContext as r,Suspense as o,useEffect as a,useRef 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);if(void 0===e)throw new Error("useOkendoContext must be within OkendoContext");return 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:i})=>{const{setOkendoDataLoaded:d}=l();if(a((()=>{if(n&&d(!0),n&&o){const e=document.createElement("script");e.src=`https://${i||u}/reviews-widget-plus/js/okendo-reviews.js`,document.head.appendChild(e)}}),[n,d,o,i]),!n)return null;const{reviewsHeaderConfig:s,cssVariables:c,customCss:p,initScriptContents:m,preRenderStyleTags:g,starSymbols:v}=n,k=(c??"").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(s)}}),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}}),!o&&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 v=({dataAttributes:t,metafieldContent:n=""})=>{const r=i(null),o=i(!1),d=function(e){const t=i();return a((()=>{t.current=e})),t.current}(t),s=()=>{r.current&&(window.okeWidgetApi.initWidget(r.current),o.current=!0)};return a((()=>{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{okendoDataLoaded:o}=l(),a={"data-oke-widget":"","data-oke-reviews-product-id":w(t)};return o?e.createElement(v,{dataAttributes:a,metafieldContent:n?.value}):r||e.createElement("div",{style:{height:"350px"}})},f=({productId:t,okendoStarRatingSnippet:n,placeholder:r})=>{const{okendoDataLoaded:o}=l(),a={"data-oke-star-rating":"","data-oke-reviews-product-id":w(t)};return o?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};

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

@@ -1,7 +1,8 @@
-import type { Storefront } from "@shopify/hydrogen";
-import { type FC } from "react";
+import type { WidgetPlus } from '@okendo/reviews-common';
+import type { Storefront } from '@shopify/hydrogen';
+import React, { type PropsWithChildren } from 'react';
 interface OkendoProviderData {
-    reviewsHeaderConfig: Record<string, unknown>;
+    reviewsHeaderConfig: WidgetPlus.ReviewsHeaderConfig;
     cssVariables: string;
     customCss?: string;
     initScriptContents: string;
@@ -15,14 +16,7 @@ export declare const getOkendoProviderData: ({ context, subscriberId, apiDomain,
     subscriberId: string;
     apiDomain?: string;
     cdnDomain?: string;
-}) => Promise<{
-    reviewsHeaderConfig: import("@okendo/reviews-common").WidgetPlus.ReviewsHeaderConfig;
-    cssVariables: string;
-    customCss: string | undefined;
-    initScriptContents: string;
-    preRenderStyleTags: string;
-    starSymbols: string;
-} | null>;
+}) => Promise<OkendoProviderData | null>;
 interface ReviewProduct {
     productHandle?: string;
     productId: string;
@@ -34,10 +28,17 @@ interface OkendoProviderProps {
      * this is required if Content Security Policy is set up on your store.
      */
     nonce?: string;
-    /** The data returned by `getOkendoProviderData` */
-    okendoProviderData: Partial<OkendoProviderData> | null;
+    /**
+     * Either:
+     * - the data returned by the promise returned by `getOkendoProviderData`, using this will allow the
+     * Okendo widgets to show instantly on page load, but it will slightly increase the page load time;
+     * - the promise returned by `getOkendoProviderData`, using this will make the Okendo widgets
+     * show slightly after page load, but it have the advantage of not increasing the page load time.
+     */
+    okendoProviderData: Partial<OkendoProviderData> | null | Promise<Partial<OkendoProviderData> | null>;
     /** An optional product URL formatter */
     productUrlFormatter?: (product: ReviewProduct) => string;
+    cdnDomain?: string;
 }
-export declare const OkendoProvider: FC<OkendoProviderProps>;
+export declare const OkendoProvider: ({ nonce, okendoProviderData, productUrlFormatter, cdnDomain, children, }: OkendoProviderProps & PropsWithChildren) => React.JSX.Element;
 export {};

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

@@ -1,11 +1,16 @@
-import { type FC } from "react";
-import { type MetafieldValue } from "../../internal/types";
+import React from 'react';
+import { type MetafieldValue } from '../../internal/types';
 export interface WithOkendoReviewsSnippet {
     okendoReviewsSnippet?: MetafieldValue | null;
 }
 interface OkendoReviewsProps {
     productId: string;
     okendoReviewsSnippet?: MetafieldValue | null;
+    /**
+     * Only used if the promise returned by `getOkendoProviderData` is given to the OkendoProvider
+     * without being awaited; in this case, the placeholder here will be shown until the widget is ready
+     */
+    placeholder?: JSX.Element;
 }
-export declare const OkendoReviews: FC<OkendoReviewsProps>;
+export declare const OkendoReviews: ({ productId, okendoReviewsSnippet, placeholder }: OkendoReviewsProps) => React.JSX.Element;
 export {};

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

@@ -1,11 +1,16 @@
-import { type FC } from "react";
-import { type MetafieldValue } from "../../internal/types";
+import React, { type ReactNode } from 'react';
+import { type MetafieldValue } from '../../internal/types';
 export interface WithOkendoStarRatingSnippet {
     okendoStarRatingSnippet?: MetafieldValue | null;
 }
 interface OkendoStarRatingProps {
     productId: string;
     okendoStarRatingSnippet?: MetafieldValue | null;
+    /**
+     * Only used if the promise returned by `getOkendoProviderData` is given to the OkendoProvider
+     * without being awaited; in this case, the placeholder here will be shown until the widget is ready
+     */
+    placeholder?: ReactNode;
 }
-export declare const OkendoStarRating: FC<OkendoStarRatingProps>;
+export declare const OkendoStarRating: ({ productId, okendoStarRatingSnippet, placeholder }: OkendoStarRatingProps) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
 export {};

package/dist/esm/types/internal/OkendoContext.d.ts

@@ -0,0 +1,10 @@
+import React, { type Dispatch, type PropsWithChildren, type SetStateAction } from 'react';
+export declare const OkendoContext: React.Context<{
+    okendoDataLoaded: boolean;
+    setOkendoDataLoaded: Dispatch<SetStateAction<boolean>>;
+} | undefined>;
+export declare const OkendoContextProvider: ({ children }: PropsWithChildren) => React.JSX.Element;
+export declare const useOkendoContext: () => {
+    okendoDataLoaded: boolean;
+    setOkendoDataLoaded: Dispatch<SetStateAction<boolean>>;
+};

package/dist/esm/types/internal/OkendoWidget/OkendoWidget.d.ts

@@ -1,10 +1,10 @@
-import type { ReviewsWidgetPlus } from "@okendo/reviews-widget-plus/dist-utils/ReviewsWidgetPlus";
-import { type FC } from "react";
+import type { ReviewsWidgetPlus } from '@okendo/reviews-widget-plus/dist-utils/ReviewsWidgetPlus';
+import React from 'react';
 export interface OkendoWidgetProps {
     dataAttributes: {
-        "data-oke-widget"?: string;
-        "data-oke-star-rating"?: string;
-        "data-oke-reviews-product-id": string | undefined;
+        'data-oke-widget'?: string;
+        'data-oke-star-rating'?: string;
+        'data-oke-reviews-product-id': string | undefined;
     };
     metafieldContent?: string;
 }
@@ -13,4 +13,4 @@ declare global {
         okeWidgetApi: ReviewsWidgetPlus.WidgetWindowApi;
     }
 }
-export declare const OkendoWidget: FC<OkendoWidgetProps>;
+export declare const OkendoWidget: ({ dataAttributes, metafieldContent }: OkendoWidgetProps) => React.JSX.Element;

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import * as _okendo_reviews_common from '@okendo/reviews-common';
+import { WidgetPlus } from '@okendo/reviews-common';
 import { Storefront } from '@shopify/hydrogen';
-import { FC } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 
 interface OkendoProviderData {
-    reviewsHeaderConfig: Record<string, unknown>;
+    reviewsHeaderConfig: WidgetPlus.ReviewsHeaderConfig;
     cssVariables: string;
     customCss?: string;
     initScriptContents: string;
@@ -17,14 +17,7 @@ declare const getOkendoProviderData: ({ context, subscriberId, apiDomain, cdnDom
     subscriberId: string;
     apiDomain?: string;
     cdnDomain?: string;
-}) => Promise<{
-    reviewsHeaderConfig: _okendo_reviews_common.WidgetPlus.ReviewsHeaderConfig;
-    cssVariables: string;
-    customCss: string | undefined;
-    initScriptContents: string;
-    preRenderStyleTags: string;
-    starSymbols: string;
-} | null>;
+}) => Promise<OkendoProviderData | null>;
 interface ReviewProduct {
     productHandle?: string;
     productId: string;
@@ -36,12 +29,19 @@ interface OkendoProviderProps {
      * this is required if Content Security Policy is set up on your store.
      */
     nonce?: string;
-    /** The data returned by `getOkendoProviderData` */
-    okendoProviderData: Partial<OkendoProviderData> | null;
+    /**
+     * Either:
+     * - the data returned by the promise returned by `getOkendoProviderData`, using this will allow the
+     * Okendo widgets to show instantly on page load, but it will slightly increase the page load time;
+     * - the promise returned by `getOkendoProviderData`, using this will make the Okendo widgets
+     * show slightly after page load, but it have the advantage of not increasing the page load time.
+     */
+    okendoProviderData: Partial<OkendoProviderData> | null | Promise<Partial<OkendoProviderData> | null>;
     /** An optional product URL formatter */
     productUrlFormatter?: (product: ReviewProduct) => string;
+    cdnDomain?: string;
 }
-declare const OkendoProvider: FC<OkendoProviderProps>;
+declare const OkendoProvider: ({ nonce, okendoProviderData, productUrlFormatter, cdnDomain, children, }: OkendoProviderProps & PropsWithChildren) => React.JSX.Element;
 
 interface MetafieldValue {
     value: string;
@@ -53,8 +53,13 @@ interface WithOkendoReviewsSnippet {
 interface OkendoReviewsProps {
     productId: string;
     okendoReviewsSnippet?: MetafieldValue | null;
+    /**
+     * Only used if the promise returned by `getOkendoProviderData` is given to the OkendoProvider
+     * without being awaited; in this case, the placeholder here will be shown until the widget is ready
+     */
+    placeholder?: JSX.Element;
 }
-declare const OkendoReviews: FC<OkendoReviewsProps>;
+declare const OkendoReviews: ({ productId, okendoReviewsSnippet, placeholder }: OkendoReviewsProps) => React.JSX.Element;
 
 interface WithOkendoStarRatingSnippet {
     okendoStarRatingSnippet?: MetafieldValue | null;
@@ -62,8 +67,13 @@ interface WithOkendoStarRatingSnippet {
 interface OkendoStarRatingProps {
     productId: string;
     okendoStarRatingSnippet?: MetafieldValue | null;
+    /**
+     * Only used if the promise returned by `getOkendoProviderData` is given to the OkendoProvider
+     * without being awaited; in this case, the placeholder here will be shown until the widget is ready
+     */
+    placeholder?: ReactNode;
 }
-declare const OkendoStarRating: FC<OkendoStarRatingProps>;
+declare const OkendoStarRating: ({ productId, okendoStarRatingSnippet, placeholder }: OkendoStarRatingProps) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
 
 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";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@okendo/shopify-hydrogen",
-    "version": "2.1.6",
+    "version": "2.2.0",
     "description": "Okendo React components for Shopify Hydrogen 2 (Remix)",
     "author": "Okendo",
     "license": "SEE LICENSE IN LICENSE.txt",
@@ -40,8 +40,9 @@
         "typescript": "^5.3.3"
     },
     "peerDependencies": {
+        "@remix-run/react": "*",
         "@shopify/hydrogen": "*",
         "@shopify/remix-oxygen": "*",
-        "react": "^18.2.0"
+        "react": "*"
     }
 }