@licklist/design 0.44.485-dev.71 → 0.44.485-dev.74

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"),o=require("react-i18next"),i=require("react-bootstrap");require("../../../iframe/event/event-booking-form/EventBookingForm.js"),require("../../../iframe/event/event-booking-view/EventBookingView.js");var m=require("../../../iframe/event/event-card/IframeEventCard.js");require("../../../iframe/event/event-card/IframeEventCardSkeleton.js"),require("../../../iframe/event/ticket-description/TicketDescription.js");var s=require("../../../iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.js");require("../../../iframe/event/event-details/EventDetails.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 l=require("../../../iframe/event/event-product-sets/EventProductSets.js");require("../../../iframe/event/event-calendar/components/CalendarSelect/CalendarSelect.js");var c=require("../../../iframe/event/event-calendar/EventCalendar.js");require("../../../iframe/event/event-step-venue-map-zones/EventStepVenueMapZones.js");var u=require("../../../iframe/event/event-venue-map/IframeEventVenueMap.js");require("../../../iframe/payment/payment-form/PaymentForm.js"),require("../../../iframe/payment/order-items-table/OrderItemsTable.js");var d=require("../context/snippetTemplate.js"),p=require("../../../iframe/page/components/PageHeader/PageHeader.js");require("../../../iframe/payment/payment-status-header/PaymentStatusHeader.js");var v=require("../../../iframe/order-process/components/BookingSummary/BookingSummary.js"),f=require("../../../iframe/order-process/components/NavigationSteps/NavigationSteps.js"),E=require("../../../iframe/order-process/components/Timer/Timer.js");require("../../../iframe/order-process/components/PaymentCard/PaymentCard.js");var g=require("../../../iframe/order-process/components/BookingSummaryFooter/BookingSummaryFooter.js");require("../../../iframe/order-process/components/ErrorModal/ErrorModal.js");var y=require("../../../iframe/page/components/PageBody/PageBody.js");require("../../../iframe/order-process/components/utils/useCategoryVerification.js"),require("../../../iframe/order-process/components/CalendarStepsForm/CalendarStepsForm.js"),require("../../../iframe/order-process/components/Category/Category.js"),require("../../../iframe/powered-by/PoweredBy.js");var b=require("../../../iframe/page/Page.js");require("../../../iframe/payment/payment-page/PaymentPage.js"),require("../../../iframe/payment/payment-status-page/PaymentStatusPage.js"),require("../../../iframe/custom-fields/components/CustomDateField.js");var N=require("../context/snippetTemplateView.js"),S=require("@licklist/core/dist/DataMapper/Provider/SnippetDataMapper"),C=require("../settings/SettingButton.js");exports.Preview=function(e){var q=e.onSettingClick,h=e.providerHasMap,j=void 0!==h&&h,B=o.useTranslation("Design").t,P=t.__read(a.useState(0),2),k=P[0],w=P[1],x=t.__read(a.useState(0),2),I=x[0],T=x[1],A=a.useContext(N.SnippetTemplateViewContext).setView,M=a.useContext(d.SnippetTemplateContext).template.type,_=void 0===M?S.SNIPPET_TYPE_EVENT_LIST:M,D=function(e){A(e),q()};return r.createElement("div",{className:"w-100 h-100 snippet-template-preview"},r.createElement(b.Page,{headerBlock:r.createElement("div",{className:"d-flex mt-5 pt-5 p-5 iframe-page snippet-template-additional-header"},r.createElement(C.SettingButton,{view:"pageHeaderSteps",onClick:D,className:"m-0"},r.createElement(C.SettingButton,{view:"pageHeader",onClick:D,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(p.PageHeader,{showCloseButton:!0,showBackButton:!0},r.createElement(E.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(C.SettingButton,{view:"page",onClick:D,className:"snippet-template-body-button"})),r.createElement(y.PageBody,{className:"snippet-template",leftBlock:r.createElement(C.SettingButton,{view:"pageBodyLeftBlock",onClick:D,className:"mr-4"},r.createElement(y.PageBody.LeftBlock,{title:"About this event"},r.createElement(C.SettingButton,{view:"elements",onClick:D,className:"mt-5 m-0",containerClassName:"mt-5 pt-5"},r.createElement("div",{className:"mt-3"},r.createElement("h3",null,B("elements"))),r.createElement("div",{className:"mt-5"},r.createElement("h4",null,B("Texts")),r.createElement("p",null,"XXXX")),r.createElement("div",{className:"mt-5"},r.createElement("h4",null,B("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"},B("firstName")),r.createElement("input",{type:"text",className:"form-control",placeholder:B("firstName")}))),r.createElement("div",{className:"form-row"},r.createElement("button",{type:"button",className:"btn btn-link"},B("iHaveAccount")))))),r.createElement("div",{className:"mt-5"},r.createElement("h4",null,B("Number input")),r.createElement("div",{className:"d-flex flex-column w-100"},r.createElement(s.NumberInput,{value:k,onChange:function(e){return w(e)},onArrowDown:function(){return w((function(e){return e-1}))},onArrowUp:function(){return w((function(e){return e+1}))}}))),r.createElement("div",{className:"mt-5"},r.createElement("h4",null,B("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"},B("dayOfBirthShort")),r.createElement("select",{className:"form-control",placeholder:B("firstName")},r.createElement("option",null,"2022"),r.createElement("option",null,"2023"))))))),r.createElement("div",{className:"mt-5 snippet-template__form"},r.createElement("h4",null,B("Button")),r.createElement("div",{className:"d-flex flex-column w-100"},r.createElement(i.Button,{size:"sm"},"Submit")))),j&&_===S.SNIPPET_TYPE_VENUE_MAP&&r.createElement(r.Fragment,null,r.createElement("div",{className:"pt-4"},r.createElement("h4",null,B("Calendar")),r.createElement(C.SettingButton,{view:"calendar",onClick:D,className:"mt-3 m-0",containerClassName:"mt-5 pt-5"},r.createElement(c.EventCalendar,null))),r.createElement("div",{className:"pt-4"},r.createElement(C.SettingButton,{view:"productSet",onClick:D,className:"mt-3 m-0",containerClassName:"mt-5 pt-5"},r.createElement("h4",null,B("Product Sets")),r.createElement("div",{className:"pt-5 mt-5"},r.createElement(l.EventProductSets,{productSets:[{id:1,name:"Test 1"},{id:2,name:"Test 2"},{id:3,name:"Test 3"}],onSelectProductSet:T,selectedProductSetId:I})))),r.createElement("div",{className:"pt-4"},r.createElement("form",{className:"category-steps-form pt-4 mt-4"},r.createElement("h4",null,B("Venue Map")),r.createElement("div",{className:"position-relative pt-4 mt-4"},r.createElement(C.SettingButton,{view:"venueMap",onClick:D,className:"mt-n6 m-0",containerClassName:"mt-5 pt-5"},r.createElement(u.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(y.PageBody.RightBlock,{bottomBlock:r.createElement(g.BookingSummaryFooter,null)},r.createElement(C.SettingButton,{view:"pageBodyRightBlock",onClick:D,containerClassName:"snippet-template-button-fixed-height",className:"m-0"}),r.createElement(v.BookingSummary.Accordion,{showTitleOnlyOnMobile:!0},r.createElement(m.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");require("../../../iframe/event/event-booking-form/EventBookingForm.js"),require("../../../iframe/event/event-booking-view/EventBookingView.js");var m=require("../../../iframe/event/event-card/IframeEventCard.js");require("../../../iframe/event/event-card/IframeEventCardSkeleton.js"),require("../../../iframe/event/ticket-description/TicketDescription.js");var s=require("../../../iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.js");require("../../../iframe/event/event-details/EventDetails.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 l=require("../../../iframe/event/event-product-sets/EventProductSets.js");require("../../../iframe/event/event-calendar/components/CalendarSelect/CalendarSelect.js");var c=require("../../../iframe/event/event-calendar/EventCalendar.js");require("../../../iframe/event/event-step-venue-map-zones/EventStepVenueMapZones.js");var u=require("../../../iframe/event/event-venue-map/IframeEventVenueMap.js");require("../../../iframe/payment/payment-form/PaymentForm.js"),require("../../../iframe/payment/order-items-table/OrderItemsTable.js");var d=require("../context/snippetTemplate.js"),p=require("../../../iframe/page/components/PageHeader/PageHeader.js");require("../../../iframe/payment/payment-status-header/PaymentStatusHeader.js");var v=require("../../../iframe/order-process/components/BookingSummary/BookingSummary.js"),f=require("../../../iframe/order-process/components/NavigationSteps/NavigationSteps.js"),E=require("../../../iframe/order-process/components/Timer/Timer.js");require("../../../iframe/order-process/components/PaymentCard/PaymentCard.js");var g=require("../../../iframe/order-process/components/BookingSummaryFooter/BookingSummaryFooter.js");require("../../../iframe/order-process/components/ErrorModal/ErrorModal.js");var y=require("../../../iframe/page/components/PageBody/PageBody.js");require("../../../iframe/order-process/components/utils/useCategoryVerification.js"),require("../../../iframe/order-process/components/CalendarStepsForm/CalendarStepsForm.js"),require("../../../iframe/order-process/components/Category/Category.js"),require("../../../iframe/powered-by/PoweredBy.js");var b=require("../../../iframe/page/Page.js");require("../../../iframe/payment/payment-page/PaymentPage.js"),require("../../../iframe/payment/payment-status-page/PaymentStatusPage.js"),require("../../../iframe/custom-fields/components/CustomDateField.js"),require("../../../iframe/select-date-time/component/date-container/SelectDateAndTimeEvent.js");var N=require("../context/snippetTemplateView.js"),S=require("@licklist/core/dist/DataMapper/Provider/SnippetDataMapper"),C=require("../settings/SettingButton.js");exports.Preview=function(e){var q=e.onSettingClick,h=e.providerHasMap,j=void 0!==h&&h,B=i.useTranslation("Design").t,P=t.__read(a.useState(0),2),k=P[0],w=P[1],x=t.__read(a.useState(0),2),I=x[0],T=x[1],A=a.useContext(N.SnippetTemplateViewContext).setView,M=a.useContext(d.SnippetTemplateContext).template.type,_=void 0===M?S.SNIPPET_TYPE_EVENT_LIST:M,D=function(e){A(e),q()};return r.createElement("div",{className:"w-100 h-100 snippet-template-preview"},r.createElement(b.Page,{headerBlock:r.createElement("div",{className:"d-flex mt-5 pt-5 p-5 iframe-page snippet-template-additional-header"},r.createElement(C.SettingButton,{view:"pageHeaderSteps",onClick:D,className:"m-0"},r.createElement(C.SettingButton,{view:"pageHeader",onClick:D,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(p.PageHeader,{showCloseButton:!0,showBackButton:!0},r.createElement(E.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(C.SettingButton,{view:"page",onClick:D,className:"snippet-template-body-button"})),r.createElement(y.PageBody,{className:"snippet-template",leftBlock:r.createElement(C.SettingButton,{view:"pageBodyLeftBlock",onClick:D,className:"mr-4"},r.createElement(y.PageBody.LeftBlock,{title:"About this event"},r.createElement(C.SettingButton,{view:"elements",onClick:D,className:"mt-5 m-0",containerClassName:"mt-5 pt-5"},r.createElement("div",{className:"mt-3"},r.createElement("h3",null,B("elements"))),r.createElement("div",{className:"mt-5"},r.createElement("h4",null,B("Texts")),r.createElement("p",null,"XXXX")),r.createElement("div",{className:"mt-5"},r.createElement("h4",null,B("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"},B("firstName")),r.createElement("input",{type:"text",className:"form-control",placeholder:B("firstName")}))),r.createElement("div",{className:"form-row"},r.createElement("button",{type:"button",className:"btn btn-link"},B("iHaveAccount")))))),r.createElement("div",{className:"mt-5"},r.createElement("h4",null,B("Number input")),r.createElement("div",{className:"d-flex flex-column w-100"},r.createElement(s.NumberInput,{value:k,onChange:function(e){return w(e)},onArrowDown:function(){return w((function(e){return e-1}))},onArrowUp:function(){return w((function(e){return e+1}))}}))),r.createElement("div",{className:"mt-5"},r.createElement("h4",null,B("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"},B("dayOfBirthShort")),r.createElement("select",{className:"form-control",placeholder:B("firstName")},r.createElement("option",null,"2022"),r.createElement("option",null,"2023"))))))),r.createElement("div",{className:"mt-5 snippet-template__form"},r.createElement("h4",null,B("Button")),r.createElement("div",{className:"d-flex flex-column w-100"},r.createElement(o.Button,{size:"sm"},"Submit")))),j&&_===S.SNIPPET_TYPE_VENUE_MAP&&r.createElement(r.Fragment,null,r.createElement("div",{className:"pt-4"},r.createElement("h4",null,B("Calendar")),r.createElement(C.SettingButton,{view:"calendar",onClick:D,className:"mt-3 m-0",containerClassName:"mt-5 pt-5"},r.createElement(c.EventCalendar,null))),r.createElement("div",{className:"pt-4"},r.createElement(C.SettingButton,{view:"productSet",onClick:D,className:"mt-3 m-0",containerClassName:"mt-5 pt-5"},r.createElement("h4",null,B("Product Sets")),r.createElement("div",{className:"pt-5 mt-5"},r.createElement(l.EventProductSets,{productSets:[{id:1,name:"Test 1"},{id:2,name:"Test 2"},{id:3,name:"Test 3"}],onSelectProductSet:T,selectedProductSetId:I})))),r.createElement("div",{className:"pt-4"},r.createElement("form",{className:"category-steps-form pt-4 mt-4"},r.createElement("h4",null,B("Venue Map")),r.createElement("div",{className:"position-relative pt-4 mt-4"},r.createElement(C.SettingButton,{view:"venueMap",onClick:D,className:"mt-n6 m-0",containerClassName:"mt-5 pt-5"},r.createElement(u.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(y.PageBody.RightBlock,{bottomBlock:r.createElement(g.BookingSummaryFooter,null)},r.createElement(C.SettingButton,{view:"pageBodyRightBlock",onClick:D,containerClassName:"snippet-template-button-fixed-height",className:"m-0"}),r.createElement(v.BookingSummary.Accordion,{showTitleOnlyOnMobile:!0},r.createElement(m.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/styles/iframe-events/SelectDateAndTimeEvent.scss

@@ -0,0 +1,85 @@
+.event-date-list {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    grid-gap: 1rem;
+    flex-wrap: wrap;
+
+    .event-date-set {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        font-size: .82rem;
+        line-height: 1.3rem;
+        font-weight: 600;
+        background-color: $snippet-product-set-background-color;
+        border-radius: .2rem;
+        text-align: center;
+        border: 2px solid $snippet-product-set-border-color;
+        color: $snippet-product-set-font-color;
+        flex-grow: 1;
+        transition: $color-transition;
+        min-width: 6rem;
+        max-width: 7.25rem;
+        min-height: 2.75rem;
+        max-height: 8.375rem;
+
+        &.disabled {
+            border: 2px solid $snippet-product-set-background-color;
+            background-color: $snippet-product-set-background-color;
+            color: $snippet-product-set-font-color;
+            opacity: 0.5;
+
+            .descriptions {
+                color: $snippet-product-set-font-color;
+            }
+        }
+
+        &.selected {
+            border: 2px solid $snippet-active-product-set-border-color;
+            background-color: $snippet-active-product-set-border-color;
+            color: white;
+            transition: $color-transition;
+
+            .descriptions {
+                color: white;
+                font-weight: 600;
+            }
+
+            .time {
+                font-weight: 600;
+            }
+        }
+
+        &.time-container {
+            min-width: 4.175rem;
+            max-width: 4.175rem;
+            height: 2.75rem;
+        }
+    }
+
+    .time {
+        font-size: .875rem;
+        font-weight: 300;
+    }
+
+    .descriptions {
+        font-size: .7rem;
+        line-height: 1.03rem;
+        font-weight: 300;
+        color: #0E8CE2;
+    }
+
+    .info {
+        display: flex;
+        justify-content: center;
+        font-weight: 300;
+        flex-direction: row;
+
+        .logo {
+            width: .5rem;
+            margin-right: .5rem;
+        }
+    }
+}

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

@@ -15,3 +15,4 @@
 @import "./CalendarSelect.scss";
 @import "./EventStepVenueMapZones.scss";
 @import "./CategoryStepsForm.scss";
+@import "./SelectDateAndTimeEvent.scss";

package/package.json

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

package/src/assets/iframe/dateInfo/available.svg

@@ -0,0 +1,5 @@
+<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.943939" y="1.03658" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
+<rect x="0.943939" y="4.10976" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
+<rect x="0.943939" y="7.18292" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
+</svg>

package/src/assets/iframe/dateInfo/limited.svg

@@ -0,0 +1,5 @@
+<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.2406" y="1.03658" width="5.25188" height="3.04878" rx="1.5" fill="#E4E4E4" stroke="white"/>
+<rect x="1.2406" y="4.10976" width="5.25188" height="3.04878" rx="1.5" fill="#FDD054" stroke="white"/>
+<rect x="1.2406" y="7.18292" width="5.25188" height="3.04878" rx="1.5" fill="#FDD054" stroke="white"/>
+</svg>

package/src/assets/iframe/dateInfo/soldOut.svg

@@ -0,0 +1,6 @@
+<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="5.94013" height="10" transform="translate(0.497131)" fill="white"/>
+<rect x="0.591156" y="0.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
+<rect x="0.591156" y="3.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
+<rect x="0.591156" y="6.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
+</svg>

package/src/events/event-venue-map/EventVenueMap.tsx

@@ -3,7 +3,7 @@ import { EventVenueMapProvider } from "@licklist/plugins/dist/context/event/Even
 import { Point } from "@licklist/plugins/dist/types/context/event/point";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { VenueMap, VenueMapRef } from "./components/VenueMap";
 import { useCanvasSize } from "./hooks/useCanvasSize";
 
@@ -25,7 +25,7 @@ export type EventVenueMapProps = {
   products?: Partial<Product>[];
   pointProducts?: Partial<PointProduct>[];
   onPointProductsChange?: (values: Partial<PointProduct>[]) => void;
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
+  soldOutProducts?: QuantityCheckProductInfo[];
 } & EventVenueMapIframeProps;
 
 export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(

package/src/events/event-venue-map/components/VenueMap/VenueMap.tsx

@@ -11,7 +11,7 @@ import {
   EventVenueMapContext,
   EventVenueMapContextProps,
 } from "@licklist/plugins/dist/context/event/EventVenueMapContext";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { useImage } from "../../hooks/useImage";
 import { useStageActions } from "../../hooks/useStageActions";
 import { MapPoint } from "../MapPoint";
@@ -33,7 +33,7 @@ export type VenueMapProps = {
   usedInIframe?: boolean;
   choosedProductUuids?: string[];
   errorOnChoosedProductUuids?: string[];
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
+  soldOutProducts?: QuantityCheckProductInfo[];
 };
 
 export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(

package/src/iframe/index.ts

@@ -43,3 +43,4 @@ export {
 export { PoweredBy } from "./powered-by";
 export * from "./page";
 export { CustomDateField, CustomDateFieldProps } from "./custom-fields";
+export { SelectDateAndTimeEvent } from "./select-date-time";

package/src/iframe/order-process/components/BookingSummary/components/ProductsByMenuStep/ProductsByMenuStep.tsx

@@ -2,13 +2,13 @@ import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 import * as Config from "@licklist/core/dist/Config";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { Order, MenuStep } from "../../../../../../types";
 
 export type ProductsByMenuStepsProps = {
   orderProducts: Order[];
   step: MenuStep;
-  productsWithErrors?: ProductQuantityCheckResponse["products"];
+  productsWithErrors?: QuantityCheckProductInfo[];
 };
 
 const getIdFromEntity = (entities: { id: number }[]) =>

package/src/iframe/order-process/components/BookingSummary/types/index.ts

@@ -1,4 +1,4 @@
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { MenuStep, Order } from "../../../../../types";
 
 export const MOBILE_WIDTH = 576;
@@ -16,7 +16,7 @@ export type BookingSummaryProps = {
   hasPeopleInput?: boolean;
   transactionFee?: number;
   isFreePayment?: boolean;
-  productsWithErrors?: ProductQuantityCheckResponse["products"];
+  productsWithErrors?: QuantityCheckProductInfo[];
   isLoading?: boolean;
   peopleAmount: number;
 };

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

@@ -19,7 +19,7 @@ import {
 import { Step } from "@licklist/core/dist/DataMapper/Product/StepDataMapper";
 import { useTranslation } from "react-i18next";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { Category } from "./components/Category";
 import { MenuStep } from "../../../../types";
 import { STEP_FORM_ID } from "../../constants";
@@ -46,7 +46,7 @@ export interface CalendarStepsFormProps {
   onActiveVenueMapChange?: (nextVenueMapId: string) => void;
   title: string;
   menuStepWithVenueMap: Step;
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
+  soldOutProducts?: QuantityCheckProductInfo[];
 }
 
 export type StepsFormRef = {

package/src/iframe/order-process/components/CalendarStepsForm/components/Category.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { ProductCategory } from "../../../../../types";
 import { CategoryProductModal } from "./CategoryProductModal";
 
@@ -9,7 +9,7 @@ export type CategoryProps = {
   activePointId?: number;
   pointProducts: PointProduct[];
   onCloseModal: () => void;
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
+  soldOutProducts?: QuantityCheckProductInfo[];
 };
 
 export const Category = ({

package/src/iframe/order-process/components/CalendarStepsForm/components/CategoryProductModal.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import clsx from "clsx";
 import { Button } from "react-bootstrap";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { ProductCategory, Product } from "../../../../../types";
 import { CategoryProduct } from "../../CategoryProduct";
 import Icon from "../../../../../static/Icon";
@@ -13,7 +13,7 @@ export type CategoryProductModalProps = {
   category: ProductCategory;
   pointProducts: PointProduct[];
   onCloseModal: () => void;
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
+  soldOutProducts?: QuantityCheckProductInfo[];
 };
 
 export const CategoryProductModal = ({

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

@@ -1,14 +1,14 @@
 import React from "react";
 
 import { DeepMap, FieldError } from "react-hook-form";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { ProductCategory } from "../../../../types";
 import { CategoryProduct } from "../CategoryProduct";
 
 interface CategoryProps {
   productCategories: ProductCategory[];
-  productsWithErrors?: ProductQuantityCheckResponse["products"];
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
+  productsWithErrors?: QuantityCheckProductInfo[];
+  soldOutProducts?: QuantityCheckProductInfo[];
   errors?: DeepMap<Record<string, any>, FieldError>;
 }
 

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

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 import * as Config from "@licklist/core/dist/Config";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { TicketDescription } from "../../../event/ticket-description";
 import { ProductCategory, Product } from "../../../../types";
 import { ProductQuantityInput } from "./components/ProductQuantityInput";
@@ -14,8 +14,8 @@ interface CategoryProductProps {
   product: Product;
   category: ProductCategory;
   canExpandDescription?: boolean;
-  productsWithErrors?: ProductQuantityCheckResponse["products"];
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
+  productsWithErrors?: QuantityCheckProductInfo[];
+  soldOutProducts?: QuantityCheckProductInfo[];
 }
 
 export const CategoryProduct = ({

package/src/iframe/select-date-time/component/date-container/SelectDateAndTimeEvent.tsx

@@ -0,0 +1,73 @@
+import React, { useMemo } from "react";
+import clsx from "clsx";
+import { ReactComponent as LimitedSvg } from "../../../../assets/iframe/dateInfo/limited.svg";
+import { ReactComponent as AvailableSvg } from "../../../../assets/iframe/dateInfo/available.svg";
+import { ReactComponent as SoldOutSvg } from "../../../../assets/iframe/dateInfo/soldOut.svg";
+import { Logo } from "../../../../logo";
+
+export type SelectDateAndTimeEventProps = {
+  date: any;
+  selected: boolean;
+  onSelectProductSet?: (id: number) => void;
+};
+
+export const SelectDateAndTimeEvent = ({
+  date,
+  selected,
+  onSelectProductSet,
+}: SelectDateAndTimeEventProps) => {
+  const { title, disabled, info, descriptions, id, time } = date;
+
+  const onClick = () => {
+    if (disabled) return;
+    onSelectProductSet(id);
+  };
+
+  const infoLogo = useMemo(() => {
+    if (info?.logo === "limit") {
+      return <LimitedSvg />;
+    }
+    if (info?.logo === "available") {
+      return <AvailableSvg />;
+    }
+    if (info?.logo === "soldOut") {
+      return <SoldOutSvg />;
+    }
+    return null;
+  }, [info, SoldOutSvg, AvailableSvg, LimitedSvg]);
+
+  return (
+    <div
+      role="button"
+      onClick={onClick}
+      onKeyPress={onClick}
+      className={clsx(
+        "event-date-set",
+        disabled && "disabled",
+        selected && "selected",
+        time && "time-container"
+      )}
+      tabIndex={0}
+    >
+      {title}
+      {time && <div className="time">{time}</div>}
+      {descriptions && (
+        <div
+          className={clsx(
+            "descriptions",
+            selected && "selected",
+            disabled && "disabled"
+          )}
+        >
+          {descriptions}
+        </div>
+      )}
+      {info && (
+        <div className="info">
+          {info.logo && <Logo className="logo" logo={infoLogo} />}
+          <div>{info.descriptions}</div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/iframe/select-date-time/component/date-container/SelectDateAndTimeEventList.stories.tsx

@@ -0,0 +1,158 @@
+import React, { useState } from "react";
+import { Meta } from "@storybook/react";
+import { SelectDateAndTimeEventList } from "./SelectDateAndTimeEventList";
+import { Form } from "react-bootstrap";
+
+export default {
+  title: "Iframe/Date Selector",
+  component: SelectDateAndTimeEventList,
+} as Meta;
+
+export function Default() {
+  const [eventDayId, setEventDayId] = useState<number>();
+  const [eventTimeId, setEventTimeId] = useState<number>();
+  const [eventTimeWithInfoId, setEventTimeWithInfoId] = useState<number>();
+
+  const dayList = [
+    {
+      id: 1,
+      title: "TODAY",
+      descriptions: "13th March",
+    },
+    {
+      id: 2,
+      title: "TODAY",
+      disabled: true,
+      descriptions: "13th March",
+    },
+    {
+      id: 3,
+      title: "TOMORROW",
+      descriptions: "13th March",
+    },
+    {
+      id: 4,
+      title: "TOMORROW",
+      descriptions: "13th March",
+    },
+    {
+      id: 5,
+      title: "TOMORROW",
+      descriptions: "13th March",
+    },
+  ];
+
+  const dayListWithInfo = [
+    {
+      id: 1,
+      title: "TODAY",
+      descriptions: "13th March",
+      info: {
+        descriptions: "test",
+        logo: "limit",
+      }
+    },
+    {
+      id: 2,
+      title: "TODAY",
+      disabled: true,
+      descriptions: "13th March",
+      info: {
+        descriptions: "test",
+        logo: "soldOut",
+      }
+    },
+    {
+      id: 3,
+      title: "TOMORROW",
+      descriptions: "13th March",
+      info: {
+        descriptions: "test",
+        logo: "limit",
+      }
+    },
+    {
+      id: 4,
+      title: "TOMORROW",
+      descriptions: "13th March",
+      info: {
+        descriptions: "test",
+        logo: "available",
+      }
+    },
+    {
+      id: 5,
+      title: "TOMORROW",
+      descriptions: "13th March",
+      info: {
+        descriptions: "test",
+        logo: "available",
+      }
+    },
+  ];
+
+  const timeList = [
+    {
+      id: 1,
+      time: "10:30",
+    },
+    {
+      id: 2,
+      time: "11:30",
+    },
+    {
+      id: 3,
+      time: "12:30",
+    },
+    {
+      id: 4,
+      time: "13:30",
+    },
+    {
+      id: 5,
+      time: "14:30",
+    },
+    {
+      id: 6,
+      time: "11:30",
+      disabled: true,
+    },
+    {
+      id: 7,
+      time: "12:30",
+    },
+  ];
+
+  return (
+    <div className="bg-white" style={{height:"40rem"}}>
+    <Form className="event-booking-form">
+      <Form.Group>
+        <SelectDateAndTimeEventList
+          title="Select Date & Time"
+          dateList={dayList}
+          selectedProductSetId={eventDayId}
+          onSelectProductSet={setEventDayId}
+        />
+      </Form.Group>
+      <Form.Group>
+        <SelectDateAndTimeEventList
+          title="Select your Date with Info"
+          dateList={dayListWithInfo}
+          timeContainer
+          selectedProductSetId={eventTimeWithInfoId}
+          onSelectProductSet={setEventTimeWithInfoId}
+        />
+      </Form.Group>
+      <Form.Group>
+        <SelectDateAndTimeEventList
+          title="Select your Time"
+          dateList={timeList}
+          timeContainer
+          selectedProductSetId={eventTimeId}
+          onSelectProductSet={setEventTimeId}
+        />
+      </Form.Group>
+    </Form>
+    </div>
+  );
+}

package/src/iframe/select-date-time/component/date-container/SelectDateAndTimeEventList.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import clsx from "clsx";
+import { SelectDateAndTimeEvent } from "./SelectDateAndTimeEvent";
+
+export type EventProductSetsProps = {
+  selectedProductSetId?: number;
+  onSelectProductSet?: (productSetId: number) => void;
+  dateList: any[];
+  title?: string;
+  timeContainer?: boolean;
+};
+
+export const SelectDateAndTimeEventList = ({
+  selectedProductSetId,
+  onSelectProductSet,
+  dateList,
+  title,
+  timeContainer,
+}: EventProductSetsProps) => {
+  return (
+    <>
+      <h5>{title}</h5>
+      <div
+        className={clsx("event-date-list", timeContainer && "time-container")}
+      >
+        {dateList.map((date) => {
+          return (
+            <SelectDateAndTimeEvent
+              key={date.id}
+              date={date}
+              selected={selectedProductSetId === date.id}
+              onSelectProductSet={onSelectProductSet}
+            />
+          );
+        })}
+      </div>
+    </>
+  );
+};

package/src/iframe/select-date-time/index.ts

@@ -0,0 +1 @@
+export { SelectDateAndTimeEvent } from "./component/date-container/SelectDateAndTimeEvent";

package/src/logo/Logo.tsx

@@ -3,7 +3,7 @@ import Col from "react-bootstrap/Col";
 import Row from "react-bootstrap/Row";
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
-  logo: ReactNode;
+  logo: ReactNode | null;
   logoSm?: ReactNode;
 }