@licklist/design 0.44.551-dev.7 → 0.44.551

package/dist/styles/report/ReportRunnerModal.scss

@@ -1,95 +0,0 @@
-.report-runner-modal {
-    .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;
-      }
-    }
-  }

package/src/assets/dashboard/info.svg

@@ -1,8 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
-    xmlns="http://www.w3.org/2000/svg">
-    <g id="Info icon">
-        <circle id="Oval" cx="10" cy="6" r="1.25" fill="#0E8CE2"/>
-        <rect id="Rectangle" x="9" y="8" width="2" height="7" fill="#0E8CE2"/>
-        <circle id="Oval_2" cx="10" cy="10" r="9" stroke="#0E8CE2" stroke-width="2"/>
-    </g>
-</svg>

package/src/iframe/order-process/components/BookingSummary/components/ProductSummary/ProductSummary.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { useIntl } from "react-intl";
-import * as Config from "@licklist/core/dist/Config";
-import { OrderItem } from "@licklist/plugins/dist/types/context/Iframe/orderItems";
-
-type ProductSummaryProps = {
-  name?: string;
-  productQuantityError?: string;
-  orderProduct: OrderItem;
-};
-
-export const ProductSummary = ({
-  name,
-  productQuantityError,
-  orderProduct,
-}: ProductSummaryProps) => {
-  const { t } = useTranslation("Design");
-  const { formatNumber } = useIntl();
-
-  const price = formatNumber(
-    (orderProduct?.deposit || orderProduct?.price || 0) *
-      orderProduct?.quantity,
-    { style: "currency", currency: Config.Currency.GBP }
-  );
-
-  return (
-    <div className="product">
-      <p className="m-0 name">{name ?? orderProduct?.name}</p>
-      <div className="d-flex justify-content-between">
-        <p className="m-0">
-          {t("shortQuantity")}:&nbsp;{orderProduct?.quantity}
-        </p>
-
-        <p className="price">{price}</p>
-      </div>
-
-      {productQuantityError && (
-        <p className="iframe-event__message-error">{productQuantityError}</p>
-      )}
-    </div>
-  );
-};

package/src/iframe/order-process/components/BookingSummary/components/ProductSummary/index.ts

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

package/src/report/DataFieldsSelector/DataFieldsSelector.tsx

@@ -1,112 +0,0 @@
-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

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

package/src/report/ReportRunnerModal/ReportRunnerModal.tsx

@@ -1,187 +0,0 @@
-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,
-    watch,
-  } = useForm<FormValues>({ mode: "onChange" });
-  const dateFrom = watch("dateFrom");
-
-  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: `${t("Validation:fieldRequired", {
-                      attribute: t("Design:to"),
-                    })}`,
-                    validate(value) {
-                      if (!dateFrom) return true;
-                      if (value > dateFrom) return true;
-                      return t("toDateAfterFrom") as string;
-                    },
-                  })}
-                />
-                <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

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

package/src/report/ReportTypeSelect/ReportTypeSelect.tsx

@@ -1,68 +0,0 @@
-import { reportTypes } from "@licklist/core/dist/DataMapper/Report";
-import { capitalize } from "lodash";
-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}>
-                {capitalize(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

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

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

@@ -1,48 +0,0 @@
-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/styles/report/ReportEditorModal.scss

@@ -1,98 +0,0 @@
-.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;
-  }
-}