@okendo/shopify-hydrogen 2.3.1 → 2.3.2

package/README.md

@@ -55,22 +55,22 @@ https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "WidgetPreRenderStyleTags"
+	metafieldDefinitionCreate(
+		definition: {
+			name: "WidgetPreRenderStyleTags"
       namespace: "$app:reviews"
-      key: "widget_pre_render_style_tags"
-      type: "multi_line_text_field"
-      ownerType: SHOP
-      access: {
-        admin: PUBLIC_READ
-        storefront: PUBLIC_READ
-      }
-    }
-  ) {
-    createdDefinition { id name }
-    userErrors { field message code }
-  }
+			key: "widget_pre_render_style_tags"
+			type: "multi_line_text_field"
+			ownerType: SHOP
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
+		}
+	) {
+		createdDefinition { id name }
+		userErrors { field message code }
+	}
 }
 '
 ```
@@ -84,22 +84,22 @@ https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "WidgetPreRenderBodyStyleTags"
+	metafieldDefinitionCreate(
+		definition: {
+			name: "WidgetPreRenderBodyStyleTags"
       namespace: "$app:reviews"
-      key: "widget_pre_render_body_style_tags"
-      type: "multi_line_text_field"
-      ownerType: SHOP
-      access: {
-        admin: PUBLIC_READ
-        storefront: PUBLIC_READ
-      }
-    }
-  ) {
-    createdDefinition { id name }
-    userErrors { field message code }
-  }
+			key: "widget_pre_render_body_style_tags"
+			type: "multi_line_text_field"
+			ownerType: SHOP
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
+		}
+	) {
+		createdDefinition { id name }
+		userErrors { field message code }
+	}
 }
 '
 ```
@@ -113,22 +113,22 @@ https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "ReviewsWidgetSnippet"
-      namespace: "$app:reviews"
-      key: "reviews_widget_snippet"
-      type: "multi_line_text_field"
-      ownerType: PRODUCT
-      access: {
-        admin: PUBLIC_READ
-        storefront: PUBLIC_READ
-      }
-    }
-  ) {
-    createdDefinition { id name }
-    userErrors { field message code }
-  }
+	metafieldDefinitionCreate(
+		definition: {
+			name: "ReviewsWidgetSnippet"
+			namespace: "$app:reviews"
+			key: "reviews_widget_snippet"
+			type: "multi_line_text_field"
+			ownerType: PRODUCT
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
+		}
+	) {
+		createdDefinition { id name }
+		userErrors { field message code }
+	}
 }
 '
 ```
@@ -142,22 +142,22 @@ https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "StarRatingSnippet"
-      namespace: "$app:reviews"
-      key: "star_rating_snippet"
-      type: "multi_line_text_field"
-      ownerType: PRODUCT
-      access: {
-        admin: PUBLIC_READ
-        storefront: PUBLIC_READ
-      }
-    }
-  ) {
-    createdDefinition { id name }
-    userErrors { field message code }
-  }
+	metafieldDefinitionCreate(
+		definition: {
+			name: "StarRatingSnippet"
+			namespace: "$app:reviews"
+			key: "star_rating_snippet"
+			type: "multi_line_text_field"
+			ownerType: PRODUCT
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
+		}
+	) {
+		createdDefinition { id name }
+		userErrors { field message code }
+	}
 }
 '
 ```
@@ -171,22 +171,22 @@ https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "ReviewCount"
-      namespace: "$app:reviews"
-      key: "review_count"
-      type: "number_integer"
-      ownerType: PRODUCT
-      access: {
-        admin: PUBLIC_READ
-        storefront: PUBLIC_READ
-      }
-    }
-  ) {
-    createdDefinition { id name }
-    userErrors { field message code }
-  }
+	metafieldDefinitionCreate(
+		definition: {
+			name: "ReviewCount"
+			namespace: "$app:reviews"
+			key: "review_count"
+			type: "number_integer"
+			ownerType: PRODUCT
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
+		}
+	) {
+		createdDefinition { id name }
+		userErrors { field message code }
+	}
 }
 '
 ```
@@ -200,22 +200,22 @@ https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "AverageRating"
-      namespace: "$app:reviews"
-      key: "average_rating"
-      type: "rating"
-      ownerType: PRODUCT
-      access: {
-        admin: PUBLIC_READ
-        storefront: PUBLIC_READ
-      }
-    }
-  ) {
-    createdDefinition { id name }
-    userErrors { field message code }
-  }
+	metafieldDefinitionCreate(
+		definition: {
+			name: "AverageRating"
+			namespace: "$app:reviews"
+			key: "average_rating"
+			type: "rating"
+			ownerType: PRODUCT
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
+		}
+	) {
+		createdDefinition { id name }
+		userErrors { field message code }
+	}
 }
 '
 ```
@@ -231,26 +231,26 @@ Open your GraphQL IDE (such as Postman) and make `POST` requests with the follow
 
 ```graphql
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "WidgetPreRenderStyleTags"
-      namespace: "$app:reviews"
-      key: "widget_pre_render_style_tags"
-      type: "multi_line_text_field"
-      ownerType: SHOP
+	metafieldDefinitionCreate(
+		definition: {
+			name: "WidgetPreRenderStyleTags"
+			namespace: "$app:reviews"
+			key: "widget_pre_render_style_tags"
+			type: "multi_line_text_field"
+			ownerType: SHOP
       access: { admin: PUBLIC_READ, storefront: PUBLIC_READ }
-    }
-  ) {
-    createdDefinition {
-      id
-      name
-    }
-    userErrors {
-      field
-      message
-      code
-    }
-  }
+			}
+	) {
+		createdDefinition {
+			id
+			name
+		}
+		userErrors {
+			field
+			message
+			code
+		}
+	}
 }
 ```
 
@@ -258,26 +258,26 @@ mutation {
 
 ```graphql
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "WidgetPreRenderBodyStyleTags"
-      namespace: "$app:reviews"
-      key: "widget_pre_render_body_style_tags"
-      type: "multi_line_text_field"
-      ownerType: SHOP
+	metafieldDefinitionCreate(
+		definition: {
+			name: "WidgetPreRenderBodyStyleTags"
+			namespace: "$app:reviews"
+			key: "widget_pre_render_body_style_tags"
+			type: "multi_line_text_field"
+			ownerType: SHOP
       access: { admin: PUBLIC_READ, storefront: PUBLIC_READ }
-    }
-  ) {
-    createdDefinition {
-      id
-      name
-    }
-    userErrors {
-      field
-      message
-      code
-    }
-  }
+			}
+	) {
+		createdDefinition {
+			id
+			name
+		}
+		userErrors {
+			field
+			message
+			code
+		}
+	}
 }
 ```
 
@@ -285,26 +285,26 @@ mutation {
 
 ```graphql
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "ReviewsWidgetSnippet"
-      namespace: "$app:reviews"
-      key: "reviews_widget_snippet"
-      type: "multi_line_text_field"
-      ownerType: PRODUCT
+	metafieldDefinitionCreate(
+		definition: {
+			name: "ReviewsWidgetSnippet"
+			namespace: "$app:reviews"
+			key: "reviews_widget_snippet"
+			type: "multi_line_text_field"
+			ownerType: PRODUCT
       access: { admin: PUBLIC_READ, storefront: PUBLIC_READ }
-    }
-  ) {
-    createdDefinition {
-      id
-      name
-    }
-    userErrors {
-      field
-      message
-      code
-    }
-  }
+			}
+	) {
+		createdDefinition {
+			id
+			name
+		}
+		userErrors {
+			field
+			message
+			code
+		}
+	}
 }
 ```
 
@@ -312,26 +312,26 @@ mutation {
 
 ```graphql
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "StarRatingSnippet"
-      namespace: "$app:reviews"
-      key: "star_rating_snippet"
-      type: "multi_line_text_field"
-      ownerType: PRODUCT
+	metafieldDefinitionCreate(
+		definition: {
+			name: "StarRatingSnippet"
+			namespace: "$app:reviews"
+			key: "star_rating_snippet"
+			type: "multi_line_text_field"
+			ownerType: PRODUCT
       access: { admin: PUBLIC_READ, storefront: PUBLIC_READ }
-    }
-  ) {
-    createdDefinition {
-      id
-      name
-    }
-    userErrors {
-      field
-      message
-      code
-    }
-  }
+			}
+	) {
+		createdDefinition {
+			id
+			name
+		}
+		userErrors {
+			field
+			message
+			code
+		}
+	}
 }
 ```
 
@@ -339,26 +339,26 @@ mutation {
 
 ```graphql
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "ReviewCount"
-      namespace: "$app:reviews"
-      key: "review_count"
-      type: "number_integer"
-      ownerType: PRODUCT
+	metafieldDefinitionCreate(
+		definition: {
+			name: "ReviewCount"
+			namespace: "$app:reviews"
+			key: "review_count"
+			type: "number_integer"
+			ownerType: PRODUCT
       access: { admin: PUBLIC_READ, storefront: PUBLIC_READ }
-    }
-  ) {
-    createdDefinition {
-      id
-      name
-    }
-    userErrors {
-      field
-      message
-      code
-    }
-  }
+			}
+	) {
+		createdDefinition {
+			id
+			name
+		}
+		userErrors {
+			field
+			message
+			code
+		}
+	}
 }
 ```
 
@@ -366,26 +366,26 @@ mutation {
 
 ```graphql
 mutation {
-  metafieldDefinitionCreate(
-    definition: {
-      name: "AverageRating"
-      namespace: "$app:reviews"
-      key: "average_rating"
-      type: "rating"
-      ownerType: PRODUCT
+	metafieldDefinitionCreate(
+		definition: {
+			name: "AverageRating"
+			namespace: "$app:reviews"
+			key: "average_rating"
+			type: "rating"
+			ownerType: PRODUCT
       access: { admin: PUBLIC_READ, storefront: PUBLIC_READ }
-    }
-  ) {
-    createdDefinition {
-      id
-      name
-    }
-    userErrors {
-      field
-      message
-      code
-    }
-  }
+			}
+	) {
+		createdDefinition {
+			id
+			name
+		}
+		userErrors {
+			field
+			message
+			code
+		}
+	}
 }
 ```
 
@@ -444,8 +444,8 @@ Open `app/root.tsx` and add the following import:
 
 ```ts
 import {
-  OkendoProvider,
-  getOkendoProviderData,
+	OkendoProvider,
+	getOkendoProviderData,
 } from '@okendo/shopify-hydrogen';
 ```
 
@@ -458,10 +458,10 @@ return defer({
   // ...
   okendoProviderData:
     /* place `await` here if you want server-rendered widgets */ getOkendoProviderData(
-      {
+	{
         context: args.context,
         subscriberId: '<your-okendo-subscriber-id>',
-      },
+	},
     ),
 });
 ```
@@ -470,10 +470,10 @@ Locate the `Layout` component, add the `meta` tag `oke:subscriber_id` to `head`,
 
 ```tsx
 <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>" />
-  ...
+	<meta charSet="utf-8" />
+	<meta name="viewport" content="width=device-width,initial-scale=1" />
+	<meta name="oke:subscriber_id" content="<your-okendo-subscriber-id>" />
+	...
 </head>
 ```
 
@@ -487,10 +487,10 @@ Append `OkendoProvider` to `body`, and pass it the promise — or the data — r
         cart={data.cart}
         shop={data.shop}
         consent={data.consent}
-      >
+	>
         <PageLayout {...data}>{children}</PageLayout>
       </Analytics.Provider>
-    </OkendoProvider>
+	</OkendoProvider>
   ) : (
     children
   )}
@@ -512,8 +512,8 @@ const { nonce, header, NonceProvider } = createContentSecurityPolicy({
     checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN,
     storeDomain: context.env.PUBLIC_STORE_DOMAIN,
   },
-  defaultSrc: [
-    "'self'",
+    defaultSrc: [
+      "'self'",
     'localhost:*',
     'https://cdn.shopify.com',
     'https://www.google.com',
@@ -525,9 +525,9 @@ const { nonce, header, NonceProvider } = createContentSecurityPolicy({
     'https://surveys.okendo.io',
     'https://api.okendo.io',
     'data:',
-  ],
-  imgSrc: [
-    "'self'",
+    ],
+    imgSrc: [
+      "'self'",
     'https://cdn.shopify.com',
     'data:',
     'https://d3hw6dc1ow8pp2.cloudfront.net',
@@ -535,26 +535,26 @@ const { nonce, header, NonceProvider } = createContentSecurityPolicy({
     'https://dov7r31oq5dkj.cloudfront.net',
     'https://cdn-static.okendo.io',
     'https://surveys.okendo.io',
-  ],
-  mediaSrc: [
-    "'self'",
+    ],
+    mediaSrc: [
+      "'self'",
     'https://d3hw6dc1ow8pp2.cloudfront.net',
     'https://d3g5hqndtiniji.cloudfront.net',
     'https://dov7r31oq5dkj.cloudfront.net',
     'https://cdn-static.okendo.io',
-  ],
+    ],
   styleSrc: [
-    "'self'",
-    "'unsafe-inline'",
+      "'self'",
+      "'unsafe-inline'",
     'https://cdn.shopify.com',
     'https://fonts.googleapis.com',
     'https://fonts.gstatic.com',
     'https://d3hw6dc1ow8pp2.cloudfront.net',
     'https://cdn-static.okendo.io',
     'https://surveys.okendo.io',
-  ],
-  scriptSrc: [
-    "'self'",
+    ],
+    scriptSrc: [
+      "'self'",
     'https://cdn.shopify.com',
     'https://d3hw6dc1ow8pp2.cloudfront.net',
     'https://dov7r31oq5dkj.cloudfront.net',
@@ -563,18 +563,18 @@ const { nonce, header, NonceProvider } = createContentSecurityPolicy({
     'https://api.okendo.io',
     'https://www.google.com',
     'https://www.gstatic.com',
-  ],
-  fontSrc: [
-    "'self'",
+    ],
+    fontSrc: [
+      "'self'",
     'https://fonts.gstatic.com',
     'https://d3hw6dc1ow8pp2.cloudfront.net',
     'https://dov7r31oq5dkj.cloudfront.net',
     'https://cdn.shopify.com',
     'https://cdn-static.okendo.io',
     'https://surveys.okendo.io',
-  ],
-  connectSrc: [
-    "'self'",
+    ],
+    connectSrc: [
+      "'self'",
     'https://monorail-edge.shopifysvc.com',
     'localhost:*',
     'ws://localhost:*',
@@ -585,7 +585,7 @@ const { nonce, header, NonceProvider } = createContentSecurityPolicy({
     'https://api.raygun.com',
     'https://www.google.com',
     'https://www.gstatic.com',
-  ],
+    ],
   frameSrc: ['https://www.google.com', 'https://www.gstatic.com'],
 });
 ```
@@ -602,14 +602,14 @@ Add the following block just before the `RECOMMENDED_PRODUCTS_QUERY` GraphQL que
 
 ```ts
 const OKENDO_PRODUCT_STAR_RATING_FRAGMENT = `#graphql
-  fragment OkendoStarRatingSnippet on Product {
-    okendoStarRatingSnippet: metafield(
+	fragment OkendoStarRatingSnippet on Product {
+		okendoStarRatingSnippet: metafield(
       namespace: "$app:reviews"
       key: "star_rating_snippet"
-    ) {
-      value
-    }
-  }
+		) {
+			value
+		}
+	}
 ` as const;
 ```
 
@@ -617,36 +617,36 @@ Then append `${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}` and `...OkendoStarRatingSni
 
 ```ts
 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
-      }
-    }
-  }
+	${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;
 ```
 
@@ -656,17 +656,17 @@ Add `OkendoStarRating` to the `RecommendedProducts` component — for instance,
 
 ```tsx
 <Image
-  data={product.images.nodes[0]}
-  aspectRatio="1/1"
-  sizes="(min-width: 45em) 20vw, 50vw"
+	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}
+	productId={product.id}
+	okendoStarRatingSnippet={product.okendoStarRatingSnippet}
 />
 <small>
-  <Money data={product.priceRange.minVariantPrice} />
+	<Money data={product.priceRange.minVariantPrice} />
 </small>
 ```
 
@@ -690,25 +690,25 @@ Add the following block just before the `PRODUCT_FRAGMENT` GraphQL query:
 
 ```ts
 const OKENDO_PRODUCT_STAR_RATING_FRAGMENT = `#graphql
-  fragment OkendoStarRatingSnippet on Product {
-    okendoStarRatingSnippet: metafield(
+	fragment OkendoStarRatingSnippet on Product {
+		okendoStarRatingSnippet: metafield(
       namespace: "$app:reviews"
       key: "star_rating_snippet"
-    ) {
-      value
-    }
-  }
+		) {
+			value
+		}
+	}
 ` as const;
 
 const OKENDO_PRODUCT_REVIEWS_FRAGMENT = `#graphql
-  fragment OkendoReviewsSnippet on Product {
-    okendoReviewsSnippet: metafield(
+	fragment OkendoReviewsSnippet on Product {
+		okendoReviewsSnippet: metafield(
       namespace: "$app:reviews"
       key: "reviews_widget_snippet"
-    ) {
-      value
-    }
-  }
+		) {
+			value
+		}
+	}
 ` as const;
 ```
 
@@ -716,35 +716,35 @@ Then append `${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}`, `${OKENDO_PRODUCT_REVIEWS_
 
 ```ts
 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}
+	${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;
 ```
 
@@ -754,27 +754,27 @@ Add `OkendoStarRating` and `OkendoReviews` to the `Product` component:
 
 ```tsx
 <>
-  <div className="product">
-    <ProductImage image={selectedVariant?.image} />
+	<div className="product">
+		<ProductImage image={selectedVariant?.image} />
     <div className="product-main">
       <h1>{title}</h1>
       <OkendoStarRating
         productId={product.id}
         okendoStarRatingSnippet={product.okendoStarRatingSnippet}
-      />
+		/>
       <ProductPrice
         price={selectedVariant?.price}
         compareAtPrice={selectedVariant?.compareAtPrice}
       />
       ...
-    </div>
+	</div>
     ...
   </div>
 
-  <OkendoReviews
-    productId={product.id}
-    okendoReviewsSnippet={product.okendoReviewsSnippet}
-  />
+	<OkendoReviews
+		productId={product.id}
+		okendoReviewsSnippet={product.okendoReviewsSnippet}
+	/>
 </>
 ```
 
@@ -795,7 +795,7 @@ import { type MetaFunction } from '@remix-run/react';
 import { OkendoReviews } from '@okendo/shopify-hydrogen';
 
 export const meta: MetaFunction = () => {
-  return [{ title: `Hydrogen | Okendo All Reviews` }];
+  return [{title: `Hydrogen | Okendo All Reviews`}];
 };
 
 export default function ReviewsPage() {
@@ -807,3 +807,28 @@ export default function ReviewsPage() {
   );
 }
 ```
+
+### Okendo Reviews Carousel Widget - Client Side Only
+If you would like to include a copy of the Okendo Reviews Carousel Widget which displays reviews by product or group for a given store (to be used on a homepage or featured page for example), please add the `OkendoReviewsCarouselWidget` with or without the the `productId` or `groupId`.
+
+Please note the all reviews widget loads on the client not the server.
+
+```tsx
+import { type MetaFunction } from '@remix-run/react';
+import { OkendoReviews } from '@okendo/shopify-hydrogen';
+
+export const meta: MetaFunction = () => {
+  return [{title: `Hydrogen | Okendo Reviews Carousel`}];
+};
+
+export default function AFeaturedPage() {
+  return (
+    <div className="all-reviews">
+      <h1>Reviews Carousel Widget</h1>
+      <OkendoReviewsCarousel 
+	      productId={product.id}
+	  />
+    </div>
+  );
+}
+```

package/dist/cjs/index.js

@@ -1 +1 @@
-"use strict";var e=require("react"),t=require("@remix-run/react");const n=e.createContext(void 0),r=({children:t})=>{const[r,o]=e.useState(!1);return e.createElement(n.Provider,{value:{okendoDataLoaded:r,setOkendoDataLoaded:o}},t)},o=()=>{const t=e.useContext(n);return void 0===t?null:t},a="cdn-static.okendo.io",s=({nonce:t="",okendoProviderData:n,productUrlFormatter:r,awaited:s,cdnDomain:i})=>{const d=o(),c=e.useRef(!1);if(e.useEffect((()=>{if(n&&d?.setOkendoDataLoaded(!0),n&&s&&!c.current){const e=document.createElement("script");e.src=`https://${i||a}/reviews-widget-plus/js/okendo-reviews.js`,document.head.appendChild(e),c.current=!0}}),[n,d,s,i]),!n)return null;const{reviewsHeaderConfig:l,cssVariables:u,customCss:p,initScriptContents:m,preRenderStyleTags:v,starSymbols:g}=n,k=(u??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),w=p?p.replace('<style id="oke-reviews-custom-css">',"").replace("</style>",""):"";return e.createElement(e.Fragment,null,e.createElement("script",{nonce:t,id:"oke-reviews-settings",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify(l)}}),e.createElement("style",{nonce:t,id:"oke-css-vars",dangerouslySetInnerHTML:{__html:k}}),w&&e.createElement("style",{nonce:t,id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:w}}),!s&&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"}`}}),v&&e.createElement("div",{dangerouslySetInnerHTML:{__html:v}}),g&&e.createElement("div",{dangerouslySetInnerHTML:{__html:g}}))};const i=({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),s=()=>{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?s():document.addEventListener("oke-script-loaded",s),()=>{document.removeEventListener("oke-script-loaded",s)}}),[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: "$app:reviews"\n\t\t\tkey: "reviews_widget_snippet"\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: "$app:reviews"\n\t\t\tkey: "star_rating_snippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n',exports.OkendoProvider=({nonce:n="",okendoProviderData:o,productUrlFormatter:a,cdnDomain:i,children:d})=>e.createElement(r,null,o&&"then"in o?e.createElement(e.Suspense,null,e.createElement(t.Await,{resolve:o},(t=>e.createElement(s,{nonce:n,okendoProviderData:t,productUrlFormatter:a,cdnDomain:i,awaited:!0})))):e.createElement(s,{nonce:n,okendoProviderData:o,productUrlFormatter:a,cdnDomain:i}),d),exports.OkendoReviews=({productId:t,okendoReviewsSnippet:n,placeholder:r})=>{const a=o(),s=t?.length?c(t):null,d=t?.length?n:null,l={"data-oke-widget":"","data-oke-reviews-product-id":s};return null===a||a.okendoDataLoaded?e.createElement(i,{dataAttributes:l,metafieldContent:d?.value}):r||e.createElement("div",{style:{height:"350px"}})},exports.OkendoStarRating=({productId:t,okendoStarRatingSnippet:n,placeholder:r})=>{const a=o(),s={"data-oke-star-rating":"","data-oke-reviews-product-id":c(t)};return null===a||a.okendoDataLoaded?e.createElement(i,{dataAttributes:s,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`,s=await fetch(o);if(!s.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${t}'.`),null;const{reviewsHeaderConfig:i,cssVariables:d,customCss:c,starSymbols:l}=await s.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: "$app:reviews"\n\t\t\t\t\tkey: "widget_pre_render_style_tags"\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'),v=m?.value??"";return v||console.warn("Failed to retrieve pre-rendered widget style settings."),{reviewsHeaderConfig:i,cssVariables:d,customCss:c,initScriptContents:p,preRenderStyleTags:v,starSymbols:l}};
+"use strict";var e=require("react"),t=require("@remix-run/react");const n=e.createContext(void 0),r=({children:t})=>{const[r,a]=e.useState(!1);return e.createElement(n.Provider,{value:{okendoDataLoaded:r,setOkendoDataLoaded:a}},t)},a=()=>{const t=e.useContext(n);return void 0===t?null:t},o="cdn-static.okendo.io",s=({nonce:t="",okendoProviderData:n,productUrlFormatter:r,awaited:s,cdnDomain:i})=>{const d=a(),l=e.useRef(!1);if(e.useEffect((()=>{if(n&&d?.setOkendoDataLoaded(!0),n&&s&&!l.current){const e=document.createElement("script");e.src=`https://${i||o}/reviews-widget-plus/js/okendo-reviews.js`,document.head.appendChild(e),l.current=!0}}),[n,d,s,i]),!n)return null;const{reviewsHeaderConfig:c,cssVariables:u,customCss:p,initScriptContents:m,preRenderStyleTags:g,starSymbols:v}=n,k=(u??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),w=p?p.replace('<style id="oke-reviews-custom-css">',"").replace("</style>",""):"";return e.createElement(e.Fragment,null,e.createElement("script",{nonce:t,id:"oke-reviews-settings",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify(c)}}),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}}),!s&&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 i=({dataAttributes:t,metafieldContent:n=""})=>{const r=e.useRef(null),a=e.useRef(!1),o=function(t){const n=e.useRef();return e.useEffect((()=>{n.current=t})),n.current}(t),s=()=>{r.current&&(window.okeWidgetApi.initWidget(r.current),a.current=!0)};return e.useEffect((()=>{if(!o||t["data-oke-widget"]!==o["data-oke-widget"]||t["data-oke-star-rating"]!==o["data-oke-star-rating"]||t["data-oke-reviews-product-id"]!==o["data-oke-reviews-product-id"]||!a.current)return window.okeWidgetApi&&r.current?s():document.addEventListener("oke-script-loaded",s),()=>{document.removeEventListener("oke-script-loaded",s)}}),[t,o]),e.createElement("div",{ref:r,key:JSON.stringify(t),...t,dangerouslySetInnerHTML:n?{__html:n}:void 0})},d=/^[0-9]*$/;function l(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: "$app:reviews"\n\t\t\tkey: "reviews_widget_snippet"\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: "$app:reviews"\n\t\t\tkey: "star_rating_snippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n',exports.OkendoProvider=({nonce:n="",okendoProviderData:a,productUrlFormatter:o,cdnDomain:i,children:d})=>e.createElement(r,null,a&&"then"in a?e.createElement(e.Suspense,null,e.createElement(t.Await,{resolve:a},(t=>e.createElement(s,{nonce:n,okendoProviderData:t,productUrlFormatter:o,cdnDomain:i,awaited:!0})))):e.createElement(s,{nonce:n,okendoProviderData:a,productUrlFormatter:o,cdnDomain:i}),d),exports.OkendoReviews=({productId:t,okendoReviewsSnippet:n,placeholder:r})=>{const o=a(),s=t?.length?l(t):null,d=t?.length?n:null,c={"data-oke-widget":"","data-oke-reviews-product-id":s};return null===o||o.okendoDataLoaded?e.createElement(i,{dataAttributes:c,metafieldContent:d?.value}):r||e.createElement("div",{style:{height:"350px"}})},exports.OkendoReviewsCarousel=({productId:t,groupId:n,headerBadgeUrl:r,placeholder:o})=>{const s=a(),d={"data-oke-carousel":"","data-oke-reviews-product-id":t?.length?l(t):null,"data-oke-reviews-group-id":n?.length?n:null,"data-oke-header-badge-url":r};return null===s||s.okendoDataLoaded?e.createElement(i,{dataAttributes:d}):o||e.createElement("div",{style:{height:"350px"}})},exports.OkendoStarRating=({productId:t,okendoStarRatingSnippet:n,placeholder:r})=>{const o=a(),s={"data-oke-star-rating":"","data-oke-reviews-product-id":l(t)};return null===o||o.okendoDataLoaded?e.createElement(i,{dataAttributes:s,metafieldContent:n?.value}):r||e.createElement("div",{style:{height:"20px"}})},exports.getOkendoProviderData=async({context:e,subscriberId:t,apiDomain:n,cdnDomain:r})=>{const a=`https://${n||"api.okendo.io/v1"}/stores/${t}/widget_plus_settings`,s=await fetch(a);if(!s.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${t}'.`),null;const{reviewsHeaderConfig:i,cssVariables:d,customCss:l,starSymbols:c}=await s.json(),u=await fetch(`https://${r||o}/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: "$app:reviews"\n\t\t\t\t\tkey: "widget_pre_render_style_tags"\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:l,initScriptContents:p,preRenderStyleTags:g,starSymbols:c}};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+interface OkendoReviewsCarouselProps {
+    productId?: string;
+    groupId?: string;
+    headerBadgeUrl?: string;
+    /**
+     * 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 OkendoReviewsCarousel: ({ productId, groupId, headerBadgeUrl, placeholder }: OkendoReviewsCarouselProps) => React.JSX.Element;
+export {};

package/dist/cjs/types/components/OkendoReviewsCarousel/index.d.ts

@@ -0,0 +1 @@
+export * from "./OkendoReviewsCarousel";

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

@@ -1,3 +1,4 @@
 export * from "./OkendoProvider";
 export * from "./OkendoReviews";
+export * from "./OkendoReviewsCarousel";
 export * from "./OkendoStarRating";

package/dist/esm/index.js

@@ -1 +1 @@
-import e,{createContext as t,useState as n,useContext as r,Suspense as o,useRef as a,useEffect as i}from"react";import{Await as s}from"@remix-run/react";const d=t(void 0),c=({children:t})=>{const[r,o]=n(!1);return e.createElement(d.Provider,{value:{okendoDataLoaded:r,setOkendoDataLoaded:o}},t)},l=()=>{const e=r(d);return void 0===e?null:e},u="cdn-static.okendo.io",p=async({context:e,subscriberId:t,apiDomain:n,cdnDomain:r})=>{const o=`https://${n||"api.okendo.io/v1"}/stores/${t}/widget_plus_settings`,a=await fetch(o);if(!a.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${t}'.`),null;const{reviewsHeaderConfig:i,cssVariables:s,customCss:d,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: "$app:reviews"\n\t\t\t\t\tkey: "widget_pre_render_style_tags"\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:s,customCss:d,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(s,{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:s})=>{const d=l(),c=a(!1);if(i((()=>{if(n&&d?.setOkendoDataLoaded(!0),n&&o&&!c.current){const e=document.createElement("script");e.src=`https://${s||u}/reviews-widget-plus/js/okendo-reviews.js`,document.head.appendChild(e),c.current=!0}}),[n,d,o,s]),!n)return null;const{reviewsHeaderConfig:p,cssVariables:m,customCss:g,initScriptContents:v,preRenderStyleTags:w,starSymbols:k}=n,y=(m??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),f=g?g.replace('<style id="oke-reviews-custom-css">',"").replace("</style>",""):"";return e.createElement(e.Fragment,null,e.createElement("script",{nonce:t,id:"oke-reviews-settings",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify(p)}}),e.createElement("style",{nonce:t,id:"oke-css-vars",dangerouslySetInnerHTML:{__html:y}}),f&&e.createElement("style",{nonce:t,id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:f}}),!o&&v&&e.createElement("script",{nonce:t,dangerouslySetInnerHTML:{__html:v}}),e.createElement("script",{nonce:t,type:"text/javascript",dangerouslySetInnerHTML:{__html:`window.okeProductUrlFormatter = ${"function"==typeof r?r.toString():"string"==typeof r?r:"(product) =>\n    product && product.productHandle\n        ? \"/products/\" + product.productHandle + \"/\" + (product.variantId ? '?variantId=' + product.variantId : '')\n        : undefined"}`}}),w&&e.createElement("div",{dangerouslySetInnerHTML:{__html:w}}),k&&e.createElement("div",{dangerouslySetInnerHTML:{__html:k}}))};const v=({dataAttributes:t,metafieldContent:n=""})=>{const r=a(null),o=a(!1),s=function(e){const t=a();return i((()=>{t.current=e})),t.current}(t),d=()=>{r.current&&(window.okeWidgetApi.initWidget(r.current),o.current=!0)};return i((()=>{if(!s||t["data-oke-widget"]!==s["data-oke-widget"]||t["data-oke-star-rating"]!==s["data-oke-star-rating"]||t["data-oke-reviews-product-id"]!==s["data-oke-reviews-product-id"]||!o.current)return window.okeWidgetApi&&r.current?d():document.addEventListener("oke-script-loaded",d),()=>{document.removeEventListener("oke-script-loaded",d)}}),[t,s]),e.createElement("div",{ref:r,key:JSON.stringify(t),...t,dangerouslySetInnerHTML:n?{__html:n}:void 0})},w=/^[0-9]*$/;function k(e){if(e)return`shopify-${w.test(e)?e:e.split("/").slice(-1)[0]}`}const y=({productId:t,okendoReviewsSnippet:n,placeholder:r})=>{const o=l(),a=t?.length?k(t):null,i=t?.length?n:null,s={"data-oke-widget":"","data-oke-reviews-product-id":a};return null===o||o.okendoDataLoaded?e.createElement(v,{dataAttributes:s,metafieldContent:i?.value}):r||e.createElement("div",{style:{height:"350px"}})},f=({productId:t,okendoStarRatingSnippet:n,placeholder:r})=>{const o=l(),a={"data-oke-star-rating":"","data-oke-reviews-product-id":k(t)};return null===o||o.okendoDataLoaded?e.createElement(v,{dataAttributes:a,metafieldContent:n?.value}):r||e.createElement("div",{style:{height:"20px"}})},h='#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: "$app:reviews"\n\t\t\tkey: "star_rating_snippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n',S='#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: "$app:reviews"\n\t\t\tkey: "reviews_widget_snippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n';export{S as OKENDO_PRODUCT_REVIEWS_FRAGMENT,h as OKENDO_PRODUCT_STAR_RATING_FRAGMENT,m as OkendoProvider,y as OkendoReviews,f as OkendoStarRating,p as getOkendoProviderData};
+import e,{createContext as t,useState as n,useContext as r,Suspense as a,useRef as o,useEffect as i}from"react";import{Await as d}from"@remix-run/react";const s=t(void 0),l=({children:t})=>{const[r,a]=n(!1);return e.createElement(s.Provider,{value:{okendoDataLoaded:r,setOkendoDataLoaded:a}},t)},c=()=>{const e=r(s);return void 0===e?null:e},u="cdn-static.okendo.io",p=async({context:e,subscriberId:t,apiDomain:n,cdnDomain:r})=>{const a=`https://${n||"api.okendo.io/v1"}/stores/${t}/widget_plus_settings`,o=await fetch(a);if(!o.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${t}'.`),null;const{reviewsHeaderConfig:i,cssVariables:d,customCss:s,starSymbols:l}=await o.json(),c=await fetch(`https://${r||u}/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: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: "$app:reviews"\n\t\t\t\t\tkey: "widget_pre_render_style_tags"\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:l}},m=({nonce:t="",okendoProviderData:n,productUrlFormatter:r,cdnDomain:o,children:i})=>e.createElement(l,null,n&&"then"in n?e.createElement(a,null,e.createElement(d,{resolve:n},(n=>e.createElement(g,{nonce:t,okendoProviderData:n,productUrlFormatter:r,cdnDomain:o,awaited:!0})))):e.createElement(g,{nonce:t,okendoProviderData:n,productUrlFormatter:r,cdnDomain:o}),i),g=({nonce:t="",okendoProviderData:n,productUrlFormatter:r,awaited:a,cdnDomain:d})=>{const s=c(),l=o(!1);if(i((()=>{if(n&&s?.setOkendoDataLoaded(!0),n&&a&&!l.current){const e=document.createElement("script");e.src=`https://${d||u}/reviews-widget-plus/js/okendo-reviews.js`,document.head.appendChild(e),l.current=!0}}),[n,s,a,d]),!n)return null;const{reviewsHeaderConfig:p,cssVariables:m,customCss:g,initScriptContents:v,preRenderStyleTags:k,starSymbols:w}=n,y=(m??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),h=g?g.replace('<style id="oke-reviews-custom-css">',"").replace("</style>",""):"";return e.createElement(e.Fragment,null,e.createElement("script",{nonce:t,id:"oke-reviews-settings",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify(p)}}),e.createElement("style",{nonce:t,id:"oke-css-vars",dangerouslySetInnerHTML:{__html:y}}),h&&e.createElement("style",{nonce:t,id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:h}}),!a&&v&&e.createElement("script",{nonce:t,dangerouslySetInnerHTML:{__html:v}}),e.createElement("script",{nonce:t,type:"text/javascript",dangerouslySetInnerHTML:{__html:`window.okeProductUrlFormatter = ${"function"==typeof r?r.toString():"string"==typeof r?r:"(product) =>\n    product && product.productHandle\n        ? \"/products/\" + product.productHandle + \"/\" + (product.variantId ? '?variantId=' + product.variantId : '')\n        : undefined"}`}}),k&&e.createElement("div",{dangerouslySetInnerHTML:{__html:k}}),w&&e.createElement("div",{dangerouslySetInnerHTML:{__html:w}}))};const v=({dataAttributes:t,metafieldContent:n=""})=>{const r=o(null),a=o(!1),d=function(e){const t=o();return i((()=>{t.current=e})),t.current}(t),s=()=>{r.current&&(window.okeWidgetApi.initWidget(r.current),a.current=!0)};return i((()=>{if(!d||t["data-oke-widget"]!==d["data-oke-widget"]||t["data-oke-star-rating"]!==d["data-oke-star-rating"]||t["data-oke-reviews-product-id"]!==d["data-oke-reviews-product-id"]||!a.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 a=c(),o=t?.length?w(t):null,i=t?.length?n:null,d={"data-oke-widget":"","data-oke-reviews-product-id":o};return null===a||a.okendoDataLoaded?e.createElement(v,{dataAttributes:d,metafieldContent:i?.value}):r||e.createElement("div",{style:{height:"350px"}})},h=({productId:t,groupId:n,headerBadgeUrl:r,placeholder:a})=>{const o=c(),i={"data-oke-carousel":"","data-oke-reviews-product-id":t?.length?w(t):null,"data-oke-reviews-group-id":n?.length?n:null,"data-oke-header-badge-url":r};return null===o||o.okendoDataLoaded?e.createElement(v,{dataAttributes:i}):a||e.createElement("div",{style:{height:"350px"}})},f=({productId:t,okendoStarRatingSnippet:n,placeholder:r})=>{const a=c(),o={"data-oke-star-rating":"","data-oke-reviews-product-id":w(t)};return null===a||a.okendoDataLoaded?e.createElement(v,{dataAttributes:o,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: "$app:reviews"\n\t\t\tkey: "star_rating_snippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n',_='#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: "$app:reviews"\n\t\t\tkey: "reviews_widget_snippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n';export{_ as OKENDO_PRODUCT_REVIEWS_FRAGMENT,S as OKENDO_PRODUCT_STAR_RATING_FRAGMENT,m as OkendoProvider,y as OkendoReviews,h as OkendoReviewsCarousel,f as OkendoStarRating,p as getOkendoProviderData};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+interface OkendoReviewsCarouselProps {
+    productId?: string;
+    groupId?: string;
+    headerBadgeUrl?: string;
+    /**
+     * 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 OkendoReviewsCarousel: ({ productId, groupId, headerBadgeUrl, placeholder }: OkendoReviewsCarouselProps) => React.JSX.Element;
+export {};

package/dist/esm/types/components/OkendoReviewsCarousel/index.d.ts

@@ -0,0 +1 @@
+export * from "./OkendoReviewsCarousel";

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

@@ -1,3 +1,4 @@
 export * from "./OkendoProvider";
 export * from "./OkendoReviews";
+export * from "./OkendoReviewsCarousel";
 export * from "./OkendoStarRating";

package/dist/index.d.ts

@@ -61,6 +61,18 @@ interface OkendoReviewsProps {
 }
 declare const OkendoReviews: ({ productId, okendoReviewsSnippet, placeholder }: OkendoReviewsProps) => React.JSX.Element;
 
+interface OkendoReviewsCarouselProps {
+    productId?: string;
+    groupId?: string;
+    headerBadgeUrl?: string;
+    /**
+     * 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 OkendoReviewsCarousel: ({ productId, groupId, headerBadgeUrl, placeholder }: OkendoReviewsCarouselProps) => React.JSX.Element;
+
 interface WithOkendoStarRatingSnippet {
     okendoStarRatingSnippet?: MetafieldValue | null;
 }
@@ -78,4 +90,4 @@ declare const OkendoStarRating: ({ productId, okendoStarRatingSnippet, placehold
 declare const OKENDO_PRODUCT_STAR_RATING_FRAGMENT: "#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: \"$app:reviews\"\n\t\t\tkey: \"star_rating_snippet\"\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: \"$app:reviews\"\n\t\t\tkey: \"reviews_widget_snippet\"\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, type WithOkendoReviewsSnippet, type WithOkendoStarRatingSnippet, getOkendoProviderData };
+export { OKENDO_PRODUCT_REVIEWS_FRAGMENT, OKENDO_PRODUCT_STAR_RATING_FRAGMENT, OkendoProvider, OkendoReviews, OkendoReviewsCarousel, OkendoStarRating, type WithOkendoReviewsSnippet, type WithOkendoStarRatingSnippet, getOkendoProviderData };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@okendo/shopify-hydrogen",
-    "version": "2.3.1",
+    "version": "2.3.2",
     "description": "Okendo React components for Shopify Hydrogen 2 (Remix)",
     "author": "Okendo",
     "license": "SEE LICENSE IN LICENSE.txt",