@licklist/design 0.44.550 → 0.44.551-dev.1

package/src/iframe/payment/payment-status-page/component/PaymentStatusBody.tsx

@@ -3,12 +3,12 @@ import { useTranslation } from "react-i18next";
 import {
   ORDER_STATUS_PENDING,
   ORDER_STATUS_SUCCESS,
-  OrderStatusPrefix,
+  OrderStatus,
 } from "../PaymentStatusPage";
 import { StatusBody } from "../../status-body/StatusBody";
 
 interface PaymentStatusBodyProps {
-  status: OrderStatusPrefix;
+  status: OrderStatus;
   onBack: () => void;
   onTryAgain?: () => void;
   email?: string;

package/src/product-set/control/DateAndRecurrenceInput.tsx

@@ -126,7 +126,8 @@ export const DateAndRecurrenceInput = ({
       }
     }
 
-    const availableTime = availableTimesFormRef?.current?.getValues()?.availableTimes || null;
+    const availableTime =
+      availableTimesFormRef?.current?.getValues()?.availableTimes || null;
 
     const values = {
       rrule: next.rrule,

package/src/report/DataFieldsSelector/DataFieldsSelector.tsx

@@ -0,0 +1,112 @@
+import React, { ChangeEvent } from "react";
+import { useId } from "@react-aria/utils";
+import { xor } from "lodash";
+import { useTranslation } from "react-i18next";
+import { Form, Row, Col } from "react-bootstrap";
+import { Controller, useFormContext } from "react-hook-form";
+import { LoaderIndicator } from "../../static/loader/LoaderIndicator";
+
+type ReportField = {
+  id: number;
+  key: string;
+  title: string;
+};
+
+interface DataFieldsSelectorType {
+  reportFields: ReportField[];
+  isLoading?: boolean;
+}
+
+export const DataFieldsSelector = ({
+  reportFields,
+  isLoading,
+}: DataFieldsSelectorType) => {
+  const { t } = useTranslation(["App", "Design"]);
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+
+  return (
+    <>
+      {isLoading && (
+        <div className="report-fields-loader">
+          <LoaderIndicator />
+        </div>
+      )}
+
+      {!isLoading && (
+        <>
+          <Form.Label className="mt-4">{t("dataFields")}</Form.Label>
+          <Row>
+            <Controller
+              name="reportFieldValues"
+              data-testid="report-field-values-select"
+              control={control}
+              rules={{
+                validate: (value) => {
+                  if (value.length > 0) return true;
+                  return t("dataFieldRequired") as string;
+                },
+              }}
+              render={({ field }) => {
+                const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+                  // xor adds value if not present, removes if present
+                  field.onChange(xor(field.value, [Number(e.target.value)]));
+                };
+
+                return (
+                  <>
+                    {reportFields?.map((reportField) => (
+                      <Col key={reportField.id} lg={6}>
+                        <Checkbox
+                          value={reportField.id}
+                          onChange={onChange}
+                          label={reportField.title}
+                          checked={field.value.includes(reportField.id)}
+                        />
+                      </Col>
+                    ))}
+                  </>
+                );
+              }}
+            />
+          </Row>
+
+          {errors.reportFieldValues?.message && (
+            <Row>
+              <Col>
+                <div className="invalid-feedback field-values-error">
+                  {errors.reportFieldValues?.message}
+                </div>
+              </Col>
+            </Row>
+          )}
+        </>
+      )}
+    </>
+  );
+};
+
+type CheckboxProps = {
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  value: number;
+  label: string;
+  checked: boolean;
+};
+
+const Checkbox = ({ onChange, value, label, checked }: CheckboxProps) => {
+  const checkboxId = useId();
+
+  return (
+    <Form.Group controlId={checkboxId} className="custom-checkbox">
+      <Form.Check
+        label={label}
+        value={value}
+        onChange={onChange}
+        checked={checked}
+        custom
+      />
+    </Form.Group>
+  );
+};

package/src/report/DataFieldsSelector/index.ts

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

package/src/report/ReportRunnerModal/ReportRunnerModal.tsx

@@ -0,0 +1,183 @@
+import { Report, ReportType } from "@licklist/core/dist/DataMapper/Report";
+import { capitalize } from "lodash";
+import React from "react";
+import { Button, Form, Modal } from "react-bootstrap";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { openOnlineViewer } from "@licklist/plugins/dist/utils/report";
+import { HttpQuery } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
+import { CachedHttpQueryResponse } from "@licklist/plugins/dist/hooks/Api/useCachedHttpQuery";
+import { BlockLoader } from "../../static/loader";
+
+interface ReportField {
+  id: number;
+  key: string;
+  title: string;
+};
+
+type ReportRunnerModalProps = {
+  reportId: Report["id"] | null;
+  show: boolean;
+  useShowReportFields: (
+    reportType?: ReportType
+  ) => CachedHttpQueryResponse<ReportField[], unknown>;
+  generate?: HttpQuery<Record<string, string>[] | null> ;
+  download?: HttpQuery<Blob | null>;
+  onHide: () => void;
+  onEdit: () => void;
+  reports?: Report[] | null;
+};
+
+type FormValues = {
+  dateFrom: string;
+  dateTo: string;
+};
+
+export const ReportRunnerModal = ({
+  reportId,
+  show,
+  onHide,
+  useShowReportFields,
+  reports,
+  generate,
+  download,
+  onEdit,
+}: ReportRunnerModalProps) => {
+  const { t } = useTranslation(["App", "Design"]);
+  const report = reports?.find((report) => report.id === reportId);
+
+  const { data: reportFields = [], isLoading: isLoadingReportFields } =
+    useShowReportFields(report?.type);
+
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+    reset,
+  } = useForm<FormValues>({ mode: "onChange" });
+
+  const onDownload = handleSubmit((values) => {
+    download.execute({ ...values, reportId, type: report?.type });
+  });
+
+  const onViewOnline = handleSubmit(async (values) => {
+    const data = await generate.execute({
+      ...values,
+      reportId,
+    });
+    if (!report || !data || generate.isError) return;
+
+    openOnlineViewer({
+      type: report.type,
+      dateFrom: values.dateFrom,
+      dateTo: values.dateTo,
+      data,
+    });
+  });
+
+  const onClose = () => {
+    reset();
+    onHide();
+  };
+
+  const isLoading =
+    generate.isLoading || download.isLoading || isLoadingReportFields;
+
+  return (
+    <Modal
+      show={show}
+      onHide={onClose}
+      className="report-runner-modal"
+      centered
+    >
+      <header>
+        <h5>{t("generateReport")}</h5>
+        <Button variant="" data-testid="cancel-button" onClick={onClose}>
+          {t("cancel")}
+        </Button>
+      </header>
+
+      {isLoading && <BlockLoader />}
+
+      {!isLoading && (
+        <div>
+          <div className="report-type-label">{capitalize(report?.type)}</div>
+          <div>{report?.name}</div>
+          <div className="data-fields">
+            {report?.reportFieldValues.map((fieldValue) => {
+              const field = reportFields?.find(
+                (field) => field.id === fieldValue.reportFieldId
+              );
+              if (!field) return null;
+              return <span key={fieldValue.id}>{field.title}</span>;
+            })}
+          </div>
+
+          <Button
+            className="edit-button"
+            type="button"
+            variant=""
+            data-testid="edit-button"
+            onClick={onEdit}
+          >
+            {t("Design:edit")}
+          </Button>
+
+          <form noValidate>
+            <div className="controls">
+              <Form.Group controlId="from-input">
+                <Form.Label>{t("Design:from")}</Form.Label>
+                <Form.Control
+                  type="datetime-local"
+                  data-testid="date-from-input"
+                  isInvalid={!!errors.dateFrom}
+                  {...register("dateFrom", {
+                    required: {
+                      value: true,
+                      message: `${t("Validation:fieldRequired", {
+                        attribute: t("Design:to"),
+                      })}`,
+                    },
+                  })}
+                />
+                <Form.Control.Feedback type="invalid">
+                  {errors.dateFrom?.message}
+                </Form.Control.Feedback>
+              </Form.Group>
+
+              <Form.Group controlId="to-input">
+                <Form.Label>{t("Design:to")}</Form.Label>
+                <Form.Control
+                  type="datetime-local"
+                  data-testid="date-to-input"
+                  isInvalid={!!errors.dateTo}
+                  {...register("dateTo", {
+                    required: {
+                      value: true,
+                      message: `${t("Validation:fieldRequired", {
+                        attribute: t("Design:to"),
+                      })}`,
+                    },
+                  })}
+                />
+                <Form.Control.Feedback type="invalid">
+                  {errors.dateTo?.message}
+                </Form.Control.Feedback>
+              </Form.Group>
+            </div>
+
+            <div className="controls">
+              <Button data-testid="download-button" onClick={onDownload}>
+                {t("generateDownload")}
+              </Button>
+
+              <Button data-testid="view-button" onClick={onViewOnline}>
+                {t("generateView")}
+              </Button>
+            </div>
+          </form>
+        </div>
+      )}
+    </Modal>
+  );
+};

package/src/report/ReportRunnerModal/index.ts

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

package/src/report/ReportTypeSelect/ReportTypeSelect.tsx

@@ -0,0 +1,67 @@
+import { reportTypes } from "@licklist/core/dist/DataMapper/Report";
+import React from "react";
+import { Row, Col, Form, OverlayTrigger, Popover } from "react-bootstrap";
+import { useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { ReactComponent as InfoIcon } from "../../assets/dashboard/info.svg";
+
+export const ReportTypeSelect = () => {
+  const { t } = useTranslation(["App", "Design"]);
+
+  const {
+    register,
+    formState: { errors },
+    setValue,
+  } = useFormContext();
+
+  return (
+    <Row>
+      <Col lg={6} className="mt-4">
+        <Form.Group controlId="typeSelect">
+          <Form.Label>{t("reportType")}</Form.Label>
+
+          <Form.Control
+            as="select"
+            data-testid="report-type-select"
+            isInvalid={!!errors.type}
+            {...register("type", {
+              required: {
+                value: true,
+                message: `${t("Validation:fieldRequired", {
+                  attribute: t("reportType"),
+                })}`,
+              },
+            })}
+            onChange={(event) => {
+              register("type").onChange(event);
+              setValue("reportFieldValues", []);
+            }}
+          >
+            {reportTypes.map((reportType) => (
+              <option key={reportType} value={reportType}>
+                {reportType}
+              </option>
+            ))}
+          </Form.Control>
+
+          <Form.Control.Feedback type="invalid">
+            {errors.type?.message}
+          </Form.Control.Feedback>
+
+          <OverlayTrigger
+            trigger="hover"
+            overlay={
+              <Popover id="report-type-popover">
+                <Popover.Content className="reports-popover">
+                  {t("reportTypeSelectInfo")}
+                </Popover.Content>
+              </Popover>
+            }
+          >
+            <InfoIcon className="info-icon" />
+          </OverlayTrigger>
+        </Form.Group>
+      </Col>
+    </Row>
+  );
+};

package/src/report/ReportTypeSelect/index.ts

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

package/src/report/index.ts

@@ -1,2 +1,5 @@
 export * from "./card";
 export * from "./form";
+export * from "./ReportTypeSelect";
+export * from "./DataFieldsSelector";
+export * from "./ReportRunnerModal";

package/src/sales/manual-booking/number-input-horizontal/NumberInputHorizontal.stories.tsx

@@ -0,0 +1,48 @@
+import React, { useRef, useState } from "react";
+import { Meta, Story } from "@storybook/react";
+import { NumberInputHorizontal } from "./NumberInputHorizontal";
+
+export default {
+  title: "Manual Booking/NumberInputHorizontal",
+} as Meta;
+
+export const Default: Story<any> = (args) => {
+  const ref = useRef(null);
+  const [value, setValue] = useState(0);
+  const [isDisabled, setDisabled] = useState(true);
+
+  const onPriceClick = (e) => {
+    if (!isDisabled) {
+      return;
+    }
+    console.log("click");
+    setDisabled(false);
+  };
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onPriceClick}
+      onKeyDown={onPriceClick}
+      style={{ height: "250px", width: "370px" }}
+    >
+      <NumberInputHorizontal
+        ref={ref}
+        hasCurrency
+        onSelect={onPriceClick}
+        onChange={(val) => {
+          setValue(val);
+        }}
+        onMinusClick={() => {
+          setValue(value - 1 || 0);
+        }}
+        onPlusClick={() => {
+          setValue((value ?? 0) + 1);
+        }}
+        value={value}
+        disabled={isDisabled}
+      />
+    </div>
+  );
+};

package/src/sales/manual-booking/number-input-horizontal/NumberInputHorizontal.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import React, { forwardRef } from "react";
+import React, { SyntheticEvent, forwardRef } from "react";
 import { FormControl } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { Icon } from "../../../static";
@@ -13,6 +13,8 @@ interface NumberInputHorizontalProps {
   onChange: (value: number) => void;
   onPlusClick: (value: number) => void;
   onMinusClick: (value: number) => void;
+  onSelect?: (e: SyntheticEvent) => void;
+  step?: number;
   min?: number;
   max?: number;
   size?: Sizes;
@@ -30,11 +32,13 @@ export const NumberInputHorizontal = forwardRef<
       disabled = false,
       className = "",
       value,
+      step,
       size = "small",
       hasCurrency,
       onChange,
       onPlusClick,
       onMinusClick,
+      onSelect,
       min,
       max,
       defaultValue,
@@ -54,7 +58,12 @@ export const NumberInputHorizontal = forwardRef<
       }
     };
 
-    const onClick = (e) => e.target.select();
+    const onClick = (e) => {
+      if (onSelect) {
+        onSelect(e);
+      }
+      e.target.select();
+    };
 
     const handleArrowDownClick = () => {
       if (min !== undefined && value > min) {
@@ -98,13 +107,17 @@ export const NumberInputHorizontal = forwardRef<
             ref={ref}
             onClick={onClick}
             type={disabled && hasBigSize ? "text" : "number"}
-            className={hasBigSize ? "big-sizes-input" : "small-sizes-input"}
+            className={clsx(
+              hasBigSize ? "big-sizes-input" : "small-sizes-input",
+              disabled && "border-0"
+            )}
             onChange={(e) => onChange(Number(e.target.value))}
             value={disabled && hasBigSize && !isLoading ? soldOut : value}
             min={min}
             max={max}
+            step={step}
             defaultValue={defaultValue}
-            disabled={disabled}
+            disabled={disabled && !onSelect}
           />
         </div>
         <button

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

@@ -131,6 +131,12 @@
         font-weight: 500;
       }
 
+      .categories {
+        &:not(:last-child) {
+          border-bottom: 2px solid $separator-color;
+        }
+      }
+
       .products {
         margin-top: 0.5rem;
 
@@ -144,10 +150,6 @@
               margin-bottom: 0.5rem;
             }
           }
-
-          &:not(:last-child) {
-            border-bottom: 2px solid $separator-color;
-          }
         }
 
         &:not(:last-child) {

package/src/styles/report/ReportEditorModal.scss

@@ -0,0 +1,98 @@
+.report-builder {
+  .modal-dialog {
+    @include media-breakpoint-up(sm) {
+      max-width: 45rem;
+    }
+  }
+
+  .modal-content {
+    max-width: 45rem;
+    margin: 0 auto;
+    padding: 1.25rem 1.5rem;
+
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 1rem;
+      border-bottom: 2px solid #dcdcdc;
+
+      h5 {
+        margin-bottom: 0;
+        font-size: 1.125rem;
+        font-weight: 500;
+      }
+
+      button {
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: #0e8ce2;
+      }
+    }
+
+    .data-fields {
+      display: flex;
+      flex-wrap: wrap;
+
+      span {
+        position: relative;
+        font-size: 0.875rem;
+        font-weight: 500;
+
+        &:after {
+          content: "|";
+          margin: 0 0.25rem;
+          color: #dcdcdc;
+        }
+
+        &:last-child:after {
+          display: none;
+        }
+      }
+    }
+
+    .edit-button {
+      padding: 0;
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: #0e8ce2;
+      text-decoration: underline;
+
+      &:focus {
+        box-shadow: none;
+      }
+    }
+
+    input {
+      border-radius: 0.5rem;
+    }
+
+    form {
+      margin-top: 1.25rem;
+
+      .controls {
+        display: flex;
+        gap: 2rem;
+        align-items: flex-start;
+        flex-wrap: wrap;
+      }
+
+      .form-group {
+        flex: 1;
+      }
+
+      button[type="submit"] {
+        white-space: nowrap;
+      }
+    }
+
+    .loader {
+      height: 10rem;
+    }
+  }
+  button[type="submit"] {
+    margin-top: 1.5rem;
+  }
+}