@kanda-libs/ks-component-ts 0.2.256-qa → 0.2.256

package/src/components/CreditLine/constants.ts

@@ -1,37 +0,0 @@
-import type { SkeletonLoaderProps } from "@kanda-libs/ks-design-library";
-
-export const CLASS_NAMES = {
-  title: "mb-6 block text-neutral-700 text-sm",
-  wrapper: {
-    base: "p-4 border border-solid border-neutral-300 rounded-xl md:min-w-96 min-h-30 cursor-pointer",
-    muted:
-      "p-4 bg-neutral-100 rounded-xl md:min-w-96 min-h-30 cursor-pointer flex flex-col items-stretch justify-stretch",
-  },
-  price: {
-    base: "text-16-20-em",
-    muted: "text-neutral-600 text-16-20-em",
-  },
-  innerWrapper: "flex flex-col md:flex-row items-start justify-center",
-  credit:
-    "py-4 flex flex-col items-start justify-start h-full pr-4 mr-4 uppercase md:border-r border-solid border-neutral-300 h-full pb-2 md:pb-0",
-  terms: "flex flex-row items-center justify-center flex-grow",
-  termsInnerWrapper: "grid grid-cols-2 gap-x-1 gap-y-1 flex-grow",
-  termsValues: "flex flex-row items-center gap-x-2",
-  termsLoading:
-    "w-full text-left flex flex-col items-start justify-start h-full",
-  termsLabel: "text-10-17-em-up block uppercase text-neutral-600",
-  termsValue: "text-16-20-em text-neutral-600",
-  termsItem: "text-left",
-  checkbox: "ml-6",
-};
-
-export const TERMS_PRICE_PROPS = {
-  poundsClassName: CLASS_NAMES.termsValue,
-  centsClassName: CLASS_NAMES.termsValue,
-};
-
-export const SKELETON_PROPS: Partial<SkeletonLoaderProps> = {
-  width: 100,
-  height: 20,
-  isLoading: true,
-};

package/src/components/CreditLine/helpers.ts

@@ -1,35 +0,0 @@
-import type { FinanceRate } from "~/generated/components/schemas";
-
-/**
- * Calculates Loan from total and payment method
- */
-export const getMonthlyPayment = (paymentMethod?: FinanceRate): number => {
-  if (!paymentMethod) return 0;
-
-  const total = paymentMethod.credit_line || 0;
-
-  const { apr = 0, duration = 0 } = paymentMethod;
-
-  const rate = apr / 100 / 12 / 100;
-
-  if (rate === 0) return Math.ceil(total / duration);
-
-  const compoundInterest = (1 + rate) ** duration;
-
-  const monthlyLoan =
-    (total * (rate * compoundInterest)) / (compoundInterest - 1);
-
-  return Math.ceil(monthlyLoan);
-};
-
-export const getTotalInterestFee = (
-  monthlyPayment: number,
-  paymentMethod?: FinanceRate
-): number => {
-  if (paymentMethod?.apr === 0) return 0;
-
-  const totalLoanCost = monthlyPayment * (paymentMethod?.duration || 0);
-  const totalInterestFee = totalLoanCost - (paymentMethod?.credit_line || 0);
-
-  return totalInterestFee;
-};

package/src/components/CreditLine/index.tsx

@@ -1,141 +0,0 @@
-import React, { type FunctionComponent } from "react";
-import { Price, SkeletonLoader, Text } from "@kanda-libs/ks-design-library";
-import type { GroupedFinanceRate } from "./types";
-import { CLASS_NAMES, SKELETON_PROPS, TERMS_PRICE_PROPS } from "./constants";
-import { FieldHandle } from "..";
-
-export interface CreditLineProps {
-  name?: string;
-  title?: string;
-  financeOptionGroup?: GroupedFinanceRate;
-  isLoading?: boolean;
-  muted?: boolean;
-  selected?: boolean;
-  selectable?: boolean;
-  onSelect?: (name: string) => void;
-}
-
-const CreditLine: FunctionComponent<CreditLineProps> = function ({
-  name,
-  title,
-  financeOptionGroup,
-  isLoading = false,
-  muted = false,
-  selected = false,
-  selectable = false,
-  onSelect = () => {},
-}) {
-  const classKey = muted ? "muted" : "base";
-
-  return (
-    <div
-      role="button"
-      tabIndex={0}
-      className={CLASS_NAMES.wrapper[classKey]}
-      onClick={() => {
-        onSelect(name as string);
-      }}
-      onKeyUp={() => {
-        onSelect(name as string);
-      }}
-    >
-      {title && <Text className={CLASS_NAMES.title} text={title} />}
-      <div className={CLASS_NAMES.innerWrapper}>
-        {isLoading && (
-          <div className={CLASS_NAMES.credit}>
-            <SkeletonLoader {...SKELETON_PROPS} />
-            <SkeletonLoader {...SKELETON_PROPS} />
-          </div>
-        )}
-        {!isLoading && (
-          <div className={CLASS_NAMES.credit}>
-            <Text text="Max credit line" className={CLASS_NAMES.termsLabel} />
-            <div>
-              <Price
-                amount={financeOptionGroup?.creditLine}
-                isLoading={isLoading}
-                poundsClassName={CLASS_NAMES.price[classKey]}
-                centsClassName={CLASS_NAMES.price[classKey]}
-              />
-            </div>
-          </div>
-        )}
-        {isLoading && (
-          <div className={CLASS_NAMES.termsLoading}>
-            <SkeletonLoader {...SKELETON_PROPS} />
-            <SkeletonLoader {...SKELETON_PROPS} />
-          </div>
-        )}
-        {!isLoading && (
-          <div className={CLASS_NAMES.terms}>
-            <div className={CLASS_NAMES.termsInnerWrapper}>
-              <div className={CLASS_NAMES.termsItem}>
-                <Text text="Term" className={CLASS_NAMES.termsLabel} />
-                <Text
-                  text={`${[
-                    financeOptionGroup?.minDuration,
-                    financeOptionGroup?.maxDuration,
-                  ].join(" - ")} months`}
-                  className={CLASS_NAMES.termsValue}
-                />
-              </div>
-              <div className={CLASS_NAMES.termsItem}>
-                <Text
-                  text="Monthly payment"
-                  className={CLASS_NAMES.termsLabel}
-                />
-                <div className={CLASS_NAMES.termsValues}>
-                  <Price
-                    amount={financeOptionGroup?.minMonthlyPayment}
-                    {...TERMS_PRICE_PROPS}
-                  />
-                  <Text text=" - " className={CLASS_NAMES.termsLabel} />
-                  <Price
-                    amount={financeOptionGroup?.maxMonthlyPayment}
-                    {...TERMS_PRICE_PROPS}
-                  />
-                </div>
-              </div>
-              <div className={CLASS_NAMES.termsItem}>
-                <Text text="Interest rate" className={CLASS_NAMES.termsLabel} />
-                <Text
-                  text={`${(financeOptionGroup?.apr || 0) / 100}% APR`}
-                  className={CLASS_NAMES.termsValue}
-                />
-              </div>
-              <div className={CLASS_NAMES.termsItem}>
-                <Text
-                  text="Total interest fee"
-                  className={CLASS_NAMES.termsLabel}
-                />
-                <div className={CLASS_NAMES.termsValues}>
-                  <Price
-                    amount={financeOptionGroup?.minInterest}
-                    {...TERMS_PRICE_PROPS}
-                  />
-                  {financeOptionGroup?.minInterest !==
-                    financeOptionGroup?.maxInterest && (
-                    <>
-                      <Text text=" - " className={CLASS_NAMES.termsLabel} />
-                      <Price
-                        amount={financeOptionGroup?.maxInterest}
-                        {...TERMS_PRICE_PROPS}
-                      />
-                    </>
-                  )}
-                </div>
-              </div>
-            </div>
-            {!muted && selectable && (
-              <div className={CLASS_NAMES.checkbox}>
-                <FieldHandle.RadioCheck name={name} checked={selected} />
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default CreditLine;

package/src/components/CreditLine/types.d.ts

@@ -1,11 +0,0 @@
-export interface GroupedFinanceRate {
-  apr: number;
-  name: string;
-  creditLine: number;
-  minDuration: number;
-  maxDuration: number;
-  minMonthlyPayment: number;
-  maxMonthlyPayment: number;
-  minInterest: number;
-  maxInterest: number;
-}

package/src/components/MultiStepFormWrapper/index.tsx

@@ -1,27 +0,0 @@
-import React, { type FunctionComponent } from "react";
-import { useForm } from "react-hook-form";
-import { Form } from "~/components";
-import type { StringIndexedObject } from "~/types";
-
-export interface MultiStepFormWrapperProps {
-  name: string;
-  page: string;
-  form: ReturnType<typeof useForm>;
-  onSubmit: (data: StringIndexedObject) => void;
-  children: JSX.Element | JSX.Element[];
-}
-
-const MultiStepFormWrapper: FunctionComponent<MultiStepFormWrapperProps> =
-  function ({ name, page, form, onSubmit, children }) {
-    return (
-      <Form
-        id={["multi-step-form", name, page].join("-")}
-        form={form}
-        onSubmit={onSubmit}
-      >
-        {children}
-      </Form>
-    );
-  };
-
-export default MultiStepFormWrapper;

package/src/hooks/useMultiStep/constants.ts

@@ -1 +0,0 @@
-export const LOCAL_STORAGE_KEY_PREFIX = "multi-step-form";

package/src/hooks/useMultiStep/helpers.ts

@@ -1,27 +0,0 @@
-import type { MultiStepRouterState } from "./types";
-import { LOCAL_STORAGE_KEY_PREFIX } from "./constants";
-import type { StringIndexedObject } from "~/types";
-
-export const getLocalStorageKey = (name: string) =>
-  [LOCAL_STORAGE_KEY_PREFIX, name].join("-");
-
-export const getInitalData = <T extends StringIndexedObject>(
-  name: string,
-  state: MultiStepRouterState<T>
-) => {
-  const localStorageKey = getLocalStorageKey(name);
-  const localStorageData = localStorage.getItem(localStorageKey);
-  const localStorageDataParsed = localStorageData
-    ? JSON.parse(localStorageData)
-    : {};
-
-  if (localStorageDataParsed) {
-    return localStorageDataParsed as Partial<T>;
-  }
-
-  if (state) {
-    return state.data as Partial<T>;
-  }
-
-  return {} as Partial<T>;
-};

package/src/hooks/useMultiStep/index.tsx

@@ -1,119 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { DeepPartial, useForm, useWatch } from "react-hook-form";
-import { useHistory, useLocation } from "react-router-dom";
-import type { StringIndexedObject } from "~/types";
-import { getInitalData, getLocalStorageKey } from "./helpers";
-import type { MultiStepRouterState } from "./types";
-
-export interface MultiStepHook<T extends StringIndexedObject> {
-  data: T;
-  form: ReturnType<typeof useForm<Partial<T>>>;
-  onNextPage: (data: T) => void;
-  onSubmit: (data: T) => void;
-  formWrapperProps: {
-    name: string;
-    page: keyof T;
-    form: ReturnType<typeof useForm<Partial<T>>>;
-    onSubmit: (data: StringIndexedObject) => void;
-  };
-  handleFormSubmit: (data: StringIndexedObject) => void;
-  isLoading: boolean;
-  isSubmitting: boolean;
-}
-
-export default function useMultiStep<T extends StringIndexedObject>(
-  name: string,
-  currentPage: keyof T,
-  handleSubmit: (data: T, cleanup: () => void) => void,
-  urls: Record<keyof T, string>,
-  isLoading = false,
-  isSubmitting = false
-): MultiStepHook<T> {
-  const localStorageKey = getLocalStorageKey(name);
-  const pages = Object.keys(urls);
-  const currentPageIndex = pages.findIndex((page) => page === currentPage);
-
-  const { push } = useHistory();
-  const { state } = useLocation<MultiStepRouterState<T>>();
-
-  const [data] = useState<Partial<T>>(getInitalData<T>(name, state));
-
-  const form = useForm<Partial<T>>({
-    defaultValues: data as DeepPartial<Partial<T>>,
-  });
-
-  const values = useWatch({
-    control: form.control,
-  });
-
-  useEffect(() => {
-    // Save the data to local storage on change
-    if (values) {
-      localStorage.setItem(localStorageKey, JSON.stringify(values));
-    }
-  }, [values, localStorageKey]);
-
-  const onNextPage = useCallback(
-    (currentData: T) => {
-      const nextPage = urls[pages[currentPageIndex + 1]];
-
-      const formattedData = {
-        ...data,
-        ...currentData,
-      };
-
-      localStorage.setItem(localStorageKey, JSON.stringify(formattedData));
-
-      push(nextPage, {
-        page: currentPage,
-        data: formattedData,
-      });
-    },
-    [currentPage, data, currentPageIndex, localStorageKey, push, urls, pages]
-  );
-
-  const removeItem = useCallback(
-    () => localStorage.removeItem(localStorageKey),
-    [localStorageKey]
-  );
-
-  const onSubmit = useCallback(
-    (finalData: T) => {
-      handleSubmit(finalData, removeItem);
-    },
-    [handleSubmit, removeItem]
-  );
-
-  const handleFormSubmit = useCallback(
-    (currentData: StringIndexedObject) => {
-      const formattedData = currentData as T;
-      const lastItem = currentPageIndex === pages.length - 1;
-
-      if (lastItem) {
-        onSubmit(formattedData);
-        return;
-      }
-
-      onNextPage(formattedData);
-    },
-    [currentPageIndex, pages, onSubmit, onNextPage]
-  );
-
-  const formWrapperProps = {
-    name,
-    form,
-    page: currentPage,
-    onSubmit: handleFormSubmit,
-  };
-
-  return {
-    data: data as T,
-    form,
-    onNextPage,
-    onSubmit,
-    formWrapperProps,
-    handleFormSubmit,
-    isLoading,
-    isSubmitting,
-  };
-}

package/src/hooks/useMultiStep/types.d.ts

@@ -1,8 +0,0 @@
-export interface MultiStepRouterState<T extends StringIndexedObject> {
-  page: keyof T;
-  data: T[keyof T];
-}
-
-export interface FormWrapperProps {
-  children: JSX.Element | JSX.Element[];
-}