@licklist/design 0.44.541 → 0.44.543

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

@@ -12,5 +12,5 @@ export type ZoneFormProps = {
 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,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,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=void 0===b?[]:b,v=n.useTranslation("Design").t,E=a.useForm({mode:"onChange",defaultValues:{zoneRecurrences:[]}}),g=E.reset,q=E.setError,w=E.handleSubmit,C=(0,E.watch)();return t.useEffect((function(){i&&g(i)}),[i,g]),t.useEffect((function(){m&&l.handleServerErrors(m,q)}),[m,q]),o.createElement(a.FormProvider,r.__assign({},E),o.createElement(s.Form,{onSubmit:w((function(e){e.localImageBlobURL;var t=r.__rest(e,["localImageBlobURL"]);c(t)}))},o.createElement(u.ZoneControl,{isLoading:f,workHours:p}),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||!C.name},v("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/AvailableTimesControl.d.ts

@@ -14,6 +14,8 @@ type AvailableTimesControlProps = {
     defaultValues?: string[];
     startTime?: string;
     endTime?: string;
+    errorMessage?: string;
+    clearErrorMessage: () => void;
 };
 type AvailableTimesForm = {
     availableTimes: string[];

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

@@ -1 +1 @@
-{"version":3,"file":"AvailableTimesControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/AvailableTimesControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,eAAe,EAAW,MAAM,iBAAiB,CAAC;AAE3D,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAGtF,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;IAChC,SAAS,EAAE,MAAM;QAAE,cAAc,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;IAC9C,QAAQ,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;CAC/C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,KAAK,kBAAkB,GAAG;IAAE,cAAc,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAEvD,eAAO,MAAM,qBAAqB,6GA0FhC,CAAC"}
+{"version":3,"file":"AvailableTimesControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/AvailableTimesControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,eAAe,EAAW,MAAM,iBAAiB,CAAC;AAE3D,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAGtF,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;IAChC,SAAS,EAAE,MAAM;QAAE,cAAc,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;IAC9C,QAAQ,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;CAC/C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,KAAK,kBAAkB,GAAG;IAAE,cAAc,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAEvD,eAAO,MAAM,qBAAqB,6GA8FjC,CAAC"}

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("tslib"),t=require("react"),a=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,i=require("react-i18next"),l=require("react-bootstrap"),n=require("react-hook-form"),s=require("@react-aria/utils"),o=require("../utils/dates.js"),u=t.forwardRef((function(e,u){var c,m=e.isLoading,d=e.workHours,f=e.defaultValues,b=void 0===f?[]:f,v=s.useId(),g=i.useTranslation(["Design","Validation"]).t,p=n.useForm({mode:"onChange"}),h=p.register,E=p.formState.errors,k=p.reset,T=p.trigger,_=p.getValues,q=p.setValue,y=p.watch,C=p.setError,F=y("availableTimes")||[],V=t.useMemo((function(){return o.getCheckboxesByWorkHours(d)}),[d]);t.useImperativeHandle(u,(function(){return{trigger:T,getValues:_,setError:C}}));return t.useEffect((function(){b&&k({availableTimes:b})}),[b]),a.createElement(l.Form.Group,{controlId:v},a.createElement(l.Form.Label,null,g("Design:startTimes")),a.createElement("div",{className:"zone-available-times"},V.map((function(e){return a.createElement(l.Form.Check,{key:e,inline:!0,custom:!0,id:e},a.createElement(l.Form.Check.Input,{type:"checkbox",value:e,checked:F.includes(e),onChange:function(){return function(e){F.includes(e)?q("availableTimes",F.filter((function(r){return r!==e}))):q("availableTimes",r.__spreadArray(r.__spreadArray([],r.__read(F),!1),[e],!1))}(e)},disabled:m}),a.createElement(l.Form.Check.Label,null,e))}))),a.createElement(l.Form.Control,r.__assign({type:"hidden"},h("availableTimes",{required:{value:!0,message:g("Validation:fieldMinNumber",{attribute:g("startTimes"),min:1})}}))),a.createElement("div",{className:"manual-form-error"},null===(c=E.availableTimes)||void 0===c?void 0:c.message))}));exports.AvailableTimesControl=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("tslib"),a=require("react"),t=(e=a)&&"object"==typeof e&&"default"in e?e.default:e,i=require("react-i18next"),o=require("react-bootstrap"),s=require("react-hook-form"),n=require("@react-aria/utils"),l=require("../utils/dates.js"),u=a.forwardRef((function(e,u){var c,m=e.isLoading,d=e.workHours,f=e.defaultValues,v=void 0===f?[]:f,g=e.errorMessage,b=e.clearErrorMessage,p=n.useId(),E=i.useTranslation(["Design","Validation"]).t,h=s.useForm({mode:"onChange"}),k=h.register,_=h.formState.errors,y=h.reset,C=h.trigger,T=h.getValues,q=h.setValue,F=h.watch,x=h.setError,V=F("availableTimes")||[],I=a.useMemo((function(){return l.getCheckboxesByWorkHours(d)}),[d]);a.useImperativeHandle(u,(function(){return{trigger:C,getValues:T,setError:x}}));return a.useEffect((function(){v&&y({availableTimes:v})}),[v]),t.createElement(o.Form.Group,{controlId:p},t.createElement(o.Form.Label,null,E("Design:startTimes")),t.createElement("div",{className:"zone-available-times"},I.map((function(e){return t.createElement(o.Form.Check,{key:e,inline:!0,custom:!0,id:e},t.createElement(o.Form.Check.Input,{type:"checkbox",value:e,checked:V.includes(e),onChange:function(){return function(e){var a=V.includes(e);g&&b(),q("availableTimes",a?V.filter((function(r){return r!==e})):r.__spreadArray(r.__spreadArray([],r.__read(V),!1),[e],!1))}(e)},disabled:m}),t.createElement(o.Form.Check.Label,null,e))}))),t.createElement(o.Form.Control,r.__assign({type:"hidden"},k("availableTimes"))),t.createElement("div",{className:"manual-form-error"},(null===(c=_.availableTimes)||void 0===c?void 0:c.message)||g))}));exports.AvailableTimesControl=u;

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

@@ -4,5 +4,5 @@ export type ZoneControlProps = {
     isLoading: boolean;
     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,CAAC,EAAE,QAAQ,EAAE,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,WAAW,8BAGrB,gBAAgB,gBA0BlB,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,C=void 0===u?[]:u;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:C,isLoading:r}),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

@@ -8,5 +8,5 @@ export type ZoneRecurrenceControlProps = {
     workHours?: WorkHour[];
     isLoading?: boolean;
 };
-export declare const ZoneRecurrencesControl: ({ workHours, isLoading, }: ZoneRecurrenceControlProps) => JSX.Element;
+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;AAiBtF,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,8BAGhC,0BAA0B,gBA8O5B,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("@licklist/core/dist/Config"),a=require("react-i18next"),o=require("react-bootstrap"),u=require("../../../static/Icon.js"),l=require("react-hook-form"),s=require("@react-aria/utils"),c=require("react-use"),d=require("luxon");require("../../../static/index.js");var m=require("@dnd-kit/core"),v=require("@dnd-kit/sortable"),f=require("../../../modals/confirmation/ConfirmModal.js"),g=require("../../../recurring-date-picker-input/RecurringDatePickerInput.js"),p=require("../../../product-set/control/DateAndRecurrenceInput.js"),T=require("./ZoneRecurrenceControl.js"),_=require("./AvailableTimesControl.js");exports.ZoneRecurrencesControl=function(e){var E,b,q=e.workHours,D=e.isLoading,R=void 0!==D&&D,x=l.useFormContext(),C=x.control,I=x.register,S=x.formState.errors,k=x.getValues,y=x.setValue,A=x.clearErrors,F=l.useFieldArray({name:"zoneRecurrences",control:C,keyName:"_id"}),M=F.fields,h=F.append,z=F.update,N=F.move,w=r.__read(t.useState(!1),2),O=w[0],j=w[1],V=r.__read(t.useState({index:null,values:null}),2),P=V[0],L=V[1],Z=function(){return L({index:null,values:null})},H=r.__read(t.useState([]),2),B=H[0],G=H[1],K=t.useRef(),W=t.useRef();c.useClickAway(K,(function(e){var r,t,n;f.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)||(j(!1),Z())}));var J=s.useId(),Q=a.useTranslation(["Design","Validation"]).t,U=function(){Z(),j((function(e){return!e}))};return t.useEffect((function(){M.length&&A("zoneRecurrences")}),[M,A]),n.createElement(o.Form.Group,null,n.createElement(o.Form.Label,null,Q("zoneAvailable")),n.createElement(o.OverlayTrigger,{show:O,overlay:n.createElement(o.Popover,{id:J,className:"rounded"},n.createElement(o.Popover.Content,{className:"shadow-lg rounded",ref:K},n.createElement(g.RecurringDatePickerInput,{defaultValues:P.values,onChange:function(e){return r.__awaiter(void 0,void 0,void 0,(function(){var t,n,a,o,u,l,s;return r.__generator(this,(function(c){switch(c.label){case 0:return[4,null===(u=W.current)||void 0===u?void 0:u.trigger()];case 1:return c.sent()?!(null==e?void 0:e.startTime)||!(null==e?void 0:e.endTime)||(t=d.DateTime.fromISO(e.startTime),n=d.DateTime.fromISO(e.endTime),a=W.current.getValues().availableTimes,a.every((function(e){var r=d.DateTime.fromFormat(e,i.TIME_FORMAT);return r.diff(t,"minutes").minutes>=0&&r.diff(n,"minutes").minutes<=0})))?(o=r.__assign({rrule:e.rrule,startDate:e.startDate,endDate:e.endDate,startTime:e.startTime,endTime:e.endTime},W.current.getValues()),(null===(l=P.values)||void 0===l?void 0:l.id)&&(o.id=null===(s=P.values)||void 0===s?void 0:s.id),null!==P.index?z(P.index,o):h(o),j((function(){return!1})),Z(),[2]):(W.current.setError("availableTimes",{message:Q("Validation:fieldTimeBetween",{attribute:Q("Design:startTimesSmall"),min:t.toFormat(i.TIME_FORMAT),max:n.toFormat(i.TIME_FORMAT)})}),[2]):[2]}}))}))},onDelete:function(){var e=P.index;j(!1),Z(),setTimeout((function(){var r=k().zoneRecurrences;y("zoneRecurrences",(void 0===r?[]:r).filter((function(r,t){return t!==e})))}),100)},setInitialStartDateAfterSelect:!0},n.createElement(_.AvailableTimesControl,{workHours:q,isLoading:R,defaultValues:B,ref:W})))),trigger:"click",placement:"bottom",popperConfig:{modifiers:[p.sameWidthPopperModifier]}},n.createElement("div",{className:"zone-recurrences"},n.createElement(m.DndContext,{onDragEnd:function(e){var r=e.over,t=e.active;if(r.id!==t.id){var n=M.findIndex((function(e){return String(e._id)===t.id})),i=M.findIndex((function(e){return String(e._id)===r.id}));N(n,i)}}},n.createElement(v.SortableContext,{items:null!==(E=null==M?void 0:M.map((function(e){return String(e._id)})))&&void 0!==E?E:[],strategy:v.verticalListSortingStrategy},null==M?void 0:M.map((function(e,r){return n.createElement(T.ZoneRecurrenceControl,{key:e._id,zoneRecurrence:e,onEdit:function(){return function(e,r){Z(),L({index:r,values:e}),G(e.availableTimes||[]),j((function(){return!0}))}(e,r)}})})))),n.createElement("div",{className:"zone-recurrence-icon-wrapper",role:"button",tabIndex:0,onClick:U,onKeyDown:U},n.createElement(u.default,{type:"plus-circle",height:"1rem",className:"zone-recurrence-icon-add mr-2"}),Q("addDates")),n.createElement(o.Form.Control,r.__assign({type:"hidden"},I("zoneRecurrences",{required:{value:!0,message:Q("Validation:fieldMinNumber",{attribute:Q("dates"),min:1})}}))),n.createElement("div",{className:"manual-form-error"},null===(b=S.zoneRecurrences)||void 0===b?void 0:b.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/package.json

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

package/src/availability-indicator/AvailabilityIndicator.tsx

@@ -1,5 +1,6 @@
-import React, { ReactElement } from "react";
+import React, { FunctionComponent, SVGProps } from "react";
 import { useTranslation } from "react-i18next";
+import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
 import { ReactComponent as AvailableIcon } from "../assets/iframe/available.svg";
 import { ReactComponent as LimitedIcon } from "../assets/iframe/limited.svg";
 import { ReactComponent as SoldOutIcon } from "../assets/iframe/soldOut.svg";
@@ -7,53 +8,60 @@ import { ReactComponent as SoldOutIcon } from "../assets/iframe/soldOut.svg";
 const LOTS_OF_SPACE_LIMIT = 0.2;
 const LIMITED_LIMIT = 0.8;
 
-const getIconsAndLabels = (
-  booked: number,
-  total: number
-): { label: string; icon: ReactElement } => {
-  if (booked === total) {
-    return { label: "soldOut", icon: <SoldOutIcon className="logo" /> };
+type Config = {
+  label: string;
+  icon: FunctionComponent<SVGProps<SVGSVGElement>>;
+};
+
+const getIconsAndLabels = ({
+  bookedResources,
+  totalResources,
+}: ZoneResourcesAvailability): Config => {
+  if (bookedResources === totalResources) {
+    return { label: "soldOut", icon: SoldOutIcon };
   }
 
   // lots of space if less than 80% booked
-  if (booked / total <= LOTS_OF_SPACE_LIMIT) {
-    return { label: "lotsOfSpace", icon: <AvailableIcon className="logo" /> };
+  if (bookedResources / totalResources <= LOTS_OF_SPACE_LIMIT) {
+    return { label: "lotsOfSpace", icon: AvailableIcon };
   }
 
-  if (booked / total >= LIMITED_LIMIT) {
-    return { label: "limited", icon: <LimitedIcon className="logo" /> };
+  if (bookedResources / totalResources >= LIMITED_LIMIT) {
+    return { label: "limited", icon: LimitedIcon };
   }
 
-  return { label: "available", icon: <AvailableIcon className="logo" /> };
+  return { label: "available", icon: AvailableIcon };
 };
 
 type AvailabilityIndicatorProps = {
-  booked: number;
-  total: number;
-  notAvailable?: boolean;
+  resources: ZoneResourcesAvailability;
+  isUnavailable?: boolean;
+  isSoldOut?: boolean;
 };
 
 export const AvailabilityIndicator = ({
-  booked,
-  total,
-  notAvailable,
+  resources,
+  isUnavailable,
+  isSoldOut,
 }: AvailabilityIndicatorProps) => {
   const { t } = useTranslation("Design");
-  const { icon, label } = getIconsAndLabels(booked, total);
-
-  if (notAvailable) {
-    return (
-      <div className="availability-indicator">
-        <SoldOutIcon className="logo" />
-        <div>{t("notAvailable")}</div>
-      </div>
-    );
+
+  if (isUnavailable) {
+    return <Indicator icon={SoldOutIcon} label={t("notAvailable")} />;
   }
 
-  return (
-    <div className="availability-indicator">
-      {icon}
-      <div>{t(label)}</div>
-    </div>
-  );
+  if (isSoldOut) {
+    return <Indicator icon={SoldOutIcon} label={t("soldOut")} />;
+  }
+
+  const { icon, label } = getIconsAndLabels(resources);
+
+  return <Indicator icon={icon} label={t(label)} />;
 };
+
+const Indicator = ({ icon, label }: Config) => (
+  <div className="availability-indicator">
+    {icon}
+    <div>{label}</div>
+  </div>
+);

package/src/calendar/Calendar.tsx

@@ -1,5 +1,6 @@
 import React, { Dispatch, ReactElement, SetStateAction } from "react";
 import { DateTime } from "luxon";
+import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
 import { CalendarButtons } from "./components/CalendarButtons";
 import { CalendarDates } from "./components/CalendarDates";
 
@@ -20,9 +21,7 @@ export type CalendarProps = {
   fromPrice?: string | ReactElement | null;
   isLoading?: boolean;
   initialDate?: DateTime;
-  getAvailability?: (
-    date: DateTime
-  ) => { booked: number; total: number } | undefined;
+  getAvailability?: (date: DateTime) => ZoneResourcesAvailability | null;
   includeAvailability?: boolean;
 };
 

package/src/date-time-button/DateTimeButton.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement } from "react";
 import clsx from "clsx";
 import { DateTime } from "luxon";
+import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
 import { AvailabilityIndicator } from "../availability-indicator";
 import { DateContent } from "./DateContent";
 
@@ -8,13 +9,11 @@ export type DateTimeButtonProps<T = DateTime | string> = {
   date: T;
   isSelected?: boolean;
   isDisabled?: boolean;
+  isSoldOut?: boolean;
   onSelect: (date: T) => void;
   isOnlyTimeContainer?: boolean;
   price?: string | number | ReactElement | null;
-  resources?: {
-    booked: number;
-    total: number;
-  };
+  resources?: ZoneResourcesAvailability | null;
   calendarView?: boolean;
   showResources?: boolean;
 };
@@ -23,6 +22,7 @@ export const DateTimeButton = <T extends DateTime | string>({
   date,
   isDisabled: _isDisabled,
   isSelected,
+  isSoldOut,
   onSelect,
   isOnlyTimeContainer,
   price,
@@ -33,7 +33,8 @@ export const DateTimeButton = <T extends DateTime | string>({
   const isTimeVariant = typeof date === "string";
 
   const isDisabled =
-    _isDisabled || (resources && resources.booked === resources.total);
+    _isDisabled ||
+    (resources && resources.bookedResources === resources.totalResources);
 
   return (
     <button
@@ -63,7 +64,11 @@ export const DateTimeButton = <T extends DateTime | string>({
       {price && !isDisabled && <div className="price">{price}</div>}
 
       {showResources && resources && (
-        <AvailabilityIndicator {...resources} notAvailable={_isDisabled} />
+        <AvailabilityIndicator
+          resources={resources}
+          isUnavailable={_isDisabled}
+          isSoldOut={isSoldOut}
+        />
       )}
     </button>
   );

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

@@ -47,7 +47,6 @@ const contextValue = {
     name: "Example",
     type: "sale",
     termsAndConditions: "",
-    isDefault: true,
     operationalCost: OPERATIONAL_COST_CUSTOMER,
     steps: [
       {
@@ -687,7 +686,6 @@ const defaultProductSets = [
     name: "Example",
     type: PRODUCT_SET_TYPES[0],
     termsAndConditions: "",
-    isDefault: true,
     operationalCost: OPERATIONAL_COST_TYPES[0],
     fieldSet: {
       id: 1,
@@ -877,7 +875,6 @@ const defaultProductSets = [
     name: "Example 2",
     type: PRODUCT_SET_TYPES[1],
     termsAndConditions: "",
-    isDefault: true,
     operationalCost: OPERATIONAL_COST_TYPES[1],
     fieldSet: {
       id: 2,

package/src/events/edit-event-modal/utils/getDefaultProductSet.ts

@@ -17,7 +17,6 @@ export const getDefaultValues = (
   operationalCost: productSet?.operationalCost ?? DEFAULT_OPERATIONAL_COST_TYPE,
   relyOnPeopleType: productSet?.relyOnPeopleType ?? null,
   thankYouPageUrl: productSet?.thankYouPageUrl ?? "",
-  isDefault: productSet?.isDefault ?? false,
   fieldSetId: productSet?.fieldSetId,
   emailTemplates:
     productSet?.mailTemplates && productSet?.mailTemplates?.length > 0

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

@@ -1,75 +1,51 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
-import { ActivityCard, ActivityCardProps, LAYOUT_LIST } from "./ActivityCard";
+import {
+  ActivityCard,
+  ActivityCardProps,
+  LAYOUT_GRID,
+  LAYOUT_LIST,
+} from "./ActivityCard";
 
 export default {
   title: "Iframe/ActivityCard",
   component: ActivityCard,
 } as Meta;
 
-export const Default: Story<ActivityCardProps> = (props) => {
-  return <ActivityCard {...props} />;
-};
+export const GridView: Story<ActivityCardProps> = (props) => {
+  const [isSelected, setIsSelected] = React.useState(false);
 
-Default.args = {
-  title: "Clay Pigeons & Axe Thowing",
-  duration: "60 mins",
-  price: "from £20",
-  image: {
-    hash: "0b37b130e22aa2d3",
-    id: 195,
-    imageType: "cover",
-    imageableId: 25,
-    imageableType: "zone",
-    path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-    // eslint-disable-next-line max-len
-    url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-  },
-  onSelect: () => null,
-  isSelected: false,
+  return (
+    <ActivityCard
+      {...props}
+      isSelected={isSelected}
+      onSelect={() => setIsSelected(true)}
+    />
+  );
 };
 
-export const Selected: Story<ActivityCardProps> = (props) => {
-  return <ActivityCard {...props} />;
-};
-
-Selected.args = {
+GridView.args = {
+  layout: LAYOUT_GRID,
   title: "Clay Pigeons & Axe Thowing",
   duration: "60 mins",
   price: "from £20",
-  image: {
-    hash: "0b37b130e22aa2d3",
-    id: 195,
-    imageType: "cover",
-    imageableId: 25,
-    imageableType: "zone",
-    path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-    // eslint-disable-next-line max-len
-    url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-  },
-  onSelect: () => null,
-  isSelected: true,
 };
 
 export const ListView: Story<ActivityCardProps> = (props) => {
-  return <ActivityCard {...props} />;
+  const [isSelected, setIsSelected] = React.useState(false);
+
+  return (
+    <ActivityCard
+      {...props}
+      isSelected={isSelected}
+      onSelect={() => setIsSelected(true)}
+    />
+  );
 };
 
-Default.args = {
+ListView.args = {
   layout: LAYOUT_LIST,
   title: "Clay Pigeons & Axe Thowing",
   duration: "60 mins",
   price: "from £20",
-  image: {
-    hash: "0b37b130e22aa2d3",
-    id: 195,
-    imageType: "cover",
-    imageableId: 25,
-    imageableType: "zone",
-    path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-    // eslint-disable-next-line max-len
-    url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-  },
-  onSelect: () => null,
-  isSelected: false,
 };

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

@@ -1,6 +1,5 @@
 import React, { ReactNode } from "react";
 import clsx from "clsx";
-import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
 
 export const LAYOUT_GRID = "grid";
 export const LAYOUT_LIST = "list";
@@ -11,7 +10,6 @@ export type ActivityCardProps = {
   title: ReactNode;
   duration: ReactNode;
   price: ReactNode;
-  image?: Image | null;
   onSelect: () => void;
   isSelected: boolean;
   layout?: Layout;
@@ -21,7 +19,7 @@ export const ActivityCard = ({
   title,
   duration,
   price,
-  image,
+  // image,
   onSelect,
   isSelected,
   layout = LAYOUT_GRID,
@@ -33,10 +31,7 @@ export const ActivityCard = ({
         className={clsx("activity-card", isSelected && "active")}
         onClick={onSelect}
       >
-        {image && (
-          <img className="activity-card-image" alt="" src={image.url} />
-        )}
-        <div className={clsx("d-flex", "flex-column", !image && "no-image")}>
+        <div className={clsx("d-flex", "flex-column")}>
           <div className="activity-card-title">{title}</div>
 
           {duration && <div>{duration}</div>}
@@ -64,12 +59,6 @@ export const ActivityCard = ({
 
           {price && <div>{price}</div>}
         </div>
-
-        {image && (
-          <div className="image-container">
-            <img className="image" src={image.url} alt="" />
-          </div>
-        )}
       </div>
       <hr className="list-activity-card-hr" />
     </div>

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

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { FieldValues, RefCallBack, UseFormClearErrors } from "react-hook-form";
+import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
 import { NumberInput } from "../NumberInput";
 import { Product, ProductCategory } from "../../../../../../types";
 
@@ -11,6 +12,7 @@ interface FormOrderItem {
   name: string;
   price: number;
   productsCategoryId: number;
+  zoneId?: Zone["id"];
   deposit?: number | null;
   quantity: number;
   capacity?: number | null;
@@ -30,7 +32,7 @@ interface ProductQuantityInputProps {
 export const ProductQuantityInput = ({
   product,
   category,
-  onChange,
+  onChange: _onChange,
   clearErrors,
   refCallback,
   productInfo,
@@ -39,14 +41,15 @@ export const ProductQuantityInput = ({
 }: ProductQuantityInputProps) => {
   const { t } = useTranslation("Design");
 
-  const onClick = () => {
-    onChange({
+  const onChange = (quantity: number | null) => {
+    _onChange({
       id: product.id,
       name: product.name,
       deposit,
       price: product.price,
       productsCategoryId: category.id,
-      quantity: productInfo?.quantity ? 0 : 1,
+      zoneId: category.zone?.id,
+      quantity,
       capacity: product?.capacity,
     });
   };
@@ -58,6 +61,7 @@ export const ProductQuantityInput = ({
       </div>
     );
   }
+
   if (product?.maxAmount === 1) {
     return (
       <Button
@@ -69,49 +73,26 @@ export const ProductQuantityInput = ({
           }`,
           invalid && "error"
         )}
-        onClick={onClick}
+        onClick={() => onChange(productInfo?.quantity ? 0 : 1)}
       >
         {t(`Design:${productInfo?.quantity ? "unselect" : "select"}`)}
       </Button>
     );
   }
+
   return (
     <NumberInput
       ref={refCallback}
       onChange={(val) => {
-        onChange({
-          id: product.id,
-          name: product.name,
-          deposit,
-          price: product.price,
-          productsCategoryId: category.id,
-          quantity: val || null,
-          capacity: product?.capacity,
-        });
+        onChange(val || null);
         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,
-          capacity: product?.capacity,
-        });
+        onChange(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,
-          capacity: product?.capacity,
-        });
+        onChange((productInfo?.quantity ?? 0) + 1);
         clearErrors(`${product.id}` as const);
       }}
       min={0}

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

@@ -24,17 +24,19 @@ export const LeftBlock = ({
 
   return (
     <div className={clsx("left-block", className)} {...props}>
-      {pageTitle && (
-        <div className="navigation">
-          {typeof pageTitle === "string" ? (
-            <div className="title">{pageTitle}</div>
-          ) : (
-            pageTitle
-          )}
+      <div className="navigation">
+        {pageTitle && (
+          <>
+            {typeof pageTitle === "string" ? (
+              <div className="title">{pageTitle}</div>
+            ) : (
+              pageTitle
+            )}
+          </>
+        )}
 
-          {component}
-        </div>
-      )}
+        {component}
+      </div>
       <div
         className={clsx("left-block-container", childrenClassName)}
         style={leftBlockStyles}