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

package/dist/library.css

@@ -797,6 +797,12 @@ input[type="number"]::-webkit-inner-spin-button,
   line-height: 24px;
 }
 
+.text-16-20-em {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+}
+
 .text-16-18 {
   font-weight: 400;
   font-size: 16px;
@@ -827,6 +833,13 @@ input[type="number"]::-webkit-inner-spin-button,
   line-height: 18px;
 }
 
+.text-10-17-em-up {
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 17px;
+  text-transform: uppercase;
+}
+
 .text-10-14-em {
   font-weight: 600;
   font-size: 10px;
@@ -1163,14 +1176,22 @@ input[type="number"]::-webkit-inner-spin-button,
   margin-bottom: 12px;
 }
 
-.mt-6 {
-  margin-top: 24px;
-}
-
 .mb-6 {
   margin-bottom: 24px;
 }
 
+.mr-4 {
+  margin-right: 16px;
+}
+
+.ml-6 {
+  margin-left: 24px;
+}
+
+.mt-6 {
+  margin-top: 24px;
+}
+
 .mt-2 {
   margin-top: 8px;
 }
@@ -1219,10 +1240,6 @@ input[type="number"]::-webkit-inner-spin-button,
   margin-top: -12px;
 }
 
-.mr-4 {
-  margin-right: 16px;
-}
-
 .-mt-1 {
   margin-top: -4px;
 }
@@ -1447,6 +1464,10 @@ input[type="number"]::-webkit-inner-spin-button,
   display: none;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -1474,10 +1495,6 @@ input[type="number"]::-webkit-inner-spin-button,
   height: 40px;
 }
 
-.h-full {
-  height: 100%;
-}
-
 .h-table {
   height: 696px;
 }
@@ -1590,6 +1607,10 @@ input[type="number"]::-webkit-inner-spin-button,
   max-height: 256px;
 }
 
+.min-h-30 {
+  min-height: 120px;
+}
+
 .min-h-20 {
   min-height: 80px;
 }
@@ -1602,14 +1623,14 @@ input[type="number"]::-webkit-inner-spin-button,
   min-height: 100%;
 }
 
-.w-screen {
-  width: 100vw;
-}
-
 .w-full {
   width: 100%;
 }
 
+.w-screen {
+  width: 100vw;
+}
+
 .w-2\/6 {
   width: 33.333333%;
 }
@@ -1811,6 +1832,10 @@ input[type="number"]::-webkit-inner-spin-button,
   flex-shrink: 1;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .basis-1\/3 {
   flex-basis: 33.333333%;
 }
@@ -1995,6 +2020,10 @@ input[type="number"]::-webkit-inner-spin-button,
   align-items: center;
 }
 
+.items-stretch {
+  align-items: stretch;
+}
+
 .justify-start {
   justify-content: flex-start;
 }
@@ -2015,6 +2044,15 @@ input[type="number"]::-webkit-inner-spin-button,
   justify-items: center;
 }
 
+.gap-x-1 {
+  -moz-column-gap: 4px;
+       column-gap: 4px;
+}
+
+.gap-y-1 {
+  row-gap: 4px;
+}
+
 .gap-x-2 {
   -moz-column-gap: 8px;
        column-gap: 8px;
@@ -2064,6 +2102,10 @@ input[type="number"]::-webkit-inner-spin-button,
   word-break: break-all;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
 .rounded-3xl {
   border-radius: 1.5rem;
 }
@@ -2096,10 +2138,6 @@ input[type="number"]::-webkit-inner-spin-button,
   border-radius: 0.25rem !important;
 }
 
-.rounded-xl {
-  border-radius: 0.75rem;
-}
-
 .rounded-b-xl {
   border-bottom-right-radius: 0.75rem;
   border-bottom-left-radius: 0.75rem;
@@ -2128,14 +2166,14 @@ input[type="number"]::-webkit-inner-spin-button,
   border-bottom-left-radius: 0.5rem;
 }
 
-.border-2 {
-  border-width: 2px;
-}
-
 .border {
   border-width: 1px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .\!border-0 {
   border-width: 0px !important;
 }
@@ -2176,6 +2214,11 @@ input[type="number"]::-webkit-inner-spin-button,
   border-style: dashed;
 }
 
+.border-neutral-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(224 231 240 / var(--tw-border-opacity));
+}
+
 .border-turquoise-300 {
   --tw-border-opacity: 1;
   border-color: rgb(39 222 191 / var(--tw-border-opacity));
@@ -2190,11 +2233,6 @@ input[type="number"]::-webkit-inner-spin-button,
   border-color: rgb(233 63 63 / var(--tw-border-opacity));
 }
 
-.border-neutral-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(224 231 240 / var(--tw-border-opacity));
-}
-
 .border-neutral-200 {
   --tw-border-opacity: 1;
   border-color: rgb(237 241 247 / var(--tw-border-opacity));
@@ -2245,6 +2283,11 @@ input[type="number"]::-webkit-inner-spin-button,
   border-color: rgb(229 245 255 / var(--tw-border-opacity));
 }
 
+.bg-neutral-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(247 249 252 / var(--tw-bg-opacity));
+}
+
 .bg-turquoise-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(193 244 233 / var(--tw-bg-opacity));
@@ -2255,11 +2298,6 @@ input[type="number"]::-webkit-inner-spin-button,
   background-color: rgb(39 222 191 / var(--tw-bg-opacity));
 }
 
-.bg-neutral-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(247 249 252 / var(--tw-bg-opacity));
-}
-
 .bg-neutral-000 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -2438,6 +2476,10 @@ input[type="number"]::-webkit-inner-spin-button,
      object-fit: contain;
 }
 
+.p-4 {
+  padding: 16px;
+}
+
 .p-2 {
   padding: 8px;
 }
@@ -2450,10 +2492,6 @@ input[type="number"]::-webkit-inner-spin-button,
   padding: 12px;
 }
 
-.p-4 {
-  padding: 16px;
-}
-
 .p-1\.5 {
   padding: 6px;
 }
@@ -2470,6 +2508,11 @@ input[type="number"]::-webkit-inner-spin-button,
   padding: 32px;
 }
 
+.py-4 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
 .px-4 {
   padding-left: 16px;
   padding-right: 16px;
@@ -2500,11 +2543,6 @@ input[type="number"]::-webkit-inner-spin-button,
   padding-bottom: 4px;
 }
 
-.py-4 {
-  padding-top: 16px;
-  padding-bottom: 16px;
-}
-
 .px-3 {
   padding-left: 12px;
   padding-right: 12px;
@@ -2590,6 +2628,14 @@ input[type="number"]::-webkit-inner-spin-button,
   padding-bottom: 20px;
 }
 
+.pr-4 {
+  padding-right: 16px;
+}
+
+.pb-2 {
+  padding-bottom: 8px;
+}
+
 .pt-1 {
   padding-top: 4px;
 }
@@ -2602,10 +2648,6 @@ input[type="number"]::-webkit-inner-spin-button,
   padding-top: 0;
 }
 
-.pr-4 {
-  padding-right: 16px;
-}
-
 .\!pr-7 {
   padding-right: 28px !important;
 }
@@ -2735,29 +2777,29 @@ input[type="number"]::-webkit-inner-spin-button,
   color: rgb(156 173 196 / var(--tw-text-opacity));
 }
 
-.text-neutral-800 {
+.text-neutral-700 {
   --tw-text-opacity: 1;
-  color: rgb(45 61 83 / var(--tw-text-opacity));
+  color: rgb(71 90 118 / var(--tw-text-opacity));
 }
 
-.text-neutral-900 {
+.text-neutral-600 {
   --tw-text-opacity: 1;
-  color: rgb(13 27 46 / var(--tw-text-opacity));
+  color: rgb(108 129 157 / var(--tw-text-opacity));
 }
 
-.text-red-200 {
+.text-neutral-800 {
   --tw-text-opacity: 1;
-  color: rgb(233 63 63 / var(--tw-text-opacity));
+  color: rgb(45 61 83 / var(--tw-text-opacity));
 }
 
-.text-neutral-600 {
+.text-neutral-900 {
   --tw-text-opacity: 1;
-  color: rgb(108 129 157 / var(--tw-text-opacity));
+  color: rgb(13 27 46 / var(--tw-text-opacity));
 }
 
-.text-neutral-700 {
+.text-red-200 {
   --tw-text-opacity: 1;
-  color: rgb(71 90 118 / var(--tw-text-opacity));
+  color: rgb(233 63 63 / var(--tw-text-opacity));
 }
 
 .text-neutral-200 {
@@ -4324,6 +4366,10 @@ input[type="checkbox"][disabled]:checked ~ .label-checked-disabled\:bg-neutral-3
     width: auto;
   }
 
+  .md\:min-w-96 {
+    min-width: 384px;
+  }
+
   .md\:min-w-20 {
     min-width: 80px;
   }
@@ -4332,6 +4378,10 @@ input[type="checkbox"][disabled]:checked ~ .label-checked-disabled\:bg-neutral-3
     flex-direction: row;
   }
 
+  .md\:border-r {
+    border-right-width: 1px;
+  }
+
   .md\:py-1\.5 {
     padding-top: 6px;
     padding-bottom: 6px;
@@ -4342,6 +4392,10 @@ input[type="checkbox"][disabled]:checked ~ .label-checked-disabled\:bg-neutral-3
     padding-bottom: 4px;
   }
 
+  .md\:pb-0 {
+    padding-bottom: 0;
+  }
+
   .md\:pt-1 {
     padding-top: 4px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanda-libs/ks-component-ts",
-  "version": "0.2.255",
+  "version": "0.2.256-qa",
   "description": "Kanda form component library",
   "main": "dist/index.esm.js",
   "module": "dist/index.esm.js",
@@ -52,6 +52,7 @@
     "@types/react-dom": "^17.0.11",
     "@types/react-highlight-words": "^0.16.4",
     "@types/react-input-autosize": "^2.2.1",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-slick": "^0.23.10",
     "@types/react-table": "^7.7.0",
     "@typescript-eslint/eslint-plugin": "^5.14.0",
@@ -135,6 +136,7 @@
     "react-loading-skeleton": "^3.1.0",
     "react-number-format": "^4.6.4",
     "react-range": "^1.8.14",
+    "react-router-dom": "^5.2.0",
     "react-slick": "^0.29.0",
     "react-table": "^7.7.0",
     "react-textarea-autosize": "^8.4.0",

package/src/components/CreditLine/constants.ts

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

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

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

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

@@ -0,0 +1,27 @@
+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/components/index.ts

@@ -1,5 +1,6 @@
 export { default as AddFieldButton } from "./AddFieldButton";
 export { default as CompanyRiskFlag } from "./CompanyRiskFlag";
+export { default as CreditLine } from "./CreditLine";
 export { default as Dropzone } from "./Dropzone";
 export { default as DropzoneContext } from "./Dropzone/DropzoneContext";
 export { default as FieldHandle } from "./Handle";
@@ -8,6 +9,7 @@ export { default as FormState } from "./FormState";
 export { default as FormTheme } from "./FormTheme";
 export { default as HeaderSearch } from "./HeaderSearch";
 export { default as MultiStepForm } from "./MultiStepForm";
+export { default as MultiStepFormWrapper } from "./MultiStepFormWrapper";
 export { default as PasswordStrengthIndicator } from "./PasswordStrengthIndicator";
 export { default as RangeSlider } from "./RangeSlider";
 export { default as RowFields } from "./RowFields";