@licklist/design 0.58.6-dev.9 → 0.58.7

package/src/sales/booking/results/components/ResultCard.tsx

@@ -12,6 +12,7 @@ import { TIME_FORMAT } from "@licklist/core/dist/Config";
 import * as Config from "@licklist/core/dist/Config";
 import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
 import { getOrderSourceTitle } from "@licklist/plugins/dist/utils/sourceTitle";
+
 import Icon from "../../../../static/Icon";
 
 export type ResultCardProps = {
@@ -21,6 +22,8 @@ export type ResultCardProps = {
   onCardClick?: (id: number) => void;
 };
 
+// @TODO integrate when API will be available
+// activity and staff keys
 export const ResultCard = ({
   order,
   className,
@@ -38,10 +41,10 @@ export const ResultCard = ({
     startDate,
     products,
     source,
+    totalAmount,
     event,
     menu,
     remainingToPay,
-    paidAmount,
   } = order;
 
   const productList = products.map((product) => product.name)?.join(", ") || "";
@@ -105,7 +108,7 @@ export const ResultCard = ({
           )}
           <p>
             {t("paidAmount")}:{" "}
-            {formatNumber(paidAmount, {
+            {formatNumber(totalAmount, {
               style: "currency",
               currency: Config.Currency.GBP,
             })}

package/src/snippet/snippet-template/control/PropertyControl.tsx

@@ -24,16 +24,12 @@ export interface PropertyControlProps<T> {
   item: Path<T>;
   label: string;
   isDisabled?: boolean;
-  defaultColors?: Array<string>;
-  isRequired?: boolean;
 }
 
 export function PropertyControl<T>({
   item,
   label,
   isDisabled = false,
-  defaultColors,
-  isRequired = true,
 }: PropertyControlProps<T>) {
   const { t } = useTranslation(["Validation"]);
 
@@ -66,7 +62,7 @@ export function PropertyControl<T>({
         <Form.Control
           {...register(item, {
             required: {
-              value: isRequired,
+              value: true,
               message: t("Validation:fieldRequired", {
                 attribute: label,
               }),
@@ -99,7 +95,7 @@ export function PropertyControl<T>({
               setValue(item, color.hex);
               toggleIsActive();
             }}
-            colors={defaultColors || DEFAULT_COLORS}
+            colors={DEFAULT_COLORS}
           />
         </div>
       )}

package/src/sortable-list/SortableList.tsx

@@ -33,7 +33,6 @@ type SortableListProps<T> = {
   renderItemContent: (args: RenderItemContentArgs<T>) => ReactNode;
   setItems?: Dispatch<SetStateAction<SortableItem<T>[]>>;
   isExpandNewItem?: boolean;
-  isOverrides?: boolean;
 };
 
 export const SORTABLE_ID_KEY = "_sortableId";
@@ -45,7 +44,6 @@ export function SortableList<T>({
   renderItemContent,
   setItems,
   isExpandNewItem = false,
-  isOverrides = false,
 }: SortableListProps<T>) {
   const [sortedItems, setSortedItems] = useState(items);
 
@@ -99,7 +97,6 @@ export function SortableList<T>({
   );
 
   function handleDragEnd(event) {
-    if (isOverrides) return;
     const { active, over } = event;
 
     if (active.id !== over.id) {

package/src/sortable-tree/SortableTreeItem.tsx

@@ -52,8 +52,6 @@ export interface SortableTreeItemProps {
     className: string;
   };
   setIsExpanded?: () => void;
-  isOverride?: boolean;
-  isProduct?: boolean;
 }
 
 export function SortableTreeItem({
@@ -80,8 +78,6 @@ export function SortableTreeItem({
   edit,
   secondaryBadge,
   setIsExpanded,
-  isOverride,
-  isProduct = false,
 }: SortableTreeItemProps) {
   const [expanded, setExpanded] = useState(isExpanded);
   const [isModalVisible, setIsModalVisible] = useState(isNewAdded);
@@ -102,7 +98,6 @@ export function SortableTreeItem({
     transform: dragTransform,
   } = useDraggable({
     id,
-    disabled: isOverride,
   });
 
   const onHandleExpand = useCallback(
@@ -150,7 +145,6 @@ export function SortableTreeItem({
   };
 
   const onEdit = (e) => {
-    if (isOverride && !isProduct) return;
     e.stopPropagation();
     if (edit && !isModalVisible) edit();
     setIsModalVisible(true);

package/src/static/manual-date-picker/ManualDatePicker.tsx

@@ -61,9 +61,9 @@ export const ManualDatePicker = ({
             disabled={isDisabled}
           >
             <option value="">{t("Design:monthShort")}</option>
-            {MONTHS_ARRAY.map((object) => (
-              <option key={object.key} value={object.value}>
-                {object.key}
+            {MONTHS_ARRAY.map((key) => (
+              <option key={key} value={key}>
+                {key}
               </option>
             ))}
           </Form.Control>

package/src/static/manual-date-picker/constants/index.ts

@@ -1,9 +1,5 @@
-import {
-  generateDatesArray,
-  generateMonthsOptionsArray,
-  generateYearsArray,
-} from "../utils";
+import { generateDatesArray, generateYearsArray } from "../utils";
 
 export const DAYS_ARRAY = generateDatesArray(1, 31, 1);
-export const MONTHS_ARRAY = generateMonthsOptionsArray();
+export const MONTHS_ARRAY = generateDatesArray(1, 12, 1);
 export const YEARS_ARRAY = generateYearsArray();

package/src/static/manual-date-picker/utils/index.ts

@@ -4,17 +4,6 @@ export const generateDatesArray = (start: number, end: number, step: number) =>
     (_, index) => 1 + index * step
   );
 
-export const generateMonthsOptionsArray = () =>
-  Array.from({ length: 12 }, (_, index) => {
-    const value = index + 1;
-    let key = String(value);
-    if (value < 10) {
-      key = `0${key}`;
-    }
-
-    return { key, value };
-  });
-
 export const generateYearsArray = () => {
   const currentYear = new Date().getFullYear();
   const ageBackYear = currentYear - 100;

package/src/static/switch/BooleanSwitch.tsx

@@ -23,7 +23,7 @@ export function BooleanSwitch({
   const { t } = useTranslation("Design");
 
   const options: SelectItem[] = [
-    { id: 1, value: firstValueTitle ?? t("yes") },
+    { id: 1, value: firstValueTitle ??  t("yes") },
     { id: 0, value: secondValueTitle ?? t("no") },
   ];
 

package/src/styles/iframe-events/Card.scss

@@ -1,5 +1,4 @@
 @import "../snippet-templates/snippetVariables";
-@import "../themes//bookedit/variables";
 
 .iframe-event-card {
   position: relative;
@@ -19,27 +18,12 @@
     background-size: cover;
     background-position: center;
     cursor: pointer;
+    border: 1px solid transparent;
     border-radius: 0.5rem;
   }
 
   .card-body {
-    padding: 0.5rem 0 0.875rem 0;
-
-    @include media-breakpoint-down(sm) {
-      padding: 1rem 0;
-    }
-  }
-
-  &__info-icon {
-    position: absolute;
-    right: 1rem;
-    top: 1rem;
-    background-color: "#ffffff";
-    border-radius: 1.5rem;
-    padding: 0 0.5rem;
-    font-size: 0.75rem;
-    font-weight: $white;
-    border: 1px solid $black;
+    padding: 0.5rem 0 0.875rem;
   }
 
   &__title {
@@ -49,7 +33,7 @@
     line-height: 1.25rem;
     cursor: pointer;
     margin-bottom: 0.5rem;
-    font-size: 0.95rem;
+    font-size: 1.125rem;
   }
 
   &__label {
@@ -98,8 +82,7 @@
         color: $snippet-elements-button-color;
         border: none;
         background-color: $snippet-elements-button-background-color;
-        box-shadow: 0 0 0 $input-btn-focus-width
-          $snippet-elements-button-background-color;
+        box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
       }
 
       &:disabled {
@@ -112,14 +95,14 @@
     &:focus,
     &.focus {
       &:not(:disabled) {
-        opacity: 0.7;
+        opacity: .7;
       }
     }
 
     &:active,
     &.active {
       &:not(:disabled) {
-        opacity: 0.8;
+        opacity: .8;
       }
     }
   }
@@ -140,7 +123,7 @@
   }
 
   .card-text {
-    font-size: 0.82rem;
+    font-size: 0.875rem;
   }
 
   &.event-info {
@@ -219,6 +202,7 @@
 
   @media (max-width: 576px) {
     &.list-view {
+
       .card-image {
         margin-right: 0.5rem;
       }

package/src/styles/iframe-events/PoweredBy.scss

@@ -3,7 +3,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 0.75rem 0 2rem;
+    padding: 0 0.75rem;
     height: 2rem;
     width: 100%;
     font-size: 0.75rem;
@@ -27,4 +27,4 @@
       color: $blue;
     }
   }
-}
+}

package/src/styles/iframe-order-process/IframeOrderProcess.scss

@@ -46,8 +46,9 @@
     color: $snippet-page-header-steps-body-color;
     transition: $color-transition;
     margin-left: 0.5rem;
+    width: 6rem;
     word-break: break-word;
-    font-size: 0.875rem;
+    font-size: 0.75rem;
 
     @include media-breakpoint-down(sm) {
       display: none;
@@ -57,35 +58,12 @@
 
 .payment-booking-summary {
   transition: $color-transition;
+  background-color: transparent;
+  border: 1px solid transparent;
   border-radius: $iframe-border-radius;
   font-weight: 400;
   font-size: 0.875rem;
 
-  .payment-page-toggle {
-    p {
-      font-size: 1rem;
-      font-weight: 600;
-    }
-    .price {
-      font-weight: 700;
-    }
-  }
-
-  .payment-metadata {
-    font-weight: 500;
-  }
-
-  .total {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    div {
-      font-size: 1rem;
-      font-weight: 700;
-    }
-  }
-
   b {
     display: block;
     font-size: 1rem;
@@ -137,15 +115,6 @@
 
   .cart-items {
     font-weight: 400;
-    margin-bottom: 1.4rem;
-    border-bottom: 2px solid $separator-color;
-
-    .people {
-      margin-bottom: 0;
-      p {
-        margin-bottom: 0;
-      }
-    }
 
     .empty-cart {
       margin: 1rem 0;
@@ -158,11 +127,8 @@
     }
 
     .products-by-menu-step {
-      margin-top: 1.4rem;
-      font-size: 0.875rem;
       .title {
-        font-size: 1rem;
-        font-weight: 600;
+        font-weight: 500;
       }
 
       .categories {
@@ -172,8 +138,8 @@
       }
 
       .products {
-        margin-top: 1.4rem;
-        font-size: 0.875rem;
+        margin-top: 0.5rem;
+
         .product {
           margin: 0.5rem 0;
 
@@ -184,15 +150,6 @@
               margin-bottom: 0.5rem;
             }
           }
-
-          .name {
-            font-weight: 600;
-          }
-
-          .price {
-            font-weight: 400;
-            font-size: 0.875rem;
-          }
         }
 
         &:not(:last-child) {
@@ -213,12 +170,6 @@
         margin: 0 0 0.5rem;
 
         .title {
-          font-size: 1rem;
-          font-weight: 600;
-        }
-
-        .metadata {
-          font-size: 0.95rem;
           font-weight: 600;
         }
       }
@@ -232,7 +183,19 @@
   }
 
   hr {
-    margin-bottom: 1.5rem;
+    margin: 0;
+    border-width: 2px;
+    border-color: $separator-color;
+  }
+
+  .products {
+    font-size: 0.75rem;
+
+    .product {
+      .name {
+        font-weight: 500;
+      }
+    }
   }
 }
 

package/src/styles/iframe-page/Page.scss

@@ -21,7 +21,6 @@
 
   @include media-breakpoint-down(sm) {
     height: 100svh;
-    min-width: auto;
   }
 
   .header-block {

package/src/styles/iframe-page/PageBody.scss

@@ -1,4 +1,3 @@
-// TODO when all iframe pages will be ready, think how we can combine it all in page-body style
 .page-body {
   display: flex;
   background-color: transparent;
@@ -13,6 +12,9 @@
   .left-block {
     flex: 1;
     align-items: stretch;
+    border-radius: 0.5rem;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
     padding: 1rem;
     background-color: $snippet-page-body-left-block-background-color;
     border: 0;
@@ -31,6 +33,7 @@
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
+
       .title {
         color: $snippet-elements-body-color;
         margin: 0;
@@ -61,7 +64,7 @@
       overflow-x: hidden;
       scrollbar-width: thin;
       .iframe-event-card {
-        border-bottom: 1px solid $separator-color;
+        border-bottom: 2px solid $separator-color;
       }
 
       @include media-breakpoint-down(sm) {
@@ -78,7 +81,9 @@
   }
 
   .right-block {
-    height: 100%;
+    margin-left: 1rem;
+    border-radius: 0.5rem;
+    height: calc(100% - 1rem);
     max-width: 17.5rem;
     min-width: 17.5rem;
     width: 100%;
@@ -110,7 +115,7 @@
       }
 
       .collapse {
-        max-height: calc(100vh - 15rem);
+        max-height: calc(100vh - 19rem);
         transition: none 0s ease 0s;
 
         &.show {
@@ -120,7 +125,7 @@
         }
 
         @include media-breakpoint-down(sm) {
-          max-height: 100%;
+          max-height: 7.5rem;
         }
       }
       .collapse-with-people-input {
@@ -146,14 +151,8 @@
     }
 
     .iframe-event-card {
-      border: none;
-
-      .card-image {
-        border-radius: 0;
-      }
-      .card-body {
-        padding-left: 1rem;
-      }
+      background-color: transparent;
+      border-color: transparent;
     }
 
     .price {
@@ -263,24 +262,3 @@
     }
   }
 }
-
-.event-list-page-body {
-  overflow: auto;
-  .left-block {
-    .navigation {
-      font-size: 1.125rem;
-      font-weight: 500;
-      padding-bottom: 2.625rem;
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      margin-top: 0.125rem;
-
-      .title {
-        position: absolute;
-        color: $snippet-elements-body-color;
-        margin: 0;
-      }
-    }
-  }
-}

package/src/styles/iframe-page/PageHeader.scss

@@ -20,57 +20,55 @@ $base-height: 2.5rem;
       transition: $color-transition;
       border: 0;
     }
-  }
-}
-
-.iframe-page {
-  .button-wrapper {
-    background-color: $snippet-page-header-steps-close-button-background-color;
-    height: $base-height;
-    width: $base-height;
-    border-radius: $base-height;
-    transition: $color-transition;
 
-    .close-button {
-      font-size: 1.25rem;
-      width: $base-height;
+    .button-wrapper {
+      background-color: $snippet-page-header-steps-close-button-background-color;
       height: $base-height;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: $snippet-page-header-steps-close-button-border-color;
+      width: $base-height;
+      border-radius: $base-height;
       transition: $color-transition;
 
-      &:hover {
-        cursor: pointer;
+      .close-button {
+        font-size: 1.25rem;
+        width: $base-height;
+        height: $base-height;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: $snippet-page-header-steps-close-button-border-color;
+        transition: $color-transition;
+
+        &:hover {
+          cursor: pointer;
+        }
       }
-    }
 
-    &.close-button {
-      margin-left: 1rem;
-    }
+      &.close-button {
+        margin-left: 1rem;
+      }
 
-    .back-button {
-      font-size: 2rem;
-      width: $base-height;
-      height: $base-height;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: lighter;
-      color: $snippet-page-header-steps-close-button-border-color;
-      transition: $color-transition;
+      .back-button {
+        font-size: 2rem;
+        width: $base-height;
+        height: $base-height;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: lighter;
+        color: $snippet-page-header-steps-close-button-border-color;
+        transition: $color-transition;
 
-      &:hover {
-        cursor: pointer;
+        &:hover {
+          cursor: pointer;
+        }
       }
-    }
 
-    &.back-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: 1rem;
+      &.back-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 1rem;
+      }
     }
   }
 }

package/src/styles/product-set/EditVenueMapSetModal.scss

@@ -91,7 +91,7 @@
   }
 
   @include media-breakpoint-down(sm) {
-    top: 100%;
+    top: 50%;
   
     .step-save-btn {
       width: 100%;