@licklist/design 0.44.485-dev.86 → 0.44.485-dev.88

package/dist/styles/iframe-customers-journey/ActivitiesSelectedCard.scss

@@ -1,52 +1,57 @@
 @import "../snippet-templates/snippetVariables";
 
-.selected-activities-card {
+.list-activity-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  height: 5rem;
+  border: 2px solid transparent;
+  border: 2px solid transparent;
+  background-color: $snippet-product-set-background-color;
+  color: $snippet-product-set-font-color;
+  transition: $color-transition;
+
+  &.active {
+    border: 2px solid #0e8be1;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+
+  .description {
+    width: 70%;
+    font-size: 0.81rem;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    height: 5rem;
-    border: 1px solid $snippet-product-set-border-color;
-    background-color: $snippet-product-set-background-color;
-    color: $snippet-product-set-font-color;
-    transition: $color-transition;
-
-    p {
-        margin-bottom: 0;
-    }
+    flex-direction: column;
+  }
 
-    .description {
-        width: 70%;
-        font-size: .81rem;
-        display: flex;
-        flex-direction: column;
-    }
+  .title {
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+  }
 
-    .title {
-        font-weight: 600;
-        font-size: 0.875rem;
-        line-height: 1.5rem;
-    }
+  .image-container {
+    display: flex;
+    justify-content: start;
+    height: 100%;
 
-    .image-container {
-        display: flex;
-        justify-content: start;
-        height: 100%;
-
-        .image {
-            display: flex;
-            align-items: start;
-            width: 7rem;
-            height: 4rem;
-            margin-left: 3rem;
-            background-repeat: no-repeat;
-            background-size: cover;
-            background-position: center;
-            border-radius: 0.5rem;
-        }
+    .image {
+      display: flex;
+      align-items: start;
+      width: 7rem;
+      height: 4rem;
+      margin-left: 3rem;
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+      border-radius: 0.5rem;
     }
+  }
 }
 
-.selected-activities-card-hr {
-    margin-top: 0;
-}
+.list-activity-card-hr {
+  margin-top: 0;
+}

package/dist/styles/iframe-customers-journey/DateTimeButton.scss

@@ -0,0 +1,84 @@
+.date-time-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 0.82rem;
+  line-height: 1.3rem;
+  font-weight: 600;
+  background-color: $snippet-calendar-button-background-color;
+  border-radius: 0.4rem;
+  text-align: center;
+  border: 2px solid $snippet-calendar-button-border-color;
+  color: $snippet-calendar-button-font-color;
+  flex-grow: 1;
+  transition: $color-transition;
+  min-width: 6rem;
+  max-width: 7.25rem;
+  min-height: 3.3rem;
+  max-height: 8.375rem;
+
+  &.disabled {
+    border: 2px solid $snippet-calendar-disabled-button-border-color;
+    background-color: $snippet-calendar-disabled-button-background-color;
+    color: $snippet-calendar-disabled-button-font-color;
+
+    .descriptions {
+      color: $snippet-calendar-disabled-button-font-color;
+    }
+  }
+
+  &.selected {
+    border: 2px solid $snippet-calendar-active-button-border-color;
+    background-color: $snippet-calendar-active-button-background-color;
+    color: $snippet-calendar-active-button-font-color;
+    transition: $color-transition;
+
+    .descriptions {
+      color: $snippet-calendar-active-button-font-color;
+      background-color: $snippet-calendar-active-button-background-color;
+      font-weight: 600;
+      transition: $color-transition;
+    }
+
+    .time {
+      font-weight: 600;
+    }
+  }
+
+  &.time-button {
+    min-width: 4.75rem;
+    max-width: 4.75rem;
+    min-height: 2.75rem;
+  }
+
+  &.only-time-container {
+    min-width: 5.3rem;
+    max-width: 5.3rem;
+    min-height: 2.75rem;
+  }
+}
+
+.time {
+  font-size: 0.875rem;
+  font-weight: 300;
+}
+
+.descriptions {
+  font-size: 0.7rem;
+  line-height: 1.03rem;
+  font-weight: 300;
+  color: $snippet-calendar-button-font-color;
+}
+
+.info {
+  display: flex;
+  justify-content: center;
+  font-weight: 300;
+  flex-direction: row;
+
+  .logo {
+    width: 0.5rem;
+    margin-right: 0.5rem;
+  }
+}

package/dist/styles/iframe-customers-journey/_index.scss

@@ -1,3 +1,3 @@
 @import "./ActivitiesSelectedCard.scss";
-@import "./SelectDateAndTime.scss";
 @import "./ActivitiesCard.scss";
+@import "./DateTimeButton.scss";

package/dist/types/iframe.d.ts

@@ -27,7 +27,7 @@ export interface ProductCategory {
 export interface MenuStep {
     id: number;
     name: string;
-    productCategories: ProductCategory[];
+    productCategories?: ProductCategory[];
 }
 export interface Menu {
     id: number;

package/dist/types/iframe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iframe.d.ts","sourceRoot":"","sources":["../../src/types/iframe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0DAA0D,CAAC;AAElG,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC9B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,eAAe,EAAE,CAAC;CACtC;AAED,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,QAAQ,EAAE,CAAC;CACvB;AAID,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,MAAM,MAAM,UAAU,GAAG,CACvB,GAAG,EACC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACrB,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,KAC5D,IAAI,CAAC;AAEV,MAAM,MAAM,gBAAgB,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CAAC"}
+{"version":3,"file":"iframe.d.ts","sourceRoot":"","sources":["../../src/types/iframe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0DAA0D,CAAC;AAElG,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC9B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,CAAC,EAAE,eAAe,EAAE,CAAC;CACvC;AAED,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,QAAQ,EAAE,CAAC;CACvB;AAID,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,MAAM,MAAM,UAAU,GAAG,CACvB,GAAG,EACC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACrB,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,KAC5D,IAAI,CAAC;AAEV,MAAM,MAAM,gBAAgB,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CAAC"}

package/dist/zone/form/components/ZoneRecurrencesControl.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("tslib"),t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,i=require("react-i18next"),a=require("react-bootstrap"),o=require("../../../static/Icon.js"),u=require("react-hook-form"),l=require("@react-aria/utils"),c=require("react-use");require("../../../static/index.js");var s=require("@dnd-kit/core"),d=require("@dnd-kit/sortable"),m=require("../../../modals/confirmation/ConfirmModal.js"),v=require("../../../recurring-date-picker-input/RecurringDatePickerInput.js"),f=require("../../../product-set/control/DateAndRecurrenceInput.js"),g=require("./ZoneRecurrenceControl.js"),p=require("./AvailableTimesControl.js");exports.ZoneRecurrencesControl=function(e){var _,E,b=e.workHours,q=e.isLoading,C=void 0!==q&&q,x=u.useFormContext(),R=x.control,D=x.register,k=x.formState.errors,y=x.getValues,S=x.setValue,I=x.clearErrors,T=u.useFieldArray({name:"zoneRecurrences",control:R,keyName:"_id"}),h=T.fields,z=T.append,N=T.update,j=T.move,w=r.__read(t.useState(!1),2),A=w[0],F=w[1],M=r.__read(t.useState({index:null,values:null}),2),P=M[0],V=M[1],L=function(){return V({index:null,values:null})},O=r.__read(t.useState([]),2),Z=O[0],H=O[1],G=t.useRef(),K=t.useRef();c.useClickAway(G,(function(e){var r,t,n;m.CONFIRM_MODAL_ACTIONS.includes(null===(n=null===(t=null===(r=e.target)||void 0===r?void 0:r.attributes)||void 0===t?void 0:t.getNamedItem("data-id"))||void 0===n?void 0:n.value)||(F(!1),L())}));var W=l.useId(),B=i.useTranslation("Design").t,J=function(){L(),F((function(e){return!e}))};return t.useEffect((function(){h.length&&I("zoneRecurrences")}),[h,I]),n.createElement(a.Form.Group,null,n.createElement(a.Form.Label,null,B("zoneAvailable")),n.createElement(a.OverlayTrigger,{show:A,overlay:n.createElement(a.Popover,{id:W,className:"rounded"},n.createElement(a.Popover.Content,{className:"shadow-lg rounded",ref:G},n.createElement(v.RecurringDatePickerInput,{defaultValues:P.values,onChange:function(e){return r.__awaiter(void 0,void 0,void 0,(function(){var t,n,i,a;return r.__generator(this,(function(o){switch(o.label){case 0:return[4,null===(n=K.current)||void 0===n?void 0:n.trigger()];case 1:return o.sent()?(t=r.__assign({rrule:e.rrule,startDate:e.startDate,endDate:e.endDate,startTime:e.startTime,endTime:e.endTime},K.current.getValues()),(null===(i=P.values)||void 0===i?void 0:i.id)&&(t.id=null===(a=P.values)||void 0===a?void 0:a.id),null!==P.index?N(P.index,t):z(t),F((function(){return!1})),L(),[2]):[2]}}))}))},onDelete:function(){var e=P.index;F(!1),L(),setTimeout((function(){var r=y().zoneRecurrences;S("zoneRecurrences",(void 0===r?[]:r).filter((function(r,t){return t!==e})))}),100)},setInitialStartDateAfterSelect:!0},n.createElement(p.AvailableTimesControl,{workHours:b,isLoading:C,defaultValues:Z,ref:K})))),trigger:"click",placement:"bottom",popperConfig:{modifiers:[f.sameWidthPopperModifier]}},n.createElement("div",{className:"zone-recurrences"},n.createElement(s.DndContext,{onDragEnd:function(e){var r=e.over,t=e.active;if(r.id!==t.id){var n=h.findIndex((function(e){return String(e._id)===t.id})),i=h.findIndex((function(e){return String(e._id)===r.id}));j(n,i)}}},n.createElement(d.SortableContext,{items:null!==(_=null==h?void 0:h.map((function(e){return String(e._id)})))&&void 0!==_?_:[],strategy:d.verticalListSortingStrategy},h.map((function(e,r){return n.createElement(g.ZoneRecurrenceControl,{key:e._id,zoneRecurrence:e,onEdit:function(){return function(e,r){L(),setTimeout((function(){V({index:r,values:e}),H(e.availableTimes||[]),F((function(){return!0}))}),100)}(e,r)}})})))),n.createElement("div",{className:"zone-recurrence-icon-wrapper",role:"button",tabIndex:0,onClick:J,onKeyDown:J},n.createElement(o.default,{type:"plus-circle",height:"1rem",className:"zone-recurrence-icon-add mr-2"}),B("addDates")),n.createElement(a.Form.Control,r.__assign({type:"hidden"},D("zoneRecurrences",{required:{value:!0,message:B("Validation:fieldMinNumber",{attribute:B("dates"),min:1})}}))),n.createElement("div",{className:"manual-form-error"},null===(E=k.zoneRecurrences)||void 0===E?void 0:E.message))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("tslib"),t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,i=require("react-i18next"),a=require("react-bootstrap"),o=require("../../../static/Icon.js"),u=require("react-hook-form"),l=require("@react-aria/utils"),c=require("react-use");require("../../../static/index.js");var s=require("@dnd-kit/core"),d=require("@dnd-kit/sortable"),m=require("../../../modals/confirmation/ConfirmModal.js"),v=require("../../../recurring-date-picker-input/RecurringDatePickerInput.js"),f=require("../../../product-set/control/DateAndRecurrenceInput.js"),g=require("./ZoneRecurrenceControl.js"),p=require("./AvailableTimesControl.js");exports.ZoneRecurrencesControl=function(e){var _,E,b=e.workHours,q=e.isLoading,C=void 0!==q&&q,x=u.useFormContext(),R=x.control,D=x.register,k=x.formState.errors,y=x.getValues,S=x.setValue,I=x.clearErrors,T=u.useFieldArray({name:"zoneRecurrences",control:R,keyName:"_id"}),h=T.fields,z=T.append,N=T.update,j=T.move,w=r.__read(t.useState(!1),2),A=w[0],F=w[1],M=r.__read(t.useState({index:null,values:null}),2),P=M[0],V=M[1],L=function(){return V({index:null,values:null})},O=r.__read(t.useState([]),2),Z=O[0],H=O[1],G=t.useRef(),K=t.useRef();c.useClickAway(G,(function(e){var r,t,n;m.CONFIRM_MODAL_ACTIONS.includes(null===(n=null===(t=null===(r=e.target)||void 0===r?void 0:r.attributes)||void 0===t?void 0:t.getNamedItem("data-id"))||void 0===n?void 0:n.value)||(F(!1),L())}));var W=l.useId(),B=i.useTranslation("Design").t,J=function(){L(),F((function(e){return!e}))};return t.useEffect((function(){h.length&&I("zoneRecurrences")}),[h,I]),n.createElement(a.Form.Group,null,n.createElement(a.Form.Label,null,B("zoneAvailable")),n.createElement(a.OverlayTrigger,{show:A,overlay:n.createElement(a.Popover,{id:W,className:"rounded"},n.createElement(a.Popover.Content,{className:"shadow-lg rounded",ref:G},n.createElement(v.RecurringDatePickerInput,{defaultValues:P.values,onChange:function(e){return r.__awaiter(void 0,void 0,void 0,(function(){var t,n,i,a;return r.__generator(this,(function(o){switch(o.label){case 0:return[4,null===(n=K.current)||void 0===n?void 0:n.trigger()];case 1:return o.sent()?(t=r.__assign({rrule:e.rrule,startDate:e.startDate,endDate:e.endDate,startTime:e.startTime,endTime:e.endTime},K.current.getValues()),(null===(i=P.values)||void 0===i?void 0:i.id)&&(t.id=null===(a=P.values)||void 0===a?void 0:a.id),null!==P.index?N(P.index,t):z(t),F((function(){return!1})),L(),[2]):[2]}}))}))},onDelete:function(){var e=P.index;F(!1),L(),setTimeout((function(){var r=y().zoneRecurrences;S("zoneRecurrences",(void 0===r?[]:r).filter((function(r,t){return t!==e})))}),100)},setInitialStartDateAfterSelect:!0},n.createElement(p.AvailableTimesControl,{workHours:b,isLoading:C,defaultValues:Z,ref:K})))),trigger:"click",placement:"bottom",popperConfig:{modifiers:[f.sameWidthPopperModifier]}},n.createElement("div",{className:"zone-recurrences"},n.createElement(s.DndContext,{onDragEnd:function(e){var r=e.over,t=e.active;if(r.id!==t.id){var n=h.findIndex((function(e){return String(e._id)===t.id})),i=h.findIndex((function(e){return String(e._id)===r.id}));j(n,i)}}},n.createElement(d.SortableContext,{items:null!==(_=null==h?void 0:h.map((function(e){return String(e._id)})))&&void 0!==_?_:[],strategy:d.verticalListSortingStrategy},null==h?void 0:h.map((function(e,r){return n.createElement(g.ZoneRecurrenceControl,{key:e._id,zoneRecurrence:e,onEdit:function(){return function(e,r){L(),setTimeout((function(){V({index:r,values:e}),H(e.availableTimes||[]),F((function(){return!0}))}),100)}(e,r)}})})))),n.createElement("div",{className:"zone-recurrence-icon-wrapper",role:"button",tabIndex:0,onClick:J,onKeyDown:J},n.createElement(o.default,{type:"plus-circle",height:"1rem",className:"zone-recurrence-icon-add mr-2"}),B("addDates")),n.createElement(a.Form.Control,r.__assign({type:"hidden"},D("zoneRecurrences",{required:{value:!0,message:B("Validation:fieldMinNumber",{attribute:B("dates"),min:1})}}))),n.createElement("div",{className:"manual-form-error"},null===(E=k.zoneRecurrences)||void 0===E?void 0:E.message))))};

package/package.json

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

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

@@ -0,0 +1,68 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { DateTime } from "luxon";
+import { DateTimeButton, DateTimeButtonProps } from "./DateTimeButton";
+
+export default {
+  title: "DateTimeButton",
+  component: DateTimeButton,
+} as Meta;
+
+const date = DateTime.fromISO("2023-12-28T10:10:10.000Z");
+
+export const Default: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+Default.args = {
+  date,
+  isSelected: false,
+  isDisabled: false,
+  onSelect: () => null,
+};
+
+export const Selected: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+Selected.args = {
+  date,
+  isSelected: true,
+  isDisabled: false,
+  onSelect: () => null,
+};
+
+export const Disabled: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+Disabled.args = {
+  date,
+  isSelected: false,
+  isDisabled: true,
+  onSelect: () => null,
+};
+
+export const Time: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+Time.args = {
+  date,
+  isSelected: false,
+  isDisabled: true,
+  onSelect: () => null,
+  isTimeButton: true,
+};
+
+export const OnlyTime: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+OnlyTime.args = {
+  date,
+  isSelected: false,
+  isDisabled: true,
+  onSelect: () => null,
+  isOnlyTimeContainer: true,
+};

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

@@ -0,0 +1,106 @@
+import React from "react";
+import clsx from "clsx";
+import { DateTime } from "luxon";
+import { DAY_NUMBER_WITH_MONTH, DAY_OF_WEEK } from "@licklist/core/dist/Config";
+import { useTranslation } from "react-i18next";
+import { isToday, isTomorrow } from "date-fns";
+
+export type DateTimeButtonProps = {
+  date?: DateTime;
+  time?: string;
+  isSelected?: boolean;
+  isDisabled?: boolean;
+  onSelect: (date: DateTime | string) => void;
+  isOnlyTimeContainer?: boolean;
+};
+
+export const DateTimeButton = ({
+  date,
+  isDisabled,
+  time,
+  isSelected,
+  onSelect,
+  isOnlyTimeContainer,
+}: DateTimeButtonProps) => {
+  const onClick = () => {
+    if (isDisabled) return;
+    onSelect(date || time);
+  };
+
+  // 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]);
+
+  return (
+    <div
+      role="button"
+      onClick={onClick}
+      onKeyPress={onClick}
+      className={clsx(
+        "date-time-button",
+        isDisabled && "disabled",
+        isSelected && "selected",
+        time && "time-button",
+        isOnlyTimeContainer && "only-time-container"
+      )}
+      tabIndex={0}
+    >
+      {date ? (
+        <DateContent
+          date={date}
+          isDisabled={isDisabled}
+          isSelected={isSelected}
+        />
+      ) : (
+        time
+      )}
+
+      {/* TODO fix info props */}
+      {/* {info && (
+        <div className="info">
+          {info.logo && <Logo className="logo" logo={infoLogo} />}
+          <div>{info.description}</div>
+        </div>
+      )} */}
+    </div>
+  );
+};
+
+const DateContent = ({
+  date,
+  isDisabled,
+  isSelected,
+}: Pick<DateTimeButtonProps, "date" | "isDisabled" | "isSelected">) => {
+  const { t } = useTranslation("Design");
+
+  const getDate = () => {
+    if (isToday(date.toJSDate())) return t("today");
+    if (isTomorrow(date.toJSDate())) return t("tomorrow");
+    return date.toFormat(DAY_OF_WEEK);
+  };
+
+  return (
+    <>
+      {getDate()}
+      <div
+        className={clsx(
+          "descriptions",
+          isSelected && "selected",
+          isDisabled && "disabled"
+        )}
+      >
+        {/* TODO add ordinal to date format */}
+        {date.toFormat(DAY_NUMBER_WITH_MONTH)}
+      </div>
+    </>
+  );
+};

package/src/date-time-button/index.ts

@@ -0,0 +1 @@
+export * from "./DateTimeButton";

package/src/iframe/activity-cards/activity-card/ActivityCard.stories.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { ActivityCard, ActivityCardProps } from "./ActivityCard";
+
+export default {
+  title: "Iframe/ActivityCard",
+  component: ActivityCard,
+} as Meta;
+
+export const Default: Story<ActivityCardProps> = (props) => {
+  return <ActivityCard {...props} />;
+};
+
+Default.args = {
+  title: "Clay Pigeons & Axe Thowing",
+  duration: "60 mins",
+  price: "from £20",
+  image: {
+    hash: "0b37b130e22aa2d3",
+    id: 195,
+    imageType: "cover",
+    imageableId: 25,
+    imageableType: "zone",
+    path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
+    // eslint-disable-next-line max-len
+    url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
+  },
+  onSelect: () => null,
+  isSelected: false,
+};
+
+export const Selected: Story<ActivityCardProps> = (props) => {
+  return <ActivityCard {...props} />;
+};
+
+Selected.args = {
+  title: "Clay Pigeons & Axe Thowing",
+  duration: "60 mins",
+  price: "from £20",
+  image: {
+    hash: "0b37b130e22aa2d3",
+    id: 195,
+    imageType: "cover",
+    imageableId: 25,
+    imageableType: "zone",
+    path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
+    // eslint-disable-next-line max-len
+    url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
+  },
+  onSelect: () => null,
+  isSelected: true,
+};

package/src/iframe/activity-cards/activity-card/ActivityCard.tsx

@@ -0,0 +1,38 @@
+import React, { ReactNode } from "react";
+import clsx from "clsx";
+import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
+
+export interface ActivityCardProps {
+  title: ReactNode;
+  duration: ReactNode;
+  price: ReactNode;
+  image?: Image | null;
+  onSelect: () => void;
+  isSelected: boolean;
+}
+
+export const ActivityCard = ({
+  title,
+  duration,
+  price,
+  image,
+  onSelect,
+  isSelected,
+}: ActivityCardProps) => {
+  return (
+    <button
+      type="button"
+      className={clsx("activity-card", isSelected && "active")}
+      onClick={onSelect}
+    >
+      {image && <img className="activity-card-image" alt="" src={image.url} />}
+      <div className={clsx("d-flex", "flex-column", !image && "no-image")}>
+        <div className="activity-card-title">{title}</div>
+
+        {duration && <div>{duration}</div>}
+
+        {price && <div>{price}</div>}
+      </div>
+    </button>
+  );
+};

package/src/iframe/activity-cards/index.ts

@@ -0,0 +1,2 @@
+export * from "./list-activity-card/ListActivityCard";
+export * from "./activity-card/ActivityCard";

package/src/iframe/activity-cards/list-activity-card/ListActivityCard.stories.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { ListActivityCardProps, ListActivityCard } from "./ListActivityCard";
+
+export default {
+  title: "Iframe/ListActivityCard",
+  component: ListActivityCard,
+} as Meta;
+
+export const Default: Story<ListActivityCardProps> = (props) => {
+  return <ListActivityCard {...props} />;
+};
+
+Default.args = {
+  title: "Clay Pigeons & Axe Thowing",
+  duration: "60 mins",
+  price: "from £20",
+  image: {
+    hash: "0b37b130e22aa2d3",
+    id: 195,
+    imageType: "cover",
+    imageableId: 25,
+    imageableType: "zone",
+    path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
+    // eslint-disable-next-line max-len
+    url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
+  },
+  onSelect: () => null,
+  isSelected: false,
+};
+
+export const Selected: Story<ListActivityCardProps> = (props) => {
+  return <ListActivityCard {...props} />;
+};
+
+Selected.args = {
+  title: "Clay Pigeons & Axe Thowing",
+  duration: "60 mins",
+  price: "from £20",
+  image: {
+    hash: "0b37b130e22aa2d3",
+    id: 195,
+    imageType: "cover",
+    imageableId: 25,
+    imageableType: "zone",
+    path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
+    // eslint-disable-next-line max-len
+    url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
+  },
+  onSelect: () => null,
+  isSelected: true,
+};

package/src/iframe/activity-cards/list-activity-card/ListActivityCard.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import clsx from "clsx";
+import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
+
+export interface ListActivityCardProps {
+  title: string;
+  duration: string;
+  price: string;
+  image?: Image | null;
+  onSelect: () => void;
+  isSelected: boolean;
+}
+
+export const ListActivityCard = ({
+  title,
+  duration,
+  price,
+  image,
+  onSelect,
+  isSelected,
+}: ListActivityCardProps) => {
+  return (
+    <div role="button" onClick={onSelect} onKeyPress={onSelect} tabIndex={0}>
+      <div
+        className={clsx("list-activity-card", {
+          active: isSelected,
+        })}
+      >
+        <div className="description">
+          <div className="title">{title}</div>
+          {duration && (
+            <div>
+              <p>{duration}</p>
+            </div>
+          )}
+
+          {price && <div>{price}</div>}
+        </div>
+
+        {image && (
+          <div className="image-container">
+            <img className="image" src={image.url} alt="" />
+          </div>
+        )}
+      </div>
+      <hr className="list-activity-card-hr" />
+    </div>
+  );
+};

package/src/iframe/index.ts

@@ -29,6 +29,7 @@ export {
 export {
   BookingSummary,
   NavigationSteps,
+  NavigationStep,
   Timer,
   NavigationFooter,
   PaymentCard,
@@ -36,16 +37,10 @@ export {
   BookingSummaryFooterProps,
   CalendarStepsForm,
   CalendarStepsFormProps,
-  Category,
   ErrorModal,
   useCategoryVerification,
 } from "./order-process";
 export { PoweredBy } from "./powered-by";
 export * from "./page";
-export { ActivitiesSelectedCard, ActivitiesCard } from "./activities-card-page";
+export * from "./activity-cards";
 export { CustomDateField, CustomDateFieldProps } from "./custom-fields";
-export {
-  DateTimeSelector,
-  SelectDateAndTimeList,
-  SelectDateOrTimeList,
-} from "./select-date-time";

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

@@ -10,13 +10,15 @@ import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { SnippetLoader } from "../../../../static";
 
+export type NavigationStep = {
+  pathname: string;
+  key: string;
+  name: string;
+  queryParams?: Record<string, string>;
+};
+
 type NavigationStepsProps = {
-  steps: {
-    pathname: string;
-    key: string;
-    name: string;
-    queryParams?: Record<string, string>;
-  }[];
+  steps: NavigationStep[];
   isLoading?: boolean;
 };
 

package/src/iframe/order-process/components/NavigationSteps/index.ts

@@ -1 +1 @@
-export { NavigationSteps } from "./NavigationSteps";
+export { NavigationSteps, NavigationStep } from "./NavigationSteps";