@okendo/shopify-hydrogen 2.2.3 → 2.2.5

package/README.md

@@ -42,19 +42,16 @@ unauthenticated_read_product_tags
 
 Follow the instructions on [this page](https://help.shopify.com/en/manual/apps/app-types/custom-apps#create-and-install-a-custom-app) to create it.
 
-#### Note
-
-Shopify is in the process of deprecating `metafieldStorefrontVisibilityCreate` in favour of `metafieldDefinitionCreate`. The following method uses `metafieldDefinitionCreate`. If you're having trouble with it, you will find below the deprecated method using `metafieldStorefrontVisibilityCreate`.
 
 #### Using Curl
 
 Open a new terminal or PowerShell window, then:
 
-1. Run the following command to expose the `WidgetPreRenderStyleTags` shop metafield:
+1. Run the following command to expose the `widget_pre_render_style_tags` shop metafield:
 
 ```bash
 curl -X POST \
-https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
+https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'Content-Type: application/graphql' \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
@@ -62,11 +59,14 @@ mutation {
 	metafieldDefinitionCreate(
 		definition: {
 			name: "WidgetPreRenderStyleTags"
-			namespace: "okendo"
-			key: "WidgetPreRenderStyleTags"
+			namespace: "$app:review"
+			key: "widget_pre_render_style_tags"
 			type: "multi_line_text_field"
 			ownerType: SHOP
-			visibleToStorefrontApi: true
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
 		}
 	) {
 		createdDefinition { id name }
@@ -76,11 +76,11 @@ mutation {
 '
 ```
 
-2. Run the following command to expose the `WidgetPreRenderBodyStyleTags` shop metafield:
+2. Run the following command to expose the `widget_pre_render_body_style_tags` shop metafield:
 
 ```bash
 curl -X POST \
-https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
+https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'Content-Type: application/graphql' \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
@@ -88,11 +88,14 @@ mutation {
 	metafieldDefinitionCreate(
 		definition: {
 			name: "WidgetPreRenderBodyStyleTags"
-			namespace: "okendo"
-			key: "WidgetPreRenderBodyStyleTags"
+			namespace: "$app:review"
+			key: "widget_pre_render_body_style_tags"
 			type: "multi_line_text_field"
 			ownerType: SHOP
-			visibleToStorefrontApi: true
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
 		}
 	) {
 		createdDefinition { id name }
@@ -102,11 +105,11 @@ mutation {
 '
 ```
 
-3. Run the following command to expose the `ReviewsWidgetSnippet` product metafield:
+3. Run the following command to expose the `reviews_widget_snippet` product metafield:
 
 ```bash
 curl -X POST \
-https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
+https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'Content-Type: application/graphql' \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
@@ -114,11 +117,14 @@ mutation {
 	metafieldDefinitionCreate(
 		definition: {
 			name: "ReviewsWidgetSnippet"
-			namespace: "okendo"
-			key: "ReviewsWidgetSnippet"
+			namespace: "$app:reviews"
+			key: "reviews_widget_snippet"
 			type: "multi_line_text_field"
 			ownerType: PRODUCT
-			visibleToStorefrontApi: true
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
 		}
 	) {
 		createdDefinition { id name }
@@ -128,11 +134,11 @@ mutation {
 '
 ```
 
-4. Run the following command to expose the `StarRatingSnippet` the product metafield:
+4. Run the following command to expose the `star_rating_snippet` product metafield:
 
 ```bash
 curl -X POST \
-https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
+https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'Content-Type: application/graphql' \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
@@ -140,11 +146,72 @@ mutation {
 	metafieldDefinitionCreate(
 		definition: {
 			name: "StarRatingSnippet"
-			namespace: "okendo"
-			key: "StarRatingSnippet"
+			namespace: "$app:reviews"
+			key: "star_rating_snippet"
 			type: "multi_line_text_field"
 			ownerType: PRODUCT
-			visibleToStorefrontApi: true
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
+		}
+	) {
+		createdDefinition { id name }
+		userErrors { field message code }
+	}
+}
+'
+```
+
+5. Run the following command to expose the `review_count` product metafield:
+
+```bash
+curl -X POST \
+https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
+-H 'Content-Type: application/graphql' \
+-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 }
+	}
+}
+'
+```
+
+6. Run the following command to expose the `average_rating` product metafield:
+
+```bash
+curl -X POST \
+https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
+-H 'Content-Type: application/graphql' \
+-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 }
@@ -158,21 +225,24 @@ mutation {
 
 Open your GraphQL IDE (such as Postman) and make `POST` requests with the following details:
 
-- **URL:** https://{shop}.myshopify.com/admin/api/2023-07/graphql.json
+- **URL:** https://{shop}.myshopify.com/admin/api/2024-10/graphql.json
 - **Headers:** - X-Shopify-Access-Token: {access_token} - Content-Type: application/json
 
-1. Execute the following request to expose the `WidgetPreRenderStyleTags` shop metafield:
+1. Execute the following request to expose the `widget_pre_render_style_tags` shop metafield:
 
 ```graphql
 mutation {
 	metafieldDefinitionCreate(
 		definition: {
 			name: "WidgetPreRenderStyleTags"
-			namespace: "okendo"
-			key: "WidgetPreRenderStyleTags"
+			namespace: "$app:reviews"
+			key: "widget_pre_render_style_tags"
 			type: "multi_line_text_field"
 			ownerType: SHOP
-			visibleToStorefrontApi: true
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
 		}
 	) {
 		createdDefinition {
@@ -188,18 +258,21 @@ mutation {
 }
 ```
 
-2. Execute the following request to expose the `WidgetPreRenderBodyStyleTags` shop metafield:
+2. Execute the following request to expose the `widget_pre_render_body_style_tags` shop metafield:
 
 ```graphql
 mutation {
 	metafieldDefinitionCreate(
 		definition: {
 			name: "WidgetPreRenderBodyStyleTags"
-			namespace: "okendo"
-			key: "WidgetPreRenderBodyStyleTags"
+			namespace: "$app:reviews"
+			key: "widget_pre_render_body_style_tags"
 			type: "multi_line_text_field"
 			ownerType: SHOP
-			visibleToStorefrontApi: true
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
 		}
 	) {
 		createdDefinition {
@@ -215,18 +288,21 @@ mutation {
 }
 ```
 
-3. Execute the following request to expose the `ReviewsWidgetSnippet` product metafield:
+3. Execute the following request to expose the `reviews_widget_snippet` product metafield:
 
 ```graphql
 mutation {
 	metafieldDefinitionCreate(
 		definition: {
 			name: "ReviewsWidgetSnippet"
-			namespace: "okendo"
-			key: "ReviewsWidgetSnippet"
+			namespace: "$app:reviews"
+			key: "reviews_widget_snippet"
 			type: "multi_line_text_field"
 			ownerType: PRODUCT
-			visibleToStorefrontApi: true
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
 		}
 	) {
 		createdDefinition {
@@ -242,18 +318,21 @@ mutation {
 }
 ```
 
-4. Execute the following request to expose the `StarRatingSnippet` the product metafield:
+4. Execute the following request to expose the `star_rating_snippet` product metafield:
 
 ```graphql
 mutation {
 	metafieldDefinitionCreate(
 		definition: {
 			name: "StarRatingSnippet"
-			namespace: "okendo"
-			key: "StarRatingSnippet"
+			namespace: "$app:reviews"
+			key: "star_rating_snippet"
 			type: "multi_line_text_field"
 			ownerType: PRODUCT
-			visibleToStorefrontApi: true
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
 		}
 	) {
 		createdDefinition {
@@ -269,225 +348,70 @@ mutation {
 }
 ```
 
-**References**
-
-- [https://shopify.dev/api/examples/metafields#step-1-expose-metafields](https://shopify.dev/api/examples/metafields#step-1-expose-metafields)
-- [https://shopify.dev/api/admin-graphql/2023-07/mutations/metafieldDefinitionCreate](https://shopify.dev/api/admin-graphql/2023-07/mutations/metafieldDefinitionCreate)
-
-<details>
-
-<summary>If you're having trouble with `metafieldDefinitionCreate`, click here to see the deprecated method, using `metafieldStorefrontVisibilityCreate`.</summary>
-
-#### Using Curl
-
-Open a new terminal or PowerShell window, then:
-
-1. Run the following command to expose the `WidgetPreRenderStyleTags` shop metafield:
-
-```bash
-curl -X POST \
-https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
--H 'Content-Type: application/graphql' \
--H 'X-Shopify-Access-Token: {access_token}' \
--d '
-mutation {
-	metafieldStorefrontVisibilityCreate(
-		input: {
-			namespace: "okendo"
-			key: "WidgetPreRenderStyleTags"
-			ownerType: SHOP
-		}
-	) {
-		metafieldStorefrontVisibility {
-			id
-		}
-		userErrors {
-			field
-			message
-		}
-	}
-}
-'
-```
-
-2. Run the following command to expose the `WidgetPreRenderBodyStyleTags` shop metafield:
-
-```bash
-curl -X POST \
-https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
--H 'Content-Type: application/graphql' \
--H 'X-Shopify-Access-Token: {access_token}' \
--d '
-mutation {
-	metafieldStorefrontVisibilityCreate(
-		input: {
-			namespace: "okendo"
-			key: "WidgetPreRenderBodyStyleTags"
-			ownerType: SHOP
-		}
-	) {
-		metafieldStorefrontVisibility {
-			id
-		}
-		userErrors {
-			field
-			message
-		}
-	}
-}
-'
-```
-
-3. Run the following command to expose the `ReviewsWidgetSnippet` product metafield:
-
-```bash
-curl -X POST \
-https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
--H 'Content-Type: application/graphql' \
--H 'X-Shopify-Access-Token: {access_token}' \
--d '
-mutation {
-	metafieldStorefrontVisibilityCreate(
-		input: {
-			namespace: "okendo"
-			key: "ReviewsWidgetSnippet"
-			ownerType: PRODUCT
-		}
-	) {
-		metafieldStorefrontVisibility {
-			id
-		}
-		userErrors {
-			field
-			message
-		}
-	}
-}
-'
-```
-
-4. Run the following command to expose the `StarRatingSnippet` the product metafield:
-
-```bash
-curl -X POST \
-https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
--H 'Content-Type: application/graphql' \
--H 'X-Shopify-Access-Token: {access_token}' \
--d '
-mutation {
-	metafieldStorefrontVisibilityCreate(
-		input: {
-			namespace: "okendo"
-			key: "StarRatingSnippet"
-			ownerType: PRODUCT
-		}
-	) {
-		metafieldStorefrontVisibility {
-			id
-		}
-		userErrors {
-			field
-			message
-		}
-	}
-}
-'
-```
-
-### Using GraphQL IDE
-
-Open your GraphQL IDE (such as Postman) and make `POST` requests with the following details:
-
-- **URL:** https://{shop}.myshopify.com/admin/api/2023-07/graphql.json
-- **Headers:** - X-Shopify-Access-Token: {access_token} - Content-Type: application/json
-
-1. Execute the following request to expose the `WidgetPreRenderStyleTags` shop metafield:
-
-```graphql
-mutation {
-	metafieldStorefrontVisibilityCreate(
-		input: {
-			namespace: "okendo"
-			key: "WidgetPreRenderStyleTags"
-			ownerType: SHOP
-		}
-	) {
-		metafieldStorefrontVisibility {
-			id
-		}
-		userErrors {
-			field
-			message
-		}
-	}
-}
-```
-
-2. Execute the following request to expose the `WidgetPreRenderBodyStyleTags` shop metafield:
+5. Execute the following request to expose the `review_count` product metafield:
 
 ```graphql
 mutation {
-	metafieldStorefrontVisibilityCreate(
-		input: {
-			namespace: "okendo"
-			key: "WidgetPreRenderBodyStyleTags"
-			ownerType: SHOP
+	metafieldDefinitionCreate(
+		definition: {
+			name: "ReviewCount"
+			namespace: "$app:reviews"
+			key: "review_count"
+			type: "number_integer"
+			ownerType: PRODUCT
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
 		}
 	) {
-		metafieldStorefrontVisibility {
+		createdDefinition {
 			id
+			name
 		}
 		userErrors {
 			field
 			message
+			code
 		}
 	}
 }
 ```
 
-3. Execute the following request to expose the `ReviewsWidgetSnippet` product metafield:
+6. Execute the following request to expose the `average_rating` product metafield:
 
 ```graphql
 mutation {
-	metafieldStorefrontVisibilityCreate(
-		input: {
-			namespace: "okendo"
-			key: "ReviewsWidgetSnippet"
+	metafieldDefinitionCreate(
+		definition: {
+			name: "AverageRating"
+			namespace: "$app:reviews"
+			key: "average_rating"
+			type: "rating"
 			ownerType: PRODUCT
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
 		}
 	) {
-		metafieldStorefrontVisibility {
-			id
-		}
-		userErrors {
-			field
-			message
-		}
-	}
-}
-```
-
-4. Execute the following request to expose the `StarRatingSnippet` the product metafield:
-
-```graphql
-mutation {
-	metafieldStorefrontVisibilityCreate(
-		input: { namespace: "okendo", key: "StarRatingSnippet", ownerType: PRODUCT }
-	) {
-		metafieldStorefrontVisibility {
+		createdDefinition {
 			id
+			name
 		}
 		userErrors {
 			field
 			message
+			code
 		}
 	}
 }
 ```
 
-</details>
+**References**
 
-</details>
+- [https://shopify.dev/api/examples/metafields#step-1-expose-metafields](https://shopify.dev/api/examples/metafields#step-1-expose-metafields)
+- [https://shopify.dev/docs/api/admin-graphql/2024-10/mutations/metafieldDefinitionCreate](https://shopify.dev/docs/api/admin-graphql/2024-10/mutations/metafieldDefinitionCreate)
 
 ## Installation
 
@@ -587,76 +511,89 @@ Append `OkendoProvider` to `body`, and pass it the promise — or the data — r
 
 > This is only necessary if Content Security Policy is active in your project.
 
-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`
-
+Locate the call to `createContentSecurityPolicy`, and ensure your configuration includes the entries below:
 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
 const { nonce, header, NonceProvider } = createContentSecurityPolicy({
-	defaultSrc: [
-		"'self'",
-		"localhost:*",
-		"https://cdn.shopify.com",
-		"https://d3hw6dc1ow8pp2.cloudfront.net",
-		"https://d3g5hqndtiniji.cloudfront.net",
-		"https://cdn-static.okendo.io",
-		"https://surveys.okendo.io",
-		"data:",
-	],
-	imgSrc: [
-		"'self'",
-		"https://cdn.shopify.com",
-		"data:",
-		"https://d3hw6dc1ow8pp2.cloudfront.net",
-		"https://d3g5hqndtiniji.cloudfront.net",
-		"https://cdn-static.okendo.io",
-		"https://surveys.okendo.io",
-	],
-	mediaSrc: [
-		"'self'",
-		"https://d3hw6dc1ow8pp2.cloudfront.net",
-		"https://d3g5hqndtiniji.cloudfront.net",
-		"https://cdn-static.okendo.io",
-	],
-	styleSrcElem: [
-		"'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'",
-		"https://cdn.shopify.com",
-		"https://d3hw6dc1ow8pp2.cloudfront.net",
-		"https://cdn-static.okendo.io",
-		"https://surveys.okendo.io",
-	],
-	fontSrc: [
-		"'self'",
-		"https://fonts.gstatic.com",
-		"https://d3hw6dc1ow8pp2.cloudfront.net",
-		"https://cdn.shopify.com",
-		"https://cdn-static.okendo.io",
-		"https://surveys.okendo.io",
-	],
-	connectSrc: [
-		"'self'",
-		"https://monorail-edge.shopifysvc.com",
-		"localhost:*",
-		"ws://localhost:*",
-		"ws://127.0.0.1:*",
-		"https://api.okendo.io",
-		"https://cdn-static.okendo.io",
-		"https://surveys.okendo.io",
-	],
+    defaultSrc: [
+      "'self'",
+      "localhost:*",
+      "https://cdn.shopify.com",
+      "https://www.google.com",
+      "https://www.gstatic.com",
+      "https://d3hw6dc1ow8pp2.cloudfront.net",
+      "https://d3g5hqndtiniji.cloudfront.net",
+      "https://dov7r31oq5dkj.cloudfront.net",
+      "https://cdn-static.okendo.io",
+      "https://surveys.okendo.io",
+      "https://api.okendo.io",
+      "data:",
+    ],
+    imgSrc: [
+      "'self'",
+      "https://cdn.shopify.com",
+      "data:",
+      "https://d3hw6dc1ow8pp2.cloudfront.net",
+      "https://d3g5hqndtiniji.cloudfront.net",
+      "https://dov7r31oq5dkj.cloudfront.net",
+      "https://cdn-static.okendo.io",
+      "https://surveys.okendo.io"
+    ],
+    mediaSrc: [
+      "'self'",
+      "https://d3hw6dc1ow8pp2.cloudfront.net",
+      "https://d3g5hqndtiniji.cloudfront.net",
+      "https://dov7r31oq5dkj.cloudfront.net",
+      "https://cdn-static.okendo.io"
+    ],
+    styleSrcElem: [
+      "'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'",
+      "https://cdn.shopify.com",
+      "https://d3hw6dc1ow8pp2.cloudfront.net",
+      "https://dov7r31oq5dkj.cloudfront.net",
+      "https://cdn-static.okendo.io",
+      "https://surveys.okendo.io",
+      "https://api.okendo.io",
+      "https://www.google.com",
+      "https://www.gstatic.com"
+    ],
+    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'",
+      "https://monorail-edge.shopifysvc.com",
+      "localhost:*",
+      "ws://localhost:*",
+      "ws://127.0.0.1:*",
+      "https://api.okendo.io",
+      "https://cdn-static.okendo.io",
+      "https://surveys.okendo.io",
+      "https://api.raygun.com",
+      "https://www.google.com",
+      "https://www.gstatic.com",
+    ],
+    frameSrc: [
+      "https://www.google.com",
+      "https://www.gstatic.com"
+    ]
 });
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@okendo/shopify-hydrogen",
-    "version": "2.2.3",
+    "version": "2.2.5",
     "description": "Okendo React components for Shopify Hydrogen 2 (Remix)",
     "author": "Okendo",
     "license": "SEE LICENSE IN LICENSE.txt",
@@ -19,8 +19,8 @@
         "eslint": "eslint src"
     },
     "devDependencies": {
-        "@okendo/reviews-common": "^5.163.1",
-        "@okendo/reviews-widget-plus": "^0.68.3",
+        "@okendo/reviews-common": "^7.14.0",
+        "@okendo/reviews-widget-plus": "^0.70.23",
         "@okendo/tsconfig": "0.0.2",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@rollup/plugin-node-resolve": "^15.2.3",