@licklist/design 0.44.485-dev.71 → 0.44.485-dev.74

package/src/sales/manual-booking/category-product/CategoryProduct.tsx

@@ -5,8 +5,8 @@ import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { OverlayTrigger, Tooltip } from "react-bootstrap";
 import MediaService from "@licklist/plugins/dist/services/Media/MediaService";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { OrderProduct } from "@licklist/core/dist/DataMapper/Order/OrderProductDataMapper";
+import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { NumberInputHorizontal } from "../number-input-horizontal";
 import { Product } from "../../../types";
 import { TipTapEditor } from "../../../tiptap-editor";
@@ -14,7 +14,7 @@ import { TipTapEditor } from "../../../tiptap-editor";
 interface CategoryProductProps {
   product: Product;
   fieldIndex: `steps.${number}.productCategories.${number}.products.${number}`;
-  productsWithErrors?: ProductQuantityCheckResponse["products"];
+  productsWithErrors?: QuantityCheckProductInfo[];
   isLoading?: boolean;
   isEditMode?: boolean;
   isProductSetAvailable?: boolean;

package/src/sales/manual-booking/category-products/CategoryProducts.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Accordion } from "react-bootstrap";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { OrderProduct } from "@licklist/core/dist/DataMapper/Order/OrderProductDataMapper";
 import { CollapsibleInputGroup } from "../../../collapsible-input-group";
 import { Product } from "../../../types";
@@ -11,7 +11,7 @@ interface CategoryProductsProps {
   stepIndex: number;
   categoryIndex: number;
   products?: Product[];
-  productsWithErrors?: ProductQuantityCheckResponse["products"];
+  productsWithErrors?: QuantityCheckProductInfo[];
   isLoading?: boolean;
   isEditMode?: boolean;
   isProductSetAvailable?: boolean;

package/src/sales/manual-booking/controll/ManualBookingStepsControll.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Accordion } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { OrderProduct } from "@licklist/core/dist/DataMapper/Order/OrderProductDataMapper";
 import { ErrorModal } from "../../../iframe/order-process/components/ErrorModal/ErrorModal";
 import { MenuStep } from "../../../types";
@@ -12,7 +12,7 @@ import { CategoryProducts } from "../category-products/CategoryProducts";
 export interface ManualBookingStepsControllProps {
   step: MenuStep;
   stepIndex: number;
-  productsWithErrors?: ProductQuantityCheckResponse["products"];
+  productsWithErrors?: QuantityCheckProductInfo[];
   isLoading?: boolean;
   isEditMode?: boolean;
   isProductSetAvailable?: boolean;

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

@@ -0,0 +1,85 @@
+.event-date-list {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    grid-gap: 1rem;
+    flex-wrap: wrap;
+
+    .event-date-set {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        font-size: .82rem;
+        line-height: 1.3rem;
+        font-weight: 600;
+        background-color: $snippet-product-set-background-color;
+        border-radius: .2rem;
+        text-align: center;
+        border: 2px solid $snippet-product-set-border-color;
+        color: $snippet-product-set-font-color;
+        flex-grow: 1;
+        transition: $color-transition;
+        min-width: 6rem;
+        max-width: 7.25rem;
+        min-height: 2.75rem;
+        max-height: 8.375rem;
+
+        &.disabled {
+            border: 2px solid $snippet-product-set-background-color;
+            background-color: $snippet-product-set-background-color;
+            color: $snippet-product-set-font-color;
+            opacity: 0.5;
+
+            .descriptions {
+                color: $snippet-product-set-font-color;
+            }
+        }
+
+        &.selected {
+            border: 2px solid $snippet-active-product-set-border-color;
+            background-color: $snippet-active-product-set-border-color;
+            color: white;
+            transition: $color-transition;
+
+            .descriptions {
+                color: white;
+                font-weight: 600;
+            }
+
+            .time {
+                font-weight: 600;
+            }
+        }
+
+        &.time-container {
+            min-width: 4.175rem;
+            max-width: 4.175rem;
+            height: 2.75rem;
+        }
+    }
+
+    .time {
+        font-size: .875rem;
+        font-weight: 300;
+    }
+
+    .descriptions {
+        font-size: .7rem;
+        line-height: 1.03rem;
+        font-weight: 300;
+        color: #0E8CE2;
+    }
+
+    .info {
+        display: flex;
+        justify-content: center;
+        font-weight: 300;
+        flex-direction: row;
+
+        .logo {
+            width: .5rem;
+            margin-right: .5rem;
+        }
+    }
+}

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

@@ -15,3 +15,4 @@
 @import "./CalendarSelect.scss";
 @import "./EventStepVenueMapZones.scss";
 @import "./CategoryStepsForm.scss";
+@import "./SelectDateAndTimeEvent.scss";