@licklist/design 0.61.0 → 0.62.0

package/dist/iframe/ryft/RyftPaymentForm.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { AttemptPaymentResponse } from "@licklist/plugins/dist/hooks/Ryft/useRyftPayment";
+import { ProviderPaymentSettings } from "@licklist/core/dist/DataMapper/Setting/ProviderPaymentSettingsDataMapper";
 export declare const ryftErrorMap: Record<string, string>;
 export type RyftPaymentFormValues = Record<string, never>;
 export interface RyftPaymentFormProps {
@@ -8,6 +9,7 @@ export interface RyftPaymentFormProps {
     initRyft: (onSuccess: () => void, onFailure: (error?: string) => void) => Promise<void>;
     onSubmit: () => Promise<AttemptPaymentResponse>;
     resetReferrer?: () => void;
+    providerPaymentSettings?: ProviderPaymentSettings;
 }
-export declare const RyftPaymentForm: ({ accountId, isCreateLoading, initRyft, resetReferrer, onSubmit, }: RyftPaymentFormProps) => JSX.Element;
+export declare const RyftPaymentForm: ({ accountId, isCreateLoading, providerPaymentSettings, initRyft, resetReferrer, onSubmit, }: RyftPaymentFormProps) => JSX.Element;
 //# sourceMappingURL=RyftPaymentForm.d.ts.map

package/dist/iframe/ryft/RyftPaymentForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RyftPaymentForm.d.ts","sourceRoot":"","sources":["../../../src/iframe/ryft/RyftPaymentForm.tsx"],"names":[],"mappings":";AAOA,OAAO,EAKL,sBAAsB,EACvB,MAAM,kDAAkD,CAAC;AAI1D,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAW/C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAE1D,MAAM,WAAW,oBAAoB;IAEnC,SAAS,EAAE,GAAG,CAAC;IACf,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,CACR,SAAS,EAAE,MAAM,IAAI,EACrB,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,KAChC,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,QAAQ,EAAE,MAAM,OAAO,CAAC,sBAAsB,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,uEAMzB,oBAAoB,gBAyJtB,CAAC"}
+{"version":3,"file":"RyftPaymentForm.d.ts","sourceRoot":"","sources":["../../../src/iframe/ryft/RyftPaymentForm.tsx"],"names":[],"mappings":";AAOA,OAAO,EAKL,sBAAsB,EACvB,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,0EAA0E,CAAC;AAKnH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAW/C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAE1D,MAAM,WAAW,oBAAoB;IAEnC,SAAS,EAAE,GAAG,CAAC;IACf,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,CACR,SAAS,EAAE,MAAM,IAAI,EACrB,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,KAChC,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,QAAQ,EAAE,MAAM,OAAO,CAAC,sBAAsB,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;CACnD;AAED,eAAO,MAAM,eAAe,gGAOzB,oBAAoB,gBA8JtB,CAAC"}

package/dist/iframe/ryft/RyftPaymentForm.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 t=require("tslib"),r=require("react"),n=e(r),a=require("react-router-dom"),i=require("../../static/loader/BlockLoader.js"),o=require("react-i18next"),u=e(require("react-bootstrap/Button")),s=require("react-hook-form"),c=require("../../static/loader/ButtonLoader.js"),l=e(require("react-bootstrap/Alert"));require("../../static/index.js");var d=require("@licklist/plugins/dist/hooks/Ryft/useRyftPayment"),f=require("./utils/ryft-form.js"),m={insufficient_funds:"insufficientFunds",declined_do_not_honour:"declinedDoNotHonour",invalid_card_number:"invalidCardNumber",restricted_card:"restrictedCard",security_violation:"securityViolation",expired_card:"expiredCard",gateway_reject:"gatewayReject",bad_track_data:"badTrackData","3ds_authentication_failure":"3dsAuthenticationFailure",unknown_error:"unknownError"};exports.RyftPaymentForm=function(e){var y,_,v=e.accountId,E=e.isCreateLoading,p=e.initRyft,g=e.resetReferrer,R=e.onSubmit,b=o.useTranslation(["Design","Validation","Ryft"]).t,h=r.useRef(null),q=a.useHistory(),k=t.__read(r.useState(!1),2),w=k[0],N=k[1],S=t.__read(r.useState(!1),2),T=S[0],F=S[1],A=t.__read(r.useState(!1),2),P=A[0],j=A[1],x=t.__read(r.useState(void 0),2),C=x[0],D=x[1],L=d.useRyftPayment().addEventHandler,U=s.useForm(),V=function(){g&&g()},B=function(e){(null==e?void 0:e.id)&&(null==e?void 0:e.returnUrl)&&(window.location.href="".concat(e.returnUrl,"&ps=").concat(e.id),V())};return r.useEffect((function(){return f.injectComponentsInRyftForm({t:b})}),[null===(_=null===(y=h.current)||void 0===y?void 0:y.childNodes)||void 0===_?void 0:_.length]),r.useEffect((function(){v.data&&!v.isError&&p((function(){L("cardValidationChanged",(function(e){N(e.isValid)})),j(!1)}),(function(){return j(!0)}))}),[v.data]),v.isLoading||v.isFetching||E?n.createElement("div",{className:"mt-5 pt-5"},n.createElement(i.BlockLoader,null)):v.isError?n.createElement("div",{className:"mt-5 ryft-init-failure"},n.createElement(l,{key:"danger",variant:"danger"},n.createElement("h5",null,b("Ryft:errorMessage")),b("Ryft:noPaymentProviderFound"))):P?n.createElement("div",{className:"mt-5 ryft-init-failure"},n.createElement(l,{key:"danger",variant:"danger"},n.createElement("h5",null,b("Ryft:errorMessage")),b("Ryft:initFailureMessage"),n.createElement("div",{className:"flex flex-column align-items-center mt-4"},n.createElement(u,{variant:"primary",onClick:function(){q.go(0)}},b("Ryft:refresh"))))):n.createElement(n.Fragment,null,n.createElement("form",{ref:h,id:"ryft-pay-form",noValidate:!0,onSubmit:U.handleSubmit((function(){return t.__awaiter(void 0,void 0,void 0,(function(){var e,r,n;return t.__generator(this,(function(t){switch(t.label){case 0:F(!0),t.label=1;case 1:return t.trys.push([1,3,4,5]),[4,R()];case 2:if((e=t.sent())||D("unknown_error"),"requiredAction"in e){if(e.status!==d.RYFT_STATUS_PENDING_ACTION||!(null===(n=e.requiredAction)||void 0===n?void 0:n.url))return B(e),[2];window.location.href=e.requiredAction.url,V()}return e.status===d.RYFT_STATUS_APPROVED||e.status===d.RYFT_STATUS_CAPTURED?(B(e),[2]):(e.lastError&&(D(e.lastError),V()),[3,5]);case 3:return r=t.sent(),D(r),[3,5];case 4:return F(!1),[7];case 5:return[2]}}))}))})),className:"ryft-payment-form"},n.createElement("div",{className:"submit-button-wrapper mt-4 p-1"},n.createElement(u,{type:"submit",disabled:T||!w},T&&n.createElement(c.ButtonLoader,null),b("Design:buyNow"))),C&&n.createElement("div",{id:"ryft-payment-error"},b("".concat(m[C])))))},exports.ryftErrorMap=m;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=require("react"),n=e(r),a=require("react-router-dom"),i=require("../../static/loader/BlockLoader.js"),o=require("react-i18next"),u=e(require("react-bootstrap/Button")),d=require("react-hook-form"),s=require("../../static/loader/ButtonLoader.js"),l=e(require("react-bootstrap/Alert"));require("../../static/index.js");var c=require("@licklist/plugins/dist/hooks/Ryft/useRyftPayment"),f=require("./utils/ryft-form.js"),m={insufficient_funds:"insufficientFunds",declined_do_not_honour:"declinedDoNotHonour",invalid_card_number:"invalidCardNumber",restricted_card:"restrictedCard",security_violation:"securityViolation",expired_card:"expiredCard",gateway_reject:"gatewayReject",bad_track_data:"badTrackData","3ds_authentication_failure":"3dsAuthenticationFailure",unknown_error:"unknownError"};exports.RyftPaymentForm=function(e){var y,_,v=e.accountId,E=e.isCreateLoading,p=e.providerPaymentSettings,g=e.initRyft,b=e.resetReferrer,h=e.onSubmit,R=o.useTranslation(["Design","Validation","Ryft"]).t,q=r.useRef(null),S=a.useHistory(),k=t.__read(r.useState(!1),2),w=k[0],N=k[1],P=t.__read(r.useState(!1),2),T=P[0],F=P[1],A=t.__read(r.useState(!1),2),j=A[0],x=A[1],C=t.__read(r.useState(void 0),2),D=C[0],M=C[1],L=c.useRyftPayment().addEventHandler,U=d.useForm(),V=function(){b&&b()},B=function(e){(null==e?void 0:e.id)&&(null==e?void 0:e.returnUrl)&&(window.location.href="".concat(e.returnUrl,"&ps=").concat(e.id),V())};return r.useEffect((function(){return f.injectComponentsInRyftForm({t:R,additionalPaymentMethodsEnabled:null==p?void 0:p.additionalPaymentMethodsEnabled})}),[null===(_=null===(y=q.current)||void 0===y?void 0:y.childNodes)||void 0===_?void 0:_.length]),r.useEffect((function(){v.data&&!v.isError&&g((function(){L("cardValidationChanged",(function(e){N(e.isValid)})),x(!1)}),(function(){return x(!0)}))}),[v.data]),v.isLoading||v.isFetching||E?n.createElement("div",{className:"mt-5 pt-5"},n.createElement(i.BlockLoader,null)):v.isError?n.createElement("div",{className:"mt-5 ryft-init-failure"},n.createElement(l,{key:"danger",variant:"danger"},n.createElement("h5",null,R("Ryft:errorMessage")),R("Ryft:noPaymentProviderFound"))):j?n.createElement("div",{className:"mt-5 ryft-init-failure"},n.createElement(l,{key:"danger",variant:"danger"},n.createElement("h5",null,R("Ryft:errorMessage")),R("Ryft:initFailureMessage"),n.createElement("div",{className:"flex flex-column align-items-center mt-4"},n.createElement(u,{variant:"primary",onClick:function(){S.go(0)}},R("Ryft:refresh"))))):n.createElement(n.Fragment,null,n.createElement("form",{ref:q,id:"ryft-pay-form",noValidate:!0,onSubmit:U.handleSubmit((function(){return t.__awaiter(void 0,void 0,void 0,(function(){var e,r,n;return t.__generator(this,(function(t){switch(t.label){case 0:F(!0),t.label=1;case 1:return t.trys.push([1,3,4,5]),[4,h()];case 2:if((e=t.sent())||M("unknown_error"),"requiredAction"in e){if(e.status!==c.RYFT_STATUS_PENDING_ACTION||!(null===(n=e.requiredAction)||void 0===n?void 0:n.url))return B(e),[2];window.location.href=e.requiredAction.url,V()}return e.status===c.RYFT_STATUS_APPROVED||e.status===c.RYFT_STATUS_CAPTURED?(B(e),[2]):(e.lastError&&(M(e.lastError),V()),[3,5]);case 3:return r=t.sent(),M(r),[3,5];case 4:return F(!1),[7];case 5:return[2]}}))}))})),className:"ryft-payment-form"},n.createElement("div",{className:"submit-button-wrapper mt-4 p-1"},n.createElement(u,{type:"submit",disabled:T||!w},T&&n.createElement(s.ButtonLoader,null),R("Design:buyNow"))),D&&n.createElement("div",{id:"ryft-payment-error"},R("".concat(m[D])))))},exports.ryftErrorMap=m;

package/dist/iframe/ryft/utils/ryft-form.d.ts

@@ -1,5 +1,6 @@
 import { TFunction } from "react-i18next";
-export declare const injectComponentsInRyftForm: ({ t, }: {
+export declare const injectComponentsInRyftForm: ({ t, additionalPaymentMethodsEnabled, }: {
     t: TFunction<string[]>;
+    additionalPaymentMethodsEnabled?: boolean;
 }) => void;
 //# sourceMappingURL=ryft-form.d.ts.map

package/dist/iframe/ryft/utils/ryft-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ryft-form.d.ts","sourceRoot":"","sources":["../../../../src/iframe/ryft/utils/ryft-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,eAAO,MAAM,0BAA0B;OAGlC,UAAU,MAAM,EAAE,CAAC;UAyCvB,CAAC"}
+{"version":3,"file":"ryft-form.d.ts","sourceRoot":"","sources":["../../../../src/iframe/ryft/utils/ryft-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,eAAO,MAAM,0BAA0B;OAIlC,UAAU,MAAM,EAAE,CAAC;sCACY,OAAO;UAyC1C,CAAC"}

package/dist/iframe/ryft/utils/ryft-form.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.injectComponentsInRyftForm=function(e){var t=e.t,n=document.getElementById("ryft-pay-iframe"),i=document.getElementById("card-title-container");if(n&&!i){var r=document.createElement("div"),d=document.createElement("div"),a=document.createElement("div");a.id="card-title-container",r.textContent=t("Design:enterCardDetails"),d.className="bold-text form-label",d.innerText=t("Design:paymentDetails"),a.append(r,d),null==n||n.before(a);var o=document.getElementById("ryft-pay-grid");if(o){var m=document.createElement("div"),c=document.createElement("div"),l=document.createElement("div"),s=document.createElement("div");m.className="mobile-pay-title",m.innerText=t("Design:expressCheckoutWith"),c.id="mobile-pay-divider-text",c.innerText="or",l.id="mobile-pay-divider",s.id="mobile-pay-divider-container",s.append(c,l),o.before(m),o.after(s)}}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.injectComponentsInRyftForm=function(e){var t=e.t,n=e.additionalPaymentMethodsEnabled,i=document.getElementById("ryft-pay-iframe"),d=document.getElementById("card-title-container");if(i&&!d){var a=document.createElement("div"),r=document.createElement("div"),o=document.createElement("div");o.id="card-title-container",a.textContent=t("Design:enterCardDetails"),r.className="bold-text form-label",r.innerText=t("Design:paymentDetails"),o.append(a,r),null==i||i.before(o);var m=document.getElementById("ryft-pay-grid");if(m&&n){var l=document.createElement("div"),c=document.createElement("div"),s=document.createElement("div"),p=document.createElement("div");l.className="mobile-pay-title",l.innerText=t("Design:expressCheckoutWith"),c.id="mobile-pay-divider-text",c.innerText="or",s.id="mobile-pay-divider",p.id="mobile-pay-divider-container",p.append(c,s),m.before(l),m.after(p)}}};

package/dist/product-set/product-category/ProductCategoryControl.d.ts

@@ -9,6 +9,7 @@ export interface ProductCategoryControlValues extends FormValues {
     name: string;
     minSubItems: number | null;
     maxSubItems: number | null;
+    overallQuantity?: number | null;
     quantityType: QuantityType;
     type: CategoryType;
     isTimeRelated: boolean;

package/dist/product-set/product-category/ProductCategoryControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductCategoryControl.d.ts","sourceRoot":"","sources":["../../../src/product-set/product-category/ProductCategoryControl.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,8DAA8D,CAAC;AAE1F,OAAO,EACL,YAAY,EACZ,YAAY,EAKb,MAAM,kEAAkE,CAAC;AAC1E,OAAO,EAAE,IAAI,EAAE,MAAM,wDAAwD,CAAC;AAG9E,OAAO,EAAE,gBAAgB,EAAmB,MAAM,UAAU,CAAC;AAI7D,MAAM,WAAW,4BAA6B,SAAQ,UAAU;IAC9D,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,YAAY,CAAC;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACpB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,2BAA4B,SAAQ,gBAAgB;IACnE,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IAErB,oBAAoB,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAQD,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EACpB,SAAS,EACT,UAAkB,GACnB,EAAE,2BAA2B,eAue7B"}
+{"version":3,"file":"ProductCategoryControl.d.ts","sourceRoot":"","sources":["../../../src/product-set/product-category/ProductCategoryControl.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,8DAA8D,CAAC;AAE1F,OAAO,EACL,YAAY,EACZ,YAAY,EAKb,MAAM,kEAAkE,CAAC;AAC1E,OAAO,EAAE,IAAI,EAAE,MAAM,wDAAwD,CAAC;AAG9E,OAAO,EAAE,gBAAgB,EAAmB,MAAM,UAAU,CAAC;AAI7D,MAAM,WAAW,4BAA6B,SAAQ,UAAU;IAC9D,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,YAAY,EAAE,YAAY,CAAC;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACpB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,2BAA4B,SAAQ,gBAAgB;IACnE,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IAErB,oBAAoB,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAQD,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EACpB,SAAS,EACT,UAAkB,GACnB,EAAE,2BAA2B,eAoiB7B"}

package/dist/product-set/product-category/ProductCategoryControl.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 t=require("tslib"),n=require("react"),a=e(n),r=require("react-i18next"),o=require("react-bootstrap"),l=require("react-hook-form"),c=e(require("@licklist/plugins/dist/services/Form/HookFormService")),m=require("@react-aria/utils"),i=require("../../static/switch/Switch.js"),u=require("../../static/switch/BooleanSwitch.js"),s=require("../../assets/dashboard/increment.svg.js");require("../../static/index.js");var d=require("../form/context.js"),E=require("@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper"),p=[E.CATEGORY_TYPE_TICKETS,E.CATEGORY_TYPE_FIXED_DURATION,E.CATEGORY_TYPE_GAME];exports.ProductCategoryControl=function(e){var v,I,C,b,f=e.isLoading,h=e.categoryName,g=e.onCategoryNameChange,F=e.productCategoryIndex,x=e.stepIndex,y=e.isOverride,T=void 0!==y&&y,S=l.useFormContext(),k=S.control,G=S.formState.errors,N=S.register,w=S.clearErrors,_=S.setValue,q=S.getValues,R=S.watch,A=S.trigger,P=r.useTranslation("Design").t,Y=t.__read(n.useState(!1),2),D=Y[0],L=Y[1],O="steps.".concat(x,".productCategories.").concat(F),V=l.useWatch({name:O}),B=R("".concat(O,".maxSubItems"))||0,M=R("".concat(O,".minSubItems"))||0,j=R("".concat(O,".allowDeposits")),z=p.includes(V.type),U=null===(b=null===(C=null===(I=null===(v=null==G?void 0:G.steps)||void 0===v?void 0:v[x])||void 0===I?void 0:I.productCategories)||void 0===C?void 0:C[F])||void 0===b?void 0:b.products,H=m.useId(),K=m.useId(),X=m.useId(),Q=m.useId(),W=m.useId(),J=m.useId(),Z=m.useId(),$=m.useId(),ee=m.useId(),te=m.useId(),ne=m.useId(),ae=n.useContext(d.ProductSetLoadingContext),re=ae.providerHasBookingManagement,oe=ae.zones,le=void 0===oe?[]:oe,ce=n.useCallback((function(){return L((function(e){return!e}))}),[]);n.useEffect((function(){A("".concat(O,".maxSubItems"))}),[M,O]),n.useEffect((function(){A("".concat(O,".minSubItems"))}),[B,O]);var me=V.type===E.CATEGORY_TYPE_FIXED_DURATION||V.type===E.CATEGORY_TYPE_GAME;return a.createElement(a.Fragment,null,a.createElement(o.Col,{md:12,xl:!0,className:"p-0"},a.createElement(o.Form.Group,{controlId:K},a.createElement(o.Form.Label,null,P("nameOfTheCategory")),a.createElement(o.Form.Control,t.__assign({},N("".concat(O,".name"),{required:P("Validation:fieldRequired",{attribute:P("name")}),validate:function(){return(null==U?void 0:U.type)===c.manualErrorType&&w("".concat(O,".products")),!0}}),{value:h,onChange:g,isInvalid:c.isInvalid("".concat(O,".name"),G),placeholder:P("name"),disabled:f||T})),a.createElement(o.Form.Control.Feedback,{type:"invalid"},c.getErrors("".concat(O,".name"),G))),a.createElement(o.Form.Group,{controlId:W},a.createElement(l.Controller,{control:k,name:"".concat(O,".quantityType"),render:function(e){var t=e.field;return a.createElement(o.Form.Group,{className:"d-flex flex-column flex-grow-1 align-items-start"},a.createElement(o.Form.Label,null,P("quantityType")),a.createElement(i.Switch,{name:t.name,options:E.QUANTITY_TYPES.map((function(e){return{key:e,id:e,value:P(e)}})),value:t.value,onChange:t.onChange,disabled:f||T}))}})),a.createElement(o.Row,null,a.createElement(o.Col,{md:6,sm:6,xs:6},a.createElement(o.Form.Group,{controlId:X},a.createElement(o.Form.Label,null,P("minItems")),a.createElement(o.InputGroup,{hasValidation:!0},a.createElement(o.InputGroup.Prepend,{className:"arrow-up-btn",onClick:function(){var e=Number(q("".concat(O,".minSubItems"))||0);_("".concat(O,".minSubItems"),e+1,{shouldValidate:!0})}},a.createElement(o.InputGroup.Text,{className:"py-0 px-3"},a.createElement(s.ReactComponent,null))),a.createElement(l.Controller,{render:function(e){var t=e.field,n=t.value,r=t.onChange,l=t.name,m=t.ref;return a.createElement(o.Form.Control,{ref:m,type:"number",min:0,step:1,value:null===n?"":n,onChange:r,isInvalid:c.isInvalid("".concat(O,".minSubItems"),G),disabled:f||T,name:l})},control:k,name:"".concat(O,".minSubItems"),rules:{min:{value:0,message:P("Validation:fieldMinNumber",{attribute:P("minItems"),min:0})},max:B?{value:Number(B),message:P("Validation:fieldMaxNumber",{attribute:P("minItems"),max:P("maxItems")})}:void 0}}),a.createElement(o.Form.Control.Feedback,{type:"invalid"},c.getErrors("".concat(O,".minSubItems"),G))))),a.createElement(o.Col,{md:6,sm:6,xs:6},a.createElement(o.Form.Group,{controlId:Q},a.createElement(o.Form.Label,null,P("maxItems")),a.createElement(o.InputGroup,{hasValidation:!0},a.createElement(o.InputGroup.Prepend,{className:"arrow-up-btn",onClick:function(){var e=Number(q("".concat(O,".maxSubItems"))||0);_("".concat(O,".maxSubItems"),e+1,{shouldValidate:!0})}},a.createElement(o.InputGroup.Text,{className:"py-0 px-3"},a.createElement(s.ReactComponent,null))),a.createElement(l.Controller,{render:function(e){var t=e.field,n=t.value,r=t.onChange,l=t.name,m=t.ref;return a.createElement(o.Form.Control,{ref:m,type:"number",step:1,name:l,value:null===n?"":n,onChange:r,isInvalid:c.isInvalid("".concat(O,".maxSubItems"),G),disabled:f||T})},control:k,name:"".concat(O,".maxSubItems"),rules:{min:{value:Number(M),message:P("Validation:fieldGreaterMinNumber",{attribute:P("maxItems"),min:P("minItems")})}}}),a.createElement(o.Form.Control.Feedback,{type:"invalid"},c.getErrors("".concat(O,".maxSubItems"),G)))))),me&&a.createElement(o.Row,null,a.createElement(o.Col,null,a.createElement(o.Form.Group,{controlId:ee},a.createElement(o.Form.Label,null,P("Design:zone")),a.createElement(l.Controller,{control:k,name:"".concat(O,".zoneId"),render:function(e){var n=e.field;return a.createElement(o.Form.Control,t.__assign({as:"select",disabled:T,isInvalid:c.isInvalid("".concat(O,".zoneId"),G)},n),a.createElement("option",{value:null},P("Design:choose")),le.map((function(e){return a.createElement("option",{key:e.id,value:e.id},e.name)})))},rules:{required:{value:re,message:P("Validation:fieldRequired",{attribute:P("zone")})}}}),a.createElement(o.Form.Control.Feedback,{type:"invalid"},c.getErrors("".concat(O,".zoneId"),G)))))),a.createElement(o.Col,{md:12,xl:!0,className:"p-0"},a.createElement(o.Form.Group,{controlId:H,className:"custom-checkbox"},a.createElement(o.Form.Check,{custom:!0,type:"checkbox",name:H,disabled:f,id:"check-api"},a.createElement(o.Form.Check.Input,{checked:D,onChange:ce,disabled:T,type:"checkbox"}),a.createElement(o.Form.Check.Label,null,P("showAdvancedOptions")))),a.createElement(o.Collapse,{in:D},a.createElement("div",null,z&&a.createElement(o.Form.Group,{controlId:$,className:"advanced-switch-container"},a.createElement(o.Form.Label,null,P("hasTicket")),a.createElement("div",null,a.createElement(l.Controller,{render:function(e){var t=e.field,n=t.name,r=t.value,o=t.onChange;return a.createElement(u.BooleanSwitch,{name:n,value:Boolean(r),onChange:o,disabled:V.type===E.CATEGORY_TYPE_TICKETS})},control:k,name:"".concat(O,".hasTicket")}))),V.hasTicket&&a.createElement(o.Form.Group,{controlId:Z,className:"advanced-switch-container"},a.createElement(o.Form.Label,null,P("collectUserInfo")),a.createElement("div",null,a.createElement(l.Controller,{render:function(e){var t=e.field,n=t.name,r=t.value,o=t.onChange;return a.createElement(u.BooleanSwitch,{name:n,value:Boolean(r),onChange:o,disabled:f||T})},control:k,name:"".concat(O,".collectUserInfo")}))),!V.hasTicket&&a.createElement(o.Form.Group,{controlId:J,className:"advanced-switch-container"},a.createElement(a.Fragment,null,a.createElement(o.Form.Label,null,P("isTimeRelated")),a.createElement("div",null,a.createElement(l.Controller,{render:function(e){var t=e.field,n=t.name,r=t.value,o=t.onChange;return a.createElement(u.BooleanSwitch,{name:n,value:Boolean(r),onChange:o,disabled:f||T})},control:k,name:"".concat(O,".isTimeRelated")})))),a.createElement(o.Form.Group,{controlId:te,className:"advanced-switch-container"},a.createElement(o.Form.Label,null,P("allowDeposits")),a.createElement("div",null,a.createElement(l.Controller,{render:function(e){var t=e.field,n=t.name,r=t.value,o=t.onChange;return a.createElement(u.BooleanSwitch,{name:n,value:Boolean(r),onChange:o,disabled:f||T})},control:k,name:"".concat(O,".allowDeposits")}))),j&&a.createElement(o.Form.Group,{controlId:ne,className:"deposit-days"},a.createElement(o.Form.Label,null,P("depositDays")),a.createElement(l.Controller,{render:function(e){var t=e.field,n=t.value,r=t.onChange,l=t.name,m=t.ref;return a.createElement(o.Form.Control,{ref:m,type:"number",min:0,step:1,value:n,onChange:r,isInvalid:c.isInvalid("".concat(O,".remainderExpireAfter"),G),disabled:f||T,name:l})},control:k,name:"".concat(O,".remainderExpireAfter")}),a.createElement(o.Form.Control.Feedback,{type:"invalid"},c.getErrors("".concat(O,".remainderExpireAfter"),G)))))))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),n=require("react"),a=e(n),r=require("react-i18next"),l=require("react-bootstrap"),o=require("react-hook-form"),c=e(require("@licklist/plugins/dist/services/Form/HookFormService")),m=require("@react-aria/utils"),i=require("../../static/switch/Switch.js"),u=require("../../static/switch/BooleanSwitch.js"),s=require("../../assets/dashboard/increment.svg.js");require("../../static/index.js");var d=require("../form/context.js"),E=require("@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper"),p=[E.CATEGORY_TYPE_TICKETS,E.CATEGORY_TYPE_FIXED_DURATION,E.CATEGORY_TYPE_GAME];exports.ProductCategoryControl=function(e){var v,I,C,b,f=e.isLoading,g=e.categoryName,h=e.onCategoryNameChange,F=e.productCategoryIndex,y=e.stepIndex,x=e.isOverride,T=void 0!==x&&x,G=o.useFormContext(),k=G.control,N=G.formState.errors,S=G.register,w=G.clearErrors,_=G.setValue,q=G.getValues,R=G.watch,A=G.trigger,P=r.useTranslation("Design").t,D=t.__read(n.useState(!1),2),L=D[0],V=D[1],Y="steps.".concat(y,".productCategories.").concat(F),O=o.useWatch({name:Y}),B=R("".concat(Y,".maxSubItems"))||0,M=R("".concat(Y,".minSubItems"))||0,Q=R("".concat(Y,".allowDeposits")),j=p.includes(O.type),z=null===(b=null===(C=null===(I=null===(v=null==N?void 0:N.steps)||void 0===v?void 0:v[y])||void 0===I?void 0:I.productCategories)||void 0===C?void 0:C[F])||void 0===b?void 0:b.products,U=m.useId(),H=m.useId(),K=m.useId(),X=m.useId(),W=m.useId(),J=m.useId(),Z=m.useId(),$=m.useId(),ee=m.useId(),te=m.useId(),ne=m.useId(),ae=m.useId(),re=n.useContext(d.ProductSetLoadingContext),le=re.providerHasBookingManagement,oe=re.zones,ce=void 0===oe?[]:oe,me=n.useCallback((function(){return V((function(e){return!e}))}),[]);n.useEffect((function(){A("".concat(Y,".maxSubItems"))}),[M,Y]),n.useEffect((function(){A("".concat(Y,".minSubItems"))}),[B,Y]);var ie=O.type===E.CATEGORY_TYPE_FIXED_DURATION||O.type===E.CATEGORY_TYPE_GAME;return a.createElement(a.Fragment,null,a.createElement(l.Col,{md:12,xl:!0,className:"p-0"},a.createElement(l.Form.Group,{controlId:H},a.createElement(l.Form.Label,null,P("nameOfTheCategory")),a.createElement(l.Form.Control,t.__assign({},S("".concat(Y,".name"),{required:P("Validation:fieldRequired",{attribute:P("name")}),validate:function(){return(null==z?void 0:z.type)===c.manualErrorType&&w("".concat(Y,".products")),!0}}),{value:g,onChange:h,isInvalid:c.isInvalid("".concat(Y,".name"),N),placeholder:P("name"),disabled:f||T})),a.createElement(l.Form.Control.Feedback,{type:"invalid"},c.getErrors("".concat(Y,".name"),N))),a.createElement(l.Form.Group,{controlId:W},a.createElement(o.Controller,{control:k,name:"".concat(Y,".quantityType"),render:function(e){var t=e.field;return a.createElement(l.Form.Group,{className:"d-flex flex-column flex-grow-1 align-items-start"},a.createElement(l.Form.Label,null,P("quantityType")),a.createElement(i.Switch,{name:t.name,options:E.QUANTITY_TYPES.map((function(e){return{key:e,id:e,value:P(e)}})),value:t.value,onChange:t.onChange,disabled:f||T}))}})),a.createElement(l.Row,null,a.createElement(l.Col,{md:6,sm:6,xs:6},a.createElement(l.Form.Group,{controlId:K},a.createElement(l.Form.Label,null,P("minItems")),a.createElement(l.InputGroup,{hasValidation:!0},a.createElement(l.InputGroup.Prepend,{className:"arrow-up-btn",onClick:function(){var e=Number(q("".concat(Y,".minSubItems"))||0);_("".concat(Y,".minSubItems"),e+1,{shouldValidate:!0})}},a.createElement(l.InputGroup.Text,{className:"py-0 px-3"},a.createElement(s.ReactComponent,null))),a.createElement(o.Controller,{render:function(e){var t=e.field,n=t.value,r=t.onChange,o=t.name,m=t.ref;return a.createElement(l.Form.Control,{ref:m,type:"number",min:0,step:1,value:null===n?"":n,onChange:r,isInvalid:c.isInvalid("".concat(Y,".minSubItems"),N),disabled:f||T,name:o})},control:k,name:"".concat(Y,".minSubItems"),rules:{min:{value:0,message:P("Validation:fieldMinNumber",{attribute:P("minItems"),min:0})},max:B?{value:Number(B),message:P("Validation:fieldMaxNumber",{attribute:P("minItems"),max:P("maxItems")})}:void 0}}),a.createElement(l.Form.Control.Feedback,{type:"invalid"},c.getErrors("".concat(Y,".minSubItems"),N))))),a.createElement(l.Col,{md:6,sm:6,xs:6},a.createElement(l.Form.Group,{controlId:X},a.createElement(l.Form.Label,null,P("maxItems")),a.createElement(l.InputGroup,{hasValidation:!0},a.createElement(l.InputGroup.Prepend,{className:"arrow-up-btn",onClick:function(){var e=Number(q("".concat(Y,".maxSubItems"))||0);_("".concat(Y,".maxSubItems"),e+1,{shouldValidate:!0})}},a.createElement(l.InputGroup.Text,{className:"py-0 px-3"},a.createElement(s.ReactComponent,null))),a.createElement(o.Controller,{render:function(e){var t=e.field,n=t.value,r=t.onChange,o=t.name,m=t.ref;return a.createElement(l.Form.Control,{ref:m,type:"number",step:1,name:o,value:null===n?"":n,onChange:r,isInvalid:c.isInvalid("".concat(Y,".maxSubItems"),N),disabled:f||T})},control:k,name:"".concat(Y,".maxSubItems"),rules:{min:{value:Number(M),message:P("Validation:fieldGreaterMinNumber",{attribute:P("maxItems"),min:P("minItems")})}}}),a.createElement(l.Form.Control.Feedback,{type:"invalid"},c.getErrors("".concat(Y,".maxSubItems"),N)))))),a.createElement(l.Row,null,a.createElement(l.Col,{md:6,sm:6,xs:6},a.createElement(l.Form.Group,{controlId:te},a.createElement(l.Form.Label,null,P("Design:overallQuantity")),a.createElement(l.InputGroup,{hasValidation:!0},a.createElement(l.InputGroup.Prepend,{className:"arrow-up-btn",onClick:function(){var e=Number(q("".concat(Y,".overallQuantity"))||0);_("".concat(Y,".overallQuantity"),e+1,{shouldValidate:!0})}},a.createElement(l.InputGroup.Text,{className:"py-0 px-3"},a.createElement(s.ReactComponent,null))),a.createElement(o.Controller,{control:k,name:"".concat(Y,".overallQuantity"),render:function(e){var n=e.field;return a.createElement(l.Form.Control,t.__assign({min:0,step:1,type:"number",disabled:T,isInvalid:c.isInvalid("".concat(Y,".overallQuantity"),N)},n))},rules:{min:{value:0,message:P("Validation:fieldMinNumber",{attribute:P("overallQuantity"),min:0})}}}),a.createElement(l.Form.Control.Feedback,{type:"invalid"},c.getErrors("".concat(Y,".overallQuantity"),N)))))),ie&&a.createElement(a.Fragment,null,a.createElement(l.Row,null,a.createElement(l.Col,null,a.createElement(l.Form.Group,{controlId:ee},a.createElement(l.Form.Label,null,P("Design:zone")),a.createElement(o.Controller,{control:k,name:"".concat(Y,".zoneId"),render:function(e){var n=e.field;return a.createElement(l.Form.Control,t.__assign({as:"select",disabled:T,isInvalid:c.isInvalid("".concat(Y,".zoneId"),N)},n),a.createElement("option",{value:null},P("Design:choose")),ce.map((function(e){return a.createElement("option",{key:e.id,value:e.id},e.name)})))},rules:{required:{value:le,message:P("Validation:fieldRequired",{attribute:P("zone")})}}}),a.createElement(l.Form.Control.Feedback,{type:"invalid"},c.getErrors("".concat(Y,".zoneId"),N))))))),a.createElement(l.Col,{md:12,xl:!0,className:"p-0"},a.createElement(l.Form.Group,{controlId:U,className:"custom-checkbox"},a.createElement(l.Form.Check,{custom:!0,type:"checkbox",name:U,disabled:f,id:"check-api"},a.createElement(l.Form.Check.Input,{checked:L,onChange:me,disabled:T,type:"checkbox"}),a.createElement(l.Form.Check.Label,null,P("showAdvancedOptions")))),a.createElement(l.Collapse,{in:L},a.createElement("div",null,j&&a.createElement(l.Form.Group,{controlId:$,className:"advanced-switch-container"},a.createElement(l.Form.Label,null,P("hasTicket")),a.createElement("div",null,a.createElement(o.Controller,{render:function(e){var t=e.field,n=t.name,r=t.value,l=t.onChange;return a.createElement(u.BooleanSwitch,{name:n,value:Boolean(r),onChange:l,disabled:O.type===E.CATEGORY_TYPE_TICKETS})},control:k,name:"".concat(Y,".hasTicket")}))),O.hasTicket&&a.createElement(l.Form.Group,{controlId:Z,className:"advanced-switch-container"},a.createElement(l.Form.Label,null,P("collectUserInfo")),a.createElement("div",null,a.createElement(o.Controller,{render:function(e){var t=e.field,n=t.name,r=t.value,l=t.onChange;return a.createElement(u.BooleanSwitch,{name:n,value:Boolean(r),onChange:l,disabled:f||T})},control:k,name:"".concat(Y,".collectUserInfo")}))),!O.hasTicket&&a.createElement(l.Form.Group,{controlId:J,className:"advanced-switch-container"},a.createElement(a.Fragment,null,a.createElement(l.Form.Label,null,P("isTimeRelated")),a.createElement("div",null,a.createElement(o.Controller,{render:function(e){var t=e.field,n=t.name,r=t.value,l=t.onChange;return a.createElement(u.BooleanSwitch,{name:n,value:Boolean(r),onChange:l,disabled:f||T})},control:k,name:"".concat(Y,".isTimeRelated")})))),a.createElement(l.Form.Group,{controlId:ne,className:"advanced-switch-container"},a.createElement(l.Form.Label,null,P("allowDeposits")),a.createElement("div",null,a.createElement(o.Controller,{render:function(e){var t=e.field,n=t.name,r=t.value,l=t.onChange;return a.createElement(u.BooleanSwitch,{name:n,value:Boolean(r),onChange:l,disabled:f||T})},control:k,name:"".concat(Y,".allowDeposits")}))),Q&&a.createElement(l.Form.Group,{controlId:ae,className:"deposit-days"},a.createElement(l.Form.Label,null,P("depositDays")),a.createElement(o.Controller,{render:function(e){var t=e.field,n=t.value,r=t.onChange,o=t.name,m=t.ref;return a.createElement(l.Form.Control,{ref:m,type:"number",min:0,step:1,value:n,onChange:r,isInvalid:c.isInvalid("".concat(Y,".remainderExpireAfter"),N),disabled:f||T,name:o})},control:k,name:"".concat(Y,".remainderExpireAfter")}),a.createElement(l.Form.Control.Feedback,{type:"invalid"},c.getErrors("".concat(Y,".remainderExpireAfter"),N)))))))};

package/package.json

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

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -12,6 +12,8 @@ import {
   RYFT_STATUS_PENDING_ACTION,
   AttemptPaymentResponse,
 } from "@licklist/plugins/dist/hooks/Ryft/useRyftPayment";
+import { ProviderPaymentSettings } from "@licklist/core/dist/DataMapper/Setting/ProviderPaymentSettingsDataMapper";
+
 import { BlockLoader, ButtonLoader } from "../../static";
 import { injectComponentsInRyftForm } from "./utils/ryft-form";
 
@@ -40,11 +42,13 @@ export interface RyftPaymentFormProps {
   ) => Promise<void>;
   onSubmit: () => Promise<AttemptPaymentResponse>;
   resetReferrer?: () => void;
+  providerPaymentSettings?: ProviderPaymentSettings;
 }
 
 export const RyftPaymentForm = ({
   accountId,
   isCreateLoading,
+  providerPaymentSettings,
   initRyft,
   resetReferrer,
   onSubmit,
@@ -119,7 +123,12 @@ export const RyftPaymentForm = ({
   };
 
   useEffect(
-    () => injectComponentsInRyftForm({ t }),
+    () =>
+      injectComponentsInRyftForm({
+        t,
+        additionalPaymentMethodsEnabled:
+          providerPaymentSettings?.additionalPaymentMethodsEnabled,
+      }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [formRef.current?.childNodes?.length]
   );

package/src/iframe/ryft/utils/ryft-form.ts

@@ -2,8 +2,10 @@ import { TFunction } from "react-i18next";
 
 export const injectComponentsInRyftForm = ({
   t,
+  additionalPaymentMethodsEnabled,
 }: {
   t: TFunction<string[]>;
+  additionalPaymentMethodsEnabled?: boolean;
 }) => {
   const cardContainer = document.getElementById("ryft-pay-iframe");
   const oldCardDividerContainer = document.getElementById(
@@ -26,7 +28,7 @@ export const injectComponentsInRyftForm = ({
 
   const payGrid = document.getElementById("ryft-pay-grid");
 
-  if (!payGrid) {
+  if (!payGrid || !additionalPaymentMethodsEnabled) {
     return;
   }
 

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -26,6 +26,7 @@ export interface ProductCategoryControlValues extends FormValues {
   name: string;
   minSubItems: number | null;
   maxSubItems: number | null;
+  overallQuantity?: number | null;
   quantityType: QuantityType;
   type: CategoryType;
   isTimeRelated: boolean;
@@ -102,6 +103,7 @@ export function ProductCategoryControl({
   const collectUserInfoId = useId();
   const hasTicketId = useId();
   const zoneId = useId();
+  const overallQuantityId = useId();
 
   const allowDepositsId = useId();
   const remainderExpireAfterId = useId();
@@ -127,7 +129,7 @@ export function ProductCategoryControl({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [maxSubItems, fieldNamePrefix]);
 
-  const shouldShowZoneSelect =
+  const isZoneCategory =
     category.type === CATEGORY_TYPE_FIXED_DURATION ||
     category.type === CATEGORY_TYPE_GAME;
 
@@ -327,51 +329,111 @@ export function ProductCategoryControl({
             </Form.Group>
           </Col>
         </Row>
-
-        {shouldShowZoneSelect && (
-          <Row>
-            <Col>
-              <Form.Group controlId={zoneId}>
-                <Form.Label>{t("Design:zone")}</Form.Label>
+        <Row>
+          <Col md={6} sm={6} xs={6}>
+            <Form.Group controlId={overallQuantityId}>
+              <Form.Label>{t("Design:overallQuantity")}</Form.Label>
+              <InputGroup hasValidation>
+                <InputGroup.Prepend
+                  className="arrow-up-btn"
+                  onClick={() => {
+                    const currentOverallCapacity = Number(
+                      getValues(`${fieldNamePrefix}.overallQuantity`) || 0
+                    );
+                    setValue(
+                      `${fieldNamePrefix}.overallQuantity`,
+                      currentOverallCapacity + 1,
+                      { shouldValidate: true }
+                    );
+                  }}
+                >
+                  <InputGroup.Text className="py-0 px-3">
+                    <IncrementIcon />
+                  </InputGroup.Text>
+                </InputGroup.Prepend>
                 <Controller
                   control={control}
-                  name={`${fieldNamePrefix}.zoneId`}
+                  name={`${fieldNamePrefix}.overallQuantity`}
                   render={({ field }) => (
                     <Form.Control
-                      as="select"
+                      min={0}
+                      step={1}
+                      type="number"
                       disabled={isOverride}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
-                        `${fieldNamePrefix}.zoneId`,
+                        `${fieldNamePrefix}.overallQuantity`,
                         errors
                       )}
                       {...field}
-                    >
-                      <option value={null}>{t("Design:choose")}</option>
-                      {zones.map((zone) => (
-                        <option key={zone.id} value={zone.id}>
-                          {zone.name}
-                        </option>
-                      ))}
-                    </Form.Control>
+                    />
                   )}
                   rules={{
-                    required: {
-                      value: providerHasBookingManagement,
-                      message: t("Validation:fieldRequired", {
-                        attribute: t("zone"),
-                      }),
+                    min: {
+                      value: 0,
+                      message: t("Validation:fieldMinNumber", {
+                        attribute: t("overallQuantity"),
+                        min: 0,
+                      }) as string,
                     },
                   }}
                 />
                 <Form.Control.Feedback type="invalid">
                   {HookFormService.getErrors<ProductSetFormValues>(
-                    `${fieldNamePrefix}.zoneId`,
+                    `${fieldNamePrefix}.overallQuantity`,
                     errors
                   )}
                 </Form.Control.Feedback>
-              </Form.Group>
-            </Col>
-          </Row>
+              </InputGroup>
+            </Form.Group>
+          </Col>
+        </Row>
+
+        {isZoneCategory && (
+          <>
+            <Row>
+              <Col>
+                <Form.Group controlId={zoneId}>
+                  <Form.Label>{t("Design:zone")}</Form.Label>
+                  <Controller
+                    control={control}
+                    name={`${fieldNamePrefix}.zoneId`}
+                    render={({ field }) => (
+                      <Form.Control
+                        as="select"
+                        disabled={isOverride}
+                        isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
+                          `${fieldNamePrefix}.zoneId`,
+                          errors
+                        )}
+                        {...field}
+                      >
+                        <option value={null}>{t("Design:choose")}</option>
+                        {zones.map((zone) => (
+                          <option key={zone.id} value={zone.id}>
+                            {zone.name}
+                          </option>
+                        ))}
+                      </Form.Control>
+                    )}
+                    rules={{
+                      required: {
+                        value: providerHasBookingManagement,
+                        message: t("Validation:fieldRequired", {
+                          attribute: t("zone"),
+                        }),
+                      },
+                    }}
+                  />
+                  <Form.Control.Feedback type="invalid">
+                    {HookFormService.getErrors<ProductSetFormValues>(
+                      `${fieldNamePrefix}.zoneId`,
+                      errors
+                    )}
+                  </Form.Control.Feedback>
+                </Form.Group>
+              </Col>
+            </Row>
+          </>
         )}
       </Col>