rbro-tat-uds 1.6.36 → 2.0.0

package/build/cjs/components/Radio/Radio.cjs

@@ -0,0 +1,108 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var styled = require('styled-components');
+var utils = require('../../utils');
+
+const styledSizesWrapper = {
+  small: styled.css`
+    width: 16px;
+    height: 16px;
+  `,
+  medium: styled.css`
+    width: 20px;
+    height: 20px;
+  `,
+  large: styled.css`
+    width: 24px;
+    height: 24px;
+  `
+};
+const styledSizeChecked = {
+  small: styled.css`
+    width: 8px;
+    height: 8px;
+  `,
+  medium: styled.css`
+    width: 12px;
+    height: 12px;
+  `,
+  large: styled.css`
+    width: 16px;
+    height: 16px;
+  `
+};
+const StyledRadio = styled.input`
+  appearance: none;
+  margin: 0px;
+  padding: 0px;
+  border-radius: 50%;
+  background-color: ${utils.colors.white};
+  border-radius: 50%;
+  position: relative;
+  border-width: ${({ $size }) => $size === "large" ? "2px" : "1px"};
+  border-style: solid;
+  border-color: ${utils.colors.gray_1000_10};
+  cursor: pointer;
+  ${({ $size }) => $size && ["small", "medium", "large"].includes($size) && styledSizesWrapper[$size]}
+
+  &::before {
+    content: "";
+    border-radius: 50%;
+    transform: scale(0);
+    background-color: ${utils.colors.info_700};
+    position: absolute;
+    top: 50%;
+    left: 50%;
+
+    ${({ $size }) => $size && ["small", "medium", "large"].includes($size) && styledSizeChecked[$size]}
+  }
+
+  &:checked::before {
+    transform: scale(1) translate(-50%, -50%);
+  }
+  &:checked {
+    border-color: ${utils.colors.info_700};
+    cursor: default;
+  }
+
+  &:disabled {
+    background-color: ${utils.colors.gray_100};
+    border-color: ${utils.colors.gray_1000_10};
+
+    &:checked::before {
+      background-color: ${utils.colors.gray_400};
+    }
+  }
+`;
+const Radio = ({
+  size = "medium",
+  name,
+  checked = false,
+  disabled = false,
+  id,
+  onChange,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledRadio,
+    {
+      type: "radio",
+      disabled,
+      checked,
+      onChange,
+      name,
+      id,
+      $size: size,
+      ...rest
+    }
+  );
+};
+
+exports.default = Radio;

package/build/cjs/components/Radio/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Radio = require('./Radio.cjs');
+
+
+
+exports.default = Radio.default;

package/build/cjs/components/RatesCalculator/RatesCalculator.cjs

@@ -0,0 +1,535 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styled = require('styled-components');
+var TextInput = require('../TextInput/TextInput.cjs');
+var Modal = require('../Modal/Modal.cjs');
+var Flex = require('../Flex/Flex.cjs');
+var Button = require('../Button/Button.cjs');
+var FormField = require('../FormField/FormField.cjs');
+var Dropdown = require('../Dropdown/Dropdown.cjs');
+var LabeledText = require('../LabeledText/LabeledText.cjs');
+var utils = require('../../utils');
+var Icon = require('../Icon/Icon.cjs');
+
+const _size = {
+  medium: styled.css`
+    height: 40px;
+    font-size: 14px;
+    padding: 0px 70px 0px 12px;
+  `,
+  large: styled.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: ${utils.colors.gray_100};
+      color: ${utils.colors.gray_950};
+      width: 100%;
+      font-weight: 400;
+      line-height: 120%;
+
+      ${({ $intent }) => $intent === "danger" && styled.css`
+          outline: 2px solid ${utils.colors.danger_500};
+        `}
+
+      ${({ $size }) => $size && ["medium", "large"].includes($size) ? _size[$size] : _size.medium};
+
+      &:placeholder {
+        color: ${utils.colors.gray_600};
+      }
+
+      ${({ $isOpen }) => $isOpen && styled.css`
+          outline: 2px solid ${utils.colors.accent_600};
+        `}
+
+      ${({ $disabled }) => $disabled && styled.css`
+          background-color: ${utils.colors.gray_30};
+          color: ${utils.colors.gray_500};
+
+          &:placeholder {
+            color: ${utils.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: ${utils.colors.gray_600};
+        font-weight: 400;
+      }
+    }
+  }
+`;
+const RatesCalculator = ({
+  id,
+  name,
+  disabled,
+  size = "medium",
+  intent = "default",
+  items,
+  getItems,
+  getValue,
+  ...rest
+}) => {
+  const [openModal, setOpenModal] = React.useState(false);
+  const [selectTipCredit, setSelectTipCredit] = React.useState("");
+  const [limitaAprobata, setLimitaAprobata] = React.useState("0");
+  const [rata, setRata] = React.useState("0");
+  const listLabels = {
+    nevoi_personale: "Nevoi personale",
+    card_de_credit: "Card de credit",
+    overdraft: "Overdraft",
+    credit_ipotecar: "Credit ipotecar"
+  };
+  const indexedItems = React.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] = React.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 = React.useMemo(() => {
+    return {
+      rata: selectTipCredit === "card_de_credit" || selectTipCredit === "overdraft",
+      limitaAprobata: selectTipCredit === "nevoi_personale" || selectTipCredit === "credit_ipotecar"
+    };
+  }, [selectTipCredit]);
+  const totalRate = React.useMemo(() => {
+    return Math.round(
+      mappedRate.reduce((acc, curr) => acc + Number(curr.rata), 0)
+    ).toFixed(0);
+  }, [mappedRate]);
+  React.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 = React.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("");
+  };
+  React.useEffect(() => {
+    getItems && getItems(mappedRate);
+  }, [mappedRate]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Modal.default,
+      {
+        title: "Ratele tale",
+        show: openModal,
+        onClose: () => setOpenModal(false),
+        contentPadding: "0px",
+        contentOverflow: "hidden",
+        contentBodyStyle: {
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(Modal.default.ContentSlot, { children: /* @__PURE__ */ jsxRuntime.jsxs(Flex.default, { direction: "column", style: { overflow: "hidden" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Flex.default,
+            {
+              items: "flex-end",
+              gap: 24,
+              padding: "16px 24px 16px 24px",
+              style: {
+                borderBottom: `1px solid ${utils.colors.gray_1000_10}`,
+                flexShrink: 0
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(Flex.default, { items: "center", gap: 16, grow: 1, shrink: 1, basis: "0%", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Flex.default, { grow: 1, shrink: 1, basis: "0%", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    FormField.default,
+                    {
+                      label: "Tipul creditului",
+                      labelFor: "tipul_creditului",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        Dropdown.default,
+                        {
+                          dropdownContentWidth: "120%",
+                          data: dataOptionsDropdown,
+                          value: selectTipCredit,
+                          setValue: (v) => {
+                            setSelectTipCredit(v);
+                            setLimitaAprobata("0");
+                            setRata("0");
+                          },
+                          size: "small"
+                        }
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Flex.default, { grow: 1, shrink: 1, basis: "0%", children: /* @__PURE__ */ jsxRuntime.jsx(FormField.default, { label: "Limita aprobata", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    TextInput.default,
+                    {
+                      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__ */ jsxRuntime.jsx(Flex.default, { grow: 1, shrink: 1, basis: "0%", children: /* @__PURE__ */ jsxRuntime.jsx(FormField.default, { label: "Rata", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    TextInput.default,
+                    {
+                      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__ */ jsxRuntime.jsx(
+                  Button.default,
+                  {
+                    disabled: !selectTipCredit,
+                    label: "Adauga",
+                    variant: "secondaryOutlined",
+                    intent: "info",
+                    size: "small",
+                    width: "90px",
+                    onClick: onAdauga
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Flex.default,
+            {
+              direction: "column",
+              style: {
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                Flex.default,
+                {
+                  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__ */ jsxRuntime.jsxs(
+                      Flex.default,
+                      {
+                        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__ */ jsxRuntime.jsxs(
+                            Flex.default,
+                            {
+                              items: "center",
+                              gap: 16,
+                              grow: 1,
+                              shrink: 1,
+                              basis: "0%",
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(Flex.default, { grow: 1, shrink: 1, basis: "0%", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  LabeledText.default,
+                                  {
+                                    text: listLabels[mapRate.tipCredit],
+                                    textFontSize: 16,
+                                    textFontWeight: 500,
+                                    textColor: "gray_950"
+                                  }
+                                ) }),
+                                /* @__PURE__ */ jsxRuntime.jsx(Flex.default, { grow: 1, shrink: 1, basis: "0%", children: mapRate.tipCredit === "card_de_credit" || mapRate.tipCredit === "overdraft" ? /* @__PURE__ */ jsxRuntime.jsx(
+                                  TextInput.default,
+                                  {
+                                    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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) }),
+                                /* @__PURE__ */ jsxRuntime.jsx(Flex.default, { grow: 1, shrink: 1, basis: "0%", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  TextInput.default,
+                                  {
+                                    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__ */ jsxRuntime.jsx(
+                            Button.default,
+                            {
+                              label: "Sterge",
+                              variant: "secondaryOutlined",
+                              intent: "danger",
+                              size: "small",
+                              width: "90px",
+                              onClick: () => onDelete(mapRate.id)
+                            }
+                          )
+                        ]
+                      },
+                      mapRate.id
+                    );
+                  })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Flex.default,
+            {
+              items: "center",
+              justify: "space-between",
+              gap: 32,
+              padding: "16px 24px 16px 24px",
+              style: {
+                borderTop: `1px solid ${utils.colors.gray_1000_10}`,
+                flexShrink: 0,
+                flexBasis: "0%"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button.default,
+                  {
+                    size: "small",
+                    label: "Reseteaza",
+                    variant: "secondaryOutlined",
+                    intent: "accent",
+                    onClick: onReset,
+                    width: "90px"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(Flex.default, { items: "center", gap: 24, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    LabeledText.default,
+                    {
+                      gap: 0,
+                      align: "right",
+                      label: "Total rate",
+                      labelFontSize: 14,
+                      labelColor: "gray_700",
+                      text: `${totalRate} RON`,
+                      textFontSize: 16,
+                      textFontWeight: 500
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button.default,
+                    {
+                      disabled: !mappedRate.length,
+                      size: "small",
+                      width: "90px",
+                      label: "Confirma",
+                      variant: "primary",
+                      intent: "accent",
+                      onClick: () => setOpenModal(false)
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RatesCalculatorStyled,
+      {
+        $intent: intent,
+        $size: size,
+        $disabled: disabled,
+        $isOpen: openModal,
+        onClick: () => !disabled && onOpenModal(),
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "x7k9m2p4n5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              readOnly: true,
+              id,
+              type: "text",
+              name,
+              value: mappedRate.length ? totalRate : "0",
+              onChange: (e) => e.preventDefault()
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "RON" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Icon.default, { icon: "office-supplies", size: 20, color: utils.colors.info_700 })
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+
+exports.default = RatesCalculator;

package/build/cjs/components/RatesCalculator/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var RatesCalculator = require('./RatesCalculator.cjs');
+
+
+
+exports.default = RatesCalculator.default;