@licklist/design 0.45.0-dev.0 → 0.45.0

package/src/sales/coupon/form/CouponFrom.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect } from "react";
+import { ProductGroup } from "@licklist/core/dist/DataMapper/Product/ProductGroupDataMapper";
+import {
+  CouponTotalType,
+  CouponType,
+} from "@licklist/core/dist/DataMapper/Product/CouponDataMapper";
+import { Button, Form } from "react-bootstrap";
+import { useForm, FormProvider } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { ServerError } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
+import FormErrorService from "@licklist/plugins/dist/services/Form/FormErrorService";
+
+import { CouponFormControl } from "../control";
+
+export interface CouponFormValues {
+  name?: string;
+  code: string;
+  discountType: CouponType;
+  productGroupIds: string[];
+  discount: number;
+  totalType: CouponTotalType;
+  startFrom: string;
+  validTill: string;
+  days: string[];
+  rrule?: string;
+  totalCoupons: number;
+  usesPerUser: number;
+  useAgain: number;
+  usesPerUserDay: number;
+  minAmount: number;
+  maxAmount: number;
+}
+
+export interface CouponFormProps {
+  productGroups?: ProductGroup[];
+  defaultValues?: CouponFormValues;
+  onSubmit: (values: CouponFormValues) => void;
+  isLoading?: boolean;
+  hasPermission: boolean;
+  serverErrors?: ServerError;
+}
+
+export const CouponForm = ({
+  onSubmit,
+  defaultValues,
+  isLoading = false,
+  productGroups,
+  hasPermission = false,
+  serverErrors,
+}: CouponFormProps) => {
+  const form = useForm<CouponFormValues>({
+    defaultValues,
+  });
+  const { setError } = form;
+  const { t } = useTranslation(["Design", "Notification", "App"]);
+
+  // @TODO: dont need for v1 release
+  // const [selectedProductGroups, setSelectedProductGroups] = useState<string[]>(
+  //   []
+  // );
+  // Set pre-selected Product Groups
+  // useEffect(() => {
+  //   setSelectedProductGroups(getValues("productGroupIds"));
+  // }, [getValues]);
+
+  // useEffect(() => {
+  //   setValue("productGroupIds", selectedProductGroups);
+  // }, [getValues, setValue, selectedProductGroups]);
+
+  useEffect(() => {
+    FormErrorService.handleServerErrors(serverErrors, setError);
+  }, [serverErrors, setError]);
+
+  return (
+    <FormProvider {...form}>
+      <Form
+        className="coupon-form"
+        onSubmit={form.handleSubmit(onSubmit)}
+        noValidate
+      >
+        <CouponFormControl
+          productGroups={productGroups}
+          isLoading={isLoading}
+        />
+        {hasPermission && (
+          <Button
+            className="mt-5 d-no dne d-md-block"
+            type="submit"
+            disabled={isLoading}
+          >
+            {t("save")}
+          </Button>
+        )}
+      </Form>
+    </FormProvider>
+  );
+};

package/src/sales/coupon/form/index.ts

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

package/src/sales/coupon/index.tsx

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

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

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import { Meta, Story } from "@storybook/react";
+import { SaleFilters, SaleFiltersProps } from "./SaleFilters";
+
+export default {
+  title: "Sales/Filters",
+  component: SaleFilters,
+} as Meta;
+
+export const Default: Story<SaleFiltersProps> = () => {
+  const [values, setValues] = useState({
+    id: "",
+    name: "",
+    email: "",
+    date: "",
+    is_in_cart: false,
+  });
+
+  return <SaleFilters values={values} onChange={setValues} />;
+};

package/src/sales/filters/SaleFilters.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import { TextField } from "../../static/TextField";
+import { DateRangeInput } from "../../static/date-range-input";
+
+export interface Filters {
+  id: string;
+  name: string;
+  email: string;
+  order_date_from: string;
+  order_date_to: string;
+  orderable_date_from: string;
+  orderable_date_to: string;
+  is_in_cart: boolean;
+  isFilterOpen?: boolean;
+}
+
+export interface SaleFiltersProps {
+  values: Filters;
+  onChange: (values: Filters) => void;
+}
+
+interface TextFilter {
+  name: string;
+  label: string;
+  type: string;
+}
+
+// @TODO WILL BE REMOVED IN TASK LIC-1386
+// INTEGRATION WITH NEW BACKEND SERVICE
+export function SaleFilters({ values, onChange }: SaleFiltersProps) {
+  const { t } = useTranslation(["Design"]);
+
+  const textFilters: TextFilter[][] = [
+    [
+      { name: "id", label: t("saleId"), type: "number" },
+      { name: "name", label: t("name"), type: "text" },
+    ],
+    [
+      { name: "email", label: t("email"), type: "text" },
+      { name: "order_date", label: t("orderDate"), type: "text" },
+      { name: "orderable_date", label: t("dateOfBooking"), type: "text" },
+    ],
+  ];
+
+  return (
+    <div className="sales-filter d-flex">
+      <div className="d-flex sales-filter-items">
+        {textFilters.map((row: TextFilter[]) => (
+          <div className="sales-rows" key={row[0].label}>
+            {row.map(({ name, type, label }) => (
+              <>
+                <TextField
+                  key={name}
+                  className={clsx("mb-0")}
+                  {...{ type, label }}
+                  value={values[name]}
+                  onChange={(event) =>
+                    onChange({ ...values, [name]: event.target.value })
+                  }
+                  component={
+                    ["order_date", "orderable_date"].includes(name) ? (
+                      <DateRangeInput
+                        placeholder={label}
+                        startDate={values[`${name}_from`]}
+                        endDate={values[`${name}_to`]}
+                        onDateChange={({ startDate, endDate }) =>
+                          onChange({
+                            ...values,
+                            [`${name}_from`]: startDate,
+                            [`${name}_to`]: endDate,
+                          })
+                        }
+                      />
+                    ) : undefined
+                  }
+                />
+              </>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/sales/filters/index.ts

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

package/src/sales/guest-profile/index.ts

@@ -0,0 +1,4 @@
+export * from "./profile";
+export * from "./user-metrics";
+export * from "./previous-bookings";
+export * from "./visited-providers";

package/src/sales/guest-profile/previous-bookings/PreviousBookings.stories.tsx

@@ -0,0 +1,277 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+import { boolean } from "@storybook/addon-knobs";
+import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
+import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
+import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
+import { PreviousBookings } from "./PreviousBookings";
+
+export default {
+  title: "Sales/Guest Profile/Previous Bookings",
+} as Meta;
+
+export const Default = (args) => {
+  const useProviderLink = boolean("useProviderLink", true);
+
+  const renderOrderTitleLinkByProvider = (order: Order) => {
+    return (
+      <a href={`/some_href/${order.id}`}>{order[order.orderableType]?.name}</a>
+    );
+  };
+
+  return (
+    <div>
+      <PreviousBookings
+        {...args}
+        renderOrderTitleLinkByProvider={
+          useProviderLink ? renderOrderTitleLinkByProvider : undefined
+        }
+      />
+    </div>
+  );
+};
+
+Default.args = {
+  orders: [
+    {
+      id: 1,
+      people: 2,
+      products: [
+        {
+          id: 1,
+          name: "Apple juice",
+        } as Product,
+      ],
+      orderProducts: [
+        {
+          deletedAt: null,
+          id: 1,
+          orderId: 572,
+          price: 155,
+          productId: 1,
+          quantity: 22,
+        },
+      ],
+      startDate: "2022-05-20 18:28:56",
+      endDate: null,
+      createdAt: "2022-05-20 18:28:56",
+      updatedAt: "2022-05-20 18:28:56",
+      status: "cart",
+      orderableType: "event",
+      orderableId: 1,
+      event: {
+        id: 1,
+        name: "testEvent1",
+        startAt: "2022-05-15 18:21:00",
+      } as Event,
+      feeChargeType: "company",
+      user: {
+        id: 1,
+        firstName: "test",
+      } as User,
+    } as Order,
+    {
+      id: 2,
+      people: 10,
+      products: [
+        {
+          id: 2,
+          name: "Banana juice",
+        } as Product,
+      ],
+      orderProducts: [
+        {
+          deletedAt: null,
+          id: 2,
+          orderId: 572,
+          price: 155,
+          productId: 2,
+          quantity: 2,
+        },
+      ],
+      startDate: "2022-05-20 18:28:56",
+      endDate: null,
+      createdAt: "2022-05-20 18:28:56",
+      updatedAt: "2022-05-20 18:28:56",
+      status: "cart",
+      orderableType: "event",
+      orderableId: 2,
+      event: {
+        id: 2,
+        name: "testEvent2",
+        startAt: "2022-05-15 18:21:00",
+      } as Event,
+      feeChargeType: "company",
+      user: {
+        id: 2,
+        firstName: "test",
+      } as User,
+    } as Order,
+
+    {
+      id: 3,
+      people: 10,
+      products: [
+        {
+          id: 3,
+          name: "Martini drink package for 10 persons",
+        } as Product,
+        {
+          id: 4,
+          name: "Jägerbomb 2",
+        } as Product,
+      ],
+      orderProducts: [
+        {
+          deletedAt: null,
+          id: 3,
+          orderId: 572,
+          price: 155,
+          productId: 3,
+          quantity: 1,
+        },
+        {
+          deletedAt: null,
+          id: 4,
+          orderId: 572,
+          price: 155,
+          productId: 4,
+          quantity: 10,
+        },
+      ],
+      startDate: "2022-05-20 18:28:56",
+      endDate: null,
+      createdAt: "2022-05-20 18:28:56",
+      updatedAt: "2022-05-20 18:28:56",
+      status: "cart",
+      orderableType: "event",
+      orderableId: 3,
+      event: {
+        id: 3,
+        name: "testEvent3",
+        startAt: "2022-05-15 18:21:00",
+      } as Event,
+      feeChargeType: "company",
+      user: {
+        id: 3,
+        firstName: "test",
+      } as User,
+    } as Order,
+
+    {
+      id: 4,
+      people: 10,
+      products: [
+        {
+          id: 3,
+          name: "Tomato juice",
+        } as Product,
+      ],
+      orderProducts: [],
+      startDate: "2022-05-20 18:28:56",
+      endDate: null,
+      createdAt: "2022-05-20 18:28:56",
+      updatedAt: "2022-05-20 18:28:56",
+      status: "cart",
+      orderableType: "event",
+      orderableId: 3,
+      event: {
+        id: 3,
+        name: "testEvent3",
+        startAt: "2022-05-15 18:21:00",
+      } as Event,
+      feeChargeType: "company",
+      user: {
+        id: 3,
+        firstName: "test",
+      } as User,
+    } as Order,
+
+    {
+      id: 5,
+      people: 10,
+      products: [
+        {
+          id: 3,
+          name: "Tomato juice",
+        } as Product,
+      ],
+      orderProducts: [],
+      startDate: "2022-05-20 18:28:56",
+      endDate: null,
+      createdAt: "2022-05-20 18:28:56",
+      updatedAt: "2022-05-20 18:28:56",
+      status: "cart",
+      orderableType: "event",
+      orderableId: 3,
+      event: {
+        id: 3,
+        name: "testEvent3",
+        startAt: "2022-05-15 18:21:00",
+      } as Event,
+      feeChargeType: "company",
+      user: {
+        id: 3,
+        firstName: "test",
+      } as User,
+    } as Order,
+
+    {
+      id: 6,
+      people: 10,
+      products: [
+        {
+          id: 3,
+          name: "Tomato juice",
+        } as Product,
+      ],
+      orderProducts: [],
+      startDate: "2022-05-20 18:28:56",
+      endDate: null,
+      createdAt: "2022-05-20 18:28:56",
+      updatedAt: "2022-05-20 18:28:56",
+      status: "cart",
+      orderableType: "event",
+      orderableId: 3,
+      event: {
+        id: 3,
+        name: "testEvent3",
+        startAt: "2022-05-15 18:21:00",
+      } as Event,
+      feeChargeType: "company",
+      user: {
+        id: 3,
+        firstName: "test",
+      } as User,
+    } as Order,
+    {
+      id: 7,
+      people: 10,
+      products: [
+        {
+          id: 3,
+          name: "Tomato juice",
+        } as Product,
+      ],
+      orderProducts: [],
+      startDate: "2022-05-20 18:28:56",
+      endDate: null,
+      createdAt: "2022-05-20 18:28:56",
+      updatedAt: "2022-05-20 18:28:56",
+      status: "cart",
+      orderableType: "event",
+      orderableId: 3,
+      event: {
+        id: 3,
+        name: "testEvent3",
+        startAt: "2022-05-15 18:21:00",
+      } as Event,
+      feeChargeType: "company",
+      user: {
+        id: 3,
+        firstName: "test",
+      } as User,
+    } as Order,
+  ],
+};

package/src/sales/guest-profile/previous-bookings/PreviousBookings.tsx

@@ -0,0 +1,97 @@
+import React, { useState, ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { DateTime } from "luxon";
+import { Button } from "react-bootstrap";
+import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
+
+const MAX_ORDERS_COUNT = 6;
+
+export type PreviousBookingsProps = {
+  orders: Order[];
+  renderOrderTitleLinkByProvider?: (order: Order) => ReactNode;
+};
+
+export const PreviousBookings = ({
+  orders,
+  renderOrderTitleLinkByProvider,
+}: PreviousBookingsProps) => {
+  const { t } = useTranslation("Design");
+  const [showOlderBookings, setShowOlderBookings] = useState(false);
+
+  const formatDate = (date: string) => {
+    return DateTime.fromJSDate(new Date(date)).toFormat("dd LLL yyyy hh:mm");
+  };
+
+  const capitalizeFirstLetter = (string: string) => {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  };
+
+  const handleShowOrderBookings = () => {
+    setShowOlderBookings(true);
+  };
+
+  const endSlicedOrdersNumber = showOlderBookings
+    ? orders.length
+    : MAX_ORDERS_COUNT;
+
+  return (
+    <div className="previous-bookings">
+      <h6 className="mb-5">{t("previousBookings")}</h6>
+      {orders.length > 0 ? (
+        <div className="events-wrapper">
+          {orders.slice(0, endSlicedOrdersNumber).map((order) => {
+            const eventName = renderOrderTitleLinkByProvider
+              ? renderOrderTitleLinkByProvider(order)
+              : order[order.orderableType]?.name;
+
+            return (
+              <div
+                className="event-info col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6"
+                key={order.id}
+              >
+                <div className="info-wrapper">
+                  <p className="label">{eventName}</p>
+                  {order.createdAt && (
+                    <p className="event-date">{formatDate(order.createdAt)}</p>
+                  )}
+                </div>
+                {order.products.length > 0 && (
+                  <div className="products-wrapper">
+                    {order.products.map(({ name, id }) => {
+                      const orderProduct = order.orderProducts.find(
+                        (product) => product.productId === id
+                      );
+
+                      const count = orderProduct ? orderProduct.quantity : 1;
+
+                      return (
+                        <div className="product-name" key={id}>
+                          <p>+</p>&nbsp;
+                          <p>
+                            {capitalizeFirstLetter(name)}
+                            {count > 1 && <>&nbsp;x {count}</>}
+                          </p>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <p className="mt-3">{t("noPreviousBookings")}</p>
+      )}
+      {orders.length > MAX_ORDERS_COUNT && !showOlderBookings && (
+        <Button
+          onClick={handleShowOrderBookings}
+          variant="link"
+          className="older-bookings-button"
+        >
+          {t("showOlderBookings")}
+        </Button>
+      )}
+    </div>
+  );
+};

package/src/sales/guest-profile/previous-bookings/index.ts

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

package/src/sales/guest-profile/profile/Profile.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
+import { USER_GENDER_FEMALE } from "@licklist/core/dist/DataMapper/User/UserDetailDataMapper";
+
+import { Profile } from "./Profile";
+
+export default {
+  title: "Sales/Guest Profile/Profile",
+} as Meta;
+
+const USER = {
+  id: 1,
+  firstName: "Alice",
+  lastName: "Johnson",
+  userDetail: {
+    gender: USER_GENDER_FEMALE,
+  },
+} as Order["user"];
+
+export const Default = () => (
+  <div>
+    <Profile user={USER} />
+  </div>
+);

package/src/sales/guest-profile/profile/Profile.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
+import { USER_GENDER_MALE } from "@licklist/core/dist/DataMapper/User/UserDetailDataMapper";
+import { ImageHolder } from "./components/ImageHolder";
+import Logo from "../../../logo/Logo";
+import { ReactComponent as GenderFemale } from "../../../assets/dashboard/genderFemale.svg";
+import { ReactComponent as GenderMale } from "../../../assets/dashboard/genderMale.svg";
+
+type ProfileProps = {
+  user?: Order["user"];
+  // @TODO not for first release
+  // qualityScore?: string;
+};
+
+export const Profile = ({ user }: ProfileProps) => {
+  if (!user) {
+    return null;
+  }
+
+  const {
+    firstName,
+    lastName,
+    userDetail: { gender },
+  } = user;
+
+  return (
+    <div className="profile">
+      <div className="info-wrapper">
+        <ImageHolder firstName={firstName} lastName={lastName} />
+        <div className="info">
+          <div className="main">
+            <h5>
+              {firstName}&nbsp;{lastName}
+            </h5>
+            {/* // @TODO not for first release */}
+            {/* <p>
+              {t("qualityScore")}&nbsp;
+              <span className="quality-score">{qualityScore}</span>
+            </p> */}
+          </div>
+
+          {gender && (
+            <div className="gender-info">
+              <div className="gender">
+                <Logo
+                  logo={
+                    gender === USER_GENDER_MALE ? (
+                      <GenderMale />
+                    ) : (
+                      <GenderFemale />
+                    )
+                  }
+                />
+              </div>
+              {/* // @TODO not for first release */}
+              {/* <span className="label ml-4">Loyal</span> */}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};