@graphcommerce/magento-review 2.105.1

package/CHANGELOG.md

@@ -0,0 +1,124 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [2.105.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.105.0...@graphcommerce/magento-review@2.105.1) (2021-09-27)
+
+**Note:** Version bump only for package @graphcommerce/magento-review
+
+
+
+
+
+# 2.105.0 (2021-09-27)
+
+
+### Bug Fixes
+
+* customer-order folder structure ([b7fabd1](https://github.com/ho-nl/m2-pwa/commit/b7fabd12014b2925d0b89c21f58e9974ce1c8b40))
+* introduced SvgImageSimple and solve issue with review chips ([931d7fd](https://github.com/ho-nl/m2-pwa/commit/931d7fdcf0faa9d2264899b72e564138215b6bd8))
+* make separate queries folder, create injectable for account and inject reviews ([5d82a5d](https://github.com/ho-nl/m2-pwa/commit/5d82a5d9162f687c2678cce215b77eedbaf1669e))
+* remove coupon form style was too large ([30df274](https://github.com/ho-nl/m2-pwa/commit/30df274ecdffdcebd76710a5304d6fa248e81211))
+* **review:** make sure chip is rendered correctly ([387df34](https://github.com/ho-nl/m2-pwa/commit/387df3456973290f9ce98d47823a7c71a6d95850))
+* SvgSimpleImage sizing didn't use rem ([1ba07a5](https://github.com/ho-nl/m2-pwa/commit/1ba07a5694bd60ad3cee2e8102814643d2a7c79d))
+
+
+### Features
+
+* **playwright:** added new playwright package to enable browser testing ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+* renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of [@reachdigital](https://github.com/reachdigital) ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
+* **theme:** restructured fonts and applied to home and category page ([6adf5f1](https://github.com/ho-nl/m2-pwa/commit/6adf5f11321bdfbf499125f1161c5abf5a1bfe4a))
+* upgraded to nextjs 11 ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
+
+
+### Reverts
+
+* Revert "chore: upgrade @apollo/client" ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
+
+
+
+
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [2.104.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.103.2...@graphcommerce/magento-review@2.104.0) (2021-08-12)
+
+### Bug Fixes
+
+- remove coupon form style was too large
+  ([30df274](https://github.com/ho-nl/m2-pwa/commit/30df274ecdffdcebd76710a5304d6fa248e81211))
+
+### Features
+
+- upgraded to nextjs 11
+  ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
+
+## [2.103.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.103.1...@graphcommerce/magento-review@2.103.2) (2021-08-09)
+
+### Bug Fixes
+
+- SvgSimpleImage sizing didn't use rem
+  ([1ba07a5](https://github.com/ho-nl/m2-pwa/commit/1ba07a5694bd60ad3cee2e8102814643d2a7c79d))
+
+### Reverts
+
+- Revert "chore: upgrade @apollo/client"
+  ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
+
+## [2.103.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.103.0...@graphcommerce/magento-review@2.103.1) (2021-08-09)
+
+### Bug Fixes
+
+- **review:** make sure chip is rendered correctly
+  ([387df34](https://github.com/ho-nl/m2-pwa/commit/387df3456973290f9ce98d47823a7c71a6d95850))
+
+# [2.103.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.102.6...@graphcommerce/magento-review@2.103.0) (2021-08-06)
+
+### Bug Fixes
+
+- introduced SvgImageSimple and solve issue with review chips
+  ([931d7fd](https://github.com/ho-nl/m2-pwa/commit/931d7fdcf0faa9d2264899b72e564138215b6bd8))
+
+### Features
+
+- **theme:** restructured fonts and applied to home and category page
+  ([6adf5f1](https://github.com/ho-nl/m2-pwa/commit/6adf5f11321bdfbf499125f1161c5abf5a1bfe4a))
+
+# [2.102.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.101.3...@graphcommerce/magento-review@2.102.0) (2021-07-26)
+
+### Features
+
+- **playwright:** added new playwright package to enable browser testing
+  ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+
+## 2.101.1 (2021-07-23)
+
+### Bug Fixes
+
+- customer-order folder structure
+  ([b7fabd1](https://github.com/ho-nl/m2-pwa/commit/b7fabd12014b2925d0b89c21f58e9974ce1c8b40))
+- make separate queries folder, create injectable for account and inject reviews
+  ([5d82a5d](https://github.com/ho-nl/m2-pwa/commit/5d82a5d9162f687c2678cce215b77eedbaf1669e))
+
+# [2.101.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product-review@2.100.14...@graphcommerce/magento-product-review@2.101.0) (2021-07-21)
+
+### Bug Fixes
+
+- write review button mobile styles
+  ([8f6b883](https://github.com/ho-nl/m2-pwa/commit/8f6b883fa0a513f84b7c6d8ed376b0e8d4b8a3bd))
+
+### Features
+
+- **reviews:** no reviews written message
+  ([8ade3db](https://github.com/ho-nl/m2-pwa/commit/8ade3dbe830f5a59af09c002dfa38fa5349a4b61))
+
+## [2.100.11](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product-review@2.100.10...@graphcommerce/magento-product-review@2.100.11) (2021-07-20)
+
+### Bug Fixes
+
+- ignore md files from triggering version updates
+  ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))

package/components/AccountReviews/AccountReviews.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type AccountReviewsFragment = { items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, product: { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> };

package/components/AccountReviews/AccountReviews.graphql

@@ -0,0 +1,5 @@
+fragment AccountReviews on ProductReviews {
+  items {
+    ...CustomerReview
+  }
+}

package/components/AccountReviews/index.tsx

@@ -0,0 +1,64 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import { Skeleton } from '@material-ui/lab'
+import { SectionContainer } from '@graphcommerce/next-ui'
+import React from 'react'
+import CustomerReview from '../CustomerReview'
+import { AccountReviewsFragment } from './AccountReviews.gql'
+
+type AccountReviewsProps = AccountReviewsFragment & { loading: boolean }
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    reviewsContainer: {
+      marginBottom: theme.spacings.md,
+    },
+    olderReviewsContainer: {
+      [theme.breakpoints.up('md')]: {
+        marginTop: theme.spacings.lg,
+        marginBottom: theme.spacings.lg,
+      },
+      marginTop: theme.spacings.md,
+      marginBottom: theme.spacings.md,
+    },
+  }),
+  { name: 'AccountReviews' },
+)
+
+export default function AccountReviews(props: AccountReviewsProps) {
+  const { items, loading } = props
+  const classes = useStyles()
+  const showLatestReviews = 2
+  const latestReviews = items?.slice(0, Math.min(items?.length, showLatestReviews))
+  const olderReviews = items?.slice(Math.min(items?.length, showLatestReviews), items?.length)
+
+  if (loading) {
+    return (
+      <div className={classes.reviewsContainer}>
+        <SectionContainer labelLeft='Latest'>
+          <Skeleton height={196} />
+          <Skeleton height={196} />
+        </SectionContainer>
+      </div>
+    )
+  }
+  return (
+    <div className={classes.reviewsContainer}>
+      <SectionContainer labelLeft='Latest'>
+        {latestReviews?.map(
+          (review) => review && <CustomerReview key={review.created_at} {...review} />,
+        )}
+      </SectionContainer>
+
+      {items && items.length >= showLatestReviews + 1 && (
+        <SectionContainer
+          labelLeft='Older'
+          classes={{ sectionContainer: classes.olderReviewsContainer }}
+        >
+          {olderReviews?.map(
+            (review, i) => review && <CustomerReview key={review.created_at} {...review} />,
+          )}
+        </SectionContainer>
+      )}
+    </div>
+  )
+}

package/components/CreateProductReviewForm/CreateProductReview.gql.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const CreateProductReviewDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateProductReview"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"nickname"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"ratings"}},"type":{"kind":"NonNullType","type":{"kind":"ListType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ProductReviewRatingInput"}}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"sku"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"summary"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"text"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createProductReview"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"nickname"},"value":{"kind":"Variable","name":{"kind":"Name","value":"nickname"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"ratings"},"value":{"kind":"Variable","name":{"kind":"Name","value":"ratings"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"sku"},"value":{"kind":"Variable","name":{"kind":"Name","value":"sku"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"summary"},"value":{"kind":"Variable","name":{"kind":"Name","value":"summary"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"text"},"value":{"kind":"Variable","name":{"kind":"Name","value":"text"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"review"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"average_rating"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"product"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"url_key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"thumbnail"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"nickname"}},{"kind":"Field","name":{"kind":"Name","value":"summary"}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"ratings_breakdown"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}}]}}]} as unknown as DocumentNode<CreateProductReviewMutation, CreateProductReviewMutationVariables>;
+export type CreateProductReviewMutationVariables = Types.Exact<{
+  nickname: Types.Scalars['String'];
+  ratings: Array<Types.Maybe<Types.ProductReviewRatingInput>> | Types.Maybe<Types.ProductReviewRatingInput>;
+  sku: Types.Scalars['String'];
+  summary: Types.Scalars['String'];
+  text: Types.Scalars['String'];
+}>;
+
+
+export type CreateProductReviewMutation = { createProductReview: { review: { average_rating: number, created_at: string, nickname: string, summary: string, text: string, product: { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> } } };

package/components/CreateProductReviewForm/CreateProductReview.graphql

@@ -0,0 +1,15 @@
+mutation CreateProductReview(
+  $nickname: String!
+  $ratings: [ProductReviewRatingInput]!
+  $sku: String!
+  $summary: String!
+  $text: String!
+) {
+  createProductReview(
+    input: { nickname: $nickname, ratings: $ratings, sku: $sku, summary: $summary, text: $text }
+  ) {
+    review {
+      ...CustomerReview
+    }
+  }
+}

package/components/CreateProductReviewForm/ProductReviewRatingsMetadata.gql.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const ProductReviewRatingsMetadataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProductReviewRatingsMetadata"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"productReviewRatingsMetadata"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"values"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"value"}},{"kind":"Field","name":{"kind":"Name","value":"value_id"}}]}}]}}]}}]}}]} as unknown as DocumentNode<ProductReviewRatingsMetadataQuery, ProductReviewRatingsMetadataQueryVariables>;
+export type ProductReviewRatingsMetadataQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type ProductReviewRatingsMetadataQuery = { productReviewRatingsMetadata: { items: Array<Types.Maybe<{ id: string, name: string, values: Array<Types.Maybe<{ value: string, value_id: string }>> }>> } };

package/components/CreateProductReviewForm/ProductReviewRatingsMetadata.graphql

@@ -0,0 +1,12 @@
+query ProductReviewRatingsMetadata {
+  productReviewRatingsMetadata {
+    items {
+      id
+      name
+      values {
+        value
+        value_id
+      }
+    }
+  }
+}

package/components/CreateProductReviewForm/index.tsx

@@ -0,0 +1,231 @@
+import { useQuery } from '@apollo/client'
+import { Box, makeStyles, TextField, Theme, Typography } from '@material-ui/core'
+import { Alert } from '@material-ui/lab'
+import { ProductReviewRatingInput } from '@graphcommerce/graphql'
+import {
+  Button,
+  Form,
+  UseStyles,
+  responsiveVal,
+  FormActions,
+  FormRow,
+  StarRatingField,
+} from '@graphcommerce/next-ui'
+import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { useRouter } from 'next/router'
+import React, { useEffect, useState } from 'react'
+import ApolloCustomerErrorAlert from '../../../magento-customer/components/ApolloCustomerError/ApolloCustomerErrorAlert'
+import { CreateProductReviewDocument } from './CreateProductReview.gql'
+import { ProductReviewRatingsMetadataDocument } from './ProductReviewRatingsMetadata.gql'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    ratingContainer: {
+      marginBottom: theme.spacings.xxs,
+    },
+    rating: {
+      paddingBottom: 'unset',
+      gridTemplateColumns: `minmax(${responsiveVal(60, 80)}, 0.1fr) max-content`,
+      alignItems: 'center',
+    },
+    ratingLabel: {
+      fontWeight: 'normal',
+      justifySelf: 'left',
+    },
+    submitButton: {
+      width: responsiveVal(200, 250),
+      height: responsiveVal(40, 50),
+      borderRadius: responsiveVal(20, 25),
+    },
+    cancelButton: {
+      display: 'block',
+      maxWidth: 'max-content',
+      margin: '0 auto',
+    },
+    formActions: {
+      gridAutoFlow: 'row',
+      gap: 8,
+      marginTop: theme.spacings.xxs,
+    },
+  }),
+  {
+    name: 'CreateProductReviewForm',
+  },
+)
+
+type CreateProductReviewFormProps = {
+  sku: string
+  nickname?: string
+} & UseStyles<typeof useStyles>
+
+export default function CreateProductReviewForm(props: CreateProductReviewFormProps) {
+  const { sku, nickname } = props
+  const classes = useStyles(props)
+  const router = useRouter()
+  const [ratings, setRatings] = useState<ProductReviewRatingInput[]>([])
+
+  const { data, loading } = useQuery(ProductReviewRatingsMetadataDocument)
+
+  const form = useFormGqlMutation(
+    CreateProductReviewDocument,
+    {
+      defaultValues: { sku, nickname },
+      onBeforeSubmit: (formData) => ({
+        ...formData,
+        ratings: ratings.some((r) => r.value_id === '') ? [] : ratings,
+      }),
+    },
+    { errorPolicy: 'all' },
+  )
+  const { handleSubmit, muiRegister, formState, required, error } = form
+  const submitHandler = handleSubmit(() => {})
+
+  useEffect(() => {
+    if (loading || !data) return
+
+    // set initial state
+    if (ratings.length === 0) {
+      const reviewMetadataRatings = data.productReviewRatingsMetadata.items.map((metadata) => ({
+        id: metadata?.id ?? '',
+        value_id: '',
+      }))
+
+      setRatings(reviewMetadataRatings)
+    }
+  }, [loading, data, ratings.length])
+
+  if (!data) return <></>
+
+  if (formState.isSubmitSuccessful && data) {
+    return (
+      <>
+        <Alert severity='success' variant='standard'>
+          Thank you! Your review was successfully submitted for approval
+        </Alert>
+        <Box mt={6}>
+          <Button
+            variant='contained'
+            color='primary'
+            text='bold'
+            size='large'
+            onClick={() => router.back()}
+          >
+            Continue shopping
+          </Button>
+        </Box>
+      </>
+    )
+  }
+
+  return (
+    <Form onSubmit={submitHandler} noValidate>
+      <FormRow>
+        <TextField
+          variant='outlined'
+          type='text'
+          error={!!formState.errors.nickname || !!error}
+          label='Name'
+          required={required.nickname}
+          {...muiRegister('nickname', { required: required.nickname })}
+          helperText={formState.errors.nickname?.message}
+          disabled={formState.isSubmitting}
+          InputProps={{
+            readOnly: typeof nickname !== 'undefined',
+          }}
+        />
+      </FormRow>
+
+      <div className={classes.ratingContainer}>
+        {data?.productReviewRatingsMetadata?.items?.map((prrvm) => (
+          <FormRow key={prrvm?.id} className={classes.rating}>
+            <Typography variant='h5' component='span' className={classes.ratingLabel}>
+              {prrvm?.name}
+            </Typography>
+            {prrvm && (
+              <StarRatingField
+                id={prrvm?.id ?? ''}
+                onChange={(id, value) => {
+                  const productReviewRatingInputValue =
+                    data.productReviewRatingsMetadata.items.find((meta) => meta?.id === id)?.values[
+                      value - 1
+                    ]
+
+                  const ratingsArr = [...ratings]
+
+                  const clonedProductReviewRatingInputValue = ratingsArr.find(
+                    (meta) => meta.id === id,
+                  )
+
+                  if (
+                    !clonedProductReviewRatingInputValue ||
+                    typeof productReviewRatingInputValue?.value_id === undefined
+                  ) {
+                    console.error('Cannot find product review rating input value in local state')
+                    return
+                  }
+
+                  clonedProductReviewRatingInputValue.value_id =
+                    productReviewRatingInputValue?.value_id ?? ''
+
+                  setRatings(ratingsArr)
+                }}
+              />
+            )}
+          </FormRow>
+        ))}
+      </div>
+
+      <FormRow>
+        <TextField
+          variant='outlined'
+          type='text'
+          error={!!formState.errors.summary || !!error}
+          label='Summary'
+          required={required.summary}
+          {...muiRegister('summary', { required: required.summary })}
+          helperText={formState.errors.summary?.message}
+          disabled={formState.isSubmitting}
+        />
+      </FormRow>
+
+      <FormRow>
+        <TextField
+          variant='outlined'
+          type='text'
+          error={!!formState.errors.text || !!error}
+          label='Review'
+          required={required.text}
+          {...muiRegister('text', { required: required.text })}
+          helperText={formState.errors.text?.message}
+          disabled={formState.isSubmitting}
+          multiline
+          rows={8}
+          rowsMax={8}
+        />
+      </FormRow>
+
+      <FormActions className={classes.formActions}>
+        <Button
+          variant='pill'
+          color='primary'
+          text='bold'
+          type='submit'
+          size='medium'
+          className={classes.submitButton}
+        >
+          Submit review
+        </Button>
+        <Button
+          variant='text'
+          color='primary'
+          onClick={() => router.back()}
+          className={classes.cancelButton}
+        >
+          Cancel
+        </Button>
+      </FormActions>
+
+      <ApolloCustomerErrorAlert error={error} />
+    </Form>
+  )
+}

package/components/CustomerReview/CustomerReview.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CustomerReviewFragment = { average_rating: number, created_at: string, nickname: string, summary: string, text: string, product: { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> };

package/components/CustomerReview/CustomerReview.graphql

@@ -0,0 +1,20 @@
+fragment CustomerReview on ProductReview {
+  average_rating
+  created_at
+  product {
+    uid
+    url_key
+    name
+    thumbnail {
+      url
+      label
+    }
+  }
+  nickname
+  summary
+  text
+  ratings_breakdown {
+    name
+    value
+  }
+}

package/components/CustomerReview/index.tsx

@@ -0,0 +1,103 @@
+import { useQuery } from '@apollo/client'
+import { makeStyles, Theme } from '@material-ui/core'
+import { Image } from '@graphcommerce/image'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { responsiveVal } from '@graphcommerce/next-ui'
+import { CustomerReviewFragment } from './CustomerReview.gql'
+import filledStar from './review_star_filled.svg'
+import outlinedStar from './review_star_outlined.svg'
+
+type CustomerReviewProps = CustomerReviewFragment
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    container: {
+      padding: `${theme.spacings.md} 0 ${theme.spacings.md} 0`,
+      display: 'grid',
+      gridTemplateAreas: `
+      'image stars'
+      'image title'
+      'image text'
+      'image date'`,
+      gridTemplateColumns: `${responsiveVal(96, 196)} 1fr`,
+      gridColumnGap: theme.spacings.md,
+      gridRowGap: theme.spacings.sm,
+      alignItems: 'start',
+      ...theme.typography.body1,
+      borderBottom: `1px solid ${theme.palette.divider}`,
+      [theme.breakpoints.up('sm')]: {
+        gridRowGap: theme.spacings.xxs,
+      },
+    },
+    image: {
+      gridArea: 'image',
+      '& img': {
+        width: '100%',
+        height: 'auto',
+      },
+    },
+    stars: {
+      gridArea: 'stars',
+      margin: '-6px 0 -6px -6px',
+    },
+    title: {
+      gridArea: 'title',
+      fontWeight: theme.typography.fontWeightBold,
+    },
+    text: {
+      gridArea: 'text',
+    },
+    date: {
+      gridArea: 'date',
+      fontStyle: 'italic',
+      color: theme.palette.primary.mutedText,
+    },
+  }),
+  { name: 'CustomerReview' },
+)
+
+export default function CustomerReview(props: CustomerReviewProps) {
+  const { product, text, average_rating, created_at } = props
+  const classes = useStyles()
+
+  const maxAverageRating = 100
+  const totalStars = 5
+  const valuePerStar = maxAverageRating / totalStars
+  const totalFilledStars = (average_rating / maxAverageRating / valuePerStar) * 100
+
+  const { data: config } = useQuery(StoreConfigDocument)
+  const locale = config?.storeConfig?.locale?.replace('_', '-')
+
+  const dateFormatter = new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+
+  return (
+    <div className={classes.container}>
+      <div className={classes.image}>
+        {product && product.thumbnail && (
+          <Image
+            src={product.thumbnail?.url ?? ''}
+            width={196}
+            height={196}
+            alt={product.thumbnail?.label ?? ''}
+          />
+        )}
+      </div>
+      <div className={classes.stars}>
+        {[...new Array(totalStars)].map((value, index) => (
+          <Image
+            src={index < totalFilledStars ? filledStar : outlinedStar}
+            alt='star'
+            loading='eager'
+          />
+        ))}
+      </div>
+      <div className={classes.title}>{product?.name}</div>
+      <div className={classes.text}>{text}</div>
+      <div className={classes.date}>{dateFormatter.format(new Date(created_at ?? ''))}</div>
+    </div>
+  )
+}

package/components/CustomerReview/review_star_filled.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>desktop_Star_Filled</title>
+    <g id="desktop_Star_Filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <polygon id="Path" stroke="#FF4A55" stroke-width="0.5" fill="#FF4A55" points="16.3216665 21.1249997 11.1783333 23.8291663 12.1608332 18.1016665 8 14.0458332 13.7499999 13.2108332 16.3216665 8 18.8933331 13.2108332 24.643333 14.0458332 20.4824998 18.1016665 21.4649997 23.8291663"></polygon>
+    </g>
+</svg>

package/components/CustomerReview/review_star_outlined.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>desktop_Star_Outline</title>
+    <g id="desktop_Star_Outline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <polygon id="Path" stroke="#FF4A55" stroke-width="0.5" points="16.3216665 21.1249997 11.1783333 23.8291663 12.1608332 18.1016665 8 14.0458332 13.7499999 13.2108332 16.3216665 8 18.8933331 13.2108332 24.643333 14.0458332 20.4824998 18.1016665 21.4649997 23.8291663"></polygon>
+    </g>
+</svg>

package/components/JsonLdProductReview/JsonLdProductReview.gql.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type JsonLdProductReview_BundleProduct_Fragment = { review_count: number, rating_summary: number, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } };
+
+export type JsonLdProductReview_ConfigurableProduct_Fragment = { review_count: number, rating_summary: number, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } };
+
+export type JsonLdProductReview_DownloadableProduct_Fragment = { review_count: number, rating_summary: number, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } };
+
+export type JsonLdProductReview_GroupedProduct_Fragment = { review_count: number, rating_summary: number, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } };
+
+export type JsonLdProductReview_SimpleProduct_Fragment = { review_count: number, rating_summary: number, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } };
+
+export type JsonLdProductReview_VirtualProduct_Fragment = { review_count: number, rating_summary: number, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } };
+
+export type JsonLdProductReviewFragment = JsonLdProductReview_BundleProduct_Fragment | JsonLdProductReview_ConfigurableProduct_Fragment | JsonLdProductReview_DownloadableProduct_Fragment | JsonLdProductReview_GroupedProduct_Fragment | JsonLdProductReview_SimpleProduct_Fragment | JsonLdProductReview_VirtualProduct_Fragment;

package/components/JsonLdProductReview/JsonLdProductReview.graphql

@@ -0,0 +1,5 @@
+fragment JsonLdProductReview on ProductInterface @inject(into: ["ProductPageItem"]) {
+  ...ProductReviews
+  review_count
+  rating_summary
+}

package/components/JsonLdProductReview/index.ts

@@ -0,0 +1,28 @@
+import { Product } from 'schema-dts'
+import { JsonLdProductReviewFragment } from './JsonLdProductReview.gql'
+
+export function jsonLdProductReview(props: JsonLdProductReviewFragment): Partial<Product> {
+  const { reviews, review_count, rating_summary } = props
+
+  return {
+    aggregateRating: {
+      '@type': 'AggregateRating',
+      reviewCount: review_count ?? undefined,
+      ratingValue: rating_summary ? Math.max(rating_summary * 0.5 * 0.1, 1) : undefined,
+    },
+    review: reviews.items.map((review) => ({
+      '@type': 'Review',
+      reviewRating: {
+        '@type': 'Rating',
+        ratingValue: Math.max((review?.average_rating || 1) * 0.5 * 0.1, 1),
+      },
+      name: review?.summary,
+      author: {
+        '@type': 'Person',
+        name: review?.nickname,
+      },
+      datePublished: review?.created_at,
+      reviewBody: review?.text,
+    })),
+  }
+}

package/components/ProductReviewChip/ProductReviewSummary.gql.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductReviewSummary_BundleProduct_Fragment = { rating_summary: number };
+
+export type ProductReviewSummary_ConfigurableProduct_Fragment = { rating_summary: number };
+
+export type ProductReviewSummary_DownloadableProduct_Fragment = { rating_summary: number };
+
+export type ProductReviewSummary_GroupedProduct_Fragment = { rating_summary: number };
+
+export type ProductReviewSummary_SimpleProduct_Fragment = { rating_summary: number };
+
+export type ProductReviewSummary_VirtualProduct_Fragment = { rating_summary: number };
+
+export type ProductReviewSummaryFragment = ProductReviewSummary_BundleProduct_Fragment | ProductReviewSummary_ConfigurableProduct_Fragment | ProductReviewSummary_DownloadableProduct_Fragment | ProductReviewSummary_GroupedProduct_Fragment | ProductReviewSummary_SimpleProduct_Fragment | ProductReviewSummary_VirtualProduct_Fragment;

package/components/ProductReviewChip/ProductReviewSummary.graphql

@@ -0,0 +1,4 @@
+fragment ProductReviewSummary on ProductInterface
+@inject(into: ["ProductListItem", "ProductPageItem"]) {
+  rating_summary
+}

package/components/ProductReviewChip/index.tsx

@@ -0,0 +1,45 @@
+import { Chip, ChipProps } from '@material-ui/core'
+import { SvgImageSimple, iconStarYellow } from '@graphcommerce/next-ui'
+import React from 'react'
+
+export type ProductReviewChipProps = {
+  rating?: number
+  reviewSectionId?: string
+  max?: number
+} & ChipProps
+
+export default function ProductReviewChip(props: ProductReviewChipProps) {
+  const { rating, reviewSectionId = '', max = 5, ...chipProps } = props
+
+  if (!rating) return null
+
+  const normalizedRating = Math.round(rating / (10 / max)) / 10
+
+  const handleClick: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    const element = document.getElementById(reviewSectionId)
+    e.preventDefault()
+    if (!element) return
+
+    window.scrollTo({
+      top: element.offsetTop - 50,
+      left: 0,
+      behavior: 'smooth',
+    })
+  }
+
+  const chip = (
+    <Chip
+      variant='outlined'
+      clickable={!!reviewSectionId}
+      onClick={handleClick}
+      icon={<SvgImageSimple src={iconStarYellow} alt='Stars' />}
+      color='default'
+      label={`${normalizedRating}/5`}
+      {...chipProps}
+    />
+  )
+
+  if (!reviewSectionId) return chip
+
+  return chip
+}

package/components/ProductReviews/ProductReviewProductName.gql.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const ProductReviewProductNameDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProductReviewProductName"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"sku"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"products"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"sku"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"sku"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]}}]} as unknown as DocumentNode<ProductReviewProductNameQuery, ProductReviewProductNameQueryVariables>;
+export type ProductReviewProductNameQueryVariables = Types.Exact<{
+  sku: Types.Scalars['String'];
+}>;
+
+
+export type ProductReviewProductNameQuery = { products?: Types.Maybe<{ items?: Types.Maybe<Array<Types.Maybe<{ __typename: 'BundleProduct', uid: string, name?: Types.Maybe<string> } | { __typename: 'ConfigurableProduct', uid: string, name?: Types.Maybe<string> } | { __typename: 'DownloadableProduct', uid: string, name?: Types.Maybe<string> } | { __typename: 'GroupedProduct', uid: string, name?: Types.Maybe<string> } | { __typename: 'SimpleProduct', uid: string, name?: Types.Maybe<string> } | { __typename: 'VirtualProduct', uid: string, name?: Types.Maybe<string> }>>> }> };

package/components/ProductReviews/ProductReviewProductName.graphql

@@ -0,0 +1,9 @@
+query ProductReviewProductName($sku: String!) {
+  products(filter: { sku: { eq: $sku } }) {
+    items {
+      __typename
+      uid
+      name
+    }
+  }
+}

package/components/ProductReviews/ProductReviewRatingsMetadata.gql.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const ProductReviewRatingsMetadataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProductReviewRatingsMetadata"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"productReviewRatingsMetadata"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"values"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"value"}},{"kind":"Field","name":{"kind":"Name","value":"value_id"}}]}}]}}]}}]}}]} as unknown as DocumentNode<ProductReviewRatingsMetadataQuery, ProductReviewRatingsMetadataQueryVariables>;
+export type ProductReviewRatingsMetadataQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type ProductReviewRatingsMetadataQuery = { productReviewRatingsMetadata: { items: Array<Types.Maybe<{ id: string, name: string, values: Array<Types.Maybe<{ value: string, value_id: string }>> }>> } };

package/components/ProductReviews/ProductReviewRatingsMetadata.graphql

@@ -0,0 +1,12 @@
+query ProductReviewRatingsMetadata {
+  productReviewRatingsMetadata {
+    items {
+      id
+      name
+      values {
+        value
+        value_id
+      }
+    }
+  }
+}

package/components/ProductReviews/ProductReviews.gql.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductReviews_BundleProduct_Fragment = { review_count: number, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } };
+
+export type ProductReviews_ConfigurableProduct_Fragment = { review_count: number, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } };
+
+export type ProductReviews_DownloadableProduct_Fragment = { review_count: number, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } };
+
+export type ProductReviews_GroupedProduct_Fragment = { review_count: number, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } };
+
+export type ProductReviews_SimpleProduct_Fragment = { review_count: number, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } };
+
+export type ProductReviews_VirtualProduct_Fragment = { review_count: number, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } };
+
+export type ProductReviewsFragment = ProductReviews_BundleProduct_Fragment | ProductReviews_ConfigurableProduct_Fragment | ProductReviews_DownloadableProduct_Fragment | ProductReviews_GroupedProduct_Fragment | ProductReviews_SimpleProduct_Fragment | ProductReviews_VirtualProduct_Fragment;

package/components/ProductReviews/ProductReviews.graphql

@@ -0,0 +1,22 @@
+fragment ProductReviews on ProductInterface @inject(into: ["ProductPageItem"]) {
+  reviews(pageSize: $reviewPageSize, currentPage: $reviewPage) {
+    page_info {
+      total_pages
+      current_page
+    }
+    items {
+      average_rating
+      created_at
+      nickname
+      ratings_breakdown {
+        name
+        value
+      }
+      summary
+      text
+    }
+  }
+  review_count
+  url_key
+  sku
+}

package/components/ProductReviews/ProductReviewsPage.gql.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const ProductReviewsPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProductReviewsPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"urlKey"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"reviewPageSize"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"reviewPage"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"products"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"url_key"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"urlKey"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"review_count"}},{"kind":"Field","name":{"kind":"Name","value":"reviews"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"pageSize"},"value":{"kind":"Variable","name":{"kind":"Name","value":"reviewPageSize"}}},{"kind":"Argument","name":{"kind":"Name","value":"currentPage"},"value":{"kind":"Variable","name":{"kind":"Name","value":"reviewPage"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"page_info"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total_pages"}},{"kind":"Field","name":{"kind":"Name","value":"current_page"}}]}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"average_rating"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"nickname"}},{"kind":"Field","name":{"kind":"Name","value":"ratings_breakdown"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"summary"}},{"kind":"Field","name":{"kind":"Name","value":"text"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"url_key"}},{"kind":"Field","name":{"kind":"Name","value":"sku"}}]}}]}}]}}]} as unknown as DocumentNode<ProductReviewsPageQuery, ProductReviewsPageQueryVariables>;
+export type ProductReviewsPageQueryVariables = Types.Exact<{
+  urlKey: Types.Scalars['String'];
+  reviewPageSize?: Types.Maybe<Types.Scalars['Int']>;
+  reviewPage: Types.Scalars['Int'];
+}>;
+
+
+export type ProductReviewsPageQuery = { products?: Types.Maybe<{ items?: Types.Maybe<Array<Types.Maybe<{ __typename: 'BundleProduct', uid: string, review_count: number, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } } | { __typename: 'ConfigurableProduct', uid: string, review_count: number, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } } | { __typename: 'DownloadableProduct', uid: string, review_count: number, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } } | { __typename: 'GroupedProduct', uid: string, review_count: number, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } } | { __typename: 'SimpleProduct', uid: string, review_count: number, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } } | { __typename: 'VirtualProduct', uid: string, review_count: number, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, reviews: { page_info: { total_pages?: Types.Maybe<number>, current_page?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } }>>> }> };

package/components/ProductReviews/ProductReviewsPage.graphql

@@ -0,0 +1,10 @@
+query ProductReviewsPage($urlKey: String!, $reviewPageSize: Int, $reviewPage: Int!) {
+  products(filter: { url_key: { eq: $urlKey } }) {
+    items {
+      __typename
+      uid
+      review_count
+      ...ProductReviews
+    }
+  }
+}

package/components/ProductReviews/index.tsx

@@ -0,0 +1,205 @@
+import { useQuery } from '@apollo/client'
+import { Chip, makeStyles, Theme, Typography } from '@material-ui/core'
+import {
+  Button,
+  iconStarFilledMuted,
+  iconStarYellow,
+  Pagination,
+  responsiveVal,
+  StarRatingField,
+  SvgImage,
+} from '@graphcommerce/next-ui'
+import Link from 'next/link'
+import React, { useState } from 'react'
+import ProductReviewChip from '../ProductReviewChip'
+import { ProductReviewsFragment } from './ProductReviews.gql'
+import { ProductReviewsPageDocument } from './ProductReviewsPage.gql'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    review: {
+      display: 'grid',
+      gap: theme.spacings.sm,
+      borderBottom: `1px solid ${theme.palette.divider}`,
+      padding: `${theme.spacings.md} 0`,
+      ...theme.typography.body1,
+    },
+    title: {
+      display: 'grid',
+      gridAutoFlow: 'column',
+      justifyContent: 'start',
+      gap: theme.spacings.xs,
+      alignItems: 'center',
+    },
+    meta: {
+      color: theme.palette.text.disabled,
+      display: 'grid',
+      gridAutoFlow: 'column',
+      justifyContent: 'space-between',
+    },
+    nickname: {},
+    date: {},
+    reviewsBottomContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginTop: theme.spacings.sm,
+    },
+    paginationRoot: {
+      margin: `0 -16px 0`,
+    },
+    paginationButton: {
+      padding: 0,
+      minWidth: 'unset',
+      borderRadius: '100%',
+      '& > .MuiButton-label': {
+        padding: 0,
+      },
+    },
+    ratingRow: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: theme.spacings.sm,
+      color: theme.palette.text.disabled,
+      ...theme.typography.body2,
+    },
+    rating: {
+      display: 'grid',
+      gridAutoFlow: 'column',
+      gridTemplateColumns: '0.4fr 0.6fr',
+      justifyContent: 'space-between',
+      marginRight: theme.spacings.xxs,
+      rowGap: responsiveVal(8, 16),
+      gap: 8,
+      alignItems: 'center',
+    },
+    writeReviewButton: {
+      [theme.breakpoints.down('xs')]: {
+        padding: '8px 16px 8px',
+        whiteSpace: 'nowrap',
+      },
+    },
+    container: {
+      marginTop: `calc(${theme.spacings.xxs} * -1)`,
+    },
+  }),
+  { name: 'ProductReviews' },
+)
+
+export type ProductReviewsProps = ProductReviewsFragment
+
+export default function ProductReviews(props: ProductReviewsProps) {
+  const { reviews, url_key, sku } = props
+  const classes = useStyles()
+  const config = 'en_US'
+  const locale = config.replace('_', '-')
+
+  const [reviewPage, setPage] = useState<number>(1)
+
+  const { data: otherReviewsPage, loading } = useQuery(ProductReviewsPageDocument, {
+    skip: reviewPage === 1,
+    variables: {
+      urlKey: url_key ?? '',
+      reviewPage,
+      reviewPageSize: 3,
+    },
+  })
+
+  const myReviews = otherReviewsPage?.products?.items?.[0]?.reviews ?? reviews
+
+  const { current_page, total_pages } = myReviews.page_info
+
+  const formatter = new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+  })
+
+  if (!reviews) {
+    return null
+  }
+
+  const actions = (
+    <div className={classes.reviewsBottomContainer}>
+      <Link href={`/account/reviews/add?sku=${sku}`} passHref>
+        <Button
+          variant='pill'
+          color='primary'
+          text='bold'
+          size='large'
+          className={classes.writeReviewButton}
+        >
+          Write a review
+        </Button>
+      </Link>
+
+      {!!total_pages && total_pages > 1 && (
+        <Pagination
+          count={total_pages ?? 1}
+          page={current_page ?? 1}
+          classes={{ root: classes.paginationRoot }}
+          renderLink={(p: number, icon: React.ReactNode) => (
+            <Button onClick={() => setPage(p)} className={classes.paginationButton}>
+              {icon}
+            </Button>
+          )}
+        />
+      )}
+    </div>
+  )
+
+  if (reviews?.items.length === 0) {
+    return (
+      <div className={classes.container}>
+        <div className={classes.review}>
+          <div className={classes.title}>
+            <Typography variant='subtitle1'>Be the first to write a review!</Typography>
+          </div>
+        </div>
+        {actions}
+      </div>
+    )
+  }
+
+  return (
+    <div className={classes.container}>
+      {!loading &&
+        myReviews.items.map((review) => (
+          <div key={review?.summary} className={classes.review}>
+            <div className={classes.title}>
+              <ProductReviewChip rating={review?.average_rating} variant='default' />
+              <Typography variant='h5'> {review?.summary}</Typography>
+            </div>
+            <Typography variant='body1'>{review?.text}</Typography>
+
+            {(review?.ratings_breakdown ?? 0) > 1 && (
+              <div className={classes.ratingRow}>
+                {review?.ratings_breakdown.map((ratingBreakdown) => (
+                  <div key={`rating-${ratingBreakdown?.value}`} className={classes.rating}>
+                    <span>{ratingBreakdown?.name}</span>
+                    <StarRatingField
+                      iconSize={16}
+                      readOnly
+                      size='small'
+                      defaultValue={Number(ratingBreakdown?.value ?? 0)}
+                    />
+                  </div>
+                ))}
+              </div>
+            )}
+
+            <div className={classes.meta}>
+              <div className={classes.nickname}>Written by {review?.nickname}</div>
+              <time className={classes.date} dateTime={review?.created_at}>
+                {review?.created_at &&
+                  formatter.format(new Date(review?.created_at.replace(/-/g, '/')))}
+              </time>
+            </div>
+          </div>
+        ))}
+      {actions}
+    </div>
+  )
+}

package/components/index.ts

@@ -0,0 +1,16 @@
+export { default as AccountReviews } from './AccountReviews'
+export { default as CreateProductReviewForm } from './CreateProductReviewForm'
+export { default as CustomerReview } from './CustomerReview'
+export { default as ProductReviews } from './ProductReviews'
+export { default as ProductReviewChip } from './ProductReviewChip'
+
+export * from './AccountReviews/AccountReviews.gql'
+export * from './ProductReviews'
+export * from './CustomerReview/CustomerReview.gql'
+export * from './ProductReviewChip/ProductReviewSummary.gql'
+export * from './ProductReviews/ProductReviewProductName.gql'
+export * from './CreateProductReviewForm/CreateProductReview.gql'
+export * from './CreateProductReviewForm/ProductReviewRatingsMetadata.gql'
+
+export * from './JsonLdProductReview/JsonLdProductReview.gql'
+export * from './JsonLdProductReview'

package/index.ts

@@ -0,0 +1,2 @@
+export * from './components'
+export * from './queries/AccountDashboardReviews.gql'

package/inject/AccountDashboardCustomerReviews.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type AccountDashboardCustomerReviewsFragment = { reviews: { page_info: { total_pages?: Types.Maybe<number> }, items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, product: { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } };

package/inject/AccountDashboardCustomerReviews.graphql

@@ -0,0 +1,8 @@
+fragment AccountDashboardCustomerReviews on Customer @inject(into: ["AccountDashboardCustomer"]) {
+  reviews {
+    page_info {
+      total_pages
+    }
+    ...AccountReviews
+  }
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@graphcommerce/magento-review",
+  "version": "2.105.1",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "browserslist": [
+    "extends @graphcommerce/browserslist-config-pwa"
+  ],
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "devDependencies": {
+    "@graphcommerce/browserslist-config-pwa": "^3.0.1",
+    "@graphcommerce/eslint-config-pwa": "^3.0.1",
+    "@graphcommerce/prettier-config-pwa": "^3.0.1",
+    "@graphcommerce/typescript-config-pwa": "^3.0.1",
+    "@playwright/test": "^1.14.1"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.3.21",
+    "@graphcommerce/graphql": "^2.103.1",
+    "@graphcommerce/image": "^2.104.1",
+    "@graphcommerce/magento-product": "^3.0.1",
+    "@graphcommerce/magento-store": "^3.0.1",
+    "@graphcommerce/next-ui": "^3.0.1",
+    "@graphql-typed-document-node/core": "^3.1.0",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/lab": "^4.0.0-alpha.60",
+    "clsx": "^1.1.1",
+    "next": "^11.1.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "schema-dts": "^1.0.0"
+  }
+}

package/queries/AccountDashboardReviews.gql.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const AccountDashboardReviewsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"AccountDashboardReviews"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"customer"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"reviews"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"average_rating"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"product"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"url_key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"thumbnail"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"nickname"}},{"kind":"Field","name":{"kind":"Name","value":"summary"}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"ratings_breakdown"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<AccountDashboardReviewsQuery, AccountDashboardReviewsQueryVariables>;
+export type AccountDashboardReviewsQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type AccountDashboardReviewsQuery = { customer?: Types.Maybe<{ reviews: { items: Array<Types.Maybe<{ average_rating: number, created_at: string, nickname: string, summary: string, text: string, product: { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, ratings_breakdown: Array<Types.Maybe<{ name: string, value: string }>> }>> } }> };

package/queries/AccountDashboardReviews.graphql

@@ -0,0 +1,7 @@
+query AccountDashboardReviews {
+  customer {
+    reviews {
+      ...AccountReviews
+    }
+  }
+}