@licklist/design 0.44.485-dev.49 → 0.44.485-dev.5

package/src/provider/provider-details-input/ProviderDetailsInput.tsx

@@ -34,6 +34,7 @@ export function ProviderDetailsInput({
   const {
     register,
     formState: { errors },
+    setValue,
   } = useFormContext<ProviderDetailsInputValues>();
   const { t } = useTranslation(["App", "Design", "Validation"]);
 
@@ -148,6 +149,7 @@ export function ProviderDetailsInput({
           <Typeahead
             name="company"
             options={companiesOptions}
+            setValue={setValue}
             placeholder={t("App:select")}
             noOptionsMessage={t("App:noMatchesFound")}
           />

package/src/sales/booking/filter/components/AdditionalFIlterSection.tsx

@@ -12,7 +12,6 @@ import {
   BookingContext,
   BookingFilters,
 } from "@licklist/plugins/dist/context/booking/BookingContext";
-import { DateRangeInput } from "../../../../static/date-range-input/DateRangeInput";
 
 const ORDER_STATUSES_FOR_UPDATE = [
   ORDER_STATUS_PENDING,
@@ -33,15 +32,10 @@ export const AdditionalFilterSection = () => {
   const { t } = useTranslation("Design");
   const { filters, setFilters } = useContext(BookingContext);
 
-  const { handleSubmit, register, setValue, reset, watch } = useForm<
-    Partial<BookingFilters>
-  >({
+  const { handleSubmit, register, reset } = useForm<Partial<BookingFilters>>({
     defaultValues: filters,
   });
 
-  const startDate = watch("order_date_from");
-  const endDate = watch("order_date_to");
-
   const onFormSubmit = (values: Partial<BookingFilters>) => {
     setFilters(values);
   };
@@ -83,15 +77,7 @@ export const AdditionalFilterSection = () => {
           <Col md="3">
             <Form.Group>
               <Form.Label>{t("date")}</Form.Label>
-              <DateRangeInput
-                placeholder={t("date")}
-                startDate={startDate}
-                endDate={endDate}
-                onDateChange={({ startDate, endDate }) => {
-                  setValue("order_date_from", startDate);
-                  setValue("order_date_to", endDate);
-                }}
-              />
+              <Form.Control {...register("date")} type="date" />
             </Form.Group>
           </Col>
 

package/src/sales/booking/filter/components/SearchingForSection.tsx

@@ -7,12 +7,7 @@ import {
 } from "@licklist/plugins/dist/context/booking/BookingContext";
 import { ResultTagButton } from "./ResultTagButton";
 
-const SEARCHING_FOR_FILTER_KEYS = [
-  "q",
-  "status",
-  "order_date_from",
-  "staffMember",
-];
+const SEARCHING_FOR_FILTER_KEYS = ["q", "status", "date", "staffMember"];
 
 export const SearchingForSection = () => {
   const { t } = useTranslation("Design");
@@ -21,14 +16,6 @@ export const SearchingForSection = () => {
   const filteredFilters = useMemo(() => {
     return SEARCHING_FOR_FILTER_KEYS.reduce(
       (prevValues: Partial<BookingFilters>, currentKey: string) => {
-        if (currentKey === "order_date_from" && filters[currentKey]) {
-          return {
-            ...prevValues,
-            [currentKey]: `${filters.order_date_from || ""} - ${
-              filters?.order_date_to || ""
-            }`,
-          };
-        }
         if (filters[currentKey]) {
           return { ...prevValues, [currentKey]: filters[currentKey] };
         }
@@ -44,10 +31,6 @@ export const SearchingForSection = () => {
   };
 
   const onResetSelectedFilter = (key: string) => {
-    if (key === "order_date_from") {
-      setFilters({ ...filters, order_date_from: "", order_date_to: "" });
-      return;
-    }
     setFilters({ ...filters, [key]: "" });
   };
 

package/src/sales/filters/SaleFilter.stories.tsx

@@ -13,7 +13,7 @@ export const Default: Story<SaleFiltersProps> = () => {
     name: "",
     email: "",
     date: "",
-    is_in_cart: false,
+    is_pending: false,
   });
 
   return <SaleFilters values={values} onChange={setValues} />;

package/src/sales/filters/SaleFilters.tsx

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { TextField } from "../../static/TextField";
 import { DateRangeInput } from "../../static/date-range-input";
 
-export interface Filters {
+interface Filters {
   id: string;
   name: string;
   email: string;
@@ -12,7 +12,7 @@ export interface Filters {
   order_date_to: string;
   orderable_date_from: string;
   orderable_date_to: string;
-  is_in_cart: boolean;
+  is_pending: boolean;
 }
 
 export interface SaleFiltersProps {

package/src/sales/manual-booking/select-menu/SelectMenu.tsx

@@ -39,9 +39,7 @@ export const SelectMenu = ({
       ) : (
         <>
           {!isLoading && (
-            <Form.Label className="bold-text">
-              {t("Design:productSets")}
-            </Form.Label>
+            <Form.Label className="bold-text">{t("App:menus")}</Form.Label>
           )}
 
           <div className="menu-list-manual-booking">

package/src/snippet/snippet-template/SnippetTemplate.tsx

@@ -44,7 +44,7 @@ export function SnippetTemplate({
         <SnippetTemplateViewContextProvider>
           <div
             ref={containerRef}
-            className="d-flex flex-column-reverse flex-sm-row overflow-auto"
+            className="d-flex flex-column-reverse flex-sm-row"
           >
             <div className="d-flex flex-grow-1">
               <Preview

package/src/styles/customers/Filter.scss

@@ -1,4 +1,6 @@
 .customers-filter {
+  gap: 0.5rem;
+
   @include media-breakpoint-down(sm) {
     label {
       font-size: 0.8rem;
@@ -22,32 +24,11 @@
   }
 
   .customers-filter-items {
-    width: 100%;
-
-    .customer-filter {
-      flex: 0 0 33.33%;
-      max-width: 33.33%;
-    }
+    gap: 0.5rem;
   
     @include media-breakpoint-down(xs) {
       flex-direction: column;
-
-      .customer-filter {
-        flex: 1;
-        max-width: 100%;
-      }
-    }
-
-    @include media-breakpoint-up(sm) {
-      .customer-filter {
-        &:first-child {
-          padding-left: 0;
-        }
-  
-        &:last-child {
-          padding-right: 0;
-        }
-      }
+      gap: 0rem;  
     }
   } 
 }

package/src/styles/events/EventStatisticModal.scss

@@ -6,6 +6,43 @@
     .modal-body {
       height: 75vh;
       overflow: scroll;
+
+      table.event-statistic-table {
+        thead {
+          display: none;
+        }
+      
+        tbody {
+          tr {
+            border-bottom: 1px solid $gray-500;
+            td {
+              text-transform: capitalize;
+
+              &:nth-child(2), &:nth-child(3) {
+                text-align: right;
+              }
+              &:nth-child(2) {
+                width: 20%;
+              }
+              &:nth-child(3) {
+                width: 35%;
+              }
+            }
+
+            td:has(div.header-row){
+              background-color: #d8ecf7;
+            }
+
+            &:first-child {
+              border-top: 1px solid $gray-500;
+            }
+          }
+        }
+
+        .bold {
+          font-weight: 600;
+        }
+      }
     }
   }
 

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

@@ -202,7 +202,7 @@
 
   .step-numbers {
     font-weight: 500;
-    margin: 0 1rem;
+    margin-left: 1rem;
     color: $snippet-page-header-steps-inactive-step-body-color;
 
     .active-step {
@@ -225,7 +225,6 @@
     height: 2rem;
     transition: $color-transition;
     max-width: calc(100% - 12rem);
-    flex-grow: 1;
 
     .step {
       display: flex;
@@ -234,12 +233,10 @@
       margin: 0 0.5rem;
       z-index: 1;
       scroll-margin: 10rem;
-      flex-grow: 1;
 
       .number {
         text-align: center;
-        max-width: 3rem;
-        width: 100%;
+        width: 3rem;
         height: 0.25rem;
         line-height: 2.5rem;
         background: $snippet-page-header-steps-inactive-step-background-color;

package/src/styles/packages.scss

@@ -36,4 +36,3 @@
 @import "./virtualized/";
 @import "./error";
 @import "./customers/";
-@import "./striped-static-table/";

package/src/styles/snippet-templates/SnippetTemplateCard.scss

@@ -45,22 +45,6 @@ $snippet-template-card-button-transition: $product-set-card-transition !default;
     display: flex;
     justify-content: space-between;
     align-items: center;
-
-    a {
-      white-space: nowrap;
-      display: inline-block;
-      text-overflow: ellipsis;
-      width: 85%;
-      overflow: hidden;
-    }
-  }
-
-  .snippet-template-card-subject {
-    white-space: nowrap;
-    display: inline-block;
-    text-overflow: ellipsis;
-    width: 100%;
-    overflow: hidden;
   }
 
   .snippet-template-card-button {

package/src/table/FilterHelperComponent.tsx

@@ -33,7 +33,6 @@ function FilterHelperComponent({
     if (onClickFn) {
       onClickFn("");
     }
-    setItem("");
   };
 
   const onSearch = () => {

package/src/table/StaticTable.tsx

@@ -11,7 +11,7 @@ export interface StaticTableData {
   [key: string]: ReactNode;
 }
 
-export interface StaticTableProps {
+interface StaticTableProps {
   className?: string;
   columns: StaticTableColumn[];
   data: StaticTableData[];
@@ -19,7 +19,6 @@ export interface StaticTableProps {
   bordered?: boolean;
   hover?: boolean;
   size?: string;
-  displayHeader?: boolean;
 }
 
 export function StaticTable({
@@ -30,7 +29,6 @@ export function StaticTable({
   bordered = false,
   hover = false,
   size,
-  displayHeader = true,
 }: StaticTableProps) {
   return (
     <Table
@@ -40,7 +38,7 @@ export function StaticTable({
       hover={hover}
       size={size}
     >
-      {displayHeader && <TableHead columns={columns} />}
+      <TableHead columns={columns} />
       <tbody>
         {data.map((row) => (
           <tr key={row.key}>

package/src/typeahead/Typeahead.stories.tsx

@@ -1,23 +1,20 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
-import { FormProvider, useForm } from "react-hook-form";
 import { Typeahead } from "./Typeahead";
 
-storiesOf("Typeahead", module).add("Typeahead", () => {
-  const form = useForm();
-  return (
-    <FormProvider {...form}>
+storiesOf("Typeahead", module)
+  .add("Typeahead", () => (
+    <>
       <Typeahead
         name="user"
-        isMultipleChoise
         options={[
           { id: 1, value: "user1", label: "User1" },
           { id: 2, value: "user2", label: "User2" },
           { id: 3, value: "user3", label: "User3" },
         ]}
+        setValue={() => {}}
         placeholder="Select"
         noOptionsMessage="No Options Found"
       />
-    </FormProvider>
-  );
-});
+    </>
+  ));

package/src/typeahead/Typeahead.tsx

@@ -1,54 +1,47 @@
 import React from "react";
 import Select from "react-select";
-import { Controller, useFormContext } from "react-hook-form";
+import { useForm, Controller } from "react-hook-form";
 
 export type TypeaheadOptions = {
-  id: number | string;
-  value: any;
+  id: number;
+  value: string;
   label: string;
 };
 
 export interface TypeaheadProps {
   options: TypeaheadOptions[];
+  setValue: (value: string | any) => void;
   placeholder: string;
   isRequired?: boolean;
   name: string;
-  isMultipleChoise?: boolean;
   noOptionsMessage: string;
-  isInvalid?: boolean;
 }
 
 function Typeahead({
   options,
+  setValue,
   placeholder,
   isRequired = false,
-  isMultipleChoise,
   name = "",
   noOptionsMessage = "",
-  isInvalid,
-}: TypeaheadProps) {
-  const { control } = useFormContext();
-
-  const getErrorStyle = () => (isInvalid ? { borderColor: "red" } : {});
+}) {
+  const { control } = useForm({
+    mode: "onChange",
+  });
+  const prefix = "id";
 
   return (
     <>
       <Controller
-        name={name}
+        name={`${name}.${prefix as string}` as const}
         control={control}
         rules={{ required: isRequired }}
         render={({ field }) => (
           <Select
             placeholder={placeholder}
             value={field.value}
-            isMulti={isMultipleChoise}
-            styles={{
-              control: (base) => ({
-                ...base,
-                ...getErrorStyle(),
-              }),
-            }}
             onChange={(value) => {
+              setValue(`${name}.${prefix}`, value.id);
               field.onChange(value);
             }}
             options={options}

package/src/types/iframe.ts

@@ -6,10 +6,8 @@ export interface Product {
   description: string;
   deposit: number;
   price: number;
-  minSub?: number;
   minAmount?: number;
   maxAmount?: number;
-  minSpend?: number | null;
   isSoldOut?: boolean;
   isRequired?: boolean;
   isUnlimited?: boolean;

package/dist/events/event-venue-map/components/MapPoint/components/ProductTooltip/ProductTooltip.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-type ProductTooltipProps = {
-    x: number;
-    y: number;
-    text: string;
-};
-export declare const ProductTooltip: ({ x, y, text }: ProductTooltipProps) => JSX.Element;
-export {};
-//# sourceMappingURL=ProductTooltip.d.ts.map

package/dist/events/event-venue-map/components/MapPoint/components/ProductTooltip/ProductTooltip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ProductTooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/events/event-venue-map/components/MapPoint/components/ProductTooltip/ProductTooltip.tsx"],"names":[],"mappings":";AAkBA,KAAK,mBAAmB,GAAG;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,cAAc,mBAAoB,mBAAmB,gBA2CjE,CAAC"}

package/dist/events/event-venue-map/components/MapPoint/components/ProductTooltip/ProductTooltip.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,i=require("react-konva"),l="#000";exports.ProductTooltip=function(e){var t=e.x,o=e.y,c=e.text;return r.createElement(i.Group,{width:60,height:20,x:t+30,y:o-1},r.createElement(i.Rect,{x:-5,y:5,sceneFunc:function(e){e.beginPath(),e.moveTo(0,5),e.lineTo(5,0),e.lineTo(5,10),e.closePath(),e.fill()},fill:l,borderColor:l,opacity:.8}),r.createElement(i.Rect,{x:0,y:0,width:60,height:20,fill:l,cornerRadius:5,opacity:.8}),r.createElement(i.Text,{y:4,text:c,strokeWidth:5,width:60,align:"center",verticalAlign:"middle",fill:"#FFF"}))};

package/dist/events/event-venue-map/components/MapPoint/components/ProductTooltip/index.d.ts

@@ -1,2 +0,0 @@
-export { ProductTooltip } from "./ProductTooltip";
-//# sourceMappingURL=index.d.ts.map

package/dist/events/event-venue-map/components/MapPoint/components/ProductTooltip/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/events/event-venue-map/components/MapPoint/components/ProductTooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/notification/hooks/useTranslatedParameters.d.ts

@@ -1,7 +0,0 @@
-type UseTranslatedParametersProps = {
-    isDefault: boolean;
-    isActive: boolean;
-};
-export declare const useTranslatedParameters: ({ isActive, isDefault, }: UseTranslatedParametersProps) => string;
-export {};
-//# sourceMappingURL=useTranslatedParameters.d.ts.map

package/dist/notification/hooks/useTranslatedParameters.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTranslatedParameters.d.ts","sourceRoot":"","sources":["../../../src/notification/hooks/useTranslatedParameters.ts"],"names":[],"mappings":"AAEA,KAAK,4BAA4B,GAAG;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,uBAAuB,6BAGjC,4BAA4B,WAgB9B,CAAC"}

package/dist/notification/hooks/useTranslatedParameters.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react-i18next");exports.useTranslatedParameters=function(t){var s,r=t.isActive,i=t.isDefault,a=e.useTranslation(["Design"]).t;return s=[],i&&s.push(a("Design:default")),r&&s.push(a("Design:active")),s.join(", ")};

package/dist/striped-static-table/StripedStaticTable.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { StaticTableProps, StaticTableData } from "../table";
-export type StripedStaticTableProps = Omit<StaticTableProps, "data"> & {
-    data: StaticTableData[][];
-};
-export declare const StripedStaticTable: ({ columns, className, data, ...props }: StripedStaticTableProps) => JSX.Element;
-//# sourceMappingURL=StripedStaticTable.d.ts.map

package/dist/striped-static-table/StripedStaticTable.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StripedStaticTable.d.ts","sourceRoot":"","sources":["../../src/striped-static-table/StripedStaticTable.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAe,eAAe,EAAE,MAAM,UAAU,CAAC;AAE1E,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAAG;IACrE,IAAI,EAAE,eAAe,EAAE,EAAE,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,2CAK5B,uBAAuB,gBAiDzB,CAAC"}

package/dist/striped-static-table/StripedStaticTable.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),a=require("react"),r=(e=a)&&"object"==typeof e&&"default"in e?e.default:e;require("../table/MenuButton.js"),require("../table/FilterHelperComponent.js"),require("../table/PaginationHelperComponent.js"),require("../table/PerPageHelperComponent.js");var l=require("../table/StaticTable.js");require("../table/TableHelperComponent.js"),require("../table/ReactTableHelperComponent.js");exports.StripedStaticTable=function(e){var a=e.columns,n=e.className,s=void 0===n?"":n,i=e.data,o=t.__rest(e,["columns","className","data"]),c=i.map((function(e){return e.map((function(e,a,l){var n=l.length;return Object.fromEntries(Object.entries(e).map((function(e){var l=t.__read(e,2),s=l[0],i=l[1];return"key"===s?[s,i]:0===a?[s,r.createElement("div",{key:s,className:"bold header-row"},i)]:a===n-1?[s,r.createElement("div",{key:s,className:"bold"},i)]:[s,i]})))}))})).flat();return r.createElement(l.StaticTable,t.__assign({columns:a,data:c,className:"striped-static-table ".concat(s),displayHeader:!1},o))};

package/dist/striped-static-table/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./StripedStaticTable";
-//# sourceMappingURL=index.d.ts.map

package/dist/striped-static-table/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/striped-static-table/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/styles/striped-static-table/_index.scss

@@ -1,33 +0,0 @@
-table.striped-static-table {
-  tbody {
-    tr {
-      border-bottom: 1px solid $gray-500;
-      td {
-        text-transform: capitalize;
-
-        &:nth-child(2),
-        &:nth-child(3) {
-          text-align: right;
-        }
-        &:nth-child(2) {
-          width: 20%;
-        }
-        &:nth-child(3) {
-          width: 35%;
-        }
-      }
-
-      td:has(div.header-row) {
-        background-color: #d8ecf7;
-      }
-
-      &:first-child {
-        border-top: 1px solid $gray-500;
-      }
-    }
-  }
-
-  .bold {
-    font-weight: 600;
-  }
-}

package/src/events/event-venue-map/components/MapPoint/components/ProductTooltip/ProductTooltip.tsx

@@ -1,68 +0,0 @@
-import React from "react";
-import { Group, Rect, Text } from "react-konva";
-
-const TOOLTIP_WIDTH = 60;
-const TOOLTIP_HEIGHT = 20;
-
-const BACKGROUND_COLOR = "#000";
-const BACKGROUND_Y_OFFSET = 1;
-const BACKGROUND_X_OFFSET = 30;
-const BACKGROUND_RADIUS = 5;
-const BACKGROUND_OPACITY = 0.8;
-
-const TEXT_Y_OFFSET = 4;
-const TEXT_STROKE_WIDTH = 5;
-const TEXT_COLOR = "#FFF";
-const TEXT_ALIGN = "center";
-const TEXT_VERTICAL_ALIGN = "middle";
-
-type ProductTooltipProps = {
-  x: number;
-  y: number;
-  text: string;
-};
-
-export const ProductTooltip = ({ x, y, text }: ProductTooltipProps) => {
-  return (
-    <Group
-      width={TOOLTIP_WIDTH}
-      height={TOOLTIP_HEIGHT}
-      x={x + BACKGROUND_X_OFFSET}
-      y={y - BACKGROUND_Y_OFFSET}
-    >
-      <Rect
-        x={-5}
-        y={5}
-        sceneFunc={(context) => {
-          context.beginPath();
-          context.moveTo(0, 5);
-          context.lineTo(5, 0);
-          context.lineTo(5, 10);
-          context.closePath();
-          context.fill();
-        }}
-        fill={BACKGROUND_COLOR}
-        borderColor={BACKGROUND_COLOR}
-        opacity={BACKGROUND_OPACITY}
-      />
-      <Rect
-        x={0}
-        y={0}
-        width={TOOLTIP_WIDTH}
-        height={TOOLTIP_HEIGHT}
-        fill={BACKGROUND_COLOR}
-        cornerRadius={BACKGROUND_RADIUS}
-        opacity={BACKGROUND_OPACITY}
-      />
-      <Text
-        y={TEXT_Y_OFFSET}
-        text={text}
-        strokeWidth={TEXT_STROKE_WIDTH}
-        width={TOOLTIP_WIDTH}
-        align={TEXT_ALIGN}
-        verticalAlign={TEXT_VERTICAL_ALIGN}
-        fill={TEXT_COLOR}
-      />
-    </Group>
-  );
-};

package/src/events/event-venue-map/components/MapPoint/components/ProductTooltip/index.ts

@@ -1 +0,0 @@
-export { ProductTooltip } from "./ProductTooltip";

package/src/notification/hooks/useTranslatedParameters.ts

@@ -1,27 +0,0 @@
-import { useTranslation } from "react-i18next";
-
-type UseTranslatedParametersProps = {
-  isDefault: boolean;
-  isActive: boolean;
-};
-
-export const useTranslatedParameters = ({
-  isActive,
-  isDefault,
-}: UseTranslatedParametersProps) => {
-  const { t } = useTranslation(["Design"]);
-
-  const translatedParameters = () => {
-    const texts: string[] = [];
-    if (isDefault) {
-      texts.push(t("Design:default"));
-    }
-    if (isActive) {
-      texts.push(t("Design:active"));
-    }
-
-    return texts.join(", ");
-  };
-
-  return translatedParameters();
-};