@licklist/design 0.44.485-dev.9 → 0.44.485-dev.91

package/src/sorting-select/SortingSelect.stories.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { SortingSelect, SortingSelectProps } from "./SortingSelect";
+
+export default {
+  title: "SortingSelect",
+} as Meta;
+
+export const Default: Story<SortingSelectProps> = (props) => {
+  return <SortingSelect {...props} />;
+};
+
+Default.args = {
+  onSortingChange: () => null,
+};

package/src/sorting-select/SortingSelect.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from "react";
+import useQuery from "@licklist/plugins/dist/hooks/Query/useQuery";
+import { Form, FormGroupProps } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import {
+  SORT_DIRECTION_ASC,
+  SORT_DIRECTION_NEWEST,
+  SORT_DIRECTION_DESC,
+  SORT_KEY_NAME,
+  SORT_KEY_CREATED_AT,
+} from "@licklist/core/dist/Config";
+
+export type SortingSelectProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  formGroupProps?: FormGroupProps & Record<string, any>;
+  defaultSortKey?: string;
+  defaultSortDirection?: string;
+  onSortingChange?: (url: URLSearchParams) => void;
+};
+
+export const SortingSelect = ({
+  formGroupProps,
+  defaultSortKey = SORT_KEY_NAME,
+  defaultSortDirection = SORT_DIRECTION_ASC,
+  onSortingChange,
+}: SortingSelectProps) => {
+  const { t } = useTranslation("Design");
+  const [controlValue, setControlValue] = useState(SORT_DIRECTION_ASC);
+  const searchParams = useQuery();
+
+  const { sortKey = defaultSortKey, sortDirection = defaultSortDirection } =
+    Object.fromEntries(searchParams);
+
+  const onSortingValueChange = ({ target: { value } }) => {
+    setControlValue(value);
+
+    const nextSortDirection =
+      value === SORT_DIRECTION_NEWEST ? SORT_DIRECTION_DESC : value;
+
+    const nextSortKey =
+      value === SORT_DIRECTION_NEWEST ? SORT_KEY_CREATED_AT : sortKey;
+
+    const nextSearchParams = new URLSearchParams(searchParams);
+
+    nextSearchParams.set("sortDirection", nextSortDirection);
+    nextSearchParams.set("sortKey", nextSortKey);
+
+    onSortingChange(nextSearchParams);
+  };
+
+  useEffect(() => {
+    if (sortKey === SORT_KEY_CREATED_AT) {
+      setControlValue(SORT_DIRECTION_NEWEST);
+      return;
+    }
+
+    setControlValue(sortDirection);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sortKey, sortDirection]);
+
+  return (
+    <Form.Group className="d-flex align-items-center p-0" {...formGroupProps}>
+      <Form.Label className="text-nowrap mr-4 mb-0">
+        {t("App:sortBy")}:
+      </Form.Label>
+      <Form.Control
+        as="select"
+        data-testid="sorting-select"
+        onChange={onSortingValueChange}
+        custom
+        value={controlValue}
+      >
+        <option value={SORT_DIRECTION_ASC}>A-Z</option>
+        <option value={SORT_DIRECTION_DESC}>Z-A</option>
+        <option value={SORT_DIRECTION_NEWEST}>{t("newestOnTop")}</option>
+      </Form.Control>
+    </Form.Group>
+  );
+};

package/src/sorting-select/index.ts

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

package/src/static/date-range-input/DateRangeInput.tsx

@@ -3,7 +3,7 @@ import { Button, Form, OverlayTrigger, Popover } from "react-bootstrap";
 import { DateRange, Range } from "react-date-range";
 import { useClickAway } from "react-use";
 import { useTranslation } from "react-i18next";
-import type Popper from "@popperjs/core";
+import { Modifier } from "@popperjs/core";
 import { useId } from "@react-aria/utils";
 import { Icon } from "..";
 import {
@@ -15,11 +15,12 @@ import {
 import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
 
-export type DateRangeInputProps = {
+type DateRangeInputProps = {
   placeholder: string;
   startDate?: string;
   endDate?: string;
   months?: number;
+  disabled?: boolean;
   onDateChange?: (dates: { startDate?: string; endDate?: string }) => void;
 };
 
@@ -29,6 +30,7 @@ export const DateRangeInput = ({
   endDate,
   onDateChange,
   months = 2,
+  disabled,
 }: DateRangeInputProps) => {
   const { t } = useTranslation("Design");
 
@@ -123,6 +125,7 @@ export const DateRangeInput = ({
           <Form.Control
             type="input"
             placeholder={placeholder}
+            disabled={disabled}
             readOnly
             className="date-range-input"
             value={stringDatesToInputValue({ startDate, endDate })}
@@ -138,7 +141,7 @@ export const DateRangeInput = ({
   );
 };
 
-export const sameWidthPopperModifier: Popper.Modifier<
+const sameWidthPopperModifier: Modifier<
   "sameWidth",
   Record<string, unknown>
 > = {

package/src/striped-static-table/StripedStaticTable.stories.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import {
+  StripedStaticTable,
+  StripedStaticTableProps,
+} from "./StripedStaticTable";
+
+export default {
+  title: "StripedStaticTable",
+  component: StripedStaticTable,
+} as Meta;
+
+export const Default: Story<StripedStaticTableProps> = (args) => {
+  return <StripedStaticTable {...args} />;
+};
+
+Default.args = {
+  columns: [
+    { key: "name", label: "" },
+    { key: "quantity", label: "" },
+    { key: "total", label: "" },
+  ],
+  data: [
+    [
+      {
+        key: 1,
+        name: "test category",
+        quantity: "Qty",
+        total: "Total",
+      },
+      {
+        key: 2,
+        name: "product",
+        quantity: "2/16",
+        total: "160",
+      },
+      {
+        key: 4,
+        name: "total per category",
+        quantity: "2/16",
+        total: "160",
+      },
+    ],
+    [
+      {
+        key: 1,
+        name: "test category",
+        quantity: "Qty",
+        total: "Total",
+      },
+      {
+        key: 2,
+        name: "product",
+        quantity: "2/16",
+        total: "160",
+      },
+      {
+        key: 5,
+        name: "product",
+        quantity: "2/16",
+        total: "160",
+      },
+      {
+        key: 4,
+        name: "total per category",
+        quantity: "2/16",
+        total: "160",
+      },
+    ],
+  ],
+};

package/src/striped-static-table/StripedStaticTable.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+
+import { StaticTableProps, StaticTable, StaticTableData } from "../table";
+
+export type StripedStaticTableProps = Omit<StaticTableProps, "data"> & {
+  data: StaticTableData[][];
+};
+
+export const StripedStaticTable = ({
+  columns,
+  className = "",
+  data,
+  ...props
+}: StripedStaticTableProps) => {
+  const styledData = data
+    .map(
+      (section) =>
+        section.map((row, rowIndex, array) => {
+          const { length } = array;
+
+          return Object.fromEntries(
+            Object.entries(row).map(([key, value]) => {
+              if (key === "key") {
+                return [key, value];
+              }
+
+              // make first row blue and bold
+              if (rowIndex === 0) {
+                return [
+                  key,
+                  <div key={key} className="bold header-row">
+                    {value}
+                  </div>,
+                ];
+              }
+
+              // make last row bold
+              if (rowIndex === length - 1) {
+                return [
+                  key,
+                  <div key={key} className="bold">
+                    {value}
+                  </div>,
+                ];
+              }
+
+              return [key, value];
+            })
+          );
+        }) as StaticTableData[]
+    )
+    .flat();
+
+  return (
+    <StaticTable
+      columns={columns}
+      data={styledData}
+      className={`striped-static-table ${className}`}
+      displayHeader={false}
+      {...props}
+    />
+  );
+};

package/src/striped-static-table/index.ts

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

package/src/styles/events/EventStatisticModal.scss

@@ -6,43 +6,6 @@
     .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/events/EventVenueMap.scss

@@ -55,7 +55,7 @@
   .zoom-buttons {
     position: absolute;
     top: calc((100% - 10rem) / 2);
-    right: 0.75rem;
+    right: 1.75rem;
     z-index: 5;
 
     .buttons-wrapper {

package/src/styles/iframe-customers-journey/ActivitiesCard.scss

@@ -0,0 +1,37 @@
+@import "../snippet-templates/snippetVariables";
+
+.activity-card {
+  border: 2px solid transparent;
+  transition: $color-transition;
+  color: $snippet-elements-body-color;
+  border-radius: 0.5rem;
+  padding: 0.375rem;
+  min-height: 12.5rem;
+  width: 11.5rem;
+  word-wrap: break-word;
+  background-color: #fff;
+  font-size: 0.8rem;
+  color: $snippet-elements-body-color;
+
+  div {
+    text-align: left;
+  }
+
+  &.active {
+    border: 2px solid #0e8be1;
+  }
+
+  &-image {
+    width: 100%;
+    height: 6.3rem;
+    margin-bottom: 0.5rem;
+    border-radius: 0.3rem;
+  }
+
+  &-title {
+    font-weight: 600;
+    line-height: 1.25rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+  }
+}

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

@@ -0,0 +1,57 @@
+@import "../snippet-templates/snippetVariables";
+
+.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;
+    flex-direction: column;
+  }
+
+  .title {
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+  }
+
+  .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;
+    }
+  }
+}
+
+.list-activity-card-hr {
+  margin-top: 0;
+}

package/src/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/src/styles/iframe-customers-journey/_index.scss

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

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

@@ -64,6 +64,11 @@
   font-weight: 400;
   font-size: 0.875rem;
 
+  b {
+    display: block;
+    font-size: 1rem;
+  }
+
   .accordion > button {
     width: 100%;
     border: 0;
@@ -193,7 +198,7 @@
 }
 
 .steps-wrapper {
-  margin-left: 1rem;
+  margin: 0 3rem;
   flex: 1;
   display: flex;
   align-items: center;
@@ -202,7 +207,7 @@
 
   .step-numbers {
     font-weight: 500;
-    margin-left: 1rem;
+    margin: 0 1rem;
     color: $snippet-page-header-steps-inactive-step-body-color;
 
     .active-step {
@@ -225,6 +230,7 @@
     height: 2rem;
     transition: $color-transition;
     max-width: calc(100% - 12rem);
+    flex-grow: 1;
 
     .step {
       display: flex;
@@ -233,11 +239,13 @@
       margin: 0 0.5rem;
       z-index: 1;
       scroll-margin: 10rem;
+      flex-grow: 1;
 
       .number {
         text-align: center;
-        width: 3rem;
-        height: 0.25rem;
+        max-width: 17rem;
+        width: 100%;
+        height: 0.35rem;
         line-height: 2.5rem;
         background: $snippet-page-header-steps-inactive-step-background-color;
         display: block;

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

@@ -60,6 +60,7 @@
 
     .left-block-container {
       height: calc(100svh - 12rem);
+      scrollbar-width: none;
       overflow: scroll;
 
       .iframe-event-card {
@@ -119,6 +120,7 @@
 
         &.show {
           overflow: scroll;
+          scrollbar-width: none;
           overflow-x: hidden;
         }
 

package/src/styles/{widgets/ImageRadioInput.scss → image-radio-input/_index.scss}

@@ -1,4 +1,5 @@
 .image-radio-input {
+  width: min-content;
   padding: 0;
 
   &-wrapper {
@@ -9,9 +10,16 @@
     cursor: pointer;
   }
 
+  &-image-wrapper {
+    display: flex;
+    max-width: 7.5rem;
+    max-height: 4.25rem;
+  }
+
   &-label {
     display: flex;
     justify-content: center;
+    align-items: center;
     gap: 0.5rem;
 
     input {
@@ -19,4 +27,8 @@
       margin: 0;
     }
   }
+
+  .disabled {
+    opacity: 0.5;
+  }
 }

package/src/styles/packages.scss

@@ -8,9 +8,11 @@
 @import "./sales";
 @import "./setting";
 @import "./sidebar";
+@import "./sortable-field";
 @import "./sortable-tree";
 @import "./static";
 @import "./table";
+@import "./iframe-customers-journey";
 @import "./custom-fields";
 @import "./file-upload";
 @import "./iframe-events";
@@ -29,10 +31,12 @@
 @import "./iframe-page";
 @import "./affiliate";
 @import "./zones";
-@import "./widgets/";
 @import "./resources-blocking";
 @import "./ryft-payment-form";
 @import "./skeleton";
 @import "./virtualized/";
 @import "./error";
 @import "./customers/";
+@import "./striped-static-table/";
+@import "./image-radio-input/";
+@import "./radio-card/";

package/src/styles/{widgets/WidgetTypeRadioButton.scss → radio-card/_index.scss}

@@ -1,8 +1,15 @@
-.widget-type-radio {
+.radio-card {
   padding: 0;
 
+  &.invalid {
+    label {
+      border-color: $red;
+    }
+  }
+
   label {
     display: block;
+    align-items: center;
     padding: 0.75rem 1rem;
     border-radius: 0.5rem;
     border: 2px solid #dcdcdc;