@licklist/design 0.44.486-dev.19 → 0.44.486-dev.20

package/dist/assets/iframe/available.svg.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,r,n,i=require("react");(e=i)&&"object"==typeof e&&"default"in e&&e.default;function f(){return f=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},f.apply(this,arguments)}exports.ReactComponent=function(e){return i.createElement("svg",f({width:7,height:11,fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),t||(t=i.createElement("rect",{x:.944,y:1.037,width:5.252,height:3.049,rx:1.5,fill:"#4CF973",stroke:"#fff"})),r||(r=i.createElement("rect",{x:.944,y:4.11,width:5.252,height:3.049,rx:1.5,fill:"#4CF973",stroke:"#fff"})),n||(n=i.createElement("rect",{x:.944,y:7.183,width:5.252,height:3.049,rx:1.5,fill:"#4CF973",stroke:"#fff"})))};

package/dist/assets/iframe/limited.svg.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,r,n,i=require("react");(e=i)&&"object"==typeof e&&"default"in e&&e.default;function f(){return f=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},f.apply(this,arguments)}exports.ReactComponent=function(e){return i.createElement("svg",f({width:7,height:11,fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),t||(t=i.createElement("rect",{x:1.241,y:1.037,width:5.252,height:3.049,rx:1.5,fill:"#E4E4E4",stroke:"#fff"})),r||(r=i.createElement("rect",{x:1.241,y:4.11,width:5.252,height:3.049,rx:1.5,fill:"#FDD054",stroke:"#fff"})),n||(n=i.createElement("rect",{x:1.241,y:7.183,width:5.252,height:3.049,rx:1.5,fill:"#FDD054",stroke:"#fff"})))};

package/dist/assets/iframe/soldOut.svg.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,r,n,f,i=require("react");(e=i)&&"object"==typeof e&&"default"in e&&e.default;function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},l.apply(this,arguments)}exports.ReactComponent=function(e){return i.createElement("svg",l({width:7,height:10,fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),t||(t=i.createElement("path",{fill:"#fff",d:"M.497 0h5.94v10H.497z"})),r||(r=i.createElement("rect",{x:.591,y:.5,width:5.752,height:3,rx:1.5,fill:"#E4E4E4",stroke:"#fff"})),n||(n=i.createElement("rect",{x:.591,y:3.5,width:5.752,height:3,rx:1.5,fill:"#E4E4E4",stroke:"#fff"})),f||(f=i.createElement("rect",{x:.591,y:6.5,width:5.752,height:3,rx:1.5,fill:"#E4E4E4",stroke:"#fff"})))};

package/dist/date-time-button/DateTimeButton.d.ts

@@ -7,6 +7,10 @@ export type DateTimeButtonProps<T = DateTime | string> = {
     onSelect: (date: T) => void;
     isOnlyTimeContainer?: boolean;
     price?: string | number | ReactElement | null;
+    resources?: {
+        booked: number;
+        total: number;
+    };
 };
-export declare const DateTimeButton: <T extends string | DateTime>({ date, isDisabled, isSelected, onSelect, isOnlyTimeContainer, price, }: DateTimeButtonProps<T>) => JSX.Element;
+export declare const DateTimeButton: <T extends string | DateTime>({ date, isDisabled, isSelected, onSelect, isOnlyTimeContainer, price, resources, }: DateTimeButtonProps<T>) => JSX.Element;
 //# sourceMappingURL=DateTimeButton.d.ts.map

package/dist/date-time-button/DateTimeButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeButton.d.ts","sourceRoot":"","sources":["../../src/date-time-button/DateTimeButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,QAAQ,GAAG,MAAM,IAAI;IACvD,IAAI,EAAE,CAAC,CAAC;IACR,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,IAAI,CAAC;CAC/C,CAAC;AAEF,eAAO,MAAM,cAAc,+IA0D1B,CAAC"}
+{"version":3,"file":"DateTimeButton.d.ts","sourceRoot":"","sources":["../../src/date-time-button/DateTimeButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AA8BjC,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,QAAQ,GAAG,MAAM,IAAI;IACvD,IAAI,EAAE,CAAC,CAAC;IACR,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE;QACV,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,cAAc,0JAiD1B,CAAC"}

package/dist/date-time-button/DateTimeButton.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=e(require("react")),n=e(require("clsx")),i=require("./DateContent.js");exports.DateTimeButton=function(e){var r=e.date,a=e.isDisabled,o=e.isSelected,s=e.onSelect,c=e.isOnlyTimeContainer,l=e.price,u="string"==typeof r;return t.createElement("button",{type:"button",onClick:function(){return s(r)},disabled:a,className:n("date-time-button",a&&"disabled",o&&"selected",u&&"time-button",c&&"only-time-container",!u&&"today")},u?r:t.createElement(i.DateContent,{date:r,isDisabled:a,isSelected:o}),l&&!a&&t.createElement("div",{className:"price"},l))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),a=require("react-i18next"),l=e(require("clsx")),s=require("../assets/iframe/available.svg.js"),n=require("../assets/iframe/limited.svg.js"),i=require("../assets/iframe/soldOut.svg.js"),o=require("./DateContent.js");exports.DateTimeButton=function(e){var r,c,m=e.date,u=e.isDisabled,d=e.isSelected,b=e.onSelect,p=e.isOnlyTimeContainer,f=e.price,v=e.resources,g=a.useTranslation("Design").t,E="string"==typeof m,C=v&&(r=v.booked,c=v.total,r===c?{label:"soldOut",icon:t.createElement(i.ReactComponent,{className:"logo"})}:r/c<=.2?{label:"lotsOfSpace",icon:t.createElement(s.ReactComponent,{className:"logo"})}:r/c>=.8?{label:"limited",icon:t.createElement(n.ReactComponent,{className:"logo"})}:{label:"available",icon:t.createElement(s.ReactComponent,{className:"logo"})});return t.createElement("button",{type:"button",onClick:function(){return b(m)},disabled:u,className:l("date-time-button",u&&"disabled",d&&"selected",E&&"time-button",p&&"only-time-container",!E&&"today")},E?m:t.createElement(o.DateContent,{date:m,isDisabled:u,isSelected:d}),f&&!u&&t.createElement("div",{className:"price"},f),C&&t.createElement("div",{className:"resources"},C.icon,t.createElement("div",null,g(C.label))))};

package/dist/report/form/ReportForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReportForm.d.ts","sourceRoot":"","sources":["../../../src/report/form/ReportForm.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAIvF,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAC;CAC1B;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,MAAM,EACN,aAAa,GACd,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAqF/B"}
+{"version":3,"file":"ReportForm.d.ts","sourceRoot":"","sources":["../../../src/report/form/ReportForm.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAIvF,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAC;CAC1B;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,MAAM,EACN,aAAa,GACd,EAAE,eAAe,eAqFjB"}

package/dist/static/RestrictedAccess.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RestrictedAccess.d.ts","sourceRoot":"","sources":["../../src/static/RestrictedAccess.tsx"],"names":[],"mappings":";AAMA,iBAAS,gBAAgB,IAAI,GAAG,CAAC,OAAO,CAoBvC;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"RestrictedAccess.d.ts","sourceRoot":"","sources":["../../src/static/RestrictedAccess.tsx"],"names":[],"mappings":";AAMA,iBAAS,gBAAgB,gBAoBxB;AAED,eAAe,gBAAgB,CAAC"}

package/dist/styles/date-time-button/DateTimeButton.scss

@@ -100,14 +100,11 @@
   color: $snippet-calendar-button-font-color;
 }
 
-.info {
+.resources {
   display: flex;
   justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
   font-weight: 300;
   flex-direction: row;
-
-  .logo {
-    width: 0.5rem;
-    margin-right: 0.5rem;
-  }
 }

package/package.json

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

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

@@ -78,3 +78,20 @@ WithPrice.args = {
   isOnlyTimeContainer: false,
   price: "from $8000",
 };
+
+export const WithAvailability: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+WithAvailability.args = {
+  date,
+  isSelected: false,
+  isDisabled: false,
+  onSelect: () => null,
+  isOnlyTimeContainer: false,
+  price: "from $8000",
+  resources: {
+    booked: 1,
+    total: 3,
+  },
+};

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

@@ -1,8 +1,35 @@
 import React, { ReactElement } from "react";
 import clsx from "clsx";
 import { DateTime } from "luxon";
+import { useTranslation } from "react-i18next";
+import { ReactComponent as AvailableIcon } from "../assets/iframe/available.svg";
+import { ReactComponent as LimitedIcon } from "../assets/iframe/limited.svg";
+import { ReactComponent as SoldOutIcon } from "../assets/iframe/soldOut.svg";
 import { DateContent } from "./DateContent";
 
+const LOTS_OF_SPACE_LIMIT = 0.2;
+const LIMITED_LIMIT = 0.8;
+
+const getAvailability = (
+  booked: number,
+  total: number
+): { label: string; icon: ReactElement } => {
+  if (booked === total) {
+    return { label: "soldOut", icon: <SoldOutIcon className="logo" /> };
+  }
+
+  // lots of space if less than 80% booked
+  if (booked / total <= LOTS_OF_SPACE_LIMIT) {
+    return { label: "lotsOfSpace", icon: <AvailableIcon className="logo" /> };
+  }
+
+  if (booked / total >= LIMITED_LIMIT) {
+    return { label: "limited", icon: <LimitedIcon className="logo" /> };
+  }
+
+  return { label: "available", icon: <AvailableIcon className="logo" /> };
+};
+
 export type DateTimeButtonProps<T = DateTime | string> = {
   date: T;
   isSelected?: boolean;
@@ -10,6 +37,10 @@ export type DateTimeButtonProps<T = DateTime | string> = {
   onSelect: (date: T) => void;
   isOnlyTimeContainer?: boolean;
   price?: string | number | ReactElement | null;
+  resources?: {
+    booked: number;
+    total: number;
+  };
 };
 
 export const DateTimeButton = <T extends DateTime | string>({
@@ -19,22 +50,14 @@ export const DateTimeButton = <T extends DateTime | string>({
   onSelect,
   isOnlyTimeContainer,
   price,
+  resources,
 }: DateTimeButtonProps<T>) => {
-  // const infoLogo = useMemo(() => {
-  //   if (info?.logo === infoLogoType.LIMIT) {
-  //     return <LimitedSvg />;
-  //   }
-  //   if (info?.logo === infoLogoType.AVAILABLE) {
-  //     return <AvailableSvg />;
-  //   }
-  //   if (info?.logo === infoLogoType.SOLD_OUT) {
-  //     return <SoldOutSvg />;
-  //   }
-  //   return null;
-  // }, [info]);
-
+  const { t } = useTranslation("Design");
   const isTimeVariant = typeof date === "string";
 
+  const availability =
+    resources && getAvailability(resources.booked, resources.total);
+
   return (
     <button
       type="button"
@@ -61,13 +84,12 @@ export const DateTimeButton = <T extends DateTime | string>({
 
       {price && !isDisabled && <div className="price">{price}</div>}
 
-      {/* TODO uncomment when adding availability */}
-      {/* {info && (
-        <div className="info">
-          {info.logo && <Logo className="logo" logo={infoLogo} />}
-          <div>{info.description}</div>
+      {availability && (
+        <div className="resources">
+          {availability.icon}
+          <div>{t(availability.label)}</div>
         </div>
-      )} */}
+      )}
     </button>
   );
 };

package/src/provider/location-input/LocationInputDescription.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import { useFormContext } from "react-hook-form";
 import en from "react-phone-number-input/locale/en.json";
 import { LocationInputValues } from ".";
@@ -13,7 +13,7 @@ export function LocationInputDescription() {
     "postcode",
     "country",
   ] as const;
-  const fields = fieldNames.reduce<JSX.Element[]>((acc, field) => {
+  const fields = fieldNames.reduce<ReactElement[]>((acc, field) => {
     const value = values?.[field];
     if (!value) return acc;
 

package/src/report/form/ReportForm.tsx

@@ -15,7 +15,7 @@ export function ReportForm({
   onSubmit,
   onHide,
   hasPermission,
-}: ReportFormProps): JSX.Element {
+}: ReportFormProps) {
   const { t } = useTranslation(["App"]);
   const fromDateInput = useRef<HTMLInputDateElement | null>(null);
   const toDateInput = useRef<HTMLInputDateElement | null>(null);

package/src/static/RestrictedAccess.tsx

@@ -4,7 +4,7 @@ import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
 import { useTranslation } from "react-i18next";
 import Icon from "./Icon";
 
-function RestrictedAccess(): JSX.Element {
+function RestrictedAccess() {
   const { t } = useTranslation("Design");
 
   return (

package/src/styles/date-time-button/DateTimeButton.scss

@@ -100,14 +100,11 @@
   color: $snippet-calendar-button-font-color;
 }
 
-.info {
+.resources {
   display: flex;
   justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
   font-weight: 300;
   flex-direction: row;
-
-  .logo {
-    width: 0.5rem;
-    margin-right: 0.5rem;
-  }
 }