rbro-tat-uds 1.6.36 → 2.0.0

package/build/esm/components/Radio/index.js

@@ -0,0 +1,8 @@
+"use strict";
+"use client";
+
+import Radio from './Radio.js';
+
+
+
+export { Radio as default };

package/build/esm/components/RatesCalculator/RatesCalculator.js

@@ -0,0 +1,531 @@
+"use strict";
+"use client";
+
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect, useCallback } from 'react';
+import styled, { css } from 'styled-components';
+import TextInput from '../TextInput/TextInput.js';
+import Modal from '../Modal/Modal.js';
+import Flex from '../Flex/Flex.js';
+import Button from '../Button/Button.js';
+import FormField from '../FormField/FormField.js';
+import Dropdown from '../Dropdown/Dropdown.js';
+import LabeledText from '../LabeledText/LabeledText.js';
+import { colors } from '../../utils';
+import Icon from '../Icon/Icon.js';
+
+const _size = {
+  medium: css`
+    height: 40px;
+    font-size: 14px;
+    padding: 0px 70px 0px 12px;
+  `,
+  large: css`
+    height: 48px;
+    font-size: 16px;
+    padding: 0px 75px 0px 16px;
+  `
+};
+const RatesCalculatorStyled = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+  width: 100%;
+  cursor: pointer;
+
+  & > .x7k9m2p4n5 {
+    position: relative;
+    width: 100%;
+    flex: 1;
+
+    & > input {
+      border-radius: 8px;
+      border: none;
+      outline: none;
+      appearance: none;
+      cursor: pointer;
+      background-color: ${colors.gray_100};
+      color: ${colors.gray_950};
+      width: 100%;
+      font-weight: 400;
+      line-height: 120%;
+
+      ${({ $intent }) => $intent === "danger" && css`
+          outline: 2px solid ${colors.danger_500};
+        `}
+
+      ${({ $size }) => $size && ["medium", "large"].includes($size) ? _size[$size] : _size.medium};
+
+      &:placeholder {
+        color: ${colors.gray_600};
+      }
+
+      ${({ $isOpen }) => $isOpen && css`
+          outline: 2px solid ${colors.accent_600};
+        `}
+
+      ${({ $disabled }) => $disabled && css`
+          background-color: ${colors.gray_30};
+          color: ${colors.gray_500};
+
+          &:placeholder {
+            color: ${colors.gray_500};
+          }
+        `}
+    }
+
+    & > div {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      position: absolute;
+      right: 10px;
+      top: 0;
+      height: 100%;
+
+      & > span {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+        font-size: ${({ $size }) => $size && ["medium", "large"].includes($size) && $size === "medium" ? "14px" : "16px"};
+        color: ${colors.gray_600};
+        font-weight: 400;
+      }
+    }
+  }
+`;
+const RatesCalculator = ({
+  id,
+  name,
+  disabled,
+  size = "medium",
+  intent = "default",
+  items,
+  getItems,
+  getValue,
+  ...rest
+}) => {
+  const [openModal, setOpenModal] = useState(false);
+  const [selectTipCredit, setSelectTipCredit] = useState("");
+  const [limitaAprobata, setLimitaAprobata] = useState("0");
+  const [rata, setRata] = useState("0");
+  const listLabels = {
+    nevoi_personale: "Nevoi personale",
+    card_de_credit: "Card de credit",
+    overdraft: "Overdraft",
+    credit_ipotecar: "Credit ipotecar"
+  };
+  const indexedItems = useMemo(() => {
+    if (!items || items.length === 0) return [];
+    const indexedItemsArray = items.map((item, index) => {
+      if (item.tipCredit === "card_de_credit" || item.tipCredit === "overdraft") {
+        const rata2 = Number(item.limitaAprobata) / 100 * 3;
+        return {
+          id: String(index + 1),
+          rata: String(rata2.toFixed(0)),
+          ...item
+        };
+      }
+      return {
+        id: String(index + 1),
+        limitaAprobata: "0",
+        ...item
+      };
+    });
+    return indexedItemsArray;
+  }, [items]);
+  const [mappedRate, setMappedRate] = useState(indexedItems || []);
+  const dataOptionsDropdown = [
+    {
+      label: "Card de credit",
+      value: "card_de_credit"
+    },
+    {
+      label: "Nevoi personale",
+      value: "nevoi_personale"
+    },
+    {
+      label: "Overdraft",
+      value: "overdraft"
+    },
+    {
+      label: "Credit ipotecar",
+      value: "credit_ipotecar"
+    }
+  ];
+  const onOpenModal = () => {
+    setOpenModal(true);
+  };
+  const disableInputBasedOnTipCredit = useMemo(() => {
+    return {
+      rata: selectTipCredit === "card_de_credit" || selectTipCredit === "overdraft",
+      limitaAprobata: selectTipCredit === "nevoi_personale" || selectTipCredit === "credit_ipotecar"
+    };
+  }, [selectTipCredit]);
+  const totalRate = useMemo(() => {
+    return Math.round(
+      mappedRate.reduce((acc, curr) => acc + Number(curr.rata), 0)
+    ).toFixed(0);
+  }, [mappedRate]);
+  useEffect(() => {
+    getValue && getValue(String(totalRate));
+  }, [mappedRate, totalRate]);
+  const onChangeInputs = (getValue2, type) => {
+    if (type === "limitaAprobata" && disableInputBasedOnTipCredit.limitaAprobata)
+      return;
+    if (type === "rata" && disableInputBasedOnTipCredit.rata) return;
+    const newValue = getValue2 === "0" || getValue2.startsWith("0.") ? getValue2 : getValue2.replace(/^0+/, "");
+    if (type === "limitaAprobata") {
+      const calculRata = Number(newValue) / 100 * 3;
+      setRata(String(calculRata.toFixed(0)));
+    }
+    type === "limitaAprobata" ? setLimitaAprobata(newValue) : setRata(newValue);
+  };
+  const onChangeMappedRate = (id2, type, getValue2) => {
+    const newValue = getValue2 === "0" || getValue2.startsWith("0.") ? getValue2 : getValue2.replace(/^0+/, "");
+    setMappedRate((prev) => {
+      if (type === "limitaAprobata") {
+        const calculRata = Number(newValue) / 100 * 3;
+        return prev.map(
+          (rate) => rate.id === id2 ? {
+            ...rate,
+            limitaAprobata: newValue,
+            rata: String(calculRata.toFixed(0))
+          } : rate
+        );
+      }
+      return prev.map(
+        (rate) => rate.id === id2 ? { ...rate, rata: newValue } : rate
+      );
+    });
+  };
+  const onAdauga = useCallback(() => {
+    if (!selectTipCredit) return;
+    if (disableInputBasedOnTipCredit.rata && (!Number(limitaAprobata) || Number(limitaAprobata) < 1))
+      return;
+    if (disableInputBasedOnTipCredit.limitaAprobata && (!Number(rata) || Number(rata) < 1))
+      return;
+    setMappedRate((prev) => [
+      {
+        id: String(prev.length + 1),
+        tipCredit: selectTipCredit,
+        limitaAprobata,
+        rata
+      },
+      ...prev
+    ]);
+    setLimitaAprobata("0");
+    setRata("0");
+    setSelectTipCredit("");
+  }, [disableInputBasedOnTipCredit, limitaAprobata, rata, selectTipCredit]);
+  const onDelete = (id2) => {
+    setMappedRate((prev) => prev.filter((rate) => rate.id !== id2));
+  };
+  const onReset = () => {
+    setMappedRate([]);
+    setLimitaAprobata("0");
+    setRata("0");
+    setSelectTipCredit("");
+  };
+  useEffect(() => {
+    getItems && getItems(mappedRate);
+  }, [mappedRate]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        title: "Ratele tale",
+        show: openModal,
+        onClose: () => setOpenModal(false),
+        contentPadding: "0px",
+        contentOverflow: "hidden",
+        contentBodyStyle: {
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: /* @__PURE__ */ jsx(Modal.ContentSlot, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { overflow: "hidden" }, children: [
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              items: "flex-end",
+              gap: 24,
+              padding: "16px 24px 16px 24px",
+              style: {
+                borderBottom: `1px solid ${colors.gray_1000_10}`,
+                flexShrink: 0
+              },
+              children: [
+                /* @__PURE__ */ jsxs(Flex, { items: "center", gap: 16, grow: 1, shrink: 1, basis: "0%", children: [
+                  /* @__PURE__ */ jsx(Flex, { grow: 1, shrink: 1, basis: "0%", children: /* @__PURE__ */ jsx(
+                    FormField,
+                    {
+                      label: "Tipul creditului",
+                      labelFor: "tipul_creditului",
+                      children: /* @__PURE__ */ jsx(
+                        Dropdown,
+                        {
+                          dropdownContentWidth: "120%",
+                          data: dataOptionsDropdown,
+                          value: selectTipCredit,
+                          setValue: (v) => {
+                            setSelectTipCredit(v);
+                            setLimitaAprobata("0");
+                            setRata("0");
+                          },
+                          size: "small"
+                        }
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Flex, { grow: 1, shrink: 1, basis: "0%", children: /* @__PURE__ */ jsx(FormField, { label: "Limita aprobata", children: /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      disabled: !selectTipCredit || disableInputBasedOnTipCredit.limitaAprobata,
+                      type: "number",
+                      inputMode: "numeric",
+                      rightText: "RON",
+                      id: "limita_aprobata",
+                      name: "limita_aprobata",
+                      numpad: true,
+                      numpadFloatNumber: false,
+                      numpadOffset: 10,
+                      value: limitaAprobata,
+                      setValue: (v) => onChangeInputs(v, "limitaAprobata"),
+                      size: "small",
+                      numpadPortal: true
+                    }
+                  ) }) }),
+                  /* @__PURE__ */ jsx(Flex, { grow: 1, shrink: 1, basis: "0%", children: /* @__PURE__ */ jsx(FormField, { label: "Rata", children: /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      disabled: !selectTipCredit || disableInputBasedOnTipCredit.rata,
+                      type: "number",
+                      rightText: "RON",
+                      id: "rata",
+                      name: "rata",
+                      value: rata,
+                      setValue: (v) => onChangeInputs(v, "rata"),
+                      size: "small",
+                      numpad: true,
+                      numpadFloatNumber: false,
+                      numpadOffset: 10,
+                      numpadPortal: true
+                    }
+                  ) }) })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    disabled: !selectTipCredit,
+                    label: "Adauga",
+                    variant: "secondaryOutlined",
+                    intent: "info",
+                    size: "small",
+                    width: "90px",
+                    onClick: onAdauga
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Flex,
+            {
+              direction: "column",
+              style: {
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ jsx(
+                Flex,
+                {
+                  direction: "column",
+                  padding: "0px 24px 0px 24px",
+                  height: "100%",
+                  style: {
+                    overflow: "scroll",
+                    // maxHeight: "208px",
+                    // minHeight: "130px",
+                    maxHeight: "273px",
+                    minHeight: "273px"
+                  },
+                  children: mappedRate.map((mapRate, index) => {
+                    return /* @__PURE__ */ jsxs(
+                      Flex,
+                      {
+                        items: "center",
+                        width: "100%",
+                        gap: 24,
+                        padding: index === 0 ? "16px 0px 8px 0px" : mappedRate.length - 1 === index ? "8px 0px 16px 0px" : "8px 0px 8px 0px",
+                        children: [
+                          /* @__PURE__ */ jsxs(
+                            Flex,
+                            {
+                              items: "center",
+                              gap: 16,
+                              grow: 1,
+                              shrink: 1,
+                              basis: "0%",
+                              children: [
+                                /* @__PURE__ */ jsx(Flex, { grow: 1, shrink: 1, basis: "0%", children: /* @__PURE__ */ jsx(
+                                  LabeledText,
+                                  {
+                                    text: listLabels[mapRate.tipCredit],
+                                    textFontSize: 16,
+                                    textFontWeight: 500,
+                                    textColor: "gray_950"
+                                  }
+                                ) }),
+                                /* @__PURE__ */ jsx(Flex, { grow: 1, shrink: 1, basis: "0%", children: mapRate.tipCredit === "card_de_credit" || mapRate.tipCredit === "overdraft" ? /* @__PURE__ */ jsx(
+                                  TextInput,
+                                  {
+                                    id: `${mapRate.id}_limita_aprobata`,
+                                    name: `${mapRate.id}_limita_aprobata`,
+                                    rightText: "RON",
+                                    size: "small",
+                                    value: mapRate.limitaAprobata,
+                                    setValue: (v) => onChangeMappedRate(
+                                      mapRate.id,
+                                      "limitaAprobata",
+                                      v
+                                    ),
+                                    numpad: true,
+                                    numpadFloatNumber: false,
+                                    numpadOffset: 10,
+                                    numpadPortal: true
+                                  }
+                                ) : /* @__PURE__ */ jsx(Fragment, {}) }),
+                                /* @__PURE__ */ jsx(Flex, { grow: 1, shrink: 1, basis: "0%", children: /* @__PURE__ */ jsx(
+                                  TextInput,
+                                  {
+                                    disabled: mapRate.tipCredit === "card_de_credit" || mapRate.tipCredit === "overdraft",
+                                    id: `${mapRate.id}_rata`,
+                                    name: `${mapRate.id}_rata`,
+                                    rightText: "RON",
+                                    size: "small",
+                                    value: mapRate.rata,
+                                    setValue: (v) => onChangeMappedRate(
+                                      mapRate.id,
+                                      "rata",
+                                      v
+                                    ),
+                                    numpad: true,
+                                    numpadFloatNumber: false,
+                                    numpadOffset: 10,
+                                    numpadPortal: true
+                                  }
+                                ) })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              label: "Sterge",
+                              variant: "secondaryOutlined",
+                              intent: "danger",
+                              size: "small",
+                              width: "90px",
+                              onClick: () => onDelete(mapRate.id)
+                            }
+                          )
+                        ]
+                      },
+                      mapRate.id
+                    );
+                  })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              items: "center",
+              justify: "space-between",
+              gap: 32,
+              padding: "16px 24px 16px 24px",
+              style: {
+                borderTop: `1px solid ${colors.gray_1000_10}`,
+                flexShrink: 0,
+                flexBasis: "0%"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "small",
+                    label: "Reseteaza",
+                    variant: "secondaryOutlined",
+                    intent: "accent",
+                    onClick: onReset,
+                    width: "90px"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Flex, { items: "center", gap: 24, children: [
+                  /* @__PURE__ */ jsx(
+                    LabeledText,
+                    {
+                      gap: 0,
+                      align: "right",
+                      label: "Total rate",
+                      labelFontSize: 14,
+                      labelColor: "gray_700",
+                      text: `${totalRate} RON`,
+                      textFontSize: 16,
+                      textFontWeight: 500
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      disabled: !mappedRate.length,
+                      size: "small",
+                      width: "90px",
+                      label: "Confirma",
+                      variant: "primary",
+                      intent: "accent",
+                      onClick: () => setOpenModal(false)
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RatesCalculatorStyled,
+      {
+        $intent: intent,
+        $size: size,
+        $disabled: disabled,
+        $isOpen: openModal,
+        onClick: () => !disabled && onOpenModal(),
+        ...rest,
+        children: /* @__PURE__ */ jsxs("div", { className: "x7k9m2p4n5", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              readOnly: true,
+              id,
+              type: "text",
+              name,
+              value: mappedRate.length ? totalRate : "0",
+              onChange: (e) => e.preventDefault()
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { children: "RON" }),
+            /* @__PURE__ */ jsx(Icon, { icon: "office-supplies", size: 20, color: colors.info_700 })
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+
+export { RatesCalculator as default };

package/build/esm/components/RatesCalculator/index.js

@@ -0,0 +1,8 @@
+"use strict";
+"use client";
+
+import RatesCalculator from './RatesCalculator.js';
+
+
+
+export { RatesCalculator as default };

package/build/esm/components/Section/Section.js

@@ -0,0 +1,78 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default, { Children } from 'react';
+import styled from 'styled-components';
+import { colors } from '../../utils';
+
+const SectionStyled = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: ${(props) => props.$gap && typeof props.$gap === "number" ? props.$gap + "px" : "16px"};
+
+  & > div:first-of-type {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  & > div:first-of-type > div:first-of-type {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1;
+  }
+
+  & > div:first-of-type > div:first-of-type > h3 {
+    margin: 0px;
+    padding: 0px;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 130%;
+    color: ${colors.gray_950};
+  }
+
+  & > div:first-of-type > div:first-of-type > span {
+    margin: 0px;
+    padding: 0px;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 120%;
+    color: ${colors.gray_700};
+  }
+`;
+const Section = ({ children, title = "Section", subtitle = "", gap = 16, ...rest }) => {
+  let _contentTopRight;
+  const _rest = [];
+  Children.forEach(children, (child) => {
+    if (React__default.isValidElement(child)) {
+      if (child.type === ContentTopRight) {
+        return _contentTopRight = child;
+      } else {
+        return _rest.push(child);
+      }
+    } else {
+      _rest.push(child);
+    }
+  });
+  return /* @__PURE__ */ jsxs(SectionStyled, { ...rest, $title: title, $subtitle: subtitle, $gap: gap, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { children: title }),
+        !!subtitle.length && typeof subtitle === "string" && /* @__PURE__ */ jsx("span", { children: subtitle })
+      ] }),
+      _contentTopRight && _contentTopRight
+    ] }),
+    _rest
+  ] });
+};
+const ContentTopRight = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+Section.ContentTopRight = ContentTopRight;
+
+export { Section as default };

package/build/esm/components/Section/index.js

@@ -0,0 +1,8 @@
+"use strict";
+"use client";
+
+import Section from './Section.js';
+
+
+
+export { Section as default };

package/build/esm/components/SegmentedTabs/SegmentedTabs.js

@@ -0,0 +1,25 @@
+"use strict";
+"use client";
+
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import styled from 'styled-components';
+import { colors } from '../../utils';
+
+const SegmentedTabsWrapper = styled.div`
+  display: flex;
+  gap: ${(props) => props.$gap}px;
+  padding: ${(props) => props.$padding};
+  border-bottom: 1px solid ${colors.gray_200};
+  border-bottom-style: inset;
+`;
+const SegmentedTabs = ({
+  children,
+  gap = 0,
+  padding = "0",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(SegmentedTabsWrapper, { $gap: gap, $padding: padding, ...rest, children });
+};
+
+export { SegmentedTabs as default };

package/build/esm/components/SegmentedTabs/index.js

@@ -0,0 +1,8 @@
+"use strict";
+"use client";
+
+import SegmentedTabs from './SegmentedTabs.js';
+
+
+
+export { SegmentedTabs as default };