@licklist/design 0.45.0-dev.0 → 0.46.0

package/src/product-set/deposit-paid/ProductSetDepositPaid.stories.tsx

@@ -0,0 +1,67 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+import Form from "react-bootstrap/Form";
+import { FormProvider, useForm } from "react-hook-form";
+import {
+  ProductSetDepositPaidControl,
+  ProductSetDepositPaidControlValues,
+  ProductSetDepositPaidControlProps,
+} from "./ProductSetDepositPaidControl";
+
+const defaultValues: Partial<ProductSetDepositPaidControlValues> = {
+  depositPaidAmount: 30,
+  depositPaidPeriod: 20,
+};
+
+export default {
+  title: "Product Set/Deposit Paid Control",
+} as Meta;
+
+export const Default: Story<ProductSetDepositPaidControlProps> = (args) => {
+  const form = useForm<ProductSetDepositPaidControlValues>({
+    mode: "onChange",
+  });
+
+  const onSubmit = (data) => console.log("onSubmit", data);
+
+  return (
+    <FormProvider {...form}>
+      <Form
+        className="d-flex flex-column"
+        noValidate
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
+        <ProductSetDepositPaidControl {...args} />
+      </Form>
+    </FormProvider>
+  );
+};
+
+export const WithData: Story<ProductSetDepositPaidControlProps> = (args) => {
+  const form = useForm<ProductSetDepositPaidControlValues>({
+    mode: "onChange",
+    defaultValues,
+  });
+
+  const onSubmit = (data) => console.log("onSubmit", data);
+
+  return (
+    <FormProvider {...form}>
+      <Form
+        className="d-flex flex-column"
+        noValidate
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
+        <ProductSetDepositPaidControl {...args} />
+      </Form>
+    </FormProvider>
+  );
+};
+
+Default.args = {
+  isLoading: false,
+};
+
+WithData.args = {
+  isLoading: false,
+};

package/src/product-set/deposit-paid/ProductSetDepositPaidControl.tsx

@@ -0,0 +1,191 @@
+import { useId } from "@react-aria/utils";
+import React from "react";
+import { Form } from "react-bootstrap";
+import Col from "react-bootstrap/Col";
+import InputGroup from "react-bootstrap/InputGroup";
+import Row from "react-bootstrap/Row";
+import { Controller, useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+const depositPaidAmountTypes = ["%", "£"] as const;
+const depositPaidPeriodTypes = ["mins", "hours", "days"] as const;
+
+type DepositPaidAmountType = typeof depositPaidAmountTypes[number];
+type DepositPaidPeriodType = typeof depositPaidPeriodTypes[number];
+
+export type ProductSetDepositPaidControlValues = {
+  depositPaidAmount: number;
+  depositPaidPeriod: number;
+  depositPaidAmountType: DepositPaidAmountType;
+  depositPaidPeriodType: DepositPaidPeriodType;
+};
+
+export interface ProductSetDepositPaidControlProps {
+  isLoading: boolean;
+}
+
+export function ProductSetDepositPaidControl(
+  props: ProductSetDepositPaidControlProps
+) {
+  const { isLoading = false } = props;
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext<ProductSetDepositPaidControlValues>();
+  const { t } = useTranslation("Design");
+
+  const depositPaidId = useId();
+
+  return (
+    <Row>
+      <Col xs={12}>
+        <div className="form-inline">
+          <Form.Group controlId={depositPaidId}>
+            <Form.Label>{t("depositPaid")}</Form.Label>
+
+            <div className="form-inline-group">
+              <InputGroup hasValidation>
+                <InputGroup.Prepend>
+                  <InputGroup.Text>{t("pay")}</InputGroup.Text>
+                </InputGroup.Prepend>
+
+                <Controller
+                  render={({ field: { value, onChange } }) => (
+                    <Form.Control
+                      value={value}
+                      onChange={onChange}
+                      isInvalid={Boolean(errors.depositPaidAmount)}
+                      disabled={isLoading}
+                    />
+                  )}
+                  control={control}
+                  name="depositPaidAmount"
+                  rules={{
+                    required: t("Validation:fieldRequired", {
+                      attribute: t("depositPaidAmount"),
+                    }) as string,
+                    min: {
+                      value: 0,
+                      message: t("Validation:fieldMinNumber", {
+                        attribute: t("depositPaidAmount"),
+                        min: 0,
+                      }) as string,
+                    },
+                    max: {
+                      value: 999999.99,
+                      message: t("Validation:fieldMaxNumber", {
+                        attribute: t("depositPaidAmount"),
+                        max: 999999.99,
+                      }) as string,
+                    },
+                  }}
+                />
+
+                <Controller
+                  render={({ field: { value, onChange } }) => (
+                    <Form.Control
+                      as="select"
+                      onChange={onChange}
+                      isInvalid={Boolean(errors.depositPaidAmountType)}
+                      disabled={isLoading}
+                    >
+                      {depositPaidAmountTypes.map((type) => (
+                        <option
+                          value={type}
+                          key={type}
+                          selected={value === type}
+                        >
+                          {type}
+                        </option>
+                      ))}
+                    </Form.Control>
+                  )}
+                  control={control}
+                  name="depositPaidAmountType"
+                  rules={{
+                    required: t("Validation:fieldRequired", {
+                      attribute: t("depositPaidAmountType"),
+                    }) as string,
+                  }}
+                />
+
+                <InputGroup.Append>
+                  <InputGroup.Text>{t("ofTheRemainder")}</InputGroup.Text>
+                </InputGroup.Append>
+
+                <Controller
+                  render={({ field: { value, onChange } }) => (
+                    <Form.Control
+                      value={value}
+                      onChange={onChange}
+                      isInvalid={Boolean(errors.depositPaidPeriod)}
+                      disabled={isLoading}
+                    />
+                  )}
+                  control={control}
+                  name="depositPaidPeriod"
+                  rules={{
+                    required: t("Validation:fieldRequired", {
+                      attribute: t("depositPaidPeriod"),
+                    }) as string,
+                    min: {
+                      value: 0,
+                      message: t("Validation:fieldMinNumber", {
+                        attribute: t("depositPaidPeriod"),
+                        min: 0,
+                      }) as string,
+                    },
+                    max: {
+                      value: 999999.99,
+                      message: t("Validation:fieldMaxNumber", {
+                        attribute: t("depositPaidPeriod"),
+                        max: 999999.99,
+                      }) as string,
+                    },
+                  }}
+                />
+
+                <Controller
+                  render={({ field: { value, onChange } }) => (
+                    <Form.Control
+                      as="select"
+                      onChange={onChange}
+                      isInvalid={Boolean(errors.depositPaidPeriodType)}
+                      disabled={isLoading}
+                    >
+                      {depositPaidPeriodTypes.map((type) => (
+                        <option
+                          value={type}
+                          key={type}
+                          selected={value === type}
+                        >
+                          {type}
+                        </option>
+                      ))}
+                    </Form.Control>
+                  )}
+                  control={control}
+                  name="depositPaidPeriodType"
+                  rules={{
+                    required: t("Validation:fieldRequired", {
+                      attribute: t("depositPaidPeriodType"),
+                    }) as string,
+                  }}
+                />
+
+                <InputGroup.Append>
+                  <InputGroup.Text>{t("beforeEvent")}</InputGroup.Text>
+                </InputGroup.Append>
+
+                <Form.Control.Feedback type="invalid">
+                  {errors.depositPaidAmount?.message}
+                  {errors.depositPaidPeriod?.message}
+                </Form.Control.Feedback>
+              </InputGroup>
+            </div>
+          </Form.Group>
+        </div>
+      </Col>
+    </Row>
+  );
+}

package/src/product-set/deposit-paid/index.ts

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

package/src/product-set/elements/DeleteFieldButton.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Button } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import { IsDeletableEvent } from "../types";
+import Icon from "../../static/Icon";
+
+export type DeleteFieldButtonProps = IsDeletableEvent;
+
+export function DeleteFieldButton({ onDelete }: DeleteFieldButtonProps) {
+  const { t } = useTranslation("Design");
+
+  return (
+    <Button
+      onClick={onDelete}
+      variant="outline-danger"
+      className="d-flex align-items-center"
+    >
+      <Icon type="trash" height="1rem" />{" "}
+      <span className="d-none d-sm-inline ml-2">{t("delete")}</span>
+    </Button>
+  );
+}

package/src/product-set/elements/Elements.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+import { DeleteFieldButton, DeleteFieldButtonProps } from "./DeleteFieldButton";
+
+export default {
+  title: "Product Set/Elements",
+  component: DeleteFieldButton,
+} as Meta;
+
+export const Default: Story<DeleteFieldButtonProps> = (args) => {
+  return <DeleteFieldButton {...args} />;
+};
+
+Default.args = {
+  onDelete: () => {},
+};

package/src/product-set/elements/index.ts

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

package/src/product-set/form/MobileFooter.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Button } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+
+// @TODO Modal hided for first release.
+
+export function MobileFooter() {
+  const { t } = useTranslation("Design");
+  // const [isModalVisible, setIsModalVisible] = useState(false);
+
+  return (
+    <>
+      <div className="container product-set-mobile-footer">
+        <div
+          className={`d-block d-sm-none bg-white border-top fixed-bottom
+         py-4 px-5 d-flex justify-content-between flex-row-reverse`}
+        >
+          {/* <Button
+            variant="outline-primary"
+            size="sm"
+            className="btn-icon-popover rounded-circle"
+            onClick={() => setIsModalVisible(true)}
+          >
+            <Icon type="plus" width=".9rem" />
+          </Button> */}
+          <Button type="submit">{t("save")}</Button>
+        </div>
+      </div>
+      {/* <Modal
+        show={isModalVisible}
+        onHide={() => setIsModalVisible(false)}
+        dialogClassName="product-set-mobile-modal fixed-bottom"
+        animation={false}
+      >
+        <Modal.Body>
+          <Tabs>
+            <Tabs.Tab eventKey="reusableSubsets" title="Reusable subsets"> */}
+      {/* @TODO: Implement logic here */}
+      {/* <p>Substet 1</p>
+              <p>Subset 2</p>
+              <p className="mb-0">Subset 3</p>
+            </Tabs.Tab>
+          </Tabs>
+        </Modal.Body>
+      </Modal> */}
+    </>
+  );
+}