@licklist/design 0.49.0 → 0.50.0-dev.0

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/static/switch/BooleanSwitch.d.ts

@@ -4,6 +4,8 @@ export interface BooleanSwitchProps {
     value?: boolean;
     disabled?: boolean;
     onChange: (value: boolean) => void;
+    firstValueTitle?: string;
+    secondValueTitle?: string;
 }
-export declare function BooleanSwitch({ name, value, disabled, onChange, }: BooleanSwitchProps): JSX.Element;
+export declare function BooleanSwitch({ name, value, disabled, onChange, firstValueTitle, secondValueTitle, }: BooleanSwitchProps): JSX.Element;
 //# sourceMappingURL=BooleanSwitch.d.ts.map

package/dist/static/switch/BooleanSwitch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BooleanSwitch.d.ts","sourceRoot":"","sources":["../../../src/static/switch/BooleanSwitch.tsx"],"names":[],"mappings":";AAKA,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,eAwBpB"}
+{"version":3,"file":"BooleanSwitch.d.ts","sourceRoot":"","sources":["../../../src/static/switch/BooleanSwitch.tsx"],"names":[],"mappings":";AAKA,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,gBAAgB,GACjB,EAAE,kBAAkB,eAwBpB"}

package/dist/static/switch/BooleanSwitch.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("tslib"),t=require("react"),i=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("react-i18next"),r=require("./Switch.js");exports.BooleanSwitch=function(e){var o=e.name,u=e.value,l=e.disabled,s=e.onChange,c=n.useTranslation("Design").t,d=[{id:1,value:c("yes")},{id:0,value:c("no")}],v=t.useCallback((function(e){s(Boolean(e))}),[s]);return i.createElement(r.Switch,a.__assign({name:o},void 0!==u&&{value:Number(u)},{options:d,disabled:l,onChange:v}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),a=require("react"),i=(e=a)&&"object"==typeof e&&"default"in e?e.default:e,n=require("react-i18next"),l=require("./Switch.js");exports.BooleanSwitch=function(e){var r=e.name,u=e.value,o=e.disabled,s=e.onChange,c=e.firstValueTitle,d=e.secondValueTitle,v=n.useTranslation("Design").t,b=[{id:1,value:null!=c?c:v("yes")},{id:0,value:null!=d?d:v("no")}],f=a.useCallback((function(e){s(Boolean(e))}),[s]);return i.createElement(l.Switch,t.__assign({name:r},void 0!==u&&{value:Number(u)},{options:b,disabled:o,onChange:f}))};

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 {
@@ -164,10 +177,12 @@
 
     @include media-breakpoint-down(md) {
       flex-wrap: wrap;
+
       .date-container {
         width: 100%;
         flex: 1;
       }
+
       .btn-primary {
         margin-top: 1rem;
       }
@@ -228,6 +243,11 @@
           transform: rotate(45deg);
         }
       }
+
+      @include media-breakpoint-down(sm) {
+        flex-direction: column;
+        justify-content: flex-start;
+      }
     }
   }
-}
+}

package/dist/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14.25rem;
+      height: 14rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);

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/Switch.scss

@@ -27,6 +27,7 @@ $btn-switch-option-padding-y: calc(#{$btn-padding-y} - #{sp(1)}) !default;
       border-radius: $btn-switch-option-border-radius;
       margin: 0;
       padding: $btn-switch-option-padding-y $btn-switch-option-padding-x;
+      min-width: 4.25rem;
 
       &:hover,
       &:active,

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/dist/table/TableHelperComponent.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { SetStateAction } from "react";
 import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
 import ITableHeader from "@licklist/plugins/dist/types/services/Table/ITableHeader";
 import ITableProps from "@licklist/plugins/dist/types/services/Table/ITableProps";
@@ -18,6 +18,7 @@ export interface TableHelperComponentProps {
         [key: string]: any;
     };
     initialOptions?: Partial<ITableProps>;
+    filteredOrdersOptions?: (value: SetStateAction<ITableProps>) => void;
 }
 /**
  * TableHelperComponent

package/dist/table/TableHelperComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHelperComponent.d.ts","sourceRoot":"","sources":["../../src/table/TableHelperComponent.tsx"],"names":[],"mappings":";AAQA,OAAO,qBAAqB,MAAM,mEAAmE,CAAC;AACtG,OAAO,YAAY,MAAM,0DAA0D,CAAC;AACpF,OAAO,WAAW,MAAM,yDAAyD,CAAC;AAQlF,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,YAAY,EAAE,QAAQ,CAAC;IACvB,SAAS,CAAC,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CACvC;AAUD;;;;;;GAMG;AACH,iBAAS,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eAsP7D;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"TableHelperComponent.d.ts","sourceRoot":"","sources":["../../src/table/TableHelperComponent.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,cAAc,EAAuB,MAAM,OAAO,CAAC;AAOnE,OAAO,qBAAqB,MAAM,mEAAmE,CAAC;AACtG,OAAO,YAAY,MAAM,0DAA0D,CAAC;AACpF,OAAO,WAAW,MAAM,yDAAyD,CAAC;AAQlF,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,YAAY,EAAE,QAAQ,CAAC;IACvB,SAAS,CAAC,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IACtC,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACtE;AAUD;;;;;;GAMG;AACH,iBAAS,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eA4S7D;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/table/TableHelperComponent.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("tslib"),r=require("react"),n=e(r),i=require("react-router-dom"),a=e(require("@licklist/plugins/dist/services/Route/RouteService")),o=require("../static/loader/LoaderIndicator.js"),l=require("react-bootstrap"),s=e(require("@licklist/plugins/dist/hooks/Query/useQuery")),u=require("lodash"),c=require("./FilterHelperComponent.js"),p=require("./PaginationHelperComponent.js"),d=e(require("@licklist/plugins/dist/services/Table/TableService")),g=require("./PerPageHelperComponent.js"),f=require("./utils/index.js");exports.TableHelperComponent=function(e){var _,m,v=e.paginator,E=e.headers,y=e.renderItemFn,S=e.isLoading,h=e.onRefreshFn,C=e.refreshAt,P=e.striped,b=void 0===P||P,q=e.bordered,F=void 0===q||q,j=e.displaySearchBar,D=void 0===j||j,k=e.displayPerPageSelect,L=void 0===k||k,w=e.displayShowingSection,H=void 0===w||w,O=e.externalFilters,R=void 0===O?{}:O,T=e.initialOptions,N=void 0===T?{}:T,V=s(),K=i.useLocation().pathname,I=Number(f.getFilterOptionsValue(V,N,"page")),x=Number(f.getFilterOptionsValue(V,N,"perPage")),A=String(f.getFilterOptionsValue(V,N,"sortKey")),U=String(f.getFilterOptionsValue(V,N,"sortDirection")),Q=String(f.getFilterOptionsValue(V,N,"filter")),B=t.__read(r.useState(),2),G=B[0],M=B[1],z=t.__read(r.useState({page:I,perPage:x,sortKey:A,sortDirection:U,filter:Q}),2),J=z[0],W=z[1],X=t.__read(r.useState(0),2),Y=X[0],Z=X[1],$=t.__read(r.useState(R),2),ee=$[0],te=$[1];r.useEffect((function(){u.isEqual(G,J)&&u.isEqual(ee,R)||(M(J),te(R),h&&h(J),a.redirectTo([K,["page=".concat(J.page),"perPage=".concat(J.perPage),"sortKey=".concat(escape(J.sortKey)),"sortDirection=".concat(escape(J.sortDirection)),"filter=".concat(escape(J.filter)),new URLSearchParams(R).toString()].join("&")].join("?")))}),[K,J,h,R]),r.useEffect((function(){Y!==C&&(Z((function(e){return null!=C?C:e})),h&&h(J))}),[h,J,C,Y]);var re=function(e){var r,i;if("string"==typeof e)return n.createElement("th",{key:e.toLowerCase(),className:d.getHeaderClasses(e,A,U)},e);if("object"==typeof e){var a={width:null!==(r=e.width)&&void 0!==r?r:"auto"};return n.createElement("th",{key:null!==(i=e.key)&&void 0!==i?i:e.title.toLowerCase(),className:d.getHeaderClasses(e,A,U),style:a,onClick:function(){return e.isSortable&&(r=e.key,n=d.DEFAULT_SORT_DIRECTION,void W(A===r?function(e){return n=d.getSortDirection(e.sortDirection,n),t.__assign(t.__assign({},e),{sortKey:r,sortDirection:n})}:function(e){return t.__assign(t.__assign({},e),{sortKey:r,sortDirection:n})}));var r,n}},e.title)}return null};return n.createElement("div",{className:["table-helper",S?"py-5":"py-1"].join(" ")},n.createElement(o.LoaderIndicator,{isLoaded:!S},n.createElement(l.Row,null,n.createElement(l.Col,null,L&&n.createElement(g.PerPageHelperComponent,{onChangeFn:function(e){W((function(r){return t.__assign(t.__assign({},r),{perPage:e})}))},defaultValue:null!==(_=null==v?void 0:v.per_page)&&void 0!==_?_:d.DEFAULT_PER_PAGE})),n.createElement(l.Col,null,D&&n.createElement(c.FilterHelperComponent,{onClickFn:function(e){W((function(r){var n=r.page,i=t.__rest(r,["page"]),a=n;return(!e&&i.filter||e&&!i.filter)&&(a=1),t.__assign(t.__assign({},i),{page:a,filter:e})}))},defaultValue:null!==(m=J.filter)&&void 0!==m?m:""}))),n.createElement(l.Row,null,n.createElement(l.Col,null,n.createElement("div",{className:"table-responsive"},n.createElement(l.Table,{striped:b,bordered:F,hover:!0},n.createElement("thead",null,n.createElement("tr",null,E.map((function(e){return re(e)})))),n.createElement("tbody",null,v?v.data.map((function(e,t){return y(e,t)})):null))))),n.createElement(p.PaginationHelperComponent,{displayShowingSection:H,paginator:v,onPageChangeFn:function(e){W((function(r){return t.__assign(t.__assign({},r),{page:e})}))}})))};
+"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("tslib"),r=require("react"),n=e(r),i=require("react-router-dom"),a=e(require("@licklist/plugins/dist/services/Route/RouteService")),o=require("../static/loader/LoaderIndicator.js"),s=require("react-bootstrap"),l=e(require("@licklist/plugins/dist/hooks/Query/useQuery")),u=require("lodash"),c=require("./FilterHelperComponent.js"),g=require("./PaginationHelperComponent.js"),p=e(require("@licklist/plugins/dist/services/Table/TableService")),d=require("./PerPageHelperComponent.js"),_=require("./utils/index.js");exports.TableHelperComponent=function(e){var f,m,v=e.paginator,y=e.headers,E=e.renderItemFn,S=e.isLoading,h=e.onRefreshFn,C=e.refreshAt,P=e.striped,b=void 0===P||P,q=e.bordered,D=void 0===q||q,F=e.displaySearchBar,j=void 0===F||F,O=e.displayPerPageSelect,k=void 0===O||O,L=e.displayShowingSection,w=void 0===L||L,H=e.externalFilters,R=void 0===H?{}:H,T=e.initialOptions,K=void 0===T?{}:T,N=e.filteredOrdersOptions,V=l(),I=i.useLocation().pathname,x=Number(_.getFilterOptionsValue(V,K,"page")),A=Number(_.getFilterOptionsValue(V,K,"perPage")),U=String(_.getFilterOptionsValue(V,K,"sortKey")),Q=String(_.getFilterOptionsValue(V,K,"sortDirection")),B=String(_.getFilterOptionsValue(V,K,"filter")),G=t.__read(r.useState(),2),M=G[0],z=G[1],J=t.__read(r.useState({page:x,perPage:A,sortKey:U,sortDirection:Q,filter:B}),2),W=J[0],X=J[1],Y=t.__read(r.useState(0),2),Z=Y[0],$=Y[1],ee=t.__read(r.useState(R),2),te=ee[0],re=ee[1];r.useEffect((function(){u.isEqual(M,W)&&u.isEqual(te,R)||N||(z(W),re(R),h&&h(W),a.redirectTo([I,["page=".concat(W.page),"perPage=".concat(W.perPage),"sortKey=".concat(escape(W.sortKey)),"sortDirection=".concat(escape(W.sortDirection)),"filter=".concat(escape(W.filter)),new URLSearchParams(R).toString()].join("&")].join("?")))}),[I,W,h,N,R]),r.useEffect((function(){Z===C||N||($((function(e){return null!=C?C:e})),h&&h(W))}),[h,W,C,N,Z]);var ne=function(e){var r,i;if("string"==typeof e)return n.createElement("th",{key:e.toLowerCase(),className:p.getHeaderClasses(e,U,Q)},e);if("object"==typeof e){var a={width:null!==(r=e.width)&&void 0!==r?r:"auto"};return n.createElement("th",{key:null!==(i=e.key)&&void 0!==i?i:e.title.toLowerCase(),className:p.getHeaderClasses(e,U,Q),style:a,onClick:function(){return e.isSortable&&(r=e.key,n=p.DEFAULT_SORT_DIRECTION,void(U===r?N?N((function(e){return n=p.getSortDirection(e.sortDirection,n),t.__assign(t.__assign({},e),{sortKey:r,sortDirection:n})})):X((function(e){return n=p.getSortDirection(e.sortDirection,n),t.__assign(t.__assign({},e),{sortKey:r,sortDirection:n})})):N?N((function(e){return t.__assign(t.__assign({},e),{sortKey:r,sortDirection:n})})):X((function(e){return t.__assign(t.__assign({},e),{sortKey:r,sortDirection:n})}))));var r,n}},e.title)}return null};return n.createElement("div",{className:["table-helper",S?"py-5":"py-1"].join(" ")},n.createElement(o.LoaderIndicator,{isLoaded:!S},n.createElement(s.Row,null,n.createElement(s.Col,null,k&&n.createElement(d.PerPageHelperComponent,{onChangeFn:function(e){N?N((function(r){return t.__assign(t.__assign({},r),{page:e})})):X((function(r){return t.__assign(t.__assign({},r),{perPage:e})}))},defaultValue:null!==(f=null==v?void 0:v.per_page)&&void 0!==f?f:p.DEFAULT_PER_PAGE})),n.createElement(s.Col,null,j&&n.createElement(c.FilterHelperComponent,{onClickFn:function(e){N&&N((function(r){var n=r.page,i=t.__rest(r,["page"]),a=n;return(!e&&i.filter||e&&!i.filter)&&(a=1),t.__assign(t.__assign({},i),{page:a,filter:e})})),X((function(r){var n=r.page,i=t.__rest(r,["page"]),a=n;return(!e&&i.filter||e&&!i.filter)&&(a=1),t.__assign(t.__assign({},i),{page:a,filter:e})}))},defaultValue:null!==(m=W.filter)&&void 0!==m?m:""}))),n.createElement(s.Row,null,n.createElement(s.Col,null,n.createElement("div",{className:"table-responsive"},n.createElement(s.Table,{striped:b,bordered:D,hover:!0},n.createElement("thead",null,n.createElement("tr",null,y.map((function(e){return ne(e)})))),n.createElement("tbody",null,v?v.data.map((function(e,t){return E(e,t)})):null))))),n.createElement(g.PaginationHelperComponent,{displayShowingSection:w,paginator:v,onPageChangeFn:function(e){N?N((function(r){return t.__assign(t.__assign({},r),{page:e})})):X((function(r){return t.__assign(t.__assign({},r),{page:e})}))}})))};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.49.0",
+  "version": "0.50.0-dev.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -53,9 +53,9 @@
     "@fortawesome/free-brands-svg-icons": "5.15.2",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.9",
-    "@licklist/core": "^0.17.0",
+    "@licklist/core": ">=0.15.41-dev.0 < 0.15.41",
     "@licklist/eslint-config": "0.3.4",
-    "@licklist/plugins": "^0.23.0",
+    "@licklist/plugins": ">=0.24.0-dev.0 < 0.24.0",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
     "@react-aria/utils": "3.9.0",

package/src/calendar/Calendar.tsx

@@ -4,6 +4,9 @@ import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/
 import { CalendarButtons } from "./components/CalendarButtons";
 import { CalendarDates } from "./components/CalendarDates";
 
+// same as apps/iframe/src/types/availability.ts
+export type AvailableTimes = Record<string, string[]>;
+
 export const defaultStartDay = DateTime.now().set({
   millisecond: 0,
   second: 0,
@@ -23,6 +26,8 @@ export type CalendarProps = {
   initialDate?: DateTime;
   getAvailability?: (date: DateTime) => ZoneResourcesAvailability | null;
   includeAvailability?: boolean;
+  availableTimes?: AvailableTimes;
+  shouldCalculateResources?: boolean;
 };
 
 export const Calendar = ({

package/src/calendar/components/CalendarButtons/CalendarButtons.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { range } from "lodash";
 import { ReactComponent as SelectArrow } from "../../../assets/iframe/selectArrow.svg";
 import { CalendarSelect } from "../CalendarSelect";
-import { isSelectedDateDisabled } from "../../utils";
+import { isDateDisabled } from "../../utils";
 import { CalendarProps } from "../../Calendar";
 
 type CalendarButtonsProps = Pick<
@@ -66,7 +66,7 @@ export const CalendarButtons = ({
   const onTodayClick = () => {
     setCurrentDate(initialDate);
 
-    if (isSelectedDateDisabled(initialDate, disabledDates)) return;
+    if (isDateDisabled(initialDate, disabledDates)) return;
 
     setSelectedDate(initialDate);
   };
@@ -75,7 +75,7 @@ export const CalendarButtons = ({
     const nextDate = initialDate.set({ day: initialDate.day + 1 });
     setCurrentDate(nextDate);
 
-    if (isSelectedDateDisabled(nextDate, disabledDates)) return;
+    if (isDateDisabled(nextDate, disabledDates)) return;
 
     setSelectedDate(nextDate);
   };

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

@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import { DateTime } from "luxon";
 import { DateTimeButton, Variant } from "../../../date-time-button";
 import { CalendarWeekdays } from "../CalendarWeekdays";
-import { isSelectedDateDisabled } from "../../utils";
+import { isDateDisabled } from "../../utils";
 import { CalendarProps } from "../../Calendar";
 
 export type CalendarDatesProps = Omit<
@@ -19,6 +19,8 @@ export const CalendarDates = ({
   fromPrice,
   getAvailability,
   includeAvailability,
+  shouldCalculateResources,
+  availableTimes,
 }: CalendarDatesProps) => {
   const fillCalendarDates = useMemo(() => {
     let firstDayOfWeek = calendarDates[0]?.weekday ?? 0;
@@ -45,7 +47,7 @@ export const CalendarDates = ({
           if (date === null) return <div />;
 
           const isDisabled =
-            isLoading || isSelectedDateDisabled(date, disabledDates);
+            isLoading || isDateDisabled(date, disabledDates, availableTimes);
 
           return (
             <DateTimeButton
@@ -60,6 +62,7 @@ export const CalendarDates = ({
               resources={getAvailability?.(date)}
               showResources={includeAvailability}
               variant={Variant.month}
+              shouldCalculateResources={shouldCalculateResources}
             />
           );
         })}

package/src/calendar/utils/index.ts

@@ -1,13 +1,22 @@
 import { DateTime, Interval } from "luxon";
 import isEqual from "lodash/isEqual";
+import { DATE_FORMAT } from "@licklist/core/dist/Config";
+import { AvailableTimes } from "../Calendar";
 
-export const isSelectedDateDisabled = (
-  selectedDate: DateTime,
-  disabledDates: DateTime[] = []
-) => {
-  return !!disabledDates.find((disabledDate) =>
-    isEqual(disabledDate.toObject(), selectedDate.toObject())
+export const isDateDisabled = (
+  date: DateTime,
+  disabledDates: DateTime[] = [],
+  availableTimes?: AvailableTimes
+): boolean => {
+  const disabledByDates = !!disabledDates.find((disabledDate) =>
+    isEqual(disabledDate.toObject(), date.toObject())
   );
+
+  const noAvailableTimes = availableTimes
+    ? !availableTimes?.[date.toFormat(DATE_FORMAT)]
+    : false;
+
+  return disabledByDates || noAvailableTimes;
 };
 
 export const getMonthCalendarDates = (initialDate: DateTime): DateTime[] => {

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

@@ -2,6 +2,7 @@ import React, { ReactElement } from "react";
 import clsx from "clsx";
 import { DateTime } from "luxon";
 import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
+import { has } from "lodash";
 import { AvailabilityIndicator } from "../availability-indicator";
 import { DateContent } from "./DateContent";
 
@@ -18,8 +19,9 @@ export type DateTimeButtonProps = {
   isSoldOut?: boolean;
   onSelect: (date: DateTime) => void;
   price?: string | number | ReactElement | null;
-  resources?: ZoneResourcesAvailability | null;
+  resources: ZoneResourcesAvailability | null | undefined;
   showResources?: boolean;
+  shouldCalculateResources?: boolean;
   variant: Variant;
 };
 
@@ -32,17 +34,28 @@ export const DateTimeButton = ({
   price,
   resources,
   showResources,
+  shouldCalculateResources = true,
   variant = Variant.week,
 }: DateTimeButtonProps) => {
   const isSoldOut =
     _isSoldOut ||
-    (resources && resources.bookedResources >= resources.totalResources);
+    // only consider resources if shouldCalculateResources is true
+    (shouldCalculateResources &&
+      resources &&
+      resources.bookedResources >= resources.totalResources);
 
   const isTimeVariant = variant === Variant.time;
 
   const isTimeInPast = isTimeVariant && isDateInPast(date);
 
-  const isDisabled = _isDisabled || isSoldOut || isTimeInPast;
+  const noResources =
+    shouldCalculateResources &&
+    // only consider resources if shouldCalculateResources is true
+    (!resources ||
+      !has(resources, "bookedResources") ||
+      !has(resources, "totalResources"));
+
+  const isDisabled = _isDisabled || isSoldOut || isTimeInPast || noResources;
 
   return (
     <button

package/src/iframe/event/event-booking-products/EventBookingProducts.tsx

@@ -27,7 +27,7 @@ export function EventBookingProducts({
             <AccordionItem
               key={productsCategory.id}
               eventKey={`${productsCategory.id}`}
-              productsCategoryId={productsCategory.id}
+              productCategoryId={productsCategory.id}
               name={productsCategory.name}
               products={productsCategory.products}
               order={order}

package/src/iframe/event/event-booking-products/components/AccordionItem/AccordionItem.tsx

@@ -24,7 +24,7 @@ interface AccordionItemProps {
   products: Product[];
   setOrder: SetOrderFn;
   order: Record<number, OrderItem>;
-  productsCategoryId: number;
+  productCategoryId: number;
 }
 
 function CustomToggle({
@@ -60,7 +60,7 @@ export function AccordionItem({
   order,
   setOrder,
   products,
-  productsCategoryId,
+  productCategoryId,
 }: AccordionItemProps) {
   return (
     <Card className="event-booking-products__card">
@@ -71,7 +71,7 @@ export function AccordionItem({
             <ProductItem
               key={product.id}
               id={product.id}
-              productsCategoryId={productsCategoryId}
+              productCategoryId={productCategoryId}
               price={product.price}
               name={product.name}
               description={product.description}
@@ -92,7 +92,7 @@ interface ProductItemProps {
   description: string;
   order: OrderItems;
   setOrder: SetOrderFn;
-  productsCategoryId: number;
+  productCategoryId: OrderItem["productCategoryId"];
 }
 
 function ProductItem({
@@ -102,7 +102,7 @@ function ProductItem({
   description,
   order,
   setOrder,
-  productsCategoryId,
+  productCategoryId,
 }: ProductItemProps) {
   const { formatNumber } = useIntl();
 
@@ -120,7 +120,7 @@ function ProductItem({
                 quantity: val,
                 name,
                 price,
-                productsCategoryId,
+                productCategoryId,
               },
             }));
           }}
@@ -132,7 +132,7 @@ function ProductItem({
                 quantity: prev[id]?.quantity - 1 || 0,
                 name,
                 price,
-                productsCategoryId,
+                productCategoryId,
               },
             }))
           }
@@ -144,7 +144,7 @@ function ProductItem({
                 quantity: prev[id]?.quantity + 1 || 1,
                 name,
                 price,
-                productsCategoryId,
+                productCategoryId,
               },
             }))
           }