@licklist/design 0.44.486-dev.9 → 0.44.486

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

@@ -0,0 +1,33 @@
+import React from "react";
+import Icon from "../../../../static/Icon";
+
+export type ResultTagButtonProps = {
+  tagKey: string;
+  value: string;
+  onRemoveClick: (tagKey: string) => void;
+};
+
+export const ResultTagButton = ({
+  tagKey,
+  value,
+  onRemoveClick,
+}: ResultTagButtonProps) => {
+  const onButtonClick = () => {
+    onRemoveClick(tagKey);
+  };
+
+  return (
+    <div className="result-tag rounded-pill shadow-none">
+      {value}
+      <div
+        className="icon"
+        role="button"
+        tabIndex={0}
+        onClick={onButtonClick}
+        onKeyUp={onButtonClick}
+      >
+        <Icon type="plus" style={{ width: 10 }} color="#727272" />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,68 @@
+import React, { useContext, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "react-bootstrap";
+import {
+  BookingContext,
+  BookingFilters,
+} from "@licklist/plugins/dist/context/booking/BookingContext";
+import { ResultTagButton } from "./ResultTagButton";
+
+const SEARCHING_FOR_FILTER_KEYS = ["q", "status", "date", "staffMember"];
+
+export const SearchingForSection = () => {
+  const { t } = useTranslation("Design");
+  const { filters, setFilters } = useContext(BookingContext);
+
+  const filteredFilters = useMemo(() => {
+    return SEARCHING_FOR_FILTER_KEYS.reduce(
+      (prevValues: Partial<BookingFilters>, currentKey: string) => {
+        if (filters[currentKey]) {
+          return { ...prevValues, [currentKey]: filters[currentKey] };
+        }
+
+        return prevValues;
+      },
+      {}
+    );
+  }, [filters]);
+
+  const resetAllFilters = () => {
+    setFilters({ isFilterOpen: true });
+  };
+
+  const onResetSelectedFilter = (key: string) => {
+    setFilters({ ...filters, [key]: "" });
+  };
+
+  if (!Object.keys(filteredFilters).length) {
+    return null;
+  }
+
+  const { search, ...allFilters } = filteredFilters;
+
+  return (
+    <div className="searching-for-section">
+      <div className="tags">
+        <p className="label">{t("Design:searchingFor")}:</p>
+        <p className="search-query-param">{search}</p>
+        {Object.keys(allFilters).map((key: string) => {
+          return (
+            <ResultTagButton
+              key={key}
+              tagKey={key}
+              value={allFilters[key]}
+              onRemoveClick={onResetSelectedFilter}
+            />
+          );
+        })}
+        <Button
+          variant="link"
+          className="shadow-none"
+          onClick={resetAllFilters}
+        >
+          {t("clear")}
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/sales/booking/filter/index.ts

@@ -0,0 +1,2 @@
+export { BookingFilter } from "./BookingFilter";
+export type { BookingFilterProps } from "./BookingFilter";

package/src/sales/booking/index.ts

@@ -1 +1,3 @@
+export * from "./tabs";
+export * from "./filter";
 export * from "./results";

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

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { DateTime } from "luxon";
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
-import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
+import { formatDateStringToOrdinalFormatWithPrefix } from "@licklist/core/dist/Services/Date";
 import Icon from "../../../../static/Icon";
 
 export type ResultCardProps = {
@@ -55,7 +55,7 @@ export const ResultCard = ({
             {t("status")}: {t(status)}
           </p>
           <p>
-            {t("date")}: {formatDateStringForEvent(startDate)}
+            {t("date")}: {formatDateStringToOrdinalFormatWithPrefix(startDate)}
           </p>
           <p>
             {t("time")}: {DateTime.fromISO(startDate).toFormat("hh:MM")}

package/src/sales/booking/results/constants.ts

@@ -3,5 +3,4 @@ export const BACKGROUND_COLOR_CLASSNAMES = [
   "random-color-yellow",
   "random-color-green",
   "random-color-pink",
-  "random-color-violet",
 ];

package/src/sales/booking/results/index.ts

@@ -1,3 +1,2 @@
 export { BookingResults } from "./BookingResults";
-export * from "./constants";
 export type { BookingResultsProps } from "./BookingResults";

package/src/sales/booking/tabs/BookingTabs.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { BookingContextProvider } from "@licklist/plugins/dist/context/booking/BookingContext";
+import { BookingTabs, BookingTabsProps } from "./BookingTabs";
+
+export default {
+  title: "Sales/Booking/Tabs",
+  component: BookingTabs,
+} as Meta;
+
+export const Default: Story<BookingTabsProps> = () => {
+  return (
+    <BookingContextProvider>
+      <BookingTabs>Bookings</BookingTabs>
+    </BookingContextProvider>
+  );
+};

package/src/sales/booking/tabs/BookingTabs.tsx

@@ -0,0 +1,88 @@
+import React, { PropsWithChildren } from "react";
+import { Button } from "react-bootstrap";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import {
+  BOOKING_LIST_TYPE,
+  BOOKING_CALENDAR_TYPE,
+  BOOKING_TYPE,
+} from "@licklist/plugins/dist/context/booking/BookingContext";
+import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
+import Icon from "../../../static/Icon";
+import { ReactComponent as BookingCalendar } from "../../../assets/dashboard/bookingCalendar.svg";
+import { ReactComponent as BookingList } from "../../../assets/dashboard/bookingList.svg";
+import { ReactComponent as BookingListSmall } from "../../../assets/dashboard/bookingListSmall.svg";
+
+const VIEW_TYPES: BOOKING_TYPE[] = [BOOKING_LIST_TYPE, BOOKING_CALENDAR_TYPE];
+
+export type BookingTabsProps = HasPermissionProp &
+  PropsWithChildren<{
+    onReportsClick?: () => void;
+    onAddButtonClick?: () => void;
+    viewType: BOOKING_TYPE;
+    onSetType: (value: BOOKING_TYPE) => void;
+  }>;
+
+export const BookingTabs = ({
+  children,
+  onReportsClick,
+  onAddButtonClick,
+  hasPermission = false,
+  viewType,
+  onSetType,
+}: BookingTabsProps) => {
+  const { t } = useTranslation("Design");
+
+  return (
+    <div className="booking-tabs-pane">
+      <div className="booking-tabs">
+        {VIEW_TYPES.map((tabType: BOOKING_TYPE) => {
+          return (
+            <Button
+              key={tabType}
+              variant="link"
+              size="sm"
+              className={clsx(
+                "p-0 m-0 pr-2 shadow-none",
+                viewType === tabType && "active"
+              )}
+              onClick={() => {
+                onSetType(tabType);
+              }}
+            >
+              {tabType === BOOKING_LIST_TYPE ? (
+                <BookingList />
+              ) : (
+                <BookingCalendar />
+              )}
+            </Button>
+          );
+        })}
+      </div>
+      <span className="separator" />
+      <div className="children">{children}</div>
+      {hasPermission && (
+        <div className="buttons">
+          <Button
+            variant="outline-primary"
+            className="shadow-none mr-4"
+            onClick={onReportsClick}
+          >
+            <BookingListSmall className="mr-2" />
+            {t("generateReports")}
+          </Button>
+          <Button
+            variant="primary"
+            className="shadow-none"
+            onClick={onAddButtonClick}
+          >
+            <div className="icon">
+              <Icon type="plus" style={{ width: 10 }} color="#0E8CE2" />
+            </div>
+            {t("newBooking")}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/sales/booking/tabs/index.ts

@@ -0,0 +1,2 @@
+export { BookingTabs } from "./BookingTabs";
+export type { BookingTabsProps } from "./BookingTabs";

package/src/sales/coupon/control/CouponFormControl.tsx

@@ -233,7 +233,6 @@ export const CouponFormControl = ({
               <Form.Control
                 type="date"
                 {...register("validTill")}
-                value={validTillValue}
                 onChange={(e) => {
                   const date = DateTime.fromSQL(e.target.value).toISODate();
                   setValue("validTill", date);
@@ -332,7 +331,6 @@ export const CouponFormControl = ({
             <Form.Group>
               <Form.Label>{t("Design:totalCoupons")}</Form.Label>
               <Form.Control
-                {...register("totalCoupons")}
                 type="number"
                 isInvalid={errors.totalCoupons !== undefined}
                 disabled={isLoading}

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/guest-profile/previous-bookings/PreviousBookings.stories.tsx

@@ -1,6 +1,5 @@
 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";
@@ -11,26 +10,11 @@ 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>
-  );
-};
+export const Default = (args) => (
+  <div>
+    <PreviousBookings {...args} />
+  </div>
+);
 
 Default.args = {
   orders: [
@@ -59,8 +43,6 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
-      orderableType: "event",
-      orderableId: 1,
       event: {
         id: 1,
         name: "testEvent1",
@@ -97,8 +79,6 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
-      orderableType: "event",
-      orderableId: 2,
       event: {
         id: 2,
         name: "testEvent2",
@@ -148,8 +128,6 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
-      orderableType: "event",
-      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -178,8 +156,6 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
-      orderableType: "event",
-      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -208,8 +184,6 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
-      orderableType: "event",
-      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -238,8 +212,6 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
-      orderableType: "event",
-      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -267,8 +239,6 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
-      orderableType: "event",
-      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",

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

@@ -1,4 +1,4 @@
-import React, { useState, ReactNode } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DateTime } from "luxon";
 import { Button } from "react-bootstrap";
@@ -8,13 +8,9 @@ const MAX_ORDERS_COUNT = 6;
 
 export type PreviousBookingsProps = {
   orders: Order[];
-  renderOrderTitleLinkByProvider?: (order: Order) => ReactNode;
 };
 
-export const PreviousBookings = ({
-  orders,
-  renderOrderTitleLinkByProvider,
-}: PreviousBookingsProps) => {
+export const PreviousBookings = ({ orders }: PreviousBookingsProps) => {
   const { t } = useTranslation("Design");
   const [showOlderBookings, setShowOlderBookings] = useState(false);
 
@@ -40,17 +36,13 @@ export const PreviousBookings = ({
       {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>
+                  <p className="label">{order.event?.name}</p>
                   {order.createdAt && (
                     <p className="event-date">{formatDate(order.createdAt)}</p>
                   )}