@licklist/design 0.44.468 → 0.44.469

package/dist/iframe/order-process/components/CategoryProduct/CategoryProduct.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CategoryProduct.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/order-process/components/CategoryProduct/CategoryProduct.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,eAAe,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,cAAc,CAAC,oBAAoB,CAAC,CAAC;CAC3D;AAED,eAAO,MAAM,eAAe,qEAKzB,oBAAoB,gBAuMtB,CAAC"}
+{"version":3,"file":"CategoryProduct.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/order-process/components/CategoryProduct/CategoryProduct.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,eAAe,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,cAAc,CAAC,oBAAoB,CAAC,CAAC;CAC3D;AAED,eAAO,MAAM,eAAe,qEAKzB,oBAAoB,gBAmKtB,CAAC"}

package/dist/iframe/order-process/components/CategoryProduct/CategoryProduct.js

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),i=e(r),t=require("@licklist/core/dist/Config"),n=require("react-i18next"),a=require("react-hook-form"),o=e(require("@licklist/plugins/dist/services/Form/HookFormService")),c=e(require("clsx")),u=require("react-intl"),d=require("../../../event/ticket-description/TicketDescription.js"),s=require("./components/NumberInput/NumberInput.js");exports.CategoryProduct=function(e){var l=e.product,m=e.category,p=e.canExpandDescription,v=void 0===p||p,y=e.productsWithErrors,f=u.useIntl().formatNumber,g=n.useTranslation(["Design","Validation"]).t,q=a.useFormContext(),E=q.control,N=q.clearErrors,x=q.setError,_=r.useMemo((function(){if(y){var e=y.find((function(e){return e.product_id===l.id}));return null==e?void 0:e.message}}),[y,l.id]),A=r.useMemo((function(){if(m.allowDeposits&&l.deposit&&!(null==l?void 0:l.isSoldOut))return l.deposit}),[m,l]);return r.useEffect((function(){_&&x("".concat(l.id),{message:_,type:"validate"})}),[_,l.id]),i.createElement(a.Controller,{control:E,name:"".concat(l.id),rules:{required:l.isRequired,validate:function(e){if(!e)return!0;var r=l.isRequired,i=void 0!==r&&r,t=l.maxAmount,n=void 0===t?0:t,a=l.minAmount,o=void 0===a?0:a,c=e.quantity,u=void 0===c?0:c;return!u&&!i||(!u&&i?g("Design:pleaseSelectAtLeastFrom",{min:1,type:"item",from:"this category"}):u<o?g("Validation:fieldMinNumber",{min:l.minAmount,attribute:l.name}):!(n&&u>=o&&n<u)||g("Validation:quantityMaxNumber",{max:l.maxAmount}))}},render:function(e){var r=e.field,n=r.onChange,a=r.value,u=void 0===a?{}:a,p=r.ref,y=e.fieldState,q=y.invalid,E=y.error;return i.createElement("div",{id:String(l.id),className:"iframe-event__category-product"},i.createElement("div",{className:c("iframe-event__product",q&&"error")},i.createElement(d.TicketDescription,{title:l.name,description:l.description,className:c("iframe-event__product-description"),images:l.images,isRequired:l.isRequired,canExpand:v})),i.createElement("div",{className:"iframe-event__product-price-wrapper"},i.createElement("span",{className:"product-price"},f(null!=A?A:l.price,{style:"currency",currency:t.Currency.GBP})),l.isSoldOut?i.createElement("div",{className:"iframe-event__sold-out-wrapper"},g("Design:soldOut")):i.createElement(s.NumberInput,{ref:p,onChange:function(e){n({id:l.id,name:l.name,deposit:A,price:l.price,productsCategoryId:m.id,quantity:e}),N("".concat(l.id))},onArrowDown:function(){n({id:l.id,name:l.name,deposit:A,price:l.price,productsCategoryId:m.id,quantity:(null==u?void 0:u.quantity)-1||0}),N("".concat(l.id))},onArrowUp:function(){var e;n({id:l.id,name:l.name,deposit:A,price:l.price,productsCategoryId:m.id,quantity:(null!==(e=null==u?void 0:u.quantity)&&void 0!==e?e:0)+1}),N("".concat(l.id))},min:0,disabled:l.isSoldOut,value:(null==u?void 0:u.quantity)||0,className:c(q&&"error")})),A&&!(null==m?void 0:m.remainderExpireAfter)&&i.createElement("div",{className:"mt-4"},g("Design:payNowAndUponArrival",{deposit:f(A,{style:"currency",currency:t.Currency.GBP}),remainder:f(l.price-A,{style:"currency",currency:t.Currency.GBP})})),A&&(null==m?void 0:m.remainderExpireAfter)>0&&i.createElement("div",{className:"mt-4"},g("Design:payNowAndReminderDays",{deposit:f(A,{style:"currency",currency:t.Currency.GBP}),remainder:f(l.price-A,{style:"currency",currency:t.Currency.GBP}),days:null==m?void 0:m.remainderExpireAfter})),q&&i.createElement("div",{className:"d-flex mt-3 w-100"},i.createElement("p",{className:"iframe-event__message-error"},o.hasError(E,"required")&&g("Design:pleaseSelectAtLeastFrom",{min:1,type:"item",from:"this category"}),o.hasError(E,"validate")&&E.message)))}})};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),t=e(r),i=require("@licklist/core/dist/Config"),n=require("react-i18next"),a=require("react-hook-form"),c=e(require("@licklist/plugins/dist/services/Form/HookFormService")),o=e(require("clsx")),s=require("react-intl"),u=require("../../../event/ticket-description/TicketDescription.js"),d=require("./components/ProductQuantityInput/ProductQuantityInput.js");exports.CategoryProduct=function(e){var l=e.product,m=e.category,p=e.canExpandDescription,y=void 0===p||p,f=e.productsWithErrors,v=s.useIntl().formatNumber,E=n.useTranslation(["Design","Validation"]).t,g=a.useFormContext(),q=g.control,x=g.clearErrors,N=g.setError,_=r.useMemo((function(){if(f){var e=f.find((function(e){return e.product_id===l.id}));return null==e?void 0:e.message}}),[f,l.id]),A=r.useMemo((function(){if(m.allowDeposits&&l.deposit&&!(null==l?void 0:l.isSoldOut))return l.deposit}),[m,l]);return r.useEffect((function(){_&&N("".concat(l.id),{message:_,type:"validate"})}),[_,l.id]),t.createElement(a.Controller,{control:q,name:"".concat(l.id),rules:{required:l.isRequired,validate:function(e){if(!e)return!0;var r=l.isRequired,t=void 0!==r&&r,i=l.maxAmount,n=void 0===i?0:i,a=l.minAmount,c=void 0===a?0:a,o=e.quantity,s=void 0===o?0:o;return!s&&!t||(!s&&t?E("Design:pleaseSelectAtLeastFrom",{min:1,type:"item",from:"this category"}):s<c?E("Validation:fieldMinNumber",{min:l.minAmount,attribute:l.name}):!(n&&s>=c&&n<s)||E("Validation:quantityMaxNumber",{max:l.maxAmount}))}},render:function(e){var r=e.field,n=r.onChange,a=r.value,s=void 0===a?{}:a,p=r.ref,f=e.fieldState,g=f.invalid,q=f.error;return t.createElement("div",{id:String(l.id),className:"iframe-event__category-product"},t.createElement("div",{className:o("iframe-event__product",g&&"error")},t.createElement(u.TicketDescription,{title:l.name,description:l.description,className:o("iframe-event__product-description"),images:l.images,isRequired:l.isRequired,canExpand:y})),t.createElement("div",{className:"iframe-event__product-price-wrapper"},t.createElement("span",{className:"product-price"},v(null!=A?A:l.price,{style:"currency",currency:i.Currency.GBP})),t.createElement(d.ProductQuantityInput,{onChange:n,productInfo:s,ref:p,clearErrors:x,product:l,category:m,invalid:g,deposit:A})),A&&!(null==m?void 0:m.remainderExpireAfter)&&t.createElement("div",{className:"mt-4"},E("Design:payNowAndUponArrival",{deposit:v(A,{style:"currency",currency:i.Currency.GBP}),remainder:v(l.price-A,{style:"currency",currency:i.Currency.GBP})})),A&&(null==m?void 0:m.remainderExpireAfter)>0&&t.createElement("div",{className:"mt-4"},E("Design:payNowAndReminderDays",{deposit:v(A,{style:"currency",currency:i.Currency.GBP}),remainder:v(l.price-A,{style:"currency",currency:i.Currency.GBP}),days:null==m?void 0:m.remainderExpireAfter})),g&&t.createElement("div",{className:"d-flex mt-3 w-100"},t.createElement("p",{className:"iframe-event__message-error"},c.hasError(q,"required")&&E("Design:pleaseSelectAtLeastFrom",{min:1,type:"item",from:"this category"}),c.hasError(q,"validate")&&q.message)))}})};

package/dist/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { FieldValues, RefCallBack, UseFormClearErrors } from "react-hook-form";
+import { Product, ProductCategory } from "../../../../../../types";
+interface FormOrderItem {
+    id: number;
+    name: string;
+    price: number;
+    productsCategoryId: number;
+    deposit?: number | null;
+    quantity: number;
+}
+interface ProductQuantityInputProps {
+    product: Product;
+    category: ProductCategory;
+    clearErrors: UseFormClearErrors<FieldValues>;
+    onChange: (value: FormOrderItem) => void;
+    deposit?: number;
+    ref: RefCallBack;
+    invalid: boolean;
+    productInfo: FormOrderItem;
+}
+export declare const ProductQuantityInput: ({ product, category, onChange, clearErrors, ref, productInfo, invalid, deposit, }: ProductQuantityInputProps) => JSX.Element;
+export {};
+//# sourceMappingURL=ProductQuantityInput.d.ts.map

package/dist/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductQuantityInput.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE/E,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEnE,UAAU,aAAa;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,yBAAyB;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC7C,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,WAAW,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,aAAa,CAAC;CAC5B;AAED,eAAO,MAAM,oBAAoB,sFAS9B,yBAAyB,gBAgF3B,CAAC"}

package/dist/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.js

@@ -0,0 +1 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),i=require("react-i18next"),n=require("react-bootstrap"),r=e(require("clsx")),o=require("../NumberInput/NumberInput.js");exports.ProductQuantityInput=function(e){var u=e.product,a=e.category,d=e.onChange,c=e.clearErrors,l=e.ref,s=e.productInfo,p=e.invalid,m=e.deposit,y=i.useTranslation("Design").t;return u.isSoldOut?t.createElement("div",{className:"iframe-event__sold-out-wrapper"},y("Design:soldOut")):1===(null==u?void 0:u.maxAmount)?t.createElement(n.Button,{ref:l,disabled:u.isSoldOut,className:r("iframe-event__".concat((null==s?void 0:s.quantity)?"unselect-product":"select-product"),p&&"error"),onClick:function(){d({id:u.id,name:u.name,deposit:m,price:u.price,productsCategoryId:a.id,quantity:(null==s?void 0:s.quantity)?0:1})}},y("Design:".concat((null==s?void 0:s.quantity)?"unselect":"select"))):t.createElement(o.NumberInput,{ref:l,onChange:function(e){d({id:u.id,name:u.name,deposit:m,price:u.price,productsCategoryId:a.id,quantity:e}),c("".concat(u.id))},onArrowDown:function(){d({id:u.id,name:u.name,deposit:m,price:u.price,productsCategoryId:a.id,quantity:(null==s?void 0:s.quantity)-1||0}),c("".concat(u.id))},onArrowUp:function(){var e;d({id:u.id,name:u.name,deposit:m,price:u.price,productsCategoryId:a.id,quantity:(null!==(e=null==s?void 0:s.quantity)&&void 0!==e?e:0)+1}),c("".concat(u.id))},min:0,disabled:u.isSoldOut,value:(null==s?void 0:s.quantity)||0,className:r(p&&"error")})};

package/dist/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/index.d.ts

@@ -0,0 +1,2 @@
+export { ProductQuantityInput } from "./ProductQuantityInput";
+//# sourceMappingURL=index.d.ts.map

package/dist/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/styles/iframe-events/Event.scss

@@ -65,7 +65,7 @@
     .iframe-event__category-product {
       margin-top: 1rem;
       padding-bottom: 1rem;
-    
+
       border-bottom: 2px solid $separator-color;
 
       &:first-child {
@@ -73,7 +73,7 @@
       }
     }
 
-    &:not(:first-child){
+    &:not(:first-child) {
       .iframe-event__name {
         margin: 1rem 0;
       }
@@ -89,6 +89,24 @@
     }
   }
 
+  &__select-product {
+    width: 10.5rem !important;
+    margin-top: 1rem;
+  }
+
+  &__unselect-product {
+    margin-top: 1rem;
+    width: 10.5rem !important;
+    background-color: $snippet-elements-button-color !important;
+    color: $snippet-elements-button-background-color !important;
+    border: 1px solid $snippet-elements-button-background-color !important;
+  }
+
+  &__unselect-product.error,
+  &__select-product.error {
+    border: 1px solid red !important;
+  }
+
   &__product-price-wrapper {
     display: flex;
     align-items: center;
@@ -143,7 +161,7 @@
       border-radius: $iframe-border-radius;
       font-size: 0.875rem;
       height: 2.25rem;
-  
+
       &:active,
       &.active,
       &:hover,
@@ -156,25 +174,25 @@
           background-color: $snippet-elements-button-background-color;
           box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
         }
-  
+
         &:disabled {
           border: none;
         }
       }
-  
+
       &:hover,
       &.hover,
       &:focus,
       &.focus {
         &:not(:disabled) {
-          opacity: .7;
+          opacity: 0.7;
         }
       }
-  
+
       &:active,
       &.active {
         &:not(:disabled) {
-          opacity: .8;
+          opacity: 0.8;
         }
       }
     }
@@ -223,19 +241,19 @@
     &:focus,
     &.focus {
       &:not(:disabled) {
-        opacity: .7;
+        opacity: 0.7;
       }
     }
 
     &:active,
     &.active {
       &:not(:disabled) {
-        opacity: .8;
+        opacity: 0.8;
       }
     }
   }
 
-  &__book-now{
+  &__book-now {
     margin: 1rem 0;
     position: fixed;
     left: 0;
@@ -260,15 +278,15 @@
     justify-content: center;
     width: 10.5rem;
     height: 2rem;
-    color: #9D9D9D;
-    background-color: #F3F3F3;
+    color: #9d9d9d;
+    background-color: #f3f3f3;
     border-radius: $iframe-border-radius;
   }
 }
 
 .people-input {
   .input-wrapper {
-    justify-content: center
+    justify-content: center;
   }
 
   .iframe-event {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.44.468",
+  "version": "0.44.469",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

package/src/iframe/order-process/OrderProcess.stories.tsx

@@ -74,6 +74,9 @@ const productCategories = [
 
         price: 1,
         images: IMAGES,
+        maxAmount: 1,
+        minAmount: 1,
+        isRequired: true,
       },
       {
         id: 5,

package/src/iframe/order-process/components/CategoryProduct/CategoryProduct.tsx

@@ -7,8 +7,8 @@ import * as Config from "@licklist/core/dist/Config";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import { TicketDescription } from "../../../event/ticket-description";
 import { ProductCategory, Product } from "../../../../types";
-import { NumberInput } from "./components/NumberInput";
 import { StepsFormProps } from "../StepsForm/StepsForm";
+import { ProductQuantityInput } from "./components/ProductQuantityInput";
 
 interface CategoryProductProps {
   product: Product;
@@ -126,52 +126,16 @@ export const CategoryProduct = ({
                   currency: Config.Currency.GBP,
                 })}
               </span>
-              {product.isSoldOut ? (
-                <div className="iframe-event__sold-out-wrapper">
-                  {t("Design:soldOut")}
-                </div>
-              ) : (
-                <NumberInput
-                  ref={ref}
-                  onChange={(val) => {
-                    onChange({
-                      id: product.id,
-                      name: product.name,
-                      deposit,
-                      price: product.price,
-                      productsCategoryId: category.id,
-                      quantity: val,
-                    });
-                    clearErrors(`${product.id}` as const);
-                  }}
-                  onArrowDown={() => {
-                    onChange({
-                      id: product.id,
-                      name: product.name,
-                      deposit,
-                      price: product.price,
-                      productsCategoryId: category.id,
-                      quantity: productInfo?.quantity - 1 || 0,
-                    });
-                    clearErrors(`${product.id}` as const);
-                  }}
-                  onArrowUp={() => {
-                    onChange({
-                      id: product.id,
-                      name: product.name,
-                      deposit,
-                      price: product.price,
-                      productsCategoryId: category.id,
-                      quantity: (productInfo?.quantity ?? 0) + 1,
-                    });
-                    clearErrors(`${product.id}` as const);
-                  }}
-                  min={0}
-                  disabled={product.isSoldOut}
-                  value={productInfo?.quantity || 0}
-                  className={clsx(invalid && "error")}
-                />
-              )}
+              <ProductQuantityInput
+                onChange={onChange}
+                productInfo={productInfo}
+                ref={ref}
+                clearErrors={clearErrors}
+                product={product}
+                category={category}
+                invalid={invalid}
+                deposit={deposit}
+              />
             </div>
             {deposit && !category?.remainderExpireAfter && (
               <div className="mt-4">

package/src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import clsx from "clsx";
+import { Button } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import { FieldValues, RefCallBack, UseFormClearErrors } from "react-hook-form";
+import { NumberInput } from "../NumberInput";
+import { Product, ProductCategory } from "../../../../../../types";
+
+interface FormOrderItem {
+  id: number;
+  name: string;
+  price: number;
+  productsCategoryId: number;
+  deposit?: number | null;
+  quantity: number;
+}
+
+interface ProductQuantityInputProps {
+  product: Product;
+  category: ProductCategory;
+  clearErrors: UseFormClearErrors<FieldValues>;
+  onChange: (value: FormOrderItem) => void;
+  deposit?: number;
+  ref: RefCallBack;
+  invalid: boolean;
+  productInfo: FormOrderItem;
+}
+
+export const ProductQuantityInput = ({
+  product,
+  category,
+  onChange,
+  clearErrors,
+  ref,
+  productInfo,
+  invalid,
+  deposit,
+}: ProductQuantityInputProps) => {
+  const { t } = useTranslation("Design");
+
+  const onClick = () => {
+    onChange({
+      id: product.id,
+      name: product.name,
+      deposit,
+      price: product.price,
+      productsCategoryId: category.id,
+      quantity: productInfo?.quantity ? 0 : 1,
+    });
+  };
+
+  if (product.isSoldOut) {
+    return (
+      <div className="iframe-event__sold-out-wrapper">
+        {t("Design:soldOut")}
+      </div>
+    );
+  }
+  if (product?.maxAmount === 1) {
+    return (
+      <Button
+        ref={ref}
+        disabled={product.isSoldOut}
+        className={clsx(
+          `iframe-event__${
+            productInfo?.quantity ? "unselect-product" : "select-product"
+          }`,
+          invalid && "error"
+        )}
+        onClick={onClick}
+      >
+        {t(`Design:${productInfo?.quantity ? "unselect" : "select"}`)}
+      </Button>
+    );
+  }
+  return (
+    <NumberInput
+      ref={ref}
+      onChange={(val) => {
+        onChange({
+          id: product.id,
+          name: product.name,
+          deposit,
+          price: product.price,
+          productsCategoryId: category.id,
+          quantity: val,
+        });
+        clearErrors(`${product.id}` as const);
+      }}
+      onArrowDown={() => {
+        onChange({
+          id: product.id,
+          name: product.name,
+          deposit,
+          price: product.price,
+          productsCategoryId: category.id,
+          quantity: productInfo?.quantity - 1 || 0,
+        });
+        clearErrors(`${product.id}` as const);
+      }}
+      onArrowUp={() => {
+        onChange({
+          id: product.id,
+          name: product.name,
+          deposit,
+          price: product.price,
+          productsCategoryId: category.id,
+          quantity: (productInfo?.quantity ?? 0) + 1,
+        });
+        clearErrors(`${product.id}` as const);
+      }}
+      min={0}
+      disabled={product.isSoldOut}
+      value={productInfo?.quantity || 0}
+      className={clsx(invalid && "error")}
+    />
+  );
+};

package/src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/index.ts

@@ -0,0 +1 @@
+export { ProductQuantityInput } from "./ProductQuantityInput";

package/src/styles/iframe-events/Event.scss

@@ -65,7 +65,7 @@
     .iframe-event__category-product {
       margin-top: 1rem;
       padding-bottom: 1rem;
-    
+
       border-bottom: 2px solid $separator-color;
 
       &:first-child {
@@ -73,7 +73,7 @@
       }
     }
 
-    &:not(:first-child){
+    &:not(:first-child) {
       .iframe-event__name {
         margin: 1rem 0;
       }
@@ -89,6 +89,24 @@
     }
   }
 
+  &__select-product {
+    width: 10.5rem !important;
+    margin-top: 1rem;
+  }
+
+  &__unselect-product {
+    margin-top: 1rem;
+    width: 10.5rem !important;
+    background-color: $snippet-elements-button-color !important;
+    color: $snippet-elements-button-background-color !important;
+    border: 1px solid $snippet-elements-button-background-color !important;
+  }
+
+  &__unselect-product.error,
+  &__select-product.error {
+    border: 1px solid red !important;
+  }
+
   &__product-price-wrapper {
     display: flex;
     align-items: center;
@@ -143,7 +161,7 @@
       border-radius: $iframe-border-radius;
       font-size: 0.875rem;
       height: 2.25rem;
-  
+
       &:active,
       &.active,
       &:hover,
@@ -156,25 +174,25 @@
           background-color: $snippet-elements-button-background-color;
           box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
         }
-  
+
         &:disabled {
           border: none;
         }
       }
-  
+
       &:hover,
       &.hover,
       &:focus,
       &.focus {
         &:not(:disabled) {
-          opacity: .7;
+          opacity: 0.7;
         }
       }
-  
+
       &:active,
       &.active {
         &:not(:disabled) {
-          opacity: .8;
+          opacity: 0.8;
         }
       }
     }
@@ -223,19 +241,19 @@
     &:focus,
     &.focus {
       &:not(:disabled) {
-        opacity: .7;
+        opacity: 0.7;
       }
     }
 
     &:active,
     &.active {
       &:not(:disabled) {
-        opacity: .8;
+        opacity: 0.8;
       }
     }
   }
 
-  &__book-now{
+  &__book-now {
     margin: 1rem 0;
     position: fixed;
     left: 0;
@@ -260,15 +278,15 @@
     justify-content: center;
     width: 10.5rem;
     height: 2rem;
-    color: #9D9D9D;
-    background-color: #F3F3F3;
+    color: #9d9d9d;
+    background-color: #f3f3f3;
     border-radius: $iframe-border-radius;
   }
 }
 
 .people-input {
   .input-wrapper {
-    justify-content: center
+    justify-content: center;
   }
 
   .iframe-event {