@licklist/design 0.59.0-dev.9 → 0.60.0

package/dist/typeahead/Typeahead.d.ts

@@ -12,8 +12,7 @@ export interface TypeaheadProps {
     isMultipleChoise?: boolean;
     noOptionsMessage: string;
     isInvalid?: boolean;
-    isCouponForm?: boolean;
 }
-declare function Typeahead({ options, placeholder, isRequired, isMultipleChoise, name, isCouponForm, noOptionsMessage, isInvalid, }: TypeaheadProps): JSX.Element;
+declare function Typeahead({ options, placeholder, isRequired, isMultipleChoise, name, noOptionsMessage, isInvalid, }: TypeaheadProps): JSX.Element;
 export { Typeahead };
 //# sourceMappingURL=Typeahead.d.ts.map

package/dist/typeahead/Typeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/typeahead/Typeahead.tsx"],"names":[],"mappings":";AAIA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,iBAAS,SAAS,CAAC,EACjB,OAAO,EACP,WAAW,EACX,UAAkB,EAClB,gBAAgB,EAChB,IAAS,EACT,YAAoB,EACpB,gBAAqB,EACrB,SAAS,GACV,EAAE,cAAc,eA4ChB;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/typeahead/Typeahead.tsx"],"names":[],"mappings":";AAIA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,iBAAS,SAAS,CAAC,EACjB,OAAO,EACP,WAAW,EACX,UAAkB,EAClB,gBAAgB,EAChB,IAAS,EACT,gBAAqB,EACrB,SAAS,GACV,EAAE,cAAc,eAiChB;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/typeahead/Typeahead.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("tslib"),n=e(require("react")),o=require("react-hook-form"),t=e(require("react-select"));exports.Typeahead=function(e){var i=e.options,s=e.placeholder,a=e.isRequired,l=void 0!==a&&a,u=e.isMultipleChoise,c=e.name,d=void 0===c?"":c,p=e.isCouponForm,m=void 0!==p&&p,f=e.noOptionsMessage,v=void 0===f?"":f,g=e.isInvalid,_=o.useFormContext().control;return n.createElement(n.Fragment,null,n.createElement(o.Controller,{name:d,control:_,rules:{required:l},render:function(e){var o=e.field;return n.createElement(t,{placeholder:s,value:o.value,isMulti:u,styles:{control:function(e){return r.__assign(r.__assign({},e),(n=m?{borderRadius:"1rem",minHeight:"3rem"}:{},g?r.__assign({borderColor:"red"},n):r.__assign({},n)));var n}},onChange:function(e){o.onChange(e)},options:i,noOptionsMessage:function(){return n.createElement("span",null,v)}})}}))};
+"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("tslib"),n=e(require("react")),t=require("react-hook-form"),o=e(require("react-select"));exports.Typeahead=function(e){var i=e.options,l=e.placeholder,a=e.isRequired,u=void 0!==a&&a,s=e.isMultipleChoise,c=e.name,d=void 0===c?"":c,p=e.noOptionsMessage,f=void 0===p?"":p,v=e.isInvalid,m=t.useFormContext().control;return n.createElement(n.Fragment,null,n.createElement(t.Controller,{name:d,control:m,rules:{required:u},render:function(e){var t=e.field;return n.createElement(o,{placeholder:l,value:t.value,isMulti:s,styles:{control:function(e){return r.__assign(r.__assign({},e),v?{borderColor:"red"}:{})}},onChange:function(e){t.onChange(e)},options:i,noOptionsMessage:function(){return n.createElement("span",null,f)}})}}))};

package/dist/zone/form/ZoneForm.d.ts

@@ -7,10 +7,10 @@ export type ZoneFormProps = {
     onSubmit: (values: Partial<Zone>) => void;
     serverErrors?: ServerError;
     isLoading?: boolean;
-    workHours: WorkHour[] | undefined;
+    workHours?: WorkHour[];
 };
 export type ZoneFormValues = Partial<Zone> & {
     localImageBlobURL?: string;
 };
-export declare const ZoneForm: ({ defaultValues, onSubmit, serverErrors, isLoading, workHours, }: ZoneFormProps) => JSX.Element;
+export declare const ZoneForm: ({ defaultValues, onSubmit, serverErrors, isLoading, }: ZoneFormProps) => JSX.Element;
 //# sourceMappingURL=ZoneForm.d.ts.map

package/dist/zone/form/ZoneForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoneForm.d.ts","sourceRoot":"","sources":["../../../src/zone/form/ZoneForm.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,wDAAwD,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5E,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAGtF,MAAM,MAAM,aAAa,GAAG;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG;IAC3C,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,QAAQ,qEAMlB,aAAa,gBAiDf,CAAC"}
+{"version":3,"file":"ZoneForm.d.ts","sourceRoot":"","sources":["../../../src/zone/form/ZoneForm.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,wDAAwD,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5E,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAGtF,MAAM,MAAM,aAAa,GAAG;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG;IAC3C,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,QAAQ,0DAKlB,aAAa,gBAiDf,CAAC"}

package/dist/zone/form/ZoneForm.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("tslib"),t=require("react"),o=e(t),n=require("react-i18next"),s=require("react-bootstrap"),a=require("react-hook-form"),l=e(require("@licklist/plugins/dist/services/Form/FormErrorService")),u=require("./components/ZoneControl.js");exports.ZoneForm=function(e){var i=e.defaultValues,c=e.onSubmit,m=e.serverErrors,d=e.isLoading,f=void 0!==d&&d,b=e.workHours,p=n.useTranslation("Design").t,v=a.useForm({mode:"onChange",defaultValues:{zoneRecurrences:[]}}),E=v.reset,g=v.setError,q=v.handleSubmit,w=(0,v.watch)();return t.useEffect((function(){i&&E(i)}),[i,E]),t.useEffect((function(){m&&l.handleServerErrors(m,g)}),[m,g]),o.createElement(a.FormProvider,r.__assign({},v),o.createElement(s.Form,{onSubmit:q((function(e){e.localImageBlobURL;var t=r.__rest(e,["localImageBlobURL"]);c(t)}))},o.createElement(u.ZoneControl,{isLoading:f,workHours:b}),o.createElement(s.Row,null,o.createElement(s.Col,{md:6,sm:12}),o.createElement(s.Col,{className:"product-set-save-btn-wrapper p-0 pl-4 d-flex mw-100",md:6,sm:12},o.createElement(s.Button,{className:"product-set-save-btn mt-5 ml-5 d-no dne d-md-block",type:"submit",disabled:f||!w.name},p("saveAndClose"))))))};
+"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("tslib"),t=require("react"),o=e(t),n=require("react-i18next"),s=require("react-bootstrap"),a=require("react-hook-form"),l=e(require("@licklist/plugins/dist/services/Form/FormErrorService")),i=require("./components/ZoneControl.js");exports.ZoneForm=function(e){var u=e.defaultValues,c=e.onSubmit,m=e.serverErrors,d=e.isLoading,f=void 0!==d&&d,b=n.useTranslation("Design").t,p=a.useForm({mode:"onChange",defaultValues:{zoneRecurrences:[]}}),v=p.reset,E=p.setError,g=p.handleSubmit,q=(0,p.watch)();return t.useEffect((function(){u&&v(u)}),[u,v]),t.useEffect((function(){m&&l.handleServerErrors(m,E)}),[m,E]),o.createElement(a.FormProvider,r.__assign({},p),o.createElement(s.Form,{onSubmit:g((function(e){e.localImageBlobURL;var t=r.__rest(e,["localImageBlobURL"]);c(t)}))},o.createElement(i.ZoneControl,{isLoading:f}),o.createElement(s.Row,null,o.createElement(s.Col,{md:6,sm:12}),o.createElement(s.Col,{className:"product-set-save-btn-wrapper p-0 pl-4 d-flex mw-100",md:6,sm:12},o.createElement(s.Button,{className:"product-set-save-btn mt-5 ml-5 d-no dne d-md-block",type:"submit",disabled:f||!q.name},b("saveAndClose"))))))};

package/dist/zone/form/components/ZoneControl.d.ts

@@ -2,7 +2,7 @@
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 export type ZoneControlProps = {
     isLoading: boolean;
-    workHours: WorkHour[] | undefined;
+    workHours?: WorkHour[];
 };
-export declare const ZoneControl: ({ isLoading, workHours }: ZoneControlProps) => JSX.Element;
+export declare const ZoneControl: ({ isLoading }: ZoneControlProps) => JSX.Element;
 //# sourceMappingURL=ZoneControl.d.ts.map

package/dist/zone/form/components/ZoneControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoneControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/ZoneControl.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAStF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,WAAW,6BAA8B,gBAAgB,gBA0BrE,CAAC"}
+{"version":3,"file":"ZoneControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/ZoneControl.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAStF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,gBA0B1D,CAAC"}

package/dist/zone/form/components/ZoneControl.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("react"),o=(e=r)&&"object"==typeof e&&"default"in e?e.default:e,t=require("react-bootstrap"),n=require("./NameControl.js"),l=require("./ZoneTypeControl.js"),a=require("./SortControl.js"),i=require("./ZoneRecurrencesControl.js"),s=require("./DescriptionControl.js"),m=require("./ZoneImageControl.js"),c=require("./GameDurationControl.js");exports.ZoneControl=function(e){var r=e.isLoading,u=e.workHours;return o.createElement(t.Row,null,o.createElement(t.Col,{md:6,sm:12,className:"pr-5"},o.createElement(n.NameControl,{isLoading:r}),o.createElement(i.ZoneRecurrencesControl,{workHours:u}),o.createElement("hr",null),o.createElement(t.Row,null,o.createElement(t.Col,{md:6,sm:6},o.createElement(l.ZoneTypeControl,{isLoading:r}),o.createElement(a.SortControl,{isLoading:r}),o.createElement(c.GameDurationControl,{isLoading:r})),o.createElement(t.Col,{md:6,sm:6},o.createElement(m.ZoneImageControl,{isLoading:r}))),o.createElement("hr",null),o.createElement(t.Row,null,o.createElement(t.Col,{md:12,sm:12},o.createElement(s.DescriptionControl,{isLoading:r})))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("react"),t=(e=r)&&"object"==typeof e&&"default"in e?e.default:e,o=require("react-bootstrap"),n=require("./NameControl.js"),l=require("./ZoneTypeControl.js"),a=require("./SortControl.js"),i=require("./ZoneRecurrencesControl.js"),m=require("./DescriptionControl.js"),s=require("./ZoneImageControl.js"),c=require("./GameDurationControl.js");exports.ZoneControl=function(e){var r=e.isLoading;return t.createElement(o.Row,null,t.createElement(o.Col,{md:6,sm:12,className:"pr-5"},t.createElement(n.NameControl,{isLoading:r}),t.createElement(i.ZoneRecurrencesControl,null),t.createElement("hr",null),t.createElement(o.Row,null,t.createElement(o.Col,{md:6,sm:6},t.createElement(l.ZoneTypeControl,{isLoading:r}),t.createElement(a.SortControl,{isLoading:r}),t.createElement(c.GameDurationControl,{isLoading:r})),t.createElement(o.Col,{md:6,sm:6},t.createElement(s.ZoneImageControl,{isLoading:r}))),t.createElement("hr",null),t.createElement(o.Row,null,t.createElement(o.Col,{md:12,sm:12},t.createElement(m.DescriptionControl,{isLoading:r})))))};

package/dist/zone/form/components/ZoneRecurrencesControl.d.ts

@@ -4,9 +4,9 @@ import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMa
 export interface DateAndRecurrenceInputValues {
     zoneRecurrences?: Partial<ZoneRecurrence>[];
 }
-type ZoneRecurrenceControlProps = {
-    workHours: WorkHour[] | undefined;
+export type ZoneRecurrenceControlProps = {
+    workHours?: WorkHour[];
+    isLoading?: boolean;
 };
-export declare const ZoneRecurrencesControl: ({ workHours, }: ZoneRecurrenceControlProps) => JSX.Element;
-export {};
+export declare const ZoneRecurrencesControl: () => JSX.Element;
 //# sourceMappingURL=ZoneRecurrencesControl.d.ts.map

package/dist/zone/form/components/ZoneRecurrencesControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoneRecurrencesControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/ZoneRecurrencesControl.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAC;AAMlG,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAWtF,MAAM,WAAW,4BAA4B;IAC3C,eAAe,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC;CAC7C;AAED,KAAK,0BAA0B,GAAG;IAChC,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,sBAAsB,mBAEhC,0BAA0B,gBAuM5B,CAAC"}
+{"version":3,"file":"ZoneRecurrencesControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/ZoneRecurrencesControl.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAC;AAMlG,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAWtF,MAAM,WAAW,4BAA4B;IAC3C,eAAe,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC;CAC7C;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,sBAAsB,mBAsMlC,CAAC"}

package/dist/zone/form/components/ZoneRecurrencesControl.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("tslib"),t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,i=require("react-i18next"),o=require("react-bootstrap"),a=require("../../../static/Icon.js"),u=require("react-hook-form"),l=require("@react-aria/utils"),c=require("react-use");require("../../../static/index.js");var d=require("@dnd-kit/core"),s=require("@dnd-kit/sortable"),m=require("../../../modals/confirmation/ConfirmModal.js"),v=require("../../../recurring-date-picker-input/RecurringDatePickerInput.js"),f=require("../../../product-set/control/DateAndRecurrenceInput.js"),p=require("./ZoneRecurrenceControl.js");exports.ZoneRecurrencesControl=function(e){var g,_,E=e.workHours,q=u.useFormContext(),x=q.control,C=q.register,D=q.formState.errors,R=q.getValues,b=q.setValue,k=q.clearErrors,y=u.useFieldArray({name:"zoneRecurrences",control:x,keyName:"_id"}),I=y.fields,S=y.append,z=y.update,N=y.move,h=r.__read(t.useState(!1),2),j=h[0],w=h[1],T=r.__read(t.useState({index:null,values:null}),2),A=T[0],F=T[1],M=function(){return F({index:null,values:null})},P=t.useRef();c.useClickAway(P,(function(e){var r,t,n;m.CONFIRM_MODAL_ACTIONS.includes(null===(n=null===(t=null===(r=e.target)||void 0===r?void 0:r.attributes)||void 0===t?void 0:t.getNamedItem("data-id"))||void 0===n?void 0:n.value)||(w(!1),M())}));var O=l.useId(),V=i.useTranslation(["Design","Validation"]).t,L=function(){M(),w((function(e){return!e}))};return t.useEffect((function(){I.length&&k("zoneRecurrences")}),[I,k]),n.createElement(o.Form.Group,null,n.createElement(o.Form.Label,null,V("zoneAvailable")),n.createElement(o.OverlayTrigger,{show:j,overlay:n.createElement(o.Popover,{id:O,className:"rounded"},n.createElement(o.Popover.Content,{className:"shadow-lg rounded",ref:P},n.createElement(v.RecurringDatePickerInput,{defaultValues:A.values,onChange:function(e){return r.__awaiter(void 0,void 0,void 0,(function(){var t,n,i;return r.__generator(this,(function(r){return t={rrule:e.rrule,startDate:e.startDate,endDate:e.endDate,startTime:e.startTime,endTime:e.endTime},(null===(n=A.values)||void 0===n?void 0:n.id)&&(t.id=null===(i=A.values)||void 0===i?void 0:i.id),null!==A.index?z(A.index,t):S(t),w((function(){return!1})),M(),[2]}))}))},onDelete:function(){var e=A.index;w(!1),M(),setTimeout((function(){var r=R().zoneRecurrences;b("zoneRecurrences",(void 0===r?[]:r).filter((function(r,t){return t!==e})))}),100)},setInitialStartDateAfterSelect:!0,workHours:E}))),trigger:"click",placement:"bottom",popperConfig:{modifiers:[f.sameWidthPopperModifier]}},n.createElement("div",{className:"zone-recurrences"},n.createElement(d.DndContext,{onDragEnd:function(e){var r=e.over,t=e.active;if(r.id!==t.id){var n=I.findIndex((function(e){return String(e._id)===t.id})),i=I.findIndex((function(e){return String(e._id)===r.id}));N(n,i)}}},n.createElement(s.SortableContext,{items:null!==(g=null==I?void 0:I.map((function(e){return String(e._id)})))&&void 0!==g?g:[],strategy:s.verticalListSortingStrategy},null==I?void 0:I.map((function(e,r){return n.createElement(p.ZoneRecurrenceControl,{key:e._id,zoneRecurrence:e,onEdit:function(){return function(e,r){M(),F({index:r,values:e}),w((function(){return!0}))}(e,r)}})})))),n.createElement("div",{className:"zone-recurrence-icon-wrapper",role:"button",tabIndex:0,onClick:L,onKeyDown:L},n.createElement(a.default,{type:"plus-circle",height:"1rem",className:"zone-recurrence-icon-add mr-2"}),V("addDates")),n.createElement(o.Form.Control,r.__assign({type:"hidden"},C("zoneRecurrences",{required:{value:!0,message:V("Validation:fieldMinNumber",{attribute:V("dates"),min:1})}}))),n.createElement("div",{className:"manual-form-error"},null===(_=D.zoneRecurrences)||void 0===_?void 0:_.message))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("tslib"),t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,i=require("react-i18next"),o=require("react-bootstrap"),a=require("../../../static/Icon.js"),u=require("react-hook-form"),l=require("@react-aria/utils"),c=require("react-use");require("../../../static/index.js");var d=require("@dnd-kit/core"),s=require("@dnd-kit/sortable"),m=require("../../../modals/confirmation/ConfirmModal.js"),v=require("../../../recurring-date-picker-input/RecurringDatePickerInput.js"),f=require("../../../product-set/control/DateAndRecurrenceInput.js"),p=require("./ZoneRecurrenceControl.js");exports.ZoneRecurrencesControl=function(){var e,g,_=u.useFormContext(),E=_.control,q=_.register,x=_.formState.errors,C=_.getValues,D=_.setValue,R=_.clearErrors,b=u.useFieldArray({name:"zoneRecurrences",control:E,keyName:"_id"}),y=b.fields,I=b.append,S=b.update,k=b.move,z=r.__read(t.useState(!1),2),N=z[0],h=z[1],j=r.__read(t.useState({index:null,values:null}),2),T=j[0],A=j[1],w=function(){return A({index:null,values:null})},F=t.useRef();c.useClickAway(F,(function(e){var r,t,n;m.CONFIRM_MODAL_ACTIONS.includes(null===(n=null===(t=null===(r=e.target)||void 0===r?void 0:r.attributes)||void 0===t?void 0:t.getNamedItem("data-id"))||void 0===n?void 0:n.value)||(h(!1),w())}));var M=l.useId(),P=i.useTranslation(["Design","Validation"]).t,O=function(){w(),h((function(e){return!e}))};return t.useEffect((function(){y.length&&R("zoneRecurrences")}),[y,R]),n.createElement(o.Form.Group,null,n.createElement(o.Form.Label,null,P("zoneAvailable")),n.createElement(o.OverlayTrigger,{show:N,overlay:n.createElement(o.Popover,{id:M,className:"rounded"},n.createElement(o.Popover.Content,{className:"shadow-lg rounded",ref:F},n.createElement(v.RecurringDatePickerInput,{defaultValues:T.values,onChange:function(e){return r.__awaiter(void 0,void 0,void 0,(function(){var t,n,i;return r.__generator(this,(function(r){return t={rrule:e.rrule,startDate:e.startDate,endDate:e.endDate,startTime:e.startTime,endTime:e.endTime},(null===(n=T.values)||void 0===n?void 0:n.id)&&(t.id=null===(i=T.values)||void 0===i?void 0:i.id),null!==T.index?S(T.index,t):I(t),h((function(){return!1})),w(),[2]}))}))},onDelete:function(){var e=T.index;h(!1),w(),setTimeout((function(){var r=C().zoneRecurrences;D("zoneRecurrences",(void 0===r?[]:r).filter((function(r,t){return t!==e})))}),100)},setInitialStartDateAfterSelect:!0}))),trigger:"click",placement:"bottom",popperConfig:{modifiers:[f.sameWidthPopperModifier]}},n.createElement("div",{className:"zone-recurrences"},n.createElement(d.DndContext,{onDragEnd:function(e){var r=e.over,t=e.active;if(r.id!==t.id){var n=y.findIndex((function(e){return String(e._id)===t.id})),i=y.findIndex((function(e){return String(e._id)===r.id}));k(n,i)}}},n.createElement(s.SortableContext,{items:null!==(e=null==y?void 0:y.map((function(e){return String(e._id)})))&&void 0!==e?e:[],strategy:s.verticalListSortingStrategy},null==y?void 0:y.map((function(e,r){return n.createElement(p.ZoneRecurrenceControl,{key:e._id,zoneRecurrence:e,onEdit:function(){return function(e,r){w(),A({index:r,values:e}),h((function(){return!0}))}(e,r)}})})))),n.createElement("div",{className:"zone-recurrence-icon-wrapper",role:"button",tabIndex:0,onClick:O,onKeyDown:O},n.createElement(a.default,{type:"plus-circle",height:"1rem",className:"zone-recurrence-icon-add mr-2"}),P("addDates")),n.createElement(o.Form.Control,r.__assign({type:"hidden"},q("zoneRecurrences",{required:{value:!0,message:P("Validation:fieldMinNumber",{attribute:P("dates"),min:1})}}))),n.createElement("div",{className:"manual-form-error"},null===(g=x.zoneRecurrences)||void 0===g?void 0:g.message))))};

package/dist/zone/form/utils/dates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dates.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/utils/dates.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAOtF,eAAO,MAAM,qBAAqB,cACrB,MAAM,WACR,MAAM,6BAuChB,CAAC;AAEF,eAAO,MAAM,wBAAwB,eAAgB,QAAQ,EAAE,aAyC9D,CAAC"}
+{"version":3,"file":"dates.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/utils/dates.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAOtF,eAAO,MAAM,qBAAqB,cACrB,MAAM,WACR,MAAM,6BAuChB,CAAC;AAEF,eAAO,MAAM,wBAAwB,eAAgB,QAAQ,EAAE,aA0C9D,CAAC"}

package/jest.config.js

@@ -0,0 +1,29 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
+module.exports = {
+  modulePathIgnorePatterns: ["/dist/"],
+  roots: ["<rootDir>/src", "<rootDir>/tests"],
+  globals: {
+    "ts-jest": {
+      isolatedModules: true,
+      babelConfig: {
+        presets: ["@babel/preset-env", "@babel/preset-react"],
+      },
+    },
+  },
+  transform: {
+    "^.+\\.(t|j)sx?$": "ts-jest",
+  },
+  transformIgnorePatterns: [
+    "node_modules/(?!(redux-persist)/)",
+    "node_modules/(?!(@licklist)/)",
+  ],
+  testRegex: ["(\\/tests\\/.*.(test|spec))\\.tsx?$"],
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+  setupFilesAfterEnv: ["<rootDir>/tests/setupTests.ts"],
+  moduleNameMapper: {
+    "^.+\\.(css|scss|sass|less)$": "<rootDir>/tests/__mock__/styleMock.js",
+    ".+\\.(svg|png|jpg)$": "identity-obj-proxy",
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.59.0-dev.9",
+  "version": "0.60.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -16,11 +16,14 @@
     "type-check:watch": "yarn type-check -- --watch",
     "build": "rollup -c",
     "watch": "yarn build -- -w",
+    "test": "jest --verbose --coverage --watchAll=false",
+    "run-test": "jest --verbose --watchAll=false",
     "lint": "eslint --ext .ts,.tsx .",
     "lint:fix": "yarn run lint -- --fix",
     "lint:format": "prettier \"**/*.{md,json,yml,scss}\" --check",
     "lint:format:fix": "prettier \"**/*.{md,json,yml,scss}\" --write",
     "prepare": "husky install",
+    "test-staged": "CI=true jest --passWithNoTests --findRelatedTests",
     "tests": "yarn tests-staged",
     "prettier-write": "prettier --write",
     "tsc": "bash -c tsc -p tsconfig.json -b"
@@ -50,9 +53,9 @@
     "@fortawesome/free-brands-svg-icons": "5.15.2",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.9",
-    "@licklist/core": ">=0.23.3-dev.0 < 0.23.3",
-    "@licklist/eslint-config": "0.4.5",
-    "@licklist/plugins": ">=0.27.2-dev.2 < 0.27.2",
+    "@licklist/core": "^0.23.1",
+    "@licklist/eslint-config": "0.3.4",
+    "@licklist/plugins": "^0.27.2",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
     "@react-aria/utils": "3.9.0",
@@ -70,6 +73,10 @@
     "@svgr/rollup": "5.5.0",
     "@svgr/webpack": "5.5.0",
     "@tanstack/react-table": "8.10.6",
+    "@testing-library/jest-dom": "5.16.1",
+    "@testing-library/react": "11.2.5",
+    "@testing-library/react-hooks": "5.1.0",
+    "@testing-library/user-event": "13.5.0",
     "@tiptap/core": "2.0.0-beta.176",
     "@tiptap/extension-blockquote": "2.0.0-beta.29",
     "@tiptap/extension-bold": "2.0.0-beta.28",
@@ -92,10 +99,14 @@
     "@tiptap/react": "2.0.0-beta.109",
     "@tiptap/suggestion": "2.0.0-beta.92",
     "@types/babel__core": "7.1.12",
+    "@types/enzyme-adapter-react-16": "1.0.6",
+    "@types/jest": "26.0.20",
     "@types/luxon": "1.26.2",
     "@types/mdx-js__react": "1.5.3",
+    "@types/react": "17.0.2",
     "@types/react-bootstrap": "1.0.1",
     "@types/react-date-range": "^1.4.4",
+    "@types/react-dom": "17.0.1",
     "@types/react-email-editor": "1.1.7",
     "@types/react-loader": "2.4.4",
     "@types/react-phone-number-input": "3.0.6",
@@ -105,6 +116,7 @@
     "@typescript-eslint/eslint-plugin": "5.8.1",
     "@typescript-eslint/parser": "5.8.1",
     "@wojtekmaj/react-daterange-picker": "^4.1.0",
+    "babel-jest": "26.6.3",
     "babel-loader": "8.2.2",
     "babel-plugin-inline-react-svg": "2.0.1",
     "bootstrap": "4.6.0",
@@ -116,16 +128,21 @@
     "emojibase": "6.1.0",
     "emojibase-data": "7.0.1",
     "emojibase-regex": "6.0.1",
+    "enzyme": "3.11.0",
+    "enzyme-adapter-react-16": "1.15.6",
     "eslint": "7.32.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-jest": "25.3.2",
     "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-testing-library": "5.0.1",
     "framer-motion": "4.1.17",
     "history": "5.3.0",
     "husky": "7.0.4",
     "i18next": "19.4.5",
+    "jest": "26.6.0",
     "klona": "2.0.4",
     "konva": "6.0.0",
     "lint-staged": "11.1.2",
@@ -133,18 +150,18 @@
     "luxon": "1.26.0",
     "moment": "2.29.1",
     "prettier": "2.5.1",
-    "react": "17.0.2",
+    "react": "16.14.0",
     "react-bootstrap": "1.6.1",
     "react-color": "2.19.3",
     "react-copy-to-clipboard": "5.0.3",
     "react-date-range": "^1.4.0",
-    "react-dom": "17.0.2",
+    "react-dom": "16.14.0",
     "react-email-editor": "1.6.1",
     "react-highlighter": "0.4.3",
     "react-hook-form": "7.13.0",
     "react-i18next": "11.8.8",
     "react-intl": "5.15.8",
-    "react-konva": "^17.0.2-6",
+    "react-konva": "16.13.0-6",
     "react-loader": "2.4.7",
     "react-loading-skeleton": "^3.3.1",
     "react-overlays": "4.1.1",
@@ -169,6 +186,7 @@
     "sass": "1.32.8",
     "sass-loader": "10.1.1",
     "style-loader": "2.0.0",
+    "ts-jest": "26.5.2",
     "twemoji-parser": "14.0.0",
     "typescript": "4.9.5",
     "url-loader": "4.1.1",
@@ -176,17 +194,24 @@
   },
   "resolutions": {
     "@types/react": "17.0.2",
-    "@types/react-dom": "17.0.2"
+    "@types/react-dom": "17.0.1"
+  },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "./jest.config.js"
+    ],
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
   },
   "lint-staged": {
     "*.{ts,tsx}": [
+      "yarn test-staged",
       "yarn prettier-write",
       "yarn lint:fix"
     ]
   },
   "devDependencies": {
-    "@types/react": "17.0.2",
-    "@types/react-dom": "17.0.2",
     "identity-obj-proxy": "^3.0.0"
   },
   "volta": {

package/src/events/edit-event-modal/component/EditEventForm/EditEventForm.tsx

@@ -19,7 +19,6 @@ import { scrollToError } from "@licklist/plugins/dist/utils/ScrollUtils";
 import { getFirstErrorKey } from "@licklist/plugins/dist/utils/FormValues";
 
 import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
-import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { CategoryGroup } from "../../../../types/categories";
 import { SaleDeadline } from "../SaleDeadline/SaleDeadline";
 import {
@@ -65,7 +64,6 @@ export interface EditEventFormProps extends HasPermissionProp {
   createProductSet: (props: EditEventFormValues) => void;
   setEditProductSetId: (value: string) => void;
   isExternalPaymentLinkEnabled?: boolean;
-  workHours: WorkHour[] | undefined;
 }
 
 const eventImageTypes = {
@@ -85,7 +83,6 @@ export const EditEventForm = ({
   createProductSet,
   setEditProductSetId,
   isExternalPaymentLinkEnabled,
-  workHours,
 }: EditEventFormProps) => {
   const { t } = useTranslation(["Design", "Validation"]);
 
@@ -406,7 +403,6 @@ export const EditEventForm = ({
             setEditProductSetId={setEditProductSetId}
             setShowEditProductSet={setShowEditProductSet}
             showEditProductSet={showEditProductSet}
-            workHours={workHours}
           />
 
           {hasPermission && !showEditProductSet && (

package/src/events/edit-event-modal/component/SelectEventProductSet/SelectEventProductSet.tsx

@@ -5,7 +5,6 @@ import { useId } from "@react-aria/utils";
 import { Controller, useFormContext } from "react-hook-form";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
-import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { ConfirmModal } from "../../../../modals/confirmation/ConfirmModal";
 import { EditEventFormValues } from "../EditEventForm/EditEventForm";
 import { EditEventProductSet } from "./component/EditEventProductSet";
@@ -16,7 +15,6 @@ interface SelectEventProductSetProps extends HasPermissionProp {
   setShowEditProductSet: (value: boolean) => void;
   createProductSet: (props: EditEventFormValues) => void;
   setEditProductSetId: (value: string) => void;
-  workHours: WorkHour[] | undefined;
 }
 
 export const SelectEventProductSet = ({
@@ -25,7 +23,6 @@ export const SelectEventProductSet = ({
   setEditProductSetId,
   showEditProductSet,
   setShowEditProductSet,
-  workHours,
 }: SelectEventProductSetProps) => {
   const { t } = useTranslation(["Design"]);
   const form = useFormContext<EditEventFormValues>();
@@ -202,13 +199,14 @@ export const SelectEventProductSet = ({
         </Form.Group>
       </div>
       {showEditProductSet && productSetId && (
-        <EditEventProductSet
-          onSubmit={onSubmit}
-          defaultValues={
-            productSetId === editedProductSet?.id && editedProductSet
-          }
-          workHours={workHours}
-        />
+        <>
+          <EditEventProductSet
+            onSubmit={onSubmit}
+            defaultValues={
+              productSetId === editedProductSet?.id && editedProductSet
+            }
+          />
+        </>
       )}
     </>
   );

package/src/events/edit-event-modal/component/SelectEventProductSet/component/EditEventProductSet.tsx

@@ -5,7 +5,6 @@ import { isEqual } from "lodash";
 import { useParams } from "react-router-dom";
 import { useEventEditProductSetContext } from "@licklist/plugins/dist/context/event/EventEditProductSetContext";
 import { useTranslation } from "react-i18next";
-import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { BlockLoader } from "../../../../../static/loader/BlockLoader";
 import { ProductSetControl } from "../../../../../product-set";
 import { ProductSetContextProvider } from "../../../../../product-set/form/context";
@@ -23,13 +22,11 @@ export interface EventDates {
 interface EditEventProductSetProps {
   onSubmit: (value: EditEventFormValues["editedProductSet"]) => void;
   defaultValues?: EditEventFormValues["editedProductSet"];
-  workHours: WorkHour[] | undefined;
 }
 
 export const EditEventProductSet = ({
   onSubmit,
   defaultValues,
-  workHours,
 }: EditEventProductSetProps) => {
   const { companyId } = useParams<{
     companyId: string;
@@ -127,7 +124,6 @@ export const EditEventProductSet = ({
             companyName={selectedCompany?.title}
             fee={feeInPercent}
             isEventEditProductSet
-            workHours={workHours}
           />
           <Button
             disabled={isLoading}

package/src/iframe/activity-card/ActivityCard.tsx

@@ -13,14 +13,12 @@ export type ActivityCardProps = {
   onSelect: () => void;
   isSelected: boolean;
   layout?: Layout;
-  availableTimes?: string | null;
 };
 
 export const ActivityCard = ({
   title,
   duration,
   price,
-  availableTimes,
   // image,
   onSelect,
   isSelected,
@@ -35,6 +33,7 @@ export const ActivityCard = ({
       >
         <div className={clsx("d-flex", "flex-column")}>
           <div className="activity-card-title">{title}</div>
+
           {duration && <div>{duration}</div>}
 
           {price && <div>{price}</div>}
@@ -51,8 +50,7 @@ export const ActivityCard = ({
         })}
       >
         <div className="description">
-          <div className="title mb-2">{title}</div>
-          {availableTimes && <div>{availableTimes}</div>}
+          <div className="title">{title}</div>
           {duration && (
             <div>
               <p>{duration}</p>

package/src/iframe/event/event-card/IframeEventCard.stories.tsx

@@ -16,7 +16,6 @@ export function Default() {
   return (
     <div>
       <IframeEventCard
-        showMoreInfo
         imageSrc={
           showImage
             ? // eslint-disable-next-line max-len

package/src/iframe/event/event-card/IframeEventCard.tsx

@@ -29,7 +29,6 @@ interface IframeEventCardProps {
   titleId?: string;
   descriptionId?: string;
   imageClassName?: string;
-  showMoreInfo?: boolean;
 }
 
 export function IframeEventCard({
@@ -47,7 +46,6 @@ export function IframeEventCard({
   titleId,
   descriptionId,
   imageClassName,
-  showMoreInfo,
 }: IframeEventCardProps) {
   const { formatNumber } = useIntl();
   const { t } = useTranslation("Design");
@@ -72,7 +70,6 @@ export function IframeEventCard({
       )}
       onClick={goToDetails ? onClick : undefined}
     >
-      {showMoreInfo && <div className="iframe-event-card__info-icon">i</div>}
       {imageSrc && (
         <Card.Img
           className={imageClassName ?? "card-image"}
@@ -94,8 +91,12 @@ export function IframeEventCard({
               <div className="icon-wrapper">
                 <CalendarSvg />
               </div>
-              <p className="m-0 list-view-hided">{date}</p>
-              <p className="m-0 grid-view-hided">{shortDate}</p>
+              <p className="iframe-event-card__bold m-0 list-view-hided">
+                {date}
+              </p>
+              <p className="iframe-event-card__bold m-0 grid-view-hided">
+                {shortDate}
+              </p>
             </div>
           </Card.Text>
 
@@ -105,7 +106,7 @@ export function IframeEventCard({
                 <div className="icon-wrapper">
                   <ClockSvg />
                 </div>
-                <p className="m-0">{type}</p>
+                <p className="iframe-event-card__bold m-0">{type}</p>
               </div>
             </Card.Text>
           )}
@@ -116,7 +117,7 @@ export function IframeEventCard({
                 <div className="icon-wrapper">
                   <TicketSvg />
                 </div>
-                <p className="m-0">
+                <p className="iframe-event-card__bold m-0">
                   {t("from")}{" "}
                   {formatNumber(cost, { style: "currency", currency: "GBP" })}
                 </p>

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

@@ -90,7 +90,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
           type="number"
           onChange={(e) => handleChangeValue(Number(e.target.value))}
           value={value}
-          min={0}
+          min={min}
           max={max}
           defaultValue={defaultValue}
           placeholder={placeholder}

package/src/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.tsx

@@ -28,9 +28,7 @@ export const LeftBlock = ({
         {pageTitle && (
           <>
             {typeof pageTitle === "string" ? (
-              <div className="title" id="navigation-title">
-                {pageTitle}
-              </div>
+              <div className="title">{pageTitle}</div>
             ) : (
               pageTitle
             )}

package/src/iframe/page/components/PageBody/constants.ts

@@ -25,6 +25,6 @@ export const COLLAPSE_MARGIN = 36;
 
 export const PAGE_LEFT_BLOCK_CONTAINER_ID = "page-left-block-container";
 export const PAGE_CALENDAR_SELECT_WRAPPER = "calendar-select-wrapper";
-export const PAGE_BODY_WITH_SCROLL = "page-body-with-scroll";
+export const PAYMENT_LINK_PAGE_BODY = "payment_link_page_body";
 
 export const PAGE_LEFT_BLOCK_MAP_DEFAULT_SIZE = 300;

package/src/iframe/page/components/PageBody/hooks/useResizePageBody.ts

@@ -16,7 +16,7 @@ import {
   PAGE_LEFT_BLOCK_CONTAINER_ID,
   PAGE_LEFT_BLOCK_MAP_DEFAULT_SIZE,
   PAGE_CALENDAR_SELECT_WRAPPER,
-  PAGE_BODY_WITH_SCROLL,
+  PAYMENT_LINK_PAGE_BODY,
 } from "../constants";
 import { ChangeRightBlockHeightEvent } from "../types";
 
@@ -52,10 +52,10 @@ export const useResizePageBody = () => {
       ? calenderWrapper.clientHeight
       : 0;
 
-    const paymentLinkPageBody = document.getElementById(PAGE_BODY_WITH_SCROLL);
+    const paymentLinkPageBody = document.getElementById(PAYMENT_LINK_PAGE_BODY);
     if (paymentLinkPageBody) {
       paymentLinkPageBody.scroll({
-        top: -height,
+        top: -rightBlockHeight,
         behavior: "smooth",
       });
     }

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -63,7 +63,7 @@ const processedPaymentSummary = ({
   const total = calculateTotalPrice(order, externalPaymentDetail);
 
   const totalDiscount = calculateTotalDiscount(order.payments);
-
+  const totalWithDiscount = total - Number(totalDiscount);
   let summaryItems: SummaryItem[] = [
     {
       translateKey: AMOUNT_TOTAL,
@@ -74,7 +74,7 @@ const processedPaymentSummary = ({
   if (totalDiscount) {
     summaryItems.push({
       translateKey: AMOUNT_WITH_DISCOUNT,
-      price: order.totalToPayAmount,
+      price: totalWithDiscount < 0 ? 0 : totalWithDiscount,
     });
   }
 
@@ -84,17 +84,17 @@ const processedPaymentSummary = ({
 
   summaryItems.push({
     translateKey: TOTAL_PAID,
-    price: order.paidAmount,
+    price: totalWithDiscount <= 0 ? 0 : order.totalAmount,
   });
-  if (order.totalToPayAmount <= 0) {
+  if (totalWithDiscount <= 0) {
     return summaryItems;
   }
   summaryItems = [...summaryItems, ...externalPaymentDetail];
 
-  if (order.remainingToPay) {
+  if (totalWithDiscount > order.totalAmount) {
     summaryItems.push({
       translateKey: REMAINING_TO_PAY,
-      price: order.remainingToPay,
+      price: totalWithDiscount - order.totalAmount,
     });
   }
   return summaryItems;

package/src/iframe/payment/payment-page/PaymentPage.tsx

@@ -16,7 +16,7 @@ import { PaymentTimer } from "./PaymentTimer";
 import { Page, PageBody } from "../../page";
 import { BookingSummary } from "../../order-process";
 import { cartSumByOrderProducts } from "../../order-process/components/BookingSummary/utils";
-import { PAGE_BODY_WITH_SCROLL } from "../../page/components/PageBody/constants";
+import { PAYMENT_LINK_PAGE_BODY } from "../../page/components/PageBody/constants";
 
 export interface PaymentMetadata {
   total: number;
@@ -126,7 +126,7 @@ export const PaymentPage = ({
         onCloseButtonClick={isIframePayment ? onGoBack : undefined}
       /> */}
       <PageBody
-        id={PAGE_BODY_WITH_SCROLL}
+        id={PAYMENT_LINK_PAGE_BODY}
         leftBlock={
           <PageBody.LeftBlock>
             <div className="d-flex align-items-center mb-5">