@licklist/design 0.49.0-dev.1 → 0.49.0-dev.2

package/dist/events/event-venue-map/components/Scrollbars/Scrollbars.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,a=require("@licklist/plugins/dist/hooks/Media/useWindowDimensions"),l=require("@licklist/plugins/dist/context/event/EventVenueMapContext"),i=require("../../utils/index.js"),o=require("../../hooks/useDrag.js"),s=require("../../../../iframe/order-process/components/BookingSummary/types/index.js");exports.Scrollbars=function(e){var n=e.stageRef,c=e.imageRef,h=e.layerRef,u=a.useWindowDimensions().width,d=t.useContext(l.EventVenueMapContext).stage,m=o.useDrag({stageRef:n,imageRef:c,layerRef:h}),g=m.onDragX,f=m.onDragY,p=s.MOBILE_WIDTH<=u;return r.createElement("div",{className:"canvas-scrollbars"},r.createElement("div",{className:"scrollbar-wrapper scrollbar-wrapper-horizontal"},p&&r.createElement("div",{className:"scroll-element horizontal-scroll",onPointerDown:g,style:function(){if(!n||!c||!h)return{width:0,left:0};var e=d.x,t=d.y,r=n.attrs,a=r.width,l=r.height,o=i.getElementParameters({x:e,y:t,width:a,height:l,layer:h}),s=o.totalLayerWidth,u=o.maxXOverflowNumber;if(Math.round(s)<=Math.round(a)||2*u>=s)return{width:0,left:0};var m=i.calculateHorizontalScrollParameters({x:e,width:a,totalLayerWidth:s});return{width:m.width,left:m.left}}()})),r.createElement("div",{className:"scrollbar-wrapper scrollbar-wrapper-vertical"},p&&r.createElement("div",{className:"scroll-element vertical-scroll",onPointerDown:f,style:function(){if(!n||!c||!h)return{height:0,top:0};var e=d.x,t=d.y,r=n.attrs,a=r.width,l=r.height,o=i.getElementParameters({x:e,y:t,width:a,height:l,layer:h}),s=o.totalLayerHeight,u=o.maxYOverflowNumber;if(Math.round(s)<=Math.round(l)||2*u>=s)return{height:0,top:0};var m=i.calculateVerticalScrollParameters({y:t,height:l,totalLayerHeight:s});return{height:m.height,top:m.top}}()})))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,a=require("@licklist/plugins/dist/hooks/Media/useWindowDimensions"),l=require("../../../../iframe/order-process/components/BookingSummary/types/index.js"),i=require("@licklist/plugins/dist/context/event/EventVenueMapContext"),o=require("../../utils/index.js"),s=require("../../hooks/useDrag.js");exports.Scrollbars=function(e){var n=e.stageRef,c=e.imageRef,h=e.layerRef,u=a.useWindowDimensions().width,d=t.useContext(i.EventVenueMapContext).stage,m=s.useDrag({stageRef:n,imageRef:c,layerRef:h}),g=m.onDragX,f=m.onDragY,p=l.MOBILE_WIDTH<=u;return r.createElement("div",{className:"canvas-scrollbars"},r.createElement("div",{className:"scrollbar-wrapper scrollbar-wrapper-horizontal"},p&&r.createElement("div",{className:"scroll-element horizontal-scroll",onPointerDown:g,style:function(){if(!n||!c||!h)return{width:0,left:0};var e=d.x,t=d.y,r=n.attrs,a=r.width,l=r.height,i=o.getElementParameters({x:e,y:t,width:a,height:l,layer:h}),s=i.totalLayerWidth,u=i.maxXOverflowNumber;if(Math.round(s)<=Math.round(a)||2*u>=s)return{width:0,left:0};var m=o.calculateHorizontalScrollParameters({x:e,width:a,totalLayerWidth:s});return{width:m.width,left:m.left}}()})),r.createElement("div",{className:"scrollbar-wrapper scrollbar-wrapper-vertical"},p&&r.createElement("div",{className:"scroll-element vertical-scroll",onPointerDown:f,style:function(){if(!n||!c||!h)return{height:0,top:0};var e=d.x,t=d.y,r=n.attrs,a=r.width,l=r.height,i=o.getElementParameters({x:e,y:t,width:a,height:l,layer:h}),s=i.totalLayerHeight,u=i.maxYOverflowNumber;if(Math.round(s)<=Math.round(l)||2*u>=s)return{height:0,top:0};var m=o.calculateVerticalScrollParameters({y:t,height:l,totalLayerHeight:s});return{height:m.height,top:m.top}}()})))};

package/dist/iframe/order-process/components/BookingSummary/components/ToggleHeader/ToggleHeader.js

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),r=require("react-i18next"),o=require("../../../../../../static/Icon.js"),a=e(require("clsx"));require("../../../../../../static/index.js");var c=require("../../types/index.js"),i=require("react-bootstrap/AccordionToggle"),s=e(require("react-bootstrap/AccordionContext"));exports.ToggleHeader=function(e){var l=e.showExpandButton,u=e.isExpanded,d=e.title,m=e.hideComponent,f=r.useTranslation("Design").t,x=t.useContext(s),p=i.useAccordionToggle(c.ACCORDION_KEY);return t.useEffect((function(){x||!u?x&&!u&&p(void 0):p(void 0)}),[u]),m?null:n.createElement("div",{onClick:function(e){return l&&p(e)},onKeyPress:function(e){return l&&p(e)},role:"button",tabIndex:0,className:"d-flex flex-column"},n.createElement("h6",{className:a("title",l&&"pointer")},n.createElement("div",{className:"d-flex w-100 align-content-center justify-content-between"},n.createElement("div",{className:"d-flex"},n.createElement("p",{className:"m-0"},d||f("yourBooking"))),l&&n.createElement("div",{className:"expand-button"},n.createElement(o.default,{type:x===c.ACCORDION_KEY?"chevron-up":"chevron-down",width:"1rem"})))),u&&n.createElement("hr",{className:"mt-3"}))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),r=require("react-i18next"),o=require("../../../../../../static/Icon.js"),a=e(require("clsx")),c=require("../../types/index.js");require("../../../../../../static/index.js");var i=require("react-bootstrap/AccordionToggle"),s=e(require("react-bootstrap/AccordionContext"));exports.ToggleHeader=function(e){var l=e.showExpandButton,u=e.isExpanded,d=e.title,m=e.hideComponent,f=r.useTranslation("Design").t,x=t.useContext(s),p=i.useAccordionToggle(c.ACCORDION_KEY);return t.useEffect((function(){x||!u?x&&!u&&p(void 0):p(void 0)}),[u]),m?null:n.createElement("div",{onClick:function(e){return l&&p(e)},onKeyPress:function(e){return l&&p(e)},role:"button",tabIndex:0,className:"d-flex flex-column"},n.createElement("h6",{className:a("title",l&&"pointer")},n.createElement("div",{className:"d-flex w-100 align-content-center justify-content-between"},n.createElement("div",{className:"d-flex"},n.createElement("p",{className:"m-0"},d||f("yourBooking"))),l&&n.createElement("div",{className:"expand-button"},n.createElement(o.default,{type:x===c.ACCORDION_KEY?"chevron-up":"chevron-down",width:"1rem"})))),u&&n.createElement("hr",{className:"mt-3"}))};

package/dist/sales/manual-booking/summary/ManualBookingSummary.d.ts

@@ -10,6 +10,7 @@ export interface ManualBookingSummaryProps {
     isFeeFetching: boolean;
     orderDate: string;
     relyOnPeopleType?: RelyOnPeopleType | null;
+    isMobileView?: boolean;
 }
-export declare const ManualBookingSummary: ({ eventName, orders, ordersSum, orderSumIncludingFee, isFeeFetching, orderDate, relyOnPeopleType, hasBookingCategory, }: ManualBookingSummaryProps) => JSX.Element;
+export declare const ManualBookingSummary: ({ eventName, orders, ordersSum, orderSumIncludingFee, isFeeFetching, orderDate, relyOnPeopleType, hasBookingCategory, isMobileView, }: ManualBookingSummaryProps) => JSX.Element;
 //# sourceMappingURL=ManualBookingSummary.d.ts.map

package/dist/sales/manual-booking/summary/ManualBookingSummary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ManualBookingSummary.d.ts","sourceRoot":"","sources":["../../../../src/sales/manual-booking/summary/ManualBookingSummary.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,+DAA+D,CAAC;AAQnG,OAAO,EAEL,gBAAgB,EACjB,MAAM,6DAA6D,CAAC;AAIrE,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC5C;AAED,eAAO,MAAM,oBAAoB,4HAS9B,yBAAyB,gBAkF3B,CAAC"}
+{"version":3,"file":"ManualBookingSummary.d.ts","sourceRoot":"","sources":["../../../../src/sales/manual-booking/summary/ManualBookingSummary.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,+DAA+D,CAAC;AAQnG,OAAO,EAEL,gBAAgB,EACjB,MAAM,6DAA6D,CAAC;AAIrE,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,oBAAoB,0IAU9B,yBAAyB,gBAwF3B,CAAC"}

package/dist/sales/manual-booking/summary/ManualBookingSummary.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,a=require("@licklist/core/dist/Config");require("../../../static/loader/LoaderIndicator.js");var l=require("../../../static/loader/BlockLoader.js"),n=require("react-i18next");require("../../../static/loader/ButtonLoader.js"),require("../../../static/loader/SnippetLoader.js"),require("../../../static/loader/PaymentLoader.js");var c=require("luxon"),i=require("@licklist/core/dist/DataMapper/Product/ProductSetDataMapper"),o=require("react-intl"),m=require("@licklist/plugins/dist/utils/relyOnPeople");exports.ManualBookingSummary=function(e){var t=e.eventName,s=e.orders,u=e.ordersSum,d=e.orderSumIncludingFee,y=e.isFeeFetching,p=e.orderDate,v=e.relyOnPeopleType,E=e.hasBookingCategory,N=n.useTranslation(["Design","Sale"]).t,g=o.useIntl().formatNumber,q=v&&v!==i.RELY_ON_PEOPLE_QUANTITY,O=c.DateTime.fromISO(p),P=O.toFormat(a.DATE_TIME_MANUAL_BOOKING_FORMAT),f=O.toFormat(a.TIME_FORMAT);return r.createElement("div",{className:"manual-booking-summary"},r.createElement("div",{className:"receipt-title"},N("Sale:receipt")),r.createElement("div",{className:"event-name border-summary-item"},t),r.createElement("div",{className:"border-summary-item"},P),r.createElement("div",{className:"border-summary-item"},f),s.length>0?r.createElement("div",{className:"summary-item-container"},s.map((function(e){var t=m.getRelyOnPeopleMultiplier({relyOnPeopleType:v,capacity:null==e?void 0:e.capacity,hasBookingCategory:E});return r.createElement("div",{key:e.id,className:"d-flex justify-content-between border-summary-item"},r.createElement("div",null,e.name),q&&!!t&&r.createElement("div",null,"x ".concat(e.quantity*t," ").concat(N("people"))),r.createElement("div",null,g(e.quantity*e.price,{style:"currency",currency:a.Currency.GBP})))})),r.createElement("div",null,r.createElement("div",{className:"total-container"},r.createElement("div",null,N("Sale:total")),r.createElement("div",{className:"total-amount"},g(u,{style:"currency",currency:a.Currency.GBP}))),d&&r.createElement("div",{className:"total-container ".concat(y?"mt-6":"mt-4")},y||!d?r.createElement(l.BlockLoader,null):r.createElement(r.Fragment,null,r.createElement("div",null,N("Sale:includingOperationalCost")),r.createElement("div",{className:"total-amount"},g(d,{style:"currency",currency:a.Currency.GBP})))))):r.createElement("div",{className:"cart-items"},r.createElement("p",{className:"empty-cart"},N("Design:emptyBasket"))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,a=require("@licklist/core/dist/Config");require("../../../static/loader/LoaderIndicator.js");var l=require("../../../static/loader/BlockLoader.js"),n=require("react-i18next");require("../../../static/loader/ButtonLoader.js"),require("../../../static/loader/SnippetLoader.js"),require("../../../static/loader/PaymentLoader.js");var i=require("luxon"),c=require("@licklist/core/dist/DataMapper/Product/ProductSetDataMapper"),o=require("react-intl"),m=require("@licklist/plugins/dist/utils/relyOnPeople");exports.ManualBookingSummary=function(e){var t=e.eventName,s=e.orders,u=e.ordersSum,d=e.orderSumIncludingFee,y=e.isFeeFetching,p=e.orderDate,v=e.relyOnPeopleType,E=e.hasBookingCategory,N=e.isMobileView,g=n.useTranslation(["Design","Sale"]).t,q=o.useIntl().formatNumber,O=v&&v!==c.RELY_ON_PEOPLE_QUANTITY,P=i.DateTime.fromISO(p),b=P.toFormat(a.DATE_TIME_MANUAL_BOOKING_FORMAT),k=P.toFormat(a.TIME_FORMAT);return r.createElement("div",{className:N?"manual-booking-summary-mobile":"manual-booking-summary"},r.createElement("div",{className:"receipt-title"},g("Sale:receipt")),r.createElement("div",{className:"event-name border-summary-item"},t),r.createElement("div",{className:"border-summary-item"},b),r.createElement("div",{className:"border-summary-item"},k),s.length>0?r.createElement("div",{className:"summary-item-container"},s.map((function(e){var t=m.getRelyOnPeopleMultiplier({relyOnPeopleType:v,capacity:null==e?void 0:e.capacity,hasBookingCategory:E});return r.createElement("div",{key:e.id,className:"d-flex justify-content-between border-summary-item"},r.createElement("div",null,e.name),O&&!!t&&r.createElement("div",null,"x ".concat(e.quantity*t," ").concat(g("people"))),r.createElement("div",null,q(e.quantity*e.price,{style:"currency",currency:a.Currency.GBP})))})),r.createElement("div",null,r.createElement("div",{className:"total-container"},r.createElement("div",null,g("Sale:total")),r.createElement("div",{className:"total-amount"},q(u,{style:"currency",currency:a.Currency.GBP}))),d&&r.createElement("div",{className:"total-container ".concat(y?"mt-6":"mt-4")},y||!d?r.createElement(l.BlockLoader,null):r.createElement(r.Fragment,null,r.createElement("div",null,g("Sale:includingOperationalCost")),r.createElement("div",{className:"total-amount"},q(d,{style:"currency",currency:a.Currency.GBP})))))):r.createElement("div",{className:"cart-items"},r.createElement("p",{className:"empty-cart"},g("Design:emptyBasket"))))};

package/dist/static/date-range-input/DateRangeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../../src/static/date-range-input/DateRangeInput.tsx"],"names":[],"mappings":";AAcA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yCAAyC,CAAC;AAEjD,KAAK,mBAAmB,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC1E,CAAC;AAEF,eAAO,MAAM,cAAc,yEAOxB,mBAAmB,gBA4GrB,CAAC"}
+{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../../src/static/date-range-input/DateRangeInput.tsx"],"names":[],"mappings":";AAeA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yCAAyC,CAAC;AAIjD,KAAK,mBAAmB,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC1E,CAAC;AAEF,eAAO,MAAM,cAAc,yEAOxB,mBAAmB,gBA8HrB,CAAC"}

package/dist/static/date-range-input/DateRangeInput.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),n=require("react"),a=(e=n)&&"object"==typeof e&&"default"in e?e.default:e,r=require("react-i18next"),s=require("react-bootstrap"),i=require("../Icon.js"),o=require("@react-aria/utils"),u=require("react-date-range"),c=require("react-use"),l=require("./utils/index.js");require("react-date-range/dist/styles.css"),require("react-date-range/dist/theme/default.css"),require("../index.js");var d={name:"sameWidth",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:function(e){var t=e.state;Object.assign(t.styles.popper,{marginLeft:"-2px",maxWidth:"unset"})},effect:function(e){var t=e.state;Object.assign(t.elements.popper.style,{maxWidth:"unset"})}};exports.DateRangeInput=function(e){var m=e.placeholder,p=e.startDate,f=e.endDate,g=e.onDateChange,D=e.months,v=void 0===D?2:D,h=e.disabled,y=r.useTranslation("Design").t,_=t.__read(n.useState([{startDate:new Date,endDate:new Date,key:"selection"}]),2),b=_[0],q=_[1],E=t.__read(n.useState(!1),2),x=E[0],w=E[1],C=o.useId(),j=n.useRef();c.useClickAway(j,(function(){return w(!1)}));return n.useEffect((function(){p&&f&&q((function(e){return[t.__assign(t.__assign({},e[0]),l.stringDatesToJSDates({startDate:p,endDate:f}))]}))}),[p,f]),a.createElement("div",null,a.createElement(s.OverlayTrigger,{show:x,overlay:a.createElement(s.Popover,{id:C,className:"rounded"},a.createElement(s.Popover.Content,{className:"shadow-lg rounded",ref:j},a.createElement(u.DateRange,{onChange:function(e){return q([e.selection])},moveRangeOnFirstSelection:!1,ranges:b,months:v,direction:"horizontal"}),a.createElement("div",{className:"mt-3 d-flex justify-content-end"},a.createElement(s.Button,{onClick:function(){g&&g({}),q((function(e){return[t.__assign(t.__assign({},e[0]),{startDate:new Date,endDate:new Date})]})),w(!1)},variant:"link"},y("clear")),a.createElement(s.Button,{onClick:function(){g&&g(l.rangeDatesToStringDates(b)),w(!1)},className:"ml-3",variant:"link"},y("apply"))))),trigger:"click",placement:"bottom",popperConfig:{modifiers:[d]}},a.createElement("div",{onClick:function(){return w((function(e){return!e}))},onKeyDown:function(){return w((function(e){return!e}))},role:"button",tabIndex:0,className:"date-range-input-wrapper"},a.createElement(s.Form.Control,{type:"input",placeholder:m,disabled:h,readOnly:!0,className:"date-range-input",value:l.stringDatesToInputValue({startDate:p,endDate:f})}),a.createElement(i.default,{type:"calendar",height:"1rem",className:"date-range-input-icon"}))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),n=require("react"),r=(e=n)&&"object"==typeof e&&"default"in e?e.default:e,a=require("react-i18next"),i=require("react-bootstrap"),s=require("../Icon.js"),o=require("@react-aria/utils"),u=require("react-date-range"),c=require("react-use"),l=require("./utils/index.js"),d=require("../../iframe/order-process/components/BookingSummary/types/index.js");require("react-date-range/dist/styles.css"),require("react-date-range/dist/theme/default.css"),require("../index.js");var m={name:"sameWidth",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:function(e){var t=e.state;Object.assign(t.styles.popper,{marginLeft:"-2px",maxWidth:"unset"})},effect:function(e){var t=e.state;Object.assign(t.elements.popper.style,{maxWidth:"unset"})}};exports.DateRangeInput=function(e){var f=e.placeholder,p=e.startDate,g=e.endDate,D=e.onDateChange,v=e.months,h=void 0===v?2:v,y=e.disabled,_=a.useTranslation("Design").t,E=t.__read(n.useState("horizontal"),2),w=E[0],q=E[1],b=t.__read(n.useState([{startDate:new Date,endDate:new Date,key:"selection"}]),2),x=b[0],j=b[1],k=t.__read(n.useState(!1),2),C=k[0],S=k[1],I=o.useId(),N=n.useRef();c.useClickAway(N,(function(){return S(!1)}));return n.useEffect((function(){p&&g&&j((function(e){return[t.__assign(t.__assign({},e[0]),l.stringDatesToJSDates({startDate:p,endDate:g}))]}))}),[p,g]),n.useEffect((function(){var e=function(){window.innerWidth>d.MOBILE_WIDTH?q("horizontal"):q("vertical")};return e(),window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}}),[]),r.createElement("div",null,r.createElement(i.OverlayTrigger,{show:C,overlay:r.createElement(i.Popover,{id:I,className:"rounded"},r.createElement(i.Popover.Content,{className:"shadow-lg rounded",ref:N},r.createElement(u.DateRange,{onChange:function(e){return j([e.selection])},moveRangeOnFirstSelection:!1,ranges:x,months:h,direction:w}),r.createElement("div",{className:"mt-3 d-flex justify-content-end"},r.createElement(i.Button,{onClick:function(){D&&D({}),j((function(e){return[t.__assign(t.__assign({},e[0]),{startDate:new Date,endDate:new Date})]})),S(!1)},variant:"link"},_("clear")),r.createElement(i.Button,{onClick:function(){D&&D(l.rangeDatesToStringDates(x)),S(!1)},className:"ml-3",variant:"link"},_("apply"))))),trigger:"click",placement:"bottom",popperConfig:{modifiers:[m]}},r.createElement("div",{onClick:function(){return S((function(e){return!e}))},onKeyDown:function(){return S((function(e){return!e}))},role:"button",tabIndex:0,className:"date-range-input-wrapper"},r.createElement(i.Form.Control,{type:"input",placeholder:f,disabled:y,readOnly:!0,className:"date-range-input",value:l.stringDatesToInputValue({startDate:p,endDate:g})}),r.createElement(s.default,{type:"calendar",height:"1rem",className:"date-range-input-icon"}))))};

package/dist/styles/resources-blocking/_index.scss

@@ -106,6 +106,12 @@
     align-items: center;
     gap: 0.25rem;
     margin-bottom: 0.5rem;
+
+    @include media-breakpoint-down(sm) {
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+
   }
 
   .text-input.form-group {

package/dist/styles/sales/BookingFilter.scss

@@ -157,6 +157,19 @@
         margin-bottom: 0;
       }
     }
+
+    .apply-container{
+      display: flex;
+      justify-content: space-around;
+      column-gap: 2rem;
+      margin-left: 3rem;
+
+      @include media-breakpoint-down(sm) {
+        flex-direction: row;
+        margin-left: 0rem;
+        column-gap: 1rem;
+      }
+    }
   }
 
   .additional-filter-container {
@@ -230,6 +243,11 @@
           transform: rotate(45deg);
         }
       }
+
+      @include media-breakpoint-down(sm) {
+        flex-direction: column;
+        justify-content: flex-start;
+      }
     }
   }
 }

package/dist/styles/sales/BookingTabs.scss

@@ -1,24 +1,49 @@
 .booking-tabs-pane {
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
   align-items: center;
   height: 2.75rem;
   background-color: $white;
 
   .booking-tabs {
     svg {
-      g > rect:first-child {
-        fill: $white; 
+      g>rect:first-child {
+        fill: $white;
       }
     }
-    
+
     .active {
       svg {
-        g > rect:first-child {
-          fill: $blue; 
+        g>rect:first-child {
+          fill: $blue;
         }
       }
     }
+
+    @include media-breakpoint-down(sm) {
+      width: 4rem;
+    }
+  }
+
+  .content {
+    display: flex;
+    justify-content: space-between;
+    width: 90%;
+    flex-direction: row;
+
+    @include media-breakpoint-down(sm) {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      height: 4rem;
+    }
+
+    .booking {
+      @include media-breakpoint-down(sm) {
+        height: 13rem;
+      }
+    }
   }
 
   .separator {
@@ -29,6 +54,12 @@
   .children {
     flex: 1;
     margin-left: 1rem;
+
+    @include media-breakpoint-down(sm) {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+    }
   }
 
   .buttons {
@@ -61,6 +92,33 @@
         border-radius: 0.625rem;
         margin-right: 0.5rem;
       }
+      @include media-breakpoint-down(sm) {
+        width: 12.5rem;
+      }
+  
+    }
+
+    @include media-breakpoint-down(sm) {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      gap: .5rem;
+      margin-top: .5rem;
+      white-space: nowrap;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    display: flex;
+    align-items: start;
+    gap: 1rem;
+    margin-top: 1rem;
+    height: 100%;
+  }
+
+  .booking {
+    @include media-breakpoint-down(sm) {
+      height: 13rem;
     }
   }
 }

package/dist/styles/sales/LifeTimeSales.scss

@@ -33,6 +33,7 @@
   }
 
   @include media-breakpoint-down(sm) {
+    height: 12rem;
     &__value {
       line-height: 1rem;
       font-size: 2rem;

package/dist/styles/sales/ManualBooking.scss

@@ -361,10 +361,11 @@
   width: inherit;
 
   @include media-breakpoint-down(sm) {
-    padding: 0 0.5rem;
-    padding-top: 2rem;
+    display: none;
   }
 
+
+
   .form-control {
     margin-bottom: 1.5rem;
   }
@@ -411,6 +412,59 @@
   }
 }
 
+.manual-booking-summary-mobile {
+  padding: 0 1.5rem;
+  padding-top: 2rem;
+  height: max-content;
+  margin-bottom: 1.5rem;
+  width: inherit;
+
+  .form-control {
+    margin-bottom: .5rem;
+  }
+  .receipt-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    padding-bottom: 0.4rem;
+    margin-bottom: 1rem;
+    border-bottom: 2px solid $gray-400;
+  }
+  .event-name {
+    font-size: 0.94rem;
+    font-weight: 600;
+  }
+
+  .border-summary-item {
+    padding-bottom: 0.9rem;
+    margin-bottom: 1%;
+    border-bottom: 2px solid $gray-100;
+    flex-wrap: wrap;
+  }
+
+  .total-container {
+    display: flex;
+    justify-content: space-between;
+    font-size: 1rem;
+    font-weight: 600;
+
+    @include media-breakpoint-down(lg) {
+      flex-wrap: wrap;
+    }
+    .total-amount {
+      padding-left: 1rem;
+      @include media-breakpoint-down(lg) {
+        padding-left: 0;
+      }
+    }
+  }
+
+  .summary-item-container {
+    .border-summary-item:nth-last-child(2) {
+      border-bottom: 2px solid $gray-400;
+    }
+  }
+}
+
 .menu-list-manual-booking {
   display: flex;
   align-items: center;

package/dist/styles/sales/SourceOfSales.scss

@@ -13,6 +13,9 @@
 
   &__pie-chart {
     height: 100%;
+    @include media-breakpoint-down(sm) {
+      height: 12rem;
+    }
   }
 
   .colors-0 {

package/dist/styles/static/Tabs.scss

@@ -11,6 +11,12 @@ $tab-nav-link-active-border-bottom: 1px solid $tab-nav-link-active-color !defaul
   margin-left: -1.25rem;
   border-bottom: 1px solid $nav-tabs-border-color;
 
+  @include media-breakpoint-down(sm) {
+    display: flex;
+    flex-direction: column;
+    white-space: nowrap;
+  }
+
   .nav-link {
     color: $tab-nav-link-color;
     background-color: transparent;

package/package.json

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

package/src/sales/manual-booking/summary/ManualBookingSummary.tsx

@@ -24,6 +24,7 @@ export interface ManualBookingSummaryProps {
   isFeeFetching: boolean;
   orderDate: string;
   relyOnPeopleType?: RelyOnPeopleType | null;
+  isMobileView?: boolean;
 }
 
 export const ManualBookingSummary = ({
@@ -35,6 +36,7 @@ export const ManualBookingSummary = ({
   orderDate,
   relyOnPeopleType,
   hasBookingCategory,
+  isMobileView,
 }: ManualBookingSummaryProps) => {
   const { t } = useTranslation(["Design", "Sale"]);
   const { formatNumber } = useIntl();
@@ -44,7 +46,13 @@ export const ManualBookingSummary = ({
   const date = currentDate.toFormat(DATE_TIME_MANUAL_BOOKING_FORMAT);
   const time = currentDate.toFormat(TIME_FORMAT);
   return (
-    <div className="manual-booking-summary">
+    <div
+      className={
+        isMobileView
+          ? "manual-booking-summary-mobile"
+          : "manual-booking-summary"
+      }
+    >
       <div className="receipt-title">{t("Sale:receipt")}</div>
       <div className="event-name border-summary-item">{eventName}</div>
       <div className="border-summary-item">{date}</div>

package/src/static/date-range-input/DateRangeInput.tsx

@@ -11,10 +11,13 @@ import {
   rangeDatesToStringDates,
   stringDatesToInputValue,
 } from "./utils";
+import { MOBILE_WIDTH } from "../../iframe/order-process/components/BookingSummary/types";
 
 import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
 
+type DateRangeDirection = "vertical" | "horizontal";
+
 type DateRangeInputProps = {
   placeholder: string;
   startDate?: string;
@@ -33,7 +36,7 @@ export const DateRangeInput = ({
   disabled,
 }: DateRangeInputProps) => {
   const { t } = useTranslation("Design");
-
+  const [direction, setDirection] = useState<DateRangeDirection>("horizontal");
   const [state, setState] = useState<Range[]>([
     {
       startDate: new Date(),
@@ -82,6 +85,24 @@ export const DateRangeInput = ({
     }
   }, [startDate, endDate]);
 
+  useEffect(() => {
+    const resizeBodyInMobile = () => {
+      if (window.innerWidth > MOBILE_WIDTH) {
+        setDirection("horizontal");
+        return;
+      }
+
+      setDirection("vertical");
+    };
+
+    resizeBodyInMobile();
+    window.addEventListener("resize", resizeBodyInMobile);
+
+    return () => {
+      window.removeEventListener("resize", resizeBodyInMobile);
+    };
+  }, []);
+
   return (
     <div>
       <OverlayTrigger
@@ -94,7 +115,7 @@ export const DateRangeInput = ({
                 moveRangeOnFirstSelection={false}
                 ranges={state}
                 months={months}
-                direction="horizontal"
+                direction={direction}
               />
               <div className="mt-3 d-flex justify-content-end">
                 <Button onClick={onReset} variant="link">

package/src/styles/resources-blocking/_index.scss

@@ -106,6 +106,12 @@
     align-items: center;
     gap: 0.25rem;
     margin-bottom: 0.5rem;
+
+    @include media-breakpoint-down(sm) {
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+
   }
 
   .text-input.form-group {

package/src/styles/sales/BookingFilter.scss

@@ -157,6 +157,19 @@
         margin-bottom: 0;
       }
     }
+
+    .apply-container{
+      display: flex;
+      justify-content: space-around;
+      column-gap: 2rem;
+      margin-left: 3rem;
+
+      @include media-breakpoint-down(sm) {
+        flex-direction: row;
+        margin-left: 0rem;
+        column-gap: 1rem;
+      }
+    }
   }
 
   .additional-filter-container {
@@ -230,6 +243,11 @@
           transform: rotate(45deg);
         }
       }
+
+      @include media-breakpoint-down(sm) {
+        flex-direction: column;
+        justify-content: flex-start;
+      }
     }
   }
 }

package/src/styles/sales/BookingTabs.scss

@@ -1,24 +1,49 @@
 .booking-tabs-pane {
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
   align-items: center;
   height: 2.75rem;
   background-color: $white;
 
   .booking-tabs {
     svg {
-      g > rect:first-child {
-        fill: $white; 
+      g>rect:first-child {
+        fill: $white;
       }
     }
-    
+
     .active {
       svg {
-        g > rect:first-child {
-          fill: $blue; 
+        g>rect:first-child {
+          fill: $blue;
         }
       }
     }
+
+    @include media-breakpoint-down(sm) {
+      width: 4rem;
+    }
+  }
+
+  .content {
+    display: flex;
+    justify-content: space-between;
+    width: 90%;
+    flex-direction: row;
+
+    @include media-breakpoint-down(sm) {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      height: 4rem;
+    }
+
+    .booking {
+      @include media-breakpoint-down(sm) {
+        height: 13rem;
+      }
+    }
   }
 
   .separator {
@@ -29,6 +54,12 @@
   .children {
     flex: 1;
     margin-left: 1rem;
+
+    @include media-breakpoint-down(sm) {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+    }
   }
 
   .buttons {
@@ -61,6 +92,33 @@
         border-radius: 0.625rem;
         margin-right: 0.5rem;
       }
+      @include media-breakpoint-down(sm) {
+        width: 12.5rem;
+      }
+  
+    }
+
+    @include media-breakpoint-down(sm) {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      gap: .5rem;
+      margin-top: .5rem;
+      white-space: nowrap;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    display: flex;
+    align-items: start;
+    gap: 1rem;
+    margin-top: 1rem;
+    height: 100%;
+  }
+
+  .booking {
+    @include media-breakpoint-down(sm) {
+      height: 13rem;
     }
   }
 }

package/src/styles/sales/LifeTimeSales.scss

@@ -33,6 +33,7 @@
   }
 
   @include media-breakpoint-down(sm) {
+    height: 12rem;
     &__value {
       line-height: 1rem;
       font-size: 2rem;

package/src/styles/sales/ManualBooking.scss

@@ -361,10 +361,11 @@
   width: inherit;
 
   @include media-breakpoint-down(sm) {
-    padding: 0 0.5rem;
-    padding-top: 2rem;
+    display: none;
   }
 
+
+
   .form-control {
     margin-bottom: 1.5rem;
   }
@@ -411,6 +412,59 @@
   }
 }
 
+.manual-booking-summary-mobile {
+  padding: 0 1.5rem;
+  padding-top: 2rem;
+  height: max-content;
+  margin-bottom: 1.5rem;
+  width: inherit;
+
+  .form-control {
+    margin-bottom: .5rem;
+  }
+  .receipt-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    padding-bottom: 0.4rem;
+    margin-bottom: 1rem;
+    border-bottom: 2px solid $gray-400;
+  }
+  .event-name {
+    font-size: 0.94rem;
+    font-weight: 600;
+  }
+
+  .border-summary-item {
+    padding-bottom: 0.9rem;
+    margin-bottom: 1%;
+    border-bottom: 2px solid $gray-100;
+    flex-wrap: wrap;
+  }
+
+  .total-container {
+    display: flex;
+    justify-content: space-between;
+    font-size: 1rem;
+    font-weight: 600;
+
+    @include media-breakpoint-down(lg) {
+      flex-wrap: wrap;
+    }
+    .total-amount {
+      padding-left: 1rem;
+      @include media-breakpoint-down(lg) {
+        padding-left: 0;
+      }
+    }
+  }
+
+  .summary-item-container {
+    .border-summary-item:nth-last-child(2) {
+      border-bottom: 2px solid $gray-400;
+    }
+  }
+}
+
 .menu-list-manual-booking {
   display: flex;
   align-items: center;

package/src/styles/sales/SourceOfSales.scss

@@ -13,6 +13,9 @@
 
   &__pie-chart {
     height: 100%;
+    @include media-breakpoint-down(sm) {
+      height: 12rem;
+    }
   }
 
   .colors-0 {

package/src/styles/static/Tabs.scss

@@ -11,6 +11,12 @@ $tab-nav-link-active-border-bottom: 1px solid $tab-nav-link-active-color !defaul
   margin-left: -1.25rem;
   border-bottom: 1px solid $nav-tabs-border-color;
 
+  @include media-breakpoint-down(sm) {
+    display: flex;
+    flex-direction: column;
+    white-space: nowrap;
+  }
+
   .nav-link {
     color: $tab-nav-link-color;
     background-color: transparent;