feat: add review modal form

packages/components/src/molecules/CheckboxField/CheckboxField.tsx

@@ -15,6 +15,10 @@ export interface CheckboxFieldProps extends CheckboxProps {
    * Control the vertical alignment of the checkbox in relation to the label (center, top, bottom).
    */
   alignment?: 'center' | 'top' | 'bottom'
+  /**
+   * Checkbox Component's ref.
+   */
+  checkboxRef?: React.MutableRefObject<HTMLInputElement>
 }
 
 const CheckboxField = forwardRef<HTMLDivElement, CheckboxFieldProps>(
@@ -29,6 +33,7 @@ const CheckboxField = forwardRef<HTMLDivElement, CheckboxFieldProps>(
       error,
       disabled,
       alignment = 'center',
+      checkboxRef,
       ...otherProps
     },
     ref
@@ -49,6 +54,7 @@ const CheckboxField = forwardRef<HTMLDivElement, CheckboxFieldProps>(
           name={name}
           defaultChecked={checked}
           disabled={disabled}
+          ref={checkboxRef}
           {...otherProps}
         />
         <div data-fs-checkbox-field-content>

packages/components/src/molecules/Rating/Rating.tsx

@@ -100,6 +100,7 @@ const Rating = forwardRef<HTMLUListElement, RatingProps>(function Rating(
                 onMouseEnter={() => setHover(tempIndex)}
                 onMouseLeave={() => setHover(value)}
                 disabled={disabled}
+                type="button"
               />
             ) : (
               <>

packages/core/@generated/gql.ts

@@ -52,6 +52,8 @@ const documents = {
     types.ClientProductGalleryQueryDocument,
   '\n  query ClientProductQuery($locator: [IStoreSelectedFacet!]!) {\n    ...ClientProduct\n    product(locator: $locator) {\n      ...ProductDetailsFragment_product\n    }\n  }\n':
     types.ClientProductQueryDocument,
+  '\n  mutation CreateProductReview($data: ICreateProductReview!) {\n    productReviewId: createProductReview(data: $data)\n  }\n':
+    types.CreateProductReviewDocument,
   '\n  query ClientSearchSuggestionsQuery(\n    $term: String!\n    $selectedFacets: [IStoreSelectedFacet!]\n  ) {\n    ...ClientSearchSuggestions\n    search(first: 5, term: $term, selectedFacets: $selectedFacets) {\n      suggestions {\n        terms {\n          value\n        }\n        products {\n          ...ProductSummary_product\n        }\n      }\n      products {\n        pageInfo {\n          totalCount\n        }\n      }\n      metadata {\n        ...SearchEvent_metadata\n      }\n    }\n  }\n':
     types.ClientSearchSuggestionsQueryDocument,
   '\n  query ClientTopSearchSuggestionsQuery(\n    $term: String!\n    $selectedFacets: [IStoreSelectedFacet!]\n  ) {\n    ...ClientTopSearchSuggestions\n    search(first: 5, term: $term, selectedFacets: $selectedFacets) {\n      suggestions {\n        terms {\n          value\n        }\n      }\n    }\n  }\n':
@@ -182,6 +184,12 @@ export function gql(
 export function gql(
   source: '\n  query ClientProductQuery($locator: [IStoreSelectedFacet!]!) {\n    ...ClientProduct\n    product(locator: $locator) {\n      ...ProductDetailsFragment_product\n    }\n  }\n'
 ): typeof import('./graphql').ClientProductQueryDocument
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function gql(
+  source: '\n  mutation CreateProductReview($data: ICreateProductReview!) {\n    productReviewId: createProductReview(data: $data)\n  }\n'
+): typeof import('./graphql').CreateProductReviewDocument
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

packages/core/@generated/graphql.ts

@@ -1797,6 +1797,12 @@ export type ClientProductQueryQuery = {
   }
 }
 
+export type CreateProductReviewMutationVariables = Exact<{
+  data: ICreateProductReview
+}>
+
+export type CreateProductReviewMutation = { productReviewId: string }
+
 export type ClientSearchSuggestionsQueryQueryVariables = Exact<{
   term: Scalars['String']['input']
   selectedFacets: InputMaybe<Array<IStoreSelectedFacet> | IStoreSelectedFacet>
@@ -2439,6 +2445,15 @@ export const ClientProductQueryDocument = {
   ClientProductQueryQuery,
   ClientProductQueryQueryVariables
 >
+export const CreateProductReviewDocument = {
+  __meta__: {
+    operationName: 'CreateProductReview',
+    operationHash: '446f171f0f6ed728b011ae9218d726897f27641f',
+  },
+} as unknown as TypedDocumentString<
+  CreateProductReviewMutation,
+  CreateProductReviewMutationVariables
+>
 export const ClientSearchSuggestionsQueryDocument = {
   __meta__: {
     operationName: 'ClientSearchSuggestionsQuery',

packages/core/cms/faststore/sections.json

@@ -1034,6 +1034,86 @@
               "type": "string",
               "default": "Close Review Modal"
             },
+            "ratingField": {
+              "title": "Rating input field",
+              "type": "object",
+              "properties": {
+                "label": {
+                  "title": "Rating input field label",
+                  "type": "string",
+                  "default": "Rate the product from 1 to 5 stars"
+                },
+                "requiredErrorMessage": {
+                  "title": "Input field error message",
+                  "type": "string",
+                  "default": "This field is required"
+                }
+              }
+            },
+            "reviewTitleField": {
+              "title": "Review title input field",
+              "type": "object",
+              "properties": {
+                "label": {
+                  "title": "Review title input field label",
+                  "type": "string",
+                  "default": "Review headline"
+                },
+                "requiredErrorMessage": {
+                  "title": "Review title field error message",
+                  "type": "string",
+                  "default": "This field is required"
+                }
+              }
+            },
+            "reviewerNameField": {
+              "title": "Reviewer name input field",
+              "type": "object",
+              "properties": {
+                "label": {
+                  "title": "Reviewer name input field label",
+                  "type": "string",
+                  "default": "Name"
+                },
+                "requiredErrorMessage": {
+                  "title": "Reviewer name field error message",
+                  "type": "string",
+                  "default": "This field is required"
+                }
+              }
+            },
+            "reviewTextField": {
+              "title": "Reviewer text input field",
+              "type": "object",
+              "properties": {
+                "label": {
+                  "title": "Reviewer text input field label",
+                  "type": "string",
+                  "default": "Share your thoughts about the product. How would you describe its quality?"
+                },
+                "requiredErrorMessage": {
+                  "title": "Reviewer text field error message",
+                  "type": "string",
+                  "default": "This field is required"
+                }
+              }
+            },
+            "privacyPolicyCheckboxField": {
+              "title": "Privacy Policy Checkbox Field",
+              "type": "object",
+              "properties": {
+                "label": {
+                  "title": "Privacy policy checkbox field label",
+                  "type": "string",
+                  "default": "I confirm that I agree to the Privacy Policy, Terms of Use, and Terms of Service. I acknowledge that my review may be used for marketing purposes by the company or its partners. I understand that my rating and review may be visible publicly, may include a “Verified buyer” badge, and that my data may be associated with my review."
+                },
+                "requiredErrorMessage": {
+                  "title": "Privacy policy checkbox field error message",
+                  "type": "string",
+                  "default": "This field is required"
+                }
+              }
+            },
             "cancelButtonLabel": {
               "title": "Cancel button label",
               "type": "string",
@@ -1043,6 +1123,21 @@
               "title": "Submit review button label",
               "type": "string",
               "default": "Submit your review"
+            },
+            "successTitle": {
+              "title": "Success title",
+              "type": "string",
+              "default": "Success!"
+            },
+            "successSubtitle": {
+              "title": "Success subtitle",
+              "type": "string",
+              "default": "Your review has been submitted."
+            },
+            "successButtonLabel": {
+              "title": "Success button label",
+              "type": "string",
+              "default": "Back to reviews"
             }
           }
         }

packages/core/src/components/reviews/ReviewModal/ReviewModal.tsx

@@ -1,15 +1,21 @@
 import {
-  Button as UIButton,
   type ModalProps as UIModalProps,
   type ModalHeaderProps as UIModalHeaderProps,
-  type ModalBodyProps as UIModalBodyProps,
-  type ModalFooterProps as UIModalFooterProps,
   useUI,
 } from '@faststore/ui'
 
 import styles from './section.module.scss'
 
 import dynamic from 'next/dynamic'
+import { useCallback, useEffect, useState } from 'react'
+import { useAddReview } from 'src/sdk/reviews/useAddReview'
+
+import isUUID from 'src/utils/isUUID'
+import type {
+  ReviewModalFormData,
+  ReviewModalFormProps,
+} from './ReviewModalForm'
+import type { ReviewModalSuccessProps } from './ReviewModalSuccess'
 
 const UIModal = dynamic<UIModalProps>(
   () =>
@@ -27,23 +33,32 @@ const UIModalHeader = dynamic<UIModalHeaderProps>(
   { ssr: false }
 )
 
-const UIModalBody = dynamic<UIModalBodyProps>(
+const ReviewModalSuccess = dynamic(
   () =>
-    import(/* webpackChunkName: "UIModalBody" */ '@faststore/ui').then(
-      (module) => module.ModalBody
+    import(
+      /* webpackChunkName: "ReviewModalSuccess" */ 'src/components/reviews/ReviewModal/ReviewModalSuccess'
     ),
   { ssr: false }
 )
 
-const UIModalFooter = dynamic<UIModalFooterProps>(
+const ReviewModalForm = dynamic(
   () =>
-    import(/* webpackChunkName: "UIModalFooter" */ '@faststore/ui').then(
-      (module) => module.ModalFooter
+    import(
+      /* webpackChunkName: "ReviewModalForm" */ 'src/components/reviews/ReviewModal/ReviewModalForm'
     ),
   { ssr: false }
 )
 
-export interface ReviewModalProps {
+const UIIcon = dynamic(
+  () => import('@faststore/ui').then((module) => module.Icon),
+  {
+    ssr: false,
+  }
+)
+
+export interface ReviewModalProps
+  extends Omit<ReviewModalFormProps, 'onSubmit' | 'onCancel'>,
+    ReviewModalSuccessProps {
   /**
    * The review modal's title.
    */
@@ -52,37 +67,68 @@ export interface ReviewModalProps {
    * Close button aria-label.
    */
   closeButtonAriaLabel?: string
-  /**
-   * Cancel button label.
-   */
-  cancelButtonLabel?: string
-  /**
-   * Submit button label.
-   */
-  submitButtonLabel?: string
 }
 
 function ReviewModal({
   title = 'Add a review',
   closeButtonAriaLabel = 'Close Review Modal',
-  cancelButtonLabel = 'Cancel',
-  submitButtonLabel = 'Submit your review',
+  product,
+  successTitle,
+  successSubtitle,
+  successButtonLabel,
+  ...formProps
 }: ReviewModalProps) {
-  const { closeReviewModal } = useUI()
+  const { pushToast, closeReviewModal } = useUI()
+  const { createProductReview, data, error, loading } = useAddReview()
+  const [submittedReview, setSubmittedReview] =
+    useState<ReviewModalFormData | null>(null)
+  const [isSuccess, setIsSuccess] = useState(false)
 
-  const handleSubmit = async () => {
-    // TODO: send review
+  function pushErrorToast(message = 'Something went wrong.') {
+    pushToast({
+      title: 'Oops.',
+      message,
+      status: 'ERROR',
+      icon: <UIIcon name="CircleWavyWarning" width={30} height={30} />,
+    })
   }
 
-  function handleOnClose() {
-    closeReviewModal()
-  }
+  const handleSubmit = useCallback(
+    (formData: ReviewModalFormData) => {
+      createProductReview({
+        data: {
+          productId: product.id,
+          rating: formData.rating,
+          title: formData.title,
+          text: formData.text,
+          reviewerName: formData.reviewerName,
+        },
+      })
+        .then(() => {
+          setSubmittedReview(formData)
+        })
+        .catch((error) => {
+          pushErrorToast(error.message)
+        })
+    },
+    [product.id, createProductReview]
+  )
+
+  useEffect(() => {
+    if (submittedReview) {
+      if (data?.productReviewId && isUUID(data.productReviewId)) {
+        setIsSuccess(true)
+      } else {
+        pushErrorToast(data?.productReviewId)
+      }
+    }
+  }, [submittedReview, data, error])
 
   return (
     <UIModal
       data-fs-review-modal
       title={title}
-      onTransitionEnd={(_, fade) => fade === 'out' && handleOnClose()}
+      onTransitionEnd={(_, fade) => fade === 'out' && closeReviewModal()}
       overlayProps={{
         className: `section ${styles.section} section-review-modal`,
       }}
@@ -99,18 +145,23 @@ function ReviewModal({
               'aria-label': closeButtonAriaLabel,
             }}
           />
-          <UIModalBody data-fs-review-modal-body>
-            {/* TODO: ReviewModal form will go here in another PR */}
-            body
-          </UIModalBody>
-          <UIModalFooter data-fs-review-modal-footer>
-            <UIButton variant="secondary" onClick={fadeOut}>
-              {cancelButtonLabel}
-            </UIButton>
-            <UIButton variant="primary" onClick={handleSubmit}>
-              {submitButtonLabel}
-            </UIButton>
-          </UIModalFooter>
+          {isSuccess ? (
+            <ReviewModalSuccess
+              successTitle={successTitle}
+              successSubtitle={successSubtitle}
+              successButtonLabel={successButtonLabel}
+              close={fadeOut}
+              review={submittedReview}
+            />
+          ) : (
+            <ReviewModalForm
+              {...formProps}
+              onSubmit={handleSubmit}
+              onCancel={fadeOut}
+              product={product}
+              loading={loading}
+            />
+          )}
         </>
       )}
     </UIModal>