@licklist/design 0.58.6-dev.0 → 0.58.6-dev.10

package/dist/snippet/snippet-template/control/PropertyControl.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),i=require("react-i18next"),a=require("react-bootstrap"),l=require("react-hook-form"),n=e(require("@licklist/plugins/dist/services/Form/HookFormService")),c=require("react-color"),s=["#FF6900","#FCB900","#7BDCB5","#00D084","#8ED1FC","#0693E3","#ABB8C3","#EB144C","#F78DA7","#9900EF","#FFFFFF","#000000"];exports.PropertyControl=function(e){var u,d=e.item,m=e.label,F=e.isDisabled,v=void 0!==F&&F,p=i.useTranslation(["Validation"]).t,b=r.__read(t.useState(!1),2),f=b[0],C=b[1],E=l.useFormContext(),k=E.watch,_=E.register,q=E.setValue,g=E.formState,x=E.formState.errors,y=k(d),B=t.useCallback((function(e){return n.isFieldValid(g,x,e)}),[g,x]),N=function(){C((function(e){return!e}))};return o.createElement(a.Form.Group,{className:"position-relative color-picker"},o.createElement(a.Form.Label,{className:"mt-2"},m),o.createElement("div",{className:"position-relative"},o.createElement(a.Form.Control,r.__assign({},_(d,{required:{value:!0,message:p("Validation:fieldRequired",{attribute:m})}}),{isValid:B(d),isInvalid:n.isInvalid(d,x),disabled:v,onFocus:N})),o.createElement("div",{className:"color-picker__color",style:{backgroundColor:null!==(u=String(y))&&void 0!==u?u:""}})),f&&o.createElement("div",{className:"color-picker__popover"},o.createElement("div",{className:"color-picker__cover vh-100 vw-100",onClick:N,onKeyPress:N,role:"button",tabIndex:0}),o.createElement(c.TwitterPicker,{color:null!=y?y:"",onChangeComplete:function(e){q(d,e.hex),N()},colors:s})),o.createElement(a.Form.Control.Feedback,{type:"invalid"},n.getErrors(d,x)))};
+"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),i=require("react-i18next"),a=require("react-bootstrap"),l=require("react-hook-form"),n=e(require("@licklist/plugins/dist/services/Form/HookFormService")),s=require("react-color"),c=["#FF6900","#FCB900","#7BDCB5","#00D084","#8ED1FC","#0693E3","#ABB8C3","#EB144C","#F78DA7","#9900EF","#FFFFFF","#000000"];exports.PropertyControl=function(e){var u,d=e.item,m=e.label,v=e.isDisabled,F=void 0!==v&&v,p=e.defaultColors,f=e.isRequired,C=void 0===f||f,b=i.useTranslation(["Validation"]).t,E=r.__read(t.useState(!1),2),k=E[0],_=E[1],q=l.useFormContext(),g=q.watch,x=q.register,y=q.setValue,B=q.formState,N=q.formState.errors,h=g(d),D=t.useCallback((function(e){return n.isFieldValid(B,N,e)}),[B,N]),S=function(){_((function(e){return!e}))};return o.createElement(a.Form.Group,{className:"position-relative color-picker"},o.createElement(a.Form.Label,{className:"mt-2"},m),o.createElement("div",{className:"position-relative"},o.createElement(a.Form.Control,r.__assign({},x(d,{required:{value:C,message:b("Validation:fieldRequired",{attribute:m})}}),{isValid:D(d),isInvalid:n.isInvalid(d,N),disabled:F,onFocus:S})),o.createElement("div",{className:"color-picker__color",style:{backgroundColor:null!==(u=String(h))&&void 0!==u?u:""}})),k&&o.createElement("div",{className:"color-picker__popover"},o.createElement("div",{className:"color-picker__cover vh-100 vw-100",onClick:S,onKeyPress:S,role:"button",tabIndex:0}),o.createElement(s.TwitterPicker,{color:null!=h?h:"",onChangeComplete:function(e){y(d,e.hex),S()},colors:p||c})),o.createElement(a.Form.Control.Feedback,{type:"invalid"},n.getErrors(d,N)))};

package/dist/snippet/snippet-template/preview/Preview.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),a=require("react"),r=(e=a)&&"object"==typeof e&&"default"in e?e.default:e,n=require("react-router-dom"),i=require("react-i18next"),o=require("react-bootstrap");require("../../../iframe/event/event-booking-form/EventBookingForm.js"),require("../../../iframe/event/event-booking-view/EventBookingView.js");var s=require("../../../iframe/event/event-card/IframeEventCard.js");require("../../../iframe/event/event-card/IframeEventCardSkeleton.js"),require("../../../iframe/event/ticket-description/TicketDescription.js"),require("../../../iframe/event/event-tables/EventTables.js"),require("../../../iframe/event/event-order-summary/EventOrderSummary.js"),require("../../../iframe/event/event-booking-products/EventBookingProducts.js"),require("../../../iframe/event/event-order-short-summary/EventOrderShortSummary.js"),require("../../../iframe/order-process/components/NavigationFooter/NavigationFooter.js"),require("../../../iframe/event/event-description/EventDescription.js");var m=require("../../../iframe/event/event-product-sets/EventProductSets.js");require("../../../iframe/event/event-step-venue-map-zones/EventStepVenueMapZones.js");var l=require("../../../iframe/event/event-venue-map/IframeEventVenueMap.js");require("../../../iframe/payment/payment-form/PaymentForm.js"),require("../../../iframe/payment/order-items-table/OrderItemsTable.js"),require("../../../iframe/back-button/BackButton.js");var c=require("../context/snippetTemplate.js"),u=require("../../../iframe/page/components/PageHeader/PageHeader.js");require("../../../iframe/payment/payment-status-header/PaymentStatusHeader.js");var d=require("../../../iframe/order-process/components/BookingSummary/BookingSummary.js"),p=require("../../../iframe/order-process/components/NavigationSteps/NavigationSteps.js"),v=require("../../../iframe/order-process/components/Timer/Timer.js");require("../../../iframe/order-process/components/PaymentCard/PaymentCard.js");var f=require("../../../iframe/order-process/components/BookingSummaryFooter/BookingSummaryFooter.js"),E=require("../../../iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.js");require("../../../iframe/order-process/components/ErrorModal/ErrorModal.js");var g=require("../../../iframe/page/components/PageBody/PageBody.js");require("../../../calendar/components/CalendarSelect/CalendarSelect.js"),require("../../../iframe/order-process/components/utils/useCategoryVerification.js"),require("../../../iframe/order-process/components/CalendarStepsForm/CalendarStepsForm.js"),require("../../../iframe/powered-by/PoweredBy.js");var y=require("../../../iframe/page/Page.js");require("../../../iframe/payment/payment-page/PaymentPage.js"),require("../../../iframe/payment/payment-status-page/PaymentStatusPage.js"),require("../../../iframe/activity-card/ActivityCard.js"),require("../../../iframe/custom-fields/components/CustomDateField.js");var b=require("../context/snippetTemplateView.js"),N=require("@licklist/core/dist/DataMapper/Provider/SnippetDataMapper"),S=require("../../../calendar/Calendar.js"),C=require("../../../calendar/utils/index.js"),q=require("../settings/SettingButton.js");exports.Preview=function(e){var h=e.onSettingClick,B=e.providerHasMap,j=void 0!==B&&B,k=i.useTranslation("Design").t,P=t.__read(a.useState(0),2),w=P[0],x=P[1],I=t.__read(a.useState(0),2),T=I[0],D=I[1],A=a.useContext(b.SnippetTemplateViewContext).setView,M=a.useContext(c.SnippetTemplateContext).template.type,_=void 0===M?N.SNIPPET_TYPE_EVENT_LIST:M,V=function(e){A(e),h()},F=t.__read(a.useState(S.defaultStartDay),2),H=F[0],X=F[1],O=t.__read(a.useState(null),2),U=O[0],Q=O[1],R=C.getMonthCalendarDates(H);return r.createElement("div",{className:"w-100 h-100 snippet-template-preview"},r.createElement(y.Page,{headerBlock:r.createElement("div",{className:"d-flex mt-5 pt-5 p-5 iframe-page snippet-template-additional-header"},r.createElement(q.SettingButton,{view:"pageHeaderSteps",onClick:V,className:"m-0"},r.createElement(q.SettingButton,{view:"pageHeader",onClick:V,className:"m-0 snippet-template-button-left",containerClassName:"mr-5 asd"}),r.createElement("div",{className:"header-block mt-5 pt-5"},r.createElement("div",{className:"mt-5 pt-5 external-header"},r.createElement(u.PageHeader,{showCloseButton:!0,showBackButton:!0},r.createElement(v.Timer,{timer:600}),r.createElement(n.MemoryRouter,{initialEntries:["/step1","/step2"]},r.createElement(p.NavigationSteps,{steps:[{pathname:"/step1",key:"/step1",name:"Burger"},{pathname:"/step2",key:"/step2",name:"Cheese"}]})))))))},r.createElement("div",{className:"page-body pb-5 mb-5 pt-3 mt-3"},r.createElement(q.SettingButton,{view:"page",onClick:V,className:"snippet-template-body-button"})),r.createElement(g.PageBody,{className:"snippet-template",leftBlock:r.createElement(q.SettingButton,{view:"pageBodyLeftBlock",onClick:V,className:"mr-4"},r.createElement(g.PageBody.LeftBlock,{title:"About this event"},r.createElement(q.SettingButton,{view:"elements",onClick:V,className:"mt-5 m-0",containerClassName:"mt-5 pt-5"},r.createElement("div",{className:"mt-3"},r.createElement("h3",null,k("elements"))),r.createElement("div",{className:"mt-5"},r.createElement("h4",null,k("Texts")),r.createElement("p",null,"XXXX")),r.createElement("div",{className:"mt-5"},r.createElement("h4",null,k("form")),r.createElement("div",{className:"d-flex flex-column w-100"},r.createElement("div",{className:"w-100"},r.createElement("div",{className:"form-row"},r.createElement("div",{className:"form-group col-12"},r.createElement("label",{className:"form-label"},k("firstName")),r.createElement("input",{type:"text",className:"form-control",placeholder:k("firstName")}))),r.createElement("div",{className:"form-row"},r.createElement("button",{type:"button",className:"btn btn-link"},k("iHaveAccount")))))),r.createElement("div",{className:"mt-5"},r.createElement("h4",null,k("Number input")),r.createElement("div",{className:"d-flex flex-column w-100"},r.createElement(E.NumberInput,{value:w,onChange:function(e){return x(e)},onArrowDown:function(){return x((function(e){return e-1}))},onArrowUp:function(){return x((function(e){return e+1}))}}))),r.createElement("div",{className:"mt-5"},r.createElement("h4",null,k("Dropdown")),r.createElement("div",{className:"d-flex flex-column w-100"},r.createElement("div",{className:"w-100"},r.createElement("div",{className:"form-row"},r.createElement("div",{className:"form-group col-12"},r.createElement("label",{className:"form-label"},k("dayOfBirthShort")),r.createElement("select",{className:"form-control",placeholder:k("firstName")},r.createElement("option",null,"2022"),r.createElement("option",null,"2023"))))))),r.createElement("div",{className:"mt-5 snippet-template__form"},r.createElement("h4",null,k("Button")),r.createElement("div",{className:"d-flex flex-column w-100"},r.createElement(o.Button,{size:"sm"},"Submit")))),j&&_===N.SNIPPET_TYPE_VENUE_MAP&&r.createElement(r.Fragment,null,r.createElement("div",{className:"pt-4"},r.createElement("h4",null,k("Calendar")),r.createElement(q.SettingButton,{view:"calendar",onClick:V,className:"mt-3 m-0",containerClassName:"mt-5 pt-5"},r.createElement(S.Calendar,{currentDate:H,setCurrentDate:X,selectedDate:U,setSelectedDate:Q,calendarDates:R,getDateTimeButtonProps:function(){return{isDisabled:!1}}}))),r.createElement("div",{className:"pt-4"},r.createElement(q.SettingButton,{view:"productSet",onClick:V,className:"mt-3 m-0",containerClassName:"mt-5 pt-5"},r.createElement("h4",null,k("Product Sets")),r.createElement("div",{className:"pt-5 mt-5"},r.createElement(m.EventProductSets,{productSets:[{id:1,name:"Test 1"},{id:2,name:"Test 2"},{id:3,name:"Test 3"}],onSelectProductSet:D,selectedProductSetId:T})))),r.createElement("div",{className:"pt-4"},r.createElement("form",{className:"category-steps-form pt-4 mt-4"},r.createElement("h4",null,k("Venue Map")),r.createElement("div",{className:"position-relative pt-4 mt-4"},r.createElement(q.SettingButton,{view:"venueMap",onClick:V,className:"mt-n6 m-0",containerClassName:"mt-5 pt-5"},r.createElement(l.IframeEventVenueMap,{url:"https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s",usedInIframe:!0,pointProducts:[{id:9,menuStepId:75,pointId:21,productUuid:"beb6393c-2fdd-40f7-bb92-8800685b203f"},{id:10,menuStepId:75,pointId:24,productUuid:"beb6393c-2fdd-40f7-bb92-8800685b203a"}],points:[{id:21,venueMapId:7,createdAt:null,updatedAt:null,deletedAt:null,xCoordinate:799.39,yCoordinate:1108.45},{id:24,venueMapId:7,createdAt:null,updatedAt:null,deletedAt:null,xCoordinate:1400.2,yCoordinate:1431.77}],choosedProductUuids:["beb6393c-2fdd-40f7-bb92-8800685b203f"],products:[{id:148,productCategoryId:57,productGroupId:null,availableQuantity:980,zoneId:null,name:"Cofee",description:"",price:15,deposit:0,minQuantity:1,maxQuantity:15,totalQuantity:980,type:"sale",capacity:0,duration:0,weight:0,isAvailable:!0,isSoldOut:!1,isRequired:!1,isUnlimited:!1,quantitySelector:1,hasSpecialNotes:!1,termsAndConditions:null,subProducts:[],images:null,productCategory:null,uuid:"beb6393c-2fdd-40f7-bb92-8800685b203f"},{id:149,productCategoryId:57,productGroupId:null,availableQuantity:980,zoneId:null,name:"Cofee 2",description:"",price:15,deposit:0,minQuantity:1,maxQuantity:15,totalQuantity:980,type:"sale",capacity:0,duration:0,weight:0,isAvailable:!0,isSoldOut:!1,isRequired:!1,isUnlimited:!1,quantitySelector:1,hasSpecialNotes:!1,termsAndConditions:null,subProducts:[],images:null,productCategory:null,uuid:"beb6393c-2fdd-40f7-bb92-8800685b203a"}]})))))))),rightBlock:r.createElement(g.PageBody.RightBlock,{bottomBlock:r.createElement(f.BookingSummaryFooter,null)},r.createElement(q.SettingButton,{view:"pageBodyRightBlock",onClick:V,containerClassName:"snippet-template-button-fixed-height",className:"m-0"}),r.createElement(d.BookingSummary.Accordion,{showTitleOnlyOnMobile:!0},r.createElement(s.IframeEventCard,{imageSrc:"https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80",title:"XXXX",type:"Party Doors 22:00 - 03:00",cost:6,date:"Sat 2nd May",goToDetails:function(){return null},shortDate:"07/03/2023"})))})))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),a=require("react"),r=(e=a)&&"object"==typeof e&&"default"in e?e.default:e,n=require("react-router-dom"),i=require("react-i18next"),o=require("react-bootstrap"),s=require("../context/snippetTemplate.js"),m=require("../context/snippetTemplateView.js"),l=require("@licklist/core/dist/DataMapper/Provider/SnippetDataMapper");require("../../../calendar/components/CalendarSelect/CalendarSelect.js");var c=require("../../../calendar/Calendar.js"),u=require("../../../calendar/utils/index.js"),d=require("../../../iframe/event/event-card/IframeEventCard.js");require("../../../iframe/event/event-card/IframeEventCardSkeleton.js");var p=require("../settings/SettingButton.js"),v=require("../../../iframe/order-process/components/Timer/Timer.js"),f=require("../../../iframe/order-process/components/NavigationSteps/NavigationSteps.js");require("../../../iframe/powered-by/PoweredBy.js");var E=require("../../../iframe/page/Page.js"),g=require("../../../iframe/page/components/PageBody/PageBody.js");require("../../../iframe/back-button/BackButton.js");var y=require("../../../iframe/page/components/PageHeader/PageHeader.js");require("../../../iframe/event/event-booking-form/EventBookingForm.js"),require("../../../iframe/event/event-booking-view/EventBookingView.js"),require("../../../iframe/event/ticket-description/TicketDescription.js"),require("../../../iframe/event/event-tables/EventTables.js"),require("../../../iframe/event/event-order-summary/EventOrderSummary.js"),require("../../../iframe/event/event-booking-products/EventBookingProducts.js"),require("../../../iframe/event/event-order-short-summary/EventOrderShortSummary.js"),require("../../../iframe/order-process/components/NavigationFooter/NavigationFooter.js"),require("../../../iframe/event/event-description/EventDescription.js");var b=require("../../../iframe/event/event-product-sets/EventProductSets.js");require("../../../iframe/event/event-step-venue-map-zones/EventStepVenueMapZones.js");var N=require("../../../iframe/event/event-venue-map/IframeEventVenueMap.js");require("../../../iframe/payment/payment-form/PaymentForm.js"),require("../../../iframe/payment/order-items-table/OrderItemsTable.js"),require("../../../iframe/payment/payment-status-header/PaymentStatusHeader.js");var S=require("../../../iframe/order-process/components/BookingSummary/BookingSummary.js");require("../../../iframe/order-process/components/PaymentCard/PaymentCard.js");var C=require("../../../iframe/order-process/components/BookingSummaryFooter/BookingSummaryFooter.js"),q=require("../../../iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.js");require("../../../iframe/order-process/components/ErrorModal/ErrorModal.js"),require("../../../iframe/order-process/components/utils/useCategoryVerification.js"),require("../../../iframe/order-process/components/CalendarStepsForm/CalendarStepsForm.js"),require("../../../iframe/payment/payment-page/PaymentPage.js"),require("../../../iframe/payment/payment-status-page/PaymentStatusPage.js"),require("../../../iframe/activity-card/ActivityCard.js"),require("../../../iframe/custom-fields/components/CustomDateField.js");exports.Preview=function(e){var h=e.onSettingClick,B=e.providerHasMap,j=void 0!==B&&B,k=i.useTranslation("Design").t,P=t.__read(a.useState(0),2),w=P[0],x=P[1],I=t.__read(a.useState(0),2),T=I[0],D=I[1],A=a.useContext(m.SnippetTemplateViewContext).setView,M=a.useContext(s.SnippetTemplateContext).template.type,_=void 0===M?l.SNIPPET_TYPE_EVENT_LIST:M,V=function(e){A(e),h()},F=t.__read(a.useState(c.defaultStartDay),2),H=F[0],X=F[1],O=t.__read(a.useState(null),2),U=O[0],Q=O[1],R=u.getMonthCalendarDates(H);return r.createElement("div",{className:"w-100 h-100 snippet-template-preview"},r.createElement(E.Page,{headerBlock:r.createElement("div",{className:"d-flex mt-5 pt-5 p-5 iframe-page snippet-template-additional-header"},r.createElement(p.SettingButton,{view:"pageHeaderSteps",onClick:V,className:"m-0"},r.createElement(p.SettingButton,{view:"pageHeader",onClick:V,className:"m-0 snippet-template-button-left",containerClassName:"mr-5 asd"}),r.createElement("div",{className:"header-block mt-5 pt-5"},r.createElement("div",{className:"mt-5 pt-5 external-header"},r.createElement(y.PageHeader,{showCloseButton:!0,showBackButton:!0},r.createElement(v.Timer,{timer:600}),r.createElement(n.MemoryRouter,{initialEntries:["/step1","/step2"]},r.createElement(f.NavigationSteps,{steps:[{pathname:"/step1",key:"/step1",name:"Burger"},{pathname:"/step2",key:"/step2",name:"Cheese"}]})))))))},r.createElement("div",{className:"page-body pb-5 mb-5 pt-3 mt-3"},r.createElement(p.SettingButton,{view:"page",onClick:V,className:"snippet-template-body-button"})),r.createElement(g.PageBody,{className:"snippet-template",leftBlock:r.createElement(p.SettingButton,{view:"pageBodyLeftBlock",onClick:V,className:"mr-4"},r.createElement(g.PageBody.LeftBlock,{title:"About this event"},r.createElement(p.SettingButton,{view:"elements",onClick:V,className:"mt-5 m-0",containerClassName:"mt-5 pt-5"},r.createElement("div",{className:"mt-3"},r.createElement("h3",null,k("elements"))),r.createElement("div",{className:"mt-5"},r.createElement("h4",null,k("Texts")),r.createElement("p",null,"XXXX")),r.createElement("div",{className:"mt-5"},r.createElement("h4",null,k("form")),r.createElement("div",{className:"d-flex flex-column w-100"},r.createElement("div",{className:"w-100"},r.createElement("div",{className:"form-row"},r.createElement("div",{className:"form-group col-12"},r.createElement("label",{className:"form-label"},k("firstName")),r.createElement("input",{type:"text",className:"form-control",placeholder:k("firstName")}))),r.createElement("div",{className:"form-row"},r.createElement("button",{type:"button",className:"btn btn-link"},k("iHaveAccount")))))),r.createElement("div",{className:"mt-5"},r.createElement("h4",null,k("Number input")),r.createElement("div",{className:"d-flex flex-column w-100"},r.createElement(q.NumberInput,{value:w,onChange:function(e){return x(e)},onArrowDown:function(){return x((function(e){return e-1}))},onArrowUp:function(){return x((function(e){return e+1}))}}))),r.createElement("div",{className:"mt-5"},r.createElement("h4",null,k("Dropdown")),r.createElement("div",{className:"d-flex flex-column w-100"},r.createElement("div",{className:"w-100"},r.createElement("div",{className:"form-row"},r.createElement("div",{className:"form-group col-12"},r.createElement("label",{className:"form-label"},k("dayOfBirthShort")),r.createElement("select",{className:"form-control",placeholder:k("firstName")},r.createElement("option",null,"2022"),r.createElement("option",null,"2023"))))))),r.createElement("div",{className:"mt-5 snippet-template__form"},r.createElement("h4",null,k("Button")),r.createElement("div",{className:"d-flex flex-column w-100"},r.createElement(o.Button,{size:"sm"},"Submit")))),j&&_===l.SNIPPET_TYPE_VENUE_MAP&&r.createElement(r.Fragment,null,r.createElement("div",{className:"pt-4"},r.createElement("h4",null,k("Calendar")),r.createElement(p.SettingButton,{view:"calendar",onClick:V,className:"mt-3 m-0",containerClassName:"mt-5 pt-5"},r.createElement(c.Calendar,{currentDate:H,setCurrentDate:X,selectedDate:U,setSelectedDate:Q,calendarDates:R,getDateTimeButtonProps:function(){return{isDisabled:!1}}}))),r.createElement("div",{className:"pt-4"},r.createElement(p.SettingButton,{view:"productSet",onClick:V,className:"mt-3 m-0",containerClassName:"mt-5 pt-5"},r.createElement("h4",null,k("Product Sets")),r.createElement("div",{className:"pt-5 mt-5"},r.createElement(b.EventProductSets,{productSets:[{id:1,name:"Test 1"},{id:2,name:"Test 2"},{id:3,name:"Test 3"}],onSelectProductSet:D,selectedProductSetId:T})))),r.createElement("div",{className:"pt-4"},r.createElement("form",{className:"category-steps-form pt-4 mt-4"},r.createElement("h4",null,k("Venue Map")),r.createElement("div",{className:"position-relative pt-4 mt-4"},r.createElement(p.SettingButton,{view:"venueMap",onClick:V,className:"mt-n6 m-0",containerClassName:"mt-5 pt-5"},r.createElement(N.IframeEventVenueMap,{url:"https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s",usedInIframe:!0,pointProducts:[{id:9,menuStepId:75,pointId:21,productUuid:"beb6393c-2fdd-40f7-bb92-8800685b203f"},{id:10,menuStepId:75,pointId:24,productUuid:"beb6393c-2fdd-40f7-bb92-8800685b203a"}],points:[{id:21,venueMapId:7,createdAt:null,updatedAt:null,deletedAt:null,xCoordinate:799.39,yCoordinate:1108.45},{id:24,venueMapId:7,createdAt:null,updatedAt:null,deletedAt:null,xCoordinate:1400.2,yCoordinate:1431.77}],choosedProductUuids:["beb6393c-2fdd-40f7-bb92-8800685b203f"],products:[{id:148,productCategoryId:57,productGroupId:null,availableQuantity:980,zoneId:null,name:"Cofee",description:"",price:15,deposit:0,minQuantity:1,maxQuantity:15,totalQuantity:980,type:"sale",capacity:0,duration:0,weight:0,isAvailable:!0,isSoldOut:!1,isRequired:!1,isUnlimited:!1,quantitySelector:1,hasSpecialNotes:!1,termsAndConditions:null,subProducts:[],images:null,productCategory:null,uuid:"beb6393c-2fdd-40f7-bb92-8800685b203f"},{id:149,productCategoryId:57,productGroupId:null,availableQuantity:980,zoneId:null,name:"Cofee 2",description:"",price:15,deposit:0,minQuantity:1,maxQuantity:15,totalQuantity:980,type:"sale",capacity:0,duration:0,weight:0,isAvailable:!0,isSoldOut:!1,isRequired:!1,isUnlimited:!1,quantitySelector:1,hasSpecialNotes:!1,termsAndConditions:null,subProducts:[],images:null,productCategory:null,uuid:"beb6393c-2fdd-40f7-bb92-8800685b203a"}]})))))))),rightBlock:r.createElement(g.PageBody.RightBlock,{bottomBlock:r.createElement(C.BookingSummaryFooter,null)},r.createElement(p.SettingButton,{view:"pageBodyRightBlock",onClick:V,containerClassName:"snippet-template-button-fixed-height",className:"m-0"}),r.createElement(S.BookingSummary.Accordion,{showTitleOnlyOnMobile:!0},r.createElement(d.IframeEventCard,{imageSrc:"https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80",title:"XXXX",type:"Party Doors 22:00 - 03:00",cost:6,date:"Sat 2nd May",goToDetails:function(){return null},shortDate:"07/03/2023"})))})))};

package/dist/striped-static-table/StripedStaticTable.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),a=require("react"),r=(e=a)&&"object"==typeof e&&"default"in e?e.default:e;require("../table/MenuButton.js"),require("../table/FilterHelperComponent.js"),require("../table/PaginationHelperComponent.js"),require("../table/PerPageHelperComponent.js");var l=require("../table/StaticTable.js");require("../table/TableHelperComponent.js"),require("../table/ReactTableHelperComponent.js");exports.StripedStaticTable=function(e){var a=e.columns,n=e.className,s=void 0===n?"":n,i=e.data,o=t.__rest(e,["columns","className","data"]),c=i.map((function(e){return e.map((function(e,a,l){var n=l.length;return Object.fromEntries(Object.entries(e).map((function(e){var l=t.__read(e,2),s=l[0],i=l[1];return"key"===s?[s,i]:0===a?[s,r.createElement("div",{key:s,className:"bold header-row"},i)]:a===n-1?[s,r.createElement("div",{key:s,className:"bold"},i)]:[s,i]})))}))})).flat();return r.createElement(l.StaticTable,t.__assign({columns:a,data:c,className:"striped-static-table ".concat(s),displayHeader:!1},o))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),a=require("react"),r=(e=a)&&"object"==typeof e&&"default"in e?e.default:e;require("../table/MenuButton.js");var l=require("../table/StaticTable.js");require("../table/FilterHelperComponent.js"),require("../table/PaginationHelperComponent.js"),require("../table/PerPageHelperComponent.js"),require("../table/TableHelperComponent.js"),require("../table/ReactTableHelperComponent.js");exports.StripedStaticTable=function(e){var a=e.columns,n=e.className,s=void 0===n?"":n,i=e.data,o=t.__rest(e,["columns","className","data"]),c=i.map((function(e){return e.map((function(e,a,l){var n=l.length;return Object.fromEntries(Object.entries(e).map((function(e){var l=t.__read(e,2),s=l[0],i=l[1];return"key"===s?[s,i]:0===a?[s,r.createElement("div",{key:s,className:"bold header-row"},i)]:a===n-1?[s,r.createElement("div",{key:s,className:"bold"},i)]:[s,i]})))}))})).flat();return r.createElement(l.StaticTable,t.__assign({columns:a,data:c,className:"striped-static-table ".concat(s),displayHeader:!1},o))};

package/dist/styles/iframe-order-process/IframeOrderProcess.scss

@@ -46,9 +46,8 @@
     color: $snippet-page-header-steps-body-color;
     transition: $color-transition;
     margin-left: 0.5rem;
-    width: 6rem;
     word-break: break-word;
-    font-size: 0.75rem;
+    font-size: 0.875rem;
 
     @include media-breakpoint-down(sm) {
       display: none;
@@ -62,6 +61,31 @@
   font-weight: 400;
   font-size: 0.875rem;
 
+  .payment-page-toggle {
+    p {
+      font-size: 1rem;
+      font-weight: 600;
+    }
+    .price {
+      font-weight: 700;
+    }
+  }
+
+  .payment-metadata {
+    font-weight: 500;
+  }
+
+  .total {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    div {
+      font-size: 1rem;
+      font-weight: 700;
+    }
+  }
+
   b {
     display: block;
     font-size: 1rem;
@@ -113,6 +137,15 @@
 
   .cart-items {
     font-weight: 400;
+    margin-bottom: 1.4rem;
+    border-bottom: 2px solid $separator-color;
+
+    .people {
+      margin-bottom: 0;
+      p {
+        margin-bottom: 0;
+      }
+    }
 
     .empty-cart {
       margin: 1rem 0;
@@ -125,8 +158,11 @@
     }
 
     .products-by-menu-step {
+      margin-top: 1.4rem;
+      font-size: 0.875rem;
       .title {
-        font-weight: 500;
+        font-size: 1rem;
+        font-weight: 600;
       }
 
       .categories {
@@ -136,8 +172,8 @@
       }
 
       .products {
-        margin-top: 0.5rem;
-
+        margin-top: 1.4rem;
+        font-size: 0.875rem;
         .product {
           margin: 0.5rem 0;
 
@@ -148,6 +184,15 @@
               margin-bottom: 0.5rem;
             }
           }
+
+          .name {
+            font-weight: 600;
+          }
+
+          .price {
+            font-weight: 400;
+            font-size: 0.875rem;
+          }
         }
 
         &:not(:last-child) {
@@ -168,6 +213,12 @@
         margin: 0 0 0.5rem;
 
         .title {
+          font-size: 1rem;
+          font-weight: 600;
+        }
+
+        .metadata {
+          font-size: 0.95rem;
           font-weight: 600;
         }
       }
@@ -181,19 +232,7 @@
   }
 
   hr {
-    margin: 0;
-    border-width: 2px;
-    border-color: $separator-color;
-  }
-
-  .products {
-    font-size: 0.75rem;
-
-    .product {
-      .name {
-        font-weight: 500;
-      }
-    }
+    margin-bottom: 1.5rem;
   }
 }
 

package/dist/styles/iframe-page/PageBody.scss

@@ -1,3 +1,4 @@
+// TODO when all iframe pages will be ready, think how we can combine it all in page-body style
 .page-body {
   display: flex;
   background-color: transparent;
@@ -77,7 +78,7 @@
   }
 
   .right-block {
-    height: calc(100% - 1rem);
+    height: 100%;
     max-width: 17.5rem;
     min-width: 17.5rem;
     width: 100%;

package/dist/styles/ryft-payment-form/RyftPaymentForm.scss

@@ -1,10 +1,52 @@
 .payment_link {
+  padding: 0 0 1rem 0;
+
+  .button-wrapper {
+    top: 2rem;
+    right: 2rem;
+    position: absolute;
+    z-index: 100;
+  }
+
   .page-body {
+    padding: 0;
+    height: calc(100vh - 2rem) !important;
+
+    .navigation {
+      display: block;
+      @include media-breakpoint-down(sm) {
+        padding: 0;
+      }
+    }
+
+    .right-block {
+      margin-left: 0;
+      height: calc(100vh - 2rem);
+      max-height: calc(100vh - 1rem);
+      @include media-breakpoint-down(sm) {
+        width: calc(100% - 2rem);
+        max-width: unset;
+        position: inherit;
+        overflow: visible;
+        margin: 0 1rem 1rem;
+        height: unset;
+        min-height: unset;
+        max-height: 100%;
+      }
+    }
+
     .left-block {
       .left-block-container {
         position: relative;
         max-height: 100%;
 
+        .payment-title {
+          font-size: 0.875rem;
+          font-weight: 600;
+          align-items: center;
+          margin-left: 0.5rem;
+        }
+
         .ryft-payment-form {
           .submit-button-wrapper {
             margin: -1rem 0 1rem;
@@ -13,7 +55,55 @@
               width: 100%;
             }
           }
+          #mobile-pay-divider-container {
+            display: flex;
+            position: relative;
+            margin-bottom: 1rem;
+            #mobile-pay-divider-text {
+              margin-right: 1rem;
+              font-size: 0.875rem;
+              font-weight: 600;
+            }
+            #mobile-pay-divider {
+              width: 100%;
+              border-bottom: 1px #dfdfdf solid;
+              margin-bottom: 0.6rem;
+            }
+          }
 
+          #card-title-container {
+            height: auto;
+            border: none;
+            margin-bottom: 0.5rem;
+            text-align: left;
+            :first-child {
+              font-size: 1rem;
+              font-weight: 600;
+              margin-bottom: 1rem;
+            }
+
+            .form-label {
+              margin-bottom: 0.5rem;
+            }
+          }
+          .mobile-pay-title {
+            display: block;
+            font-weight: 600;
+            font-size: 1rem;
+            color: black;
+            padding: 0;
+            font-style: normal;
+            font-family: inherit;
+            margin-bottom: 1rem;
+          }
+        }
+        .form {
+          .input {
+            border: 2px solid #525252 !important;
+          }
+        }
+
+        .ryft-payment-form {
           @include media-breakpoint-up(md) {
             .submit-button-wrapper {
               max-width: 15.5rem;
@@ -22,10 +112,9 @@
 
           // it's style for Google and Apple pay container, for unknown reasons we can't move this html elements with appendChild or replaceChild
           .ryft-pay-grid {
-            position: absolute !important;
-            top: 10rem;
             width: 100%;
             max-width: 15.5rem;
+            margin-bottom: 1rem;
           }
           .ryft-pay-apple-pay-button {
             border-radius: 0.25rem;
@@ -36,6 +125,36 @@
           display: none !important;
         }
       }
+      @include media-breakpoint-down(sm) {
+        .left-block-container {
+          max-height: 100%;
+          overflow: visible;
+        }
+      }
+    }
+
+    @include media-breakpoint-down(sm) {
+      flex-direction: column-reverse;
+      overflow: scroll;
+
+      @include media-breakpoint-down(sm) {
+        .left-block {
+          min-height: 100%;
+        }
+        .right-block {
+          margin: 0 auto;
+          width: 100%;
+          .children-wrapper {
+            .accordion {
+              .collapse {
+                overflow: visible;
+                overflow-x: unset;
+                scrollbar-width: unset;
+              }
+            }
+          }
+        }
+      }
     }
   }
   ::-webkit-scrollbar {
@@ -62,3 +181,7 @@
     }
   }
 }
+
+#ryft-threeDSMethodIframe {
+  display: none;
+}

package/dist/venue-map-sets/form/components/VenueMapImageControl.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 a=require("tslib"),n=require("react"),t=e(n),l=require("react-i18next"),i=require("react-bootstrap"),o=require("react-hook-form"),r=e(require("@licklist/plugins/dist/services/Form/HookFormService")),s=require("lodash"),u=require("@licklist/plugins/dist/hooks/Media/useImages"),c=require("@licklist/core/dist/DataMapper/Media/ImageDataMapper"),d=require("../../../file-upload/FileUpload.js"),m=require("../../../modals/fullscreen/FullscreenModal.js"),g=require("../../../events/event-venue-map/EventVenueMap.js");exports.VenueMapImageControl=function(e){var p,v=e.index,f=l.useTranslation("Design").t,M=o.useFormContext(),E=M.watch,I=M.setValue,b=M.formState.errors,F=M.clearErrors,q=E("venueMaps.".concat(v)),h=u.useImages(null),_=h.images,k=h.handleImageRemove,C=h.handleImageUploading,j=h.isLoading,U=h.setImages,w=n.useCallback((function(e){return a.__awaiter(void 0,void 0,void 0,(function(){var n;return a.__generator(this,(function(a){switch(a.label){case 0:return[4,C(e,c.IMAGE_TYPE_IMAGE)];case 1:return(n=a.sent())?(I("venueMaps.".concat(v,".localImageBlobURL"),n[0]),[2]):[2]}}))}))}),[C]),x=n.useCallback((function(e,a){k(e,a),I("venueMaps.".concat(v,".localImageBlobURL"),void 0)}),[k]),L=n.useCallback((function(e){I("venueMaps.".concat(v,".points"),e)}),[]);n.useEffect((function(){q&&q.image&&U([a.__assign(a.__assign({},q.image),{url:q.image.url||(null==q?void 0:q.localImageBlobURL)})])}),[null==q?void 0:q.image]),n.useEffect((function(){s.isEqual(_[0],null==q?void 0:q.image)||(I("venueMaps.".concat(v,".image"),_[0]||null),_[0]&&F("venueMaps.".concat(v,".image")))}),[_]);var R=(null===(p=null==q?void 0:q.image)||void 0===p?void 0:p.url)||(null==q?void 0:q.localImageBlobURL);return t.createElement(i.Col,{sm:"6",md:"6"},t.createElement(i.Form.Group,{controlId:"name"},t.createElement(i.Form.Control,{isInvalid:r.isInvalid("venueMaps.".concat(v,".image"),b),hidden:!0}),t.createElement(d.FileUpload,{onFilesChange:w,allowedExtensions:["jpeg","jpg","png"],subTitle:".jpeg    .jpg    .png",enablePreview:!0,onFileRemove:x,defaultFiles:_,isLoading:j,withIcon:!0,title:f("Design:addImage")}),t.createElement(i.Form.Control.Feedback,{type:"invalid"},r.getErrors("venueMaps.".concat(v,".image"),b))),!!R&&t.createElement(m.FullscreenModal,{content:t.createElement(t.Fragment,null,t.createElement(g.EventVenueMap,{url:R,name:null==q?void 0:q.name,points:null==q?void 0:q.points,onPointsChange:L,editMode:!0}))},(function(e){return t.createElement(i.Button,{onClick:e,className:"pt-3"},f("addPoints"))})))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var a=require("tslib"),n=require("react"),t=e(n),l=require("react-i18next"),i=require("react-bootstrap"),o=require("react-hook-form"),r=e(require("@licklist/plugins/dist/services/Form/HookFormService")),s=require("lodash"),u=require("@licklist/plugins/dist/hooks/Media/useImages"),c=require("@licklist/core/dist/DataMapper/Media/ImageDataMapper"),d=require("../../../file-upload/FileUpload.js"),m=require("../../../events/event-venue-map/EventVenueMap.js"),g=require("../../../modals/fullscreen/FullscreenModal.js");exports.VenueMapImageControl=function(e){var p,v=e.index,f=l.useTranslation("Design").t,M=o.useFormContext(),E=M.watch,I=M.setValue,b=M.formState.errors,F=M.clearErrors,q=E("venueMaps.".concat(v)),h=u.useImages(null),_=h.images,k=h.handleImageRemove,C=h.handleImageUploading,j=h.isLoading,U=h.setImages,w=n.useCallback((function(e){return a.__awaiter(void 0,void 0,void 0,(function(){var n;return a.__generator(this,(function(a){switch(a.label){case 0:return[4,C(e,c.IMAGE_TYPE_IMAGE)];case 1:return(n=a.sent())?(I("venueMaps.".concat(v,".localImageBlobURL"),n[0]),[2]):[2]}}))}))}),[C]),x=n.useCallback((function(e,a){k(e,a),I("venueMaps.".concat(v,".localImageBlobURL"),void 0)}),[k]),L=n.useCallback((function(e){I("venueMaps.".concat(v,".points"),e)}),[]);n.useEffect((function(){q&&q.image&&U([a.__assign(a.__assign({},q.image),{url:q.image.url||(null==q?void 0:q.localImageBlobURL)})])}),[null==q?void 0:q.image]),n.useEffect((function(){s.isEqual(_[0],null==q?void 0:q.image)||(I("venueMaps.".concat(v,".image"),_[0]||null),_[0]&&F("venueMaps.".concat(v,".image")))}),[_]);var R=(null===(p=null==q?void 0:q.image)||void 0===p?void 0:p.url)||(null==q?void 0:q.localImageBlobURL);return t.createElement(i.Col,{sm:"6",md:"6"},t.createElement(i.Form.Group,{controlId:"name"},t.createElement(i.Form.Control,{isInvalid:r.isInvalid("venueMaps.".concat(v,".image"),b),hidden:!0}),t.createElement(d.FileUpload,{onFilesChange:w,allowedExtensions:["jpeg","jpg","png"],subTitle:".jpeg    .jpg    .png",enablePreview:!0,onFileRemove:x,defaultFiles:_,isLoading:j,withIcon:!0,title:f("Design:addImage")}),t.createElement(i.Form.Control.Feedback,{type:"invalid"},r.getErrors("venueMaps.".concat(v,".image"),b))),!!R&&t.createElement(g.FullscreenModal,{content:t.createElement(t.Fragment,null,t.createElement(m.EventVenueMap,{url:R,name:null==q?void 0:q.name,points:null==q?void 0:q.points,onPointsChange:L,editMode:!0}))},(function(e){return t.createElement(i.Button,{onClick:e,className:"pt-3"},f("addPoints"))})))};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.58.6-dev.0",
+  "version": "0.58.6-dev.10",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -16,14 +16,11 @@
     "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"
@@ -53,9 +50,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.1-dev.3 < 0.23.1",
-    "@licklist/eslint-config": "0.3.4",
-    "@licklist/plugins": ">=0.27.1-dev.0 < 0.27.1",
+    "@licklist/core": ">=0.23.1-dev.4 < 0.23.1",
+    "@licklist/eslint-config": "0.4.5",
+    "@licklist/plugins": ">=0.27.2-dev.0 < 0.27.2",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
     "@react-aria/utils": "3.9.0",
@@ -73,10 +70,6 @@
     "@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",
@@ -99,14 +92,10 @@
     "@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",
@@ -116,7 +105,6 @@
     "@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",
@@ -128,21 +116,16 @@
     "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",
@@ -150,18 +133,18 @@
     "luxon": "1.26.0",
     "moment": "2.29.1",
     "prettier": "2.5.1",
-    "react": "16.14.0",
+    "react": "17.0.2",
     "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": "16.14.0",
+    "react-dom": "17.0.2",
     "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": "16.13.0-6",
+    "react-konva": "^17.0.2-6",
     "react-loader": "2.4.7",
     "react-loading-skeleton": "^3.3.1",
     "react-overlays": "4.1.1",
@@ -186,7 +169,6 @@
     "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",
@@ -194,24 +176,17 @@
   },
   "resolutions": {
     "@types/react": "17.0.2",
-    "@types/react-dom": "17.0.1"
-  },
-  "jest": {
-    "setupFilesAfterEnv": [
-      "./jest.config.js"
-    ],
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ]
+    "@types/react-dom": "17.0.2"
   },
   "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/assets/iframe/calendar.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C3.44772 0 3 0.447715 3 1H1C0.447715 1 0 1.44772 0 2V4H16V2C16 1.44772 15.5523 1 15 1H13C13 0.447715 12.5523 0 12 0C11.4477 0 11 0.447715 11 1H5C5 0.447715 4.55228 0 4 0ZM16 6C16 5.44772 15.5523 5 15 5H1C0.447715 5 0 5.44772 0 6V12C0 13.6569 1.34315 15 3 15H13C14.6569 15 16 13.6569 16 12V6ZM2 7H14V12C14 12.5523 13.5523 13 13 13H3L2.88338 12.9933C2.38604 12.9355 2 12.5128 2 12V7ZM10.5 9C10.2239 9 10 9.22386 10 9.5V11.5C10 11.7761 10.2239 12 10.5 12H12.5C12.7761 12 13 11.7761 13 11.5V9.5C13 9.22386 12.7761 9 12.5 9H10.5Z" fill="#979797"/>
+<svg width="16" height="15" viewBox="0 0 16 15" fill="#979797" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C3.44772 0 3 0.447715 3 1H1C0.447715 1 0 1.44772 0 2V4H16V2C16 1.44772 15.5523 1 15 1H13C13 0.447715 12.5523 0 12 0C11.4477 0 11 0.447715 11 1H5C5 0.447715 4.55228 0 4 0ZM16 6C16 5.44772 15.5523 5 15 5H1C0.447715 5 0 5.44772 0 6V12C0 13.6569 1.34315 15 3 15H13C14.6569 15 16 13.6569 16 12V6ZM2 7H14V12C14 12.5523 13.5523 13 13 13H3L2.88338 12.9933C2.38604 12.9355 2 12.5128 2 12V7ZM10.5 9C10.2239 9 10 9.22386 10 9.5V11.5C10 11.7761 10.2239 12 10.5 12H12.5C12.7761 12 13 11.7761 13 11.5V9.5C13 9.22386 12.7761 9 12.5 9H10.5Z" />
 </svg>

package/src/assets/iframe/ticket.svg

@@ -1,3 +1,3 @@
-<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.00002C18 0.89543 17.1046 0 16 0H2C0.89543 0 0 0.89543 0 2L0.000956201 4.35567C0.00105503 4.59911 0.0899525 4.83415 0.250979 5.01672C0.731269 5.56128 1 6.25846 1 7C1 7.74154 0.731269 8.43872 0.250979 8.98328C0.0899525 9.16585 0.00105503 9.4009 0.000956201 9.64433L0 11.9996C0 13.1046 0.89543 14 2 14H16C17.1046 14 18 13.1046 18 12L17.9999 9.64574C17.9999 9.40205 17.9109 9.16675 17.7497 8.98404C17.269 8.43938 17 7.7419 17 7C17 6.2581 17.269 5.56062 17.7497 5.01596C17.9109 4.83325 17.9999 4.59795 17.9999 4.35426L18 2.00002ZM2.07187 4.09764L2 4.002L1.999 2H5C5 2.55228 5.44772 3 6 3C6.55228 3 7 2.55228 7 2H16L15.999 4.002L15.929 4.09646C15.3306 4.93393 15 5.94228 15 7L15.0069 7.26333C15.057 8.22459 15.3805 9.13586 15.929 9.90354L15.999 9.997L16 12H7C7 11.4477 6.55228 11 6 11C5.44772 11 5 11.4477 5 12H2V9.996L2.07187 9.90236C2.66972 9.06511 3 8.05722 3 7C3 5.94278 2.66972 4.93489 2.07187 4.09764ZM6 6C6.55228 6 7 5.55228 7 5C7 4.44772 6.55228 4 6 4C5.44772 4 5 4.44772 5 5C5 5.55228 5.44772 6 6 6ZM7 9C7 9.55229 6.55228 10 6 10C5.44772 10 5 9.55229 5 9C5 8.44771 5.44772 8 6 8C6.55228 8 7 8.44771 7 9Z" fill="#979797"/>
+<svg width="18" height="14" viewBox="0 0 18 14" fill="#979797" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.00002C18 0.89543 17.1046 0 16 0H2C0.89543 0 0 0.89543 0 2L0.000956201 4.35567C0.00105503 4.59911 0.0899525 4.83415 0.250979 5.01672C0.731269 5.56128 1 6.25846 1 7C1 7.74154 0.731269 8.43872 0.250979 8.98328C0.0899525 9.16585 0.00105503 9.4009 0.000956201 9.64433L0 11.9996C0 13.1046 0.89543 14 2 14H16C17.1046 14 18 13.1046 18 12L17.9999 9.64574C17.9999 9.40205 17.9109 9.16675 17.7497 8.98404C17.269 8.43938 17 7.7419 17 7C17 6.2581 17.269 5.56062 17.7497 5.01596C17.9109 4.83325 17.9999 4.59795 17.9999 4.35426L18 2.00002ZM2.07187 4.09764L2 4.002L1.999 2H5C5 2.55228 5.44772 3 6 3C6.55228 3 7 2.55228 7 2H16L15.999 4.002L15.929 4.09646C15.3306 4.93393 15 5.94228 15 7L15.0069 7.26333C15.057 8.22459 15.3805 9.13586 15.929 9.90354L15.999 9.997L16 12H7C7 11.4477 6.55228 11 6 11C5.44772 11 5 11.4477 5 12H2V9.996L2.07187 9.90236C2.66972 9.06511 3 8.05722 3 7C3 5.94278 2.66972 4.93489 2.07187 4.09764ZM6 6C6.55228 6 7 5.55228 7 5C7 4.44772 6.55228 4 6 4C5.44772 4 5 4.44772 5 5C5 5.55228 5.44772 6 6 6ZM7 9C7 9.55229 6.55228 10 6 10C5.44772 10 5 9.55229 5 9C5 8.44771 5.44772 8 6 8C6.55228 8 7 8.44771 7 9Z" />
 </svg>

package/src/calendar/Calendar.stories.tsx

@@ -38,3 +38,26 @@ Default.args = {
     isDisabled: false,
   }),
 };
+
+export const Loading: Story<CalendarProps> = (args) => {
+  return (
+    <div style={{ backgroundColor: "white" }}>
+      <Calendar {...args} />
+    </div>
+  );
+};
+
+Loading.args = {
+  isLoading: true,
+  fromPrice: "from £10",
+  selectedDate: null,
+  setSelectedDate: () => null,
+  calendarDates: getMonthCalendarDates(now),
+  currentDate: now,
+  getDateTimeButtonProps: () => ({
+    resources: [],
+    showResources: false,
+    shouldCalculateResources: false,
+    isDisabled: false,
+  }),
+};

package/src/calendar/Calendar.tsx

@@ -3,6 +3,7 @@ import { DateTime } from "luxon";
 import { DateTimeButtonProps } from "src/date-time-button";
 import { CalendarButtons } from "./components/CalendarButtons";
 import { CalendarDates } from "./components/CalendarDates";
+import { LoaderIndicator } from "../static";
 
 export const defaultStartDay = DateTime.now().set({
   millisecond: 0,
@@ -28,15 +29,14 @@ export type CalendarProps = {
   >;
 };
 
-export const Calendar = ({
-  initialDate = defaultStartDay,
-  ...props
-}: CalendarProps) => {
+export const Calendar = (props: CalendarProps) => {
+  const { initialDate = defaultStartDay, isLoading } = props;
   return (
     <div className="calendar-wrapper">
       <div className="calendar">
         <CalendarButtons initialDate={initialDate} {...props} />
-        <CalendarDates {...props} />
+
+        {isLoading ? <LoaderIndicator /> : <CalendarDates {...props} />}
       </div>
     </div>
   );

package/src/calendar/components/CalendarDates/CalendarDates.tsx

@@ -6,7 +6,6 @@ import { CalendarProps } from "../../Calendar";
 
 export type CalendarDatesProps = Pick<
   CalendarProps,
-  | "isLoading"
   | "calendarDates"
   | "selectedDate"
   | "setSelectedDate"
@@ -15,7 +14,6 @@ export type CalendarDatesProps = Pick<
 >;
 
 export const CalendarDates = ({
-  isLoading = false,
   calendarDates,
   selectedDate,
   setSelectedDate,
@@ -48,12 +46,9 @@ export const CalendarDates = ({
 
           const props = getDateTimeButtonProps(date);
 
-          const isDisabled = isLoading || props.isDisabled;
-
           return (
             <DateTimeButton
               key={+date}
-              isDisabled={isDisabled}
               isSelected={
                 selectedDate ? date.hasSame(selectedDate, "day") : undefined
               }