@onepercentio/one-ui 0.28.7 → 0.28.9

package/src/components/Form/v2/Form.types.ts

@@ -0,0 +1,118 @@
+import { SelectItem } from "../../Select/Select";
+import { UploadTask } from "firebase/storage";
+import { ReactElement } from "react";
+
+import {
+  AnswerAction,
+  AnswerByField,
+  FormField,
+} from "./FormField/FormField.types";
+
+export type BaseQuestion = { id: string; type: FormField["type"] };
+export type FormState<Q extends BaseQuestion[] = []> = [
+  answers: AnswersMap<Q>,
+  isValid: boolean
+];
+
+export enum DataStatus {
+  /** Form is empty */
+  PENDING,
+  /** Form is partially filled */
+  INCOMPLETE,
+  /** Form is completed */
+  COMPLETE,
+  /** Form has error */
+  ERROR,
+}
+
+export enum StepStatus {
+  /** When the data is empty and needs to be filled */
+  INCOMPLETE,
+  /** When data has already been filled */
+  COMPLETED,
+  /** When the step is the current selected */
+  CURRENT,
+  /** When the step has error */
+  ERROR,
+}
+
+export enum FormStep {
+  PERSONAL_DATA,
+  ADDITIONAL_DATA,
+  DOCUMENTS,
+  INVEST_PROFILE,
+  CONTRACTS,
+}
+
+export enum FormMode {
+  READ_ONLY,
+  WRITE,
+}
+
+export type FormFieldView = FormField & {
+  title: string;
+};
+
+export type FormProps = {
+  onFormSubmitted: () => void;
+  savedAnswers: Partial<{
+    [questionId: string]: AnswerByField<FormField>;
+  }>;
+  startAt: FormStep;
+  onGoBack: () => void;
+};
+export type StepFormProps = Pick<FormProps, "savedAnswers"> & {
+  step: FormStep;
+} & ModeProps;
+
+export type ModeProps =
+  | {
+      mode: FormMode.READ_ONLY;
+    }
+  | {
+      mode: FormMode.WRITE;
+      onFinish: () => void;
+      onCancel: () => void;
+    };
+export type FormViewProps<Q extends BaseQuestion[]> = {
+  questions: Q;
+} & (
+  | {
+      mode?: FormMode.WRITE;
+      initialAnswers?: AnswersMap;
+      onFormUpdate: (...args: FormState<Q>) => void;
+      /** When provided (true) show all current errors that are blocking the completion of the form */
+      showAllErrors?: boolean;
+    }
+  | {
+      initialAnswers: AnswersMap;
+      mode: FormMode.READ_ONLY;
+    }
+);
+
+export type AnswersMap<
+  Q extends Readonly<BaseQuestion[]> = [
+    { type: BaseQuestion["type"]; id: string }
+  ]
+> = Partial<
+  {
+    [questionId in Q[number]["id"]]: AnswerByField<
+      Q[number] & { id: questionId }
+    >;
+  }
+>;
+
+export enum INVESTOR_PROFILE {
+  /**
+   * User can only spend up to 20k
+   */
+  RESTRICTED,
+  /**
+   * User can only spend up to 10% of it's income
+   */
+  LIMITED,
+  /**
+   * User doesn't have restrictions
+   */
+  UNLIMITED,
+}

package/src/components/Form/v2/FormField/Extensions/DateField/DateField.tsx

@@ -0,0 +1,73 @@
+import React, { ReactNode } from "react";
+import InputMask from "react-input-mask";
+import Styles from "./DateField.module.scss";
+import Text from "../../../../../Text";
+import { useOneUIConfig } from "../../../../../../context/OneUIProvider";
+import { AnswerByField, GenericFormFieldProps } from "../../FormField.types";
+import Input from "../../../../../Input";
+import { isValidated } from "../../../Form.hook";
+
+/**
+ * Allows inputing a date
+ **/
+export default function dateFieldFactory(dateFormat: string) {
+  return function DateField({
+    onAnswer,
+    question,
+    value,
+    error,
+  }: GenericFormFieldProps<"date">) {
+    const { titleVariant } = useOneUIConfig("component.form");
+    return (
+      <>
+        <Text type={titleVariant}>{question.title}</Text>
+        <InputMask
+          mask={dateFormat}
+          value={value}
+          onChange={({ target: { value } }: any) => {
+            onAnswer("date", question.id, value as string);
+          }}
+        >
+          {
+            ((inputProps: any) => (
+              <Input
+                {...inputProps}
+                placeholder={question.title}
+                error={error}
+              />
+            )) as unknown as ReactNode
+          }
+        </InputMask>
+      </>
+    );
+  };
+}
+
+const parseDate = (formattedDate: string) => {
+  const providedDate = formattedDate;
+  const dateParts = providedDate.split("/").map(Number);
+  if (dateParts.length < 2) return false;
+  const [day, month, year] = dateParts;
+  const parsedDate = new Date(year, month - 1, day);
+
+  return parsedDate;
+};
+
+export const dateFieldValidatorFactory =
+  (invalidDateLabel: string, requiredFieldLabel: string) =>
+  (answer: AnswerByField<{ type: "date" }>) => {
+    const providedDate = answer || "";
+    const parsedDate = parseDate(providedDate);
+    if (!parsedDate)
+      return {
+        isValid: false,
+        error: invalidDateLabel,
+      };
+    const dateValidation = isValidated(
+      providedDate,
+      false,
+      undefined,
+      requiredFieldLabel
+    );
+    return dateValidation;
+  };

package/src/components/Form/v2/FormField/Extensions/DateField/index.tsx

@@ -0,0 +1 @@
+export { default } from './DateField';

package/src/components/Form/v2/FormField/Extensions/PhoneField/PhoneField.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useMemo } from "react";
+import Styles from "./PhoneField.module.scss";
+import {
+  AnswerByField,
+  FormFieldProps,
+  FormFieldView,
+  GenericFormFieldProps,
+} from "../../FormField.types";
+import useModule from "../../../../../../hooks/utility/useModule";
+import Text from "../../../../../Text";
+import Input from "../../../../../Input";
+import { useOneUIConfig } from "../../../../../../context/OneUIProvider";
+
+/**
+ * An extra form field that enables the user to input a phone number
+ **/
+export default function phoneFieldFactory(invalidPhoneLabel: string) {
+  return function ({
+    value,
+    question,
+    onAnswer,
+    error,
+  }: GenericFormFieldProps<"phone">) {
+    const { country } = question;
+    const { titleVariant } = useOneUIConfig("component.form");
+    const [phone] = value || ["", false];
+    const phoneFormatter = useModule(() =>
+      import("google-libphonenumber").then((mod) => {
+        return mod.PhoneNumberUtil.getInstance();
+      })
+    );
+    const {
+      phoneFormat,
+      valid,
+      error: phoneError,
+    } = useMemo(() => {
+      if (!phoneFormatter)
+        return {
+          phoneFormat: phone,
+          valid: false,
+          error: "",
+        };
+      try {
+        const phoneInstance = phoneFormatter.parseAndKeepRawInput(
+          phone,
+          country
+        );
+        const isPhoneValid = phoneFormatter.isValidNumber(phoneInstance);
+        return {
+          phoneFormat: phoneFormatter.format(phoneInstance, 2),
+          valid: isPhoneValid,
+          error: isPhoneValid ? "" : invalidPhoneLabel,
+        };
+      } catch (e) {
+        return {
+          phoneFormat: phone,
+          valid: false,
+          error: invalidPhoneLabel,
+        };
+      }
+    }, [phone, phoneFormatter]);
+
+    useEffect(() => {
+      onAnswer("phone", question.id, [phoneFormat, valid, phoneError]);
+    }, [phoneFormat, valid]);
+
+    return (
+      <>
+        <Text type={titleVariant}>{question.title}</Text>
+        <Input
+          placeholder={question.title}
+          value={phoneFormat}
+          onChange={({ target: { value } }) => {
+            onAnswer("phone", question.id, [value, false, phoneError]);
+          }}
+          error={error as string}
+        />
+      </>
+    );
+  };
+}
+
+export const phoneFieldValidator = (
+  answer: AnswerByField<{ type: "phone" }>
+) => {
+  const isValid = !!answer && !!answer[1];
+  return {
+    isValid,
+    error: answer[2],
+  };
+};

package/src/components/Form/v2/FormField/Extensions/PhoneField/index.tsx

@@ -0,0 +1 @@
+export { default } from './PhoneField';

package/src/components/Form/v2/FormField/FormField.tsx

@@ -0,0 +1,378 @@
+import { ReactNode, useEffect, useState } from "react";
+import debounce from "lodash/debounce";
+import Styles from "./FormField.module.scss";
+import {
+  AnswerAction,
+  AnswerByField,
+  FormFieldProps,
+  FormFieldView,
+  FormMode,
+} from "./FormField.types";
+import Select from "../../../Select/Select";
+import Input from "../../../Input";
+import OneText from "../../../Text";
+import Button from "../../../Button";
+import Radio from "../../../Radio";
+import { AnchoredTooltipAlignment } from "../../../AnchoredTooltip/AnchoredTooltip";
+import FileInput from "../../../FileInput/FileInput";
+import CheckBox from "../../../CheckBox/CheckBox";
+import Spacing from "../../../Spacing";
+import { useOneUIConfig } from "../../../../context/OneUIProvider";
+// import InputMask from "react-input-mask";
+
+/**
+ * The logic for a field of the form
+ **/
+export default function FormField<Q extends FormFieldView>({
+  config: c,
+  value,
+  ...props
+}: FormFieldProps<Q>) {
+  const val = <T extends FormFieldView["type"]>() =>
+    value as unknown as
+      | AnswerByField<{
+          type: T;
+        }>
+      | undefined;
+  const ans = <T extends FormFieldView["type"]>(
+    answer:
+      | AnswerAction<{
+          type: T;
+        }>
+      | undefined
+  ) =>
+    answer as unknown as AnswerAction<{
+      type: T;
+    }>;
+  const type = c.type;
+  const { titleVariant, labelVariant, optionalLabel, extensions } =
+    useOneUIConfig("component.form");
+  if (props.mode === FormMode.READ_ONLY) {
+    switch (type) {
+      case "check":
+        const checks = val<typeof type>()! || [];
+        return (
+          <>
+            <OneText type={titleVariant}>{c.title}</OneText>
+            {checks.includes(true) ? (
+              checks.map((checked, i) =>
+                checked ? (
+                  <OneText type={labelVariant}>{c.options[i].value}</OneText>
+                ) : null
+              )
+            ) : (
+              <OneText type={labelVariant}>-</OneText>
+            )}
+            <Spacing size="small" />
+          </>
+        );
+      case "file":
+        const file = val<typeof type>()!;
+        return (
+          <>
+            <FileInput
+              states={{
+                fileProvided: {
+                  title: c.title,
+                  description: c.fileUsageDescription,
+                },
+                waitingFile: {
+                  title: c.title,
+                  description: c.fileUsageDescription,
+                },
+              }}
+              footer={c.footer}
+              onFile={() => {}}
+              file={file === true ? ({} as File) : undefined}
+              progress={file === true ? 100 : undefined}
+              disabled={true}
+            />
+            <Spacing size="small" />
+            {file === true && (
+              <Button
+                variant="link"
+                color="primary"
+                onClick={c.openFile!.action}
+              >
+                {c.openFile!.label}
+              </Button>
+            )}
+            <Spacing size="large" />
+          </>
+        );
+      default:
+        const answer = val<typeof type>() as ReactNode;
+        return (
+          <>
+            <OneText type={titleVariant}>{c.title}</OneText>
+            <OneText type={labelVariant}>{answer || "-"}</OneText>
+            <Spacing size="small" />
+          </>
+        );
+    }
+  }
+  const { onAnswer, error } = props;
+  switch (type) {
+    case "accept":
+      const checks = val<typeof type>() || [];
+      return (
+        <>
+          <div className={Styles.acceptInput}>
+            <div>
+              <OneText type={titleVariant}>{c.title}</OneText>
+              <br />
+              <Button
+                variant="link"
+                color="primary"
+                onClick={c.contract.action}
+              >
+                {c.contract.label}
+              </Button>
+            </div>
+            {error && (
+              <div>
+                <OneText type="caption" color="error">
+                  {error}
+                </OneText>
+                <br />
+              </div>
+            )}
+            <div>
+              {c.accept.map((a, i) => (
+                <OneText type={labelVariant}>
+                  <CheckBox
+                    label={
+                      <span>
+                        <>
+                          {a.label}
+                          {a.optional ? (
+                            <>
+                              <br />
+                              <OneText type="caption">{optionalLabel}</OneText>
+                            </>
+                          ) : (
+                            ""
+                          )}
+                        </>
+                      </span>
+                    }
+                    checked={checks[i]}
+                    onToggle={(checked) => {
+                      const clone = [...checks];
+                      clone[i] = checked;
+                      onAnswer(type, c.id, ans<typeof type>(clone));
+                    }}
+                    groupId={c.id}
+                    value={a.label}
+                  />
+                </OneText>
+              ))}
+            </div>
+          </div>
+          <Spacing size="small" />
+        </>
+      );
+    case "file":
+      const upload = val<typeof type>();
+      const [progress, setProgress] = useState<number | undefined>(() => {
+        if (!upload) return undefined;
+        if (upload === true) return 100;
+        const s = upload.snapshot;
+        return (s.bytesTransferred * 100) / s.totalBytes;
+      });
+      useEffect(() => {
+        if (!upload) return setProgress(undefined);
+        if (upload === true) {
+          setProgress(100);
+          return;
+        }
+        const throttleSetProgress = debounce(setProgress, 250);
+        const unsubscribe = upload.on("state_changed", (s) => {
+          const progress = (s.bytesTransferred * 100) / s.totalBytes;
+          throttleSetProgress(progress);
+        });
+
+        return () => {
+          unsubscribe();
+        };
+      }, [upload]);
+      return (
+        <>
+          <FileInput
+            states={{
+              fileProvided: {
+                title: c.title,
+                description: c.fileUsageDescription,
+              },
+              waitingFile: {
+                title: c.title,
+                description: c.fileUsageDescription,
+              },
+            }}
+            footer={c.footer}
+            onFile={(file) => {
+              onAnswer(type, c.id, ans<typeof type>(file));
+            }}
+            file={upload as unknown as File}
+            progress={upload ? progress || 0 : undefined}
+            accept={c.extensions.map((x) => `.${x}`).join(",")}
+          />
+          {error ? (
+            <OneText type="caption" color="error">
+              {error}
+            </OneText>
+          ) : null}
+          <Spacing size="large" />
+        </>
+      );
+    case "radio":
+      const selected = val<typeof type>();
+      return (
+        <>
+          <OneText type={titleVariant}>{c.title}</OneText>
+          {error && (
+            <OneText type="caption" color="error">
+              {error}
+            </OneText>
+          )}
+          <br />
+          {c.options.map((el) => (
+            <>
+              <OneText type={labelVariant}>
+                <Radio
+                  checked={selected === el.value}
+                  label={el.label}
+                  onToggle={() => onAnswer(type, c.id, el.value)}
+                  groupId={c.id}
+                  value={el.value}
+                />
+              </OneText>
+              <br />
+            </>
+          ))}
+        </>
+      );
+    case "check":
+      const checkError =
+        typeof error === "string" ? c.options.map(() => error) : error;
+      const checkmarks = val<typeof type>() || [];
+      return (
+        <>
+          <OneText type={titleVariant}>{c.title}</OneText>
+          <br />
+          {c.options.map((el, i) => (
+            <>
+              <OneText type={labelVariant}>
+                <CheckBox
+                  checked={checkmarks[i]}
+                  label={
+                    <>
+                      {el.label}
+                      {checkError?.[i] ? (
+                        <OneText type="caption" color="error">
+                          {checkError[i]}
+                        </OneText>
+                      ) : null}
+                    </>
+                  }
+                  onToggle={(checked) => {
+                    const clone = [...checkmarks];
+                    clone[i] = checked;
+                    onAnswer(type, c.id, clone);
+                  }}
+                  groupId={c.id}
+                  value={el.value}
+                />
+              </OneText>
+              <br />
+            </>
+          ))}
+        </>
+      );
+    case "rawcheck":
+      const rawCheckmarks = val<typeof type>() || [];
+      return (
+        <>
+          {error && (
+            <>
+              <OneText type="caption" color="error">
+                {error}
+              </OneText>
+              <br />
+            </>
+          )}
+          {c.options.map((el, i) => (
+            <>
+              <OneText type={labelVariant}>
+                <CheckBox
+                  checked={rawCheckmarks[i]}
+                  label={el.label}
+                  onToggle={(checked) => {
+                    const clone = [...rawCheckmarks];
+                    clone[i] = checked;
+                    onAnswer(type, c.id, clone);
+                  }}
+                  groupId={c.id}
+                  value={el.value}
+                />
+              </OneText>
+              <br />
+            </>
+          ))}
+        </>
+      );
+    case "select":
+      return (
+        <>
+          <OneText type={titleVariant}>{c.title}</OneText>
+          <Select
+            data-testid={`cvm88-${c.id}`}
+            alignTo={AnchoredTooltipAlignment.LEFT}
+            items={c.options}
+            selected={val<typeof type>()!}
+            onClick={(i) => {
+              onAnswer(type, c.id, i.value);
+            }}
+            filter={c.filter}
+            error={error as string}
+          />
+        </>
+      );
+    case "text":
+    case "number":
+      const filter =
+        type === "number"
+          ? (val: string) => val.replace(/[^0-9]+/g, "")
+          : (val: string) => val;
+      return (
+        <>
+          <OneText type={titleVariant}>{c.title}</OneText>
+          <Input
+            multiline={"multiline" in c ? c.multiline : undefined}
+            placeholder={c.title}
+            value={val<typeof type>()}
+            error={error as string}
+            onChange={({ target: { value } }) => {
+              onAnswer(type, c.id, filter(value));
+            }}
+          />
+        </>
+      );
+    default:
+      const registeredExtension = extensions?.[type] as any;
+      if (registeredExtension) {
+        const { Input } = registeredExtension;
+        return (
+          <Input
+            onAnswer={onAnswer}
+            question={c as any}
+            value={value as any}
+            error={error as any}
+          />
+        );
+      }
+      throw new Error(
+        `The form field "${type}" is not implemented yet. Please provide it using OneUIProvider config options for form extensions`
+      );
+  }
+}