feat: add disable options on product page while loading

Author: QAComet

src/modules/products/components/mobile-actions/index.tsx

@@ -24,6 +24,7 @@ type MobileActionsProps = {
   handleAddToCart: () => void
   isAdding?: boolean
   show: boolean
+  optionsDisabled: boolean
 }
 
 const MobileActions: React.FC<MobileActionsProps> = ({
@@ -36,6 +37,7 @@ const MobileActions: React.FC<MobileActionsProps> = ({
   handleAddToCart,
   isAdding,
   show,
+  optionsDisabled,
 }) => {
   const { state, open, close } = useToggleState()
 
@@ -71,7 +73,10 @@ const MobileActions: React.FC<MobileActionsProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="bg-white flex flex-col gap-y-3 justify-center items-center text-large-regular p-4 h-full w-full border-t border-gray-200" data-testid="mobile-actions">
+          <div
+            className="bg-white flex flex-col gap-y-3 justify-center items-center text-large-regular p-4 h-full w-full border-t border-gray-200"
+            data-testid="mobile-actions"
+          >
             <div className="flex items-center gap-x-2">
               <span data-testid="mobile-title">{product.title}</span>
               <span>—</span>
@@ -98,7 +103,12 @@ const MobileActions: React.FC<MobileActionsProps> = ({
               )}
             </div>
             <div className="grid grid-cols-2 w-full gap-x-4">
-              <Button onClick={open} variant="secondary" className="w-full" data-testid="mobile-actions-button">
+              <Button
+                onClick={open}
+                variant="secondary"
+                className="w-full"
+                data-testid="mobile-actions-button"
+              >
                 <div className="flex items-center justify-between w-full">
                   <span>
                     {variant
@@ -150,7 +160,10 @@ const MobileActions: React.FC<MobileActionsProps> = ({
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Dialog.Panel className="w-full h-full transform overflow-hidden text-left flex flex-col gap-y-3" data-testid="mobile-actions-modal">
+                <Dialog.Panel
+                  className="w-full h-full transform overflow-hidden text-left flex flex-col gap-y-3"
+                  data-testid="mobile-actions-modal"
+                >
                   <div className="w-full flex justify-end pr-6">
                     <button
                       onClick={close}
@@ -171,6 +184,7 @@ const MobileActions: React.FC<MobileActionsProps> = ({
                                 current={options[option.id]}
                                 updateOption={updateOptions}
                                 title={option.title}
+                                disabled={optionsDisabled}
                               />
                             </div>
                           )

src/modules/products/components/option-select/index.tsx

@@ -9,22 +9,27 @@ type OptionSelectProps = {
   current: string
   updateOption: (option: Record<string, string>) => void
   title: string
-  'data-testid'?: string
+  disabled: boolean
+  "data-testid"?: string
 }
 
 const OptionSelect: React.FC<OptionSelectProps> = ({
   option,
   current,
   updateOption,
   title,
-  'data-testid': dataTestId
+  "data-testid": dataTestId,
+  disabled,
 }) => {
   const filteredOptions = option.values.map((v) => v.value).filter(onlyUnique)
 
   return (
     <div className="flex flex-col gap-y-3">
       <span className="text-sm">Select {title}</span>
-      <div className="flex flex-wrap justify-between gap-2" data-testid={dataTestId}>
+      <div
+        className="flex flex-wrap justify-between gap-2"
+        data-testid={dataTestId}
+      >
         {filteredOptions.map((v) => {
           return (
             <button
@@ -38,6 +43,7 @@ const OptionSelect: React.FC<OptionSelectProps> = ({
                     v !== current,
                 }
               )}
+              disabled={disabled}
               data-testid="option-button"
             >
               {v}

src/modules/products/components/product-actions/index.tsx

@@ -18,6 +18,7 @@ import ProductPrice from "../product-price"
 type ProductActionsProps = {
   product: PricedProduct
   region: Region
+  disabled?: boolean
 }
 
 export type PriceType = {
@@ -30,6 +31,7 @@ export type PriceType = {
 export default function ProductActions({
   product,
   region,
+  disabled,
 }: ProductActionsProps) {
   const [options, setOptions] = useState<Record<string, string>>({})
   const [isAdding, setIsAdding] = useState(false)
@@ -138,6 +140,7 @@ export default function ProductActions({
                       updateOption={updateOptions}
                       title={option.title}
                       data-testid="product-options"
+                      disabled={!!disabled || isAdding}
                     />
                   </div>
                 )
@@ -151,7 +154,7 @@ export default function ProductActions({
 
         <Button
           onClick={handleAddToCart}
-          disabled={!inStock || !variant}
+          disabled={!inStock || !variant || !!disabled || isAdding}
           variant="primary"
           className="w-full h-10"
           isLoading={isAdding}
@@ -173,6 +176,7 @@ export default function ProductActions({
           handleAddToCart={handleAddToCart}
           isAdding={isAdding}
           show={!inView}
+          optionsDisabled={!!disabled || isAdding}
         />
       </div>
     </>

src/modules/products/templates/index.tsx

@@ -29,7 +29,10 @@ const ProductTemplate: React.FC<ProductTemplateProps> = ({
 
   return (
     <>
-      <div className="content-container flex flex-col small:flex-row small:items-start py-6 relative" data-testid="product-container">
+      <div
+        className="content-container flex flex-col small:flex-row small:items-start py-6 relative"
+        data-testid="product-container"
+      >
         <div className="flex flex-col small:sticky small:top-48 small:py-0 small:max-w-[300px] w-full py-8 gap-y-6">
           <ProductInfo product={product} />
           <ProductTabs product={product} />
@@ -40,13 +43,22 @@ const ProductTemplate: React.FC<ProductTemplateProps> = ({
         <div className="flex flex-col small:sticky small:top-48 small:py-0 small:max-w-[300px] w-full py-8 gap-y-12">
           <ProductOnboardingCta />
           <Suspense
-            fallback={<ProductActions product={product} region={region} />}
+            fallback={
+              <ProductActions
+                disabled={true}
+                product={product}
+                region={region}
+              />
+            }
           >
             <ProductActionsWrapper id={product.id} region={region} />
           </Suspense>
         </div>
       </div>
-      <div className="content-container my-16 small:my-32" data-testid="related-products-container">
+      <div
+        className="content-container my-16 small:my-32"
+        data-testid="related-products-container"
+      >
         <Suspense fallback={<SkeletonRelatedProducts />}>
           <RelatedProducts product={product} countryCode={countryCode} />
         </Suspense>