contentoh-components-library 21.4.73 → 21.4.75

package/src/components/molecules/RowItem/index.js

@@ -0,0 +1,45 @@
+import { Container } from "./styles";
+import { ColumnItem } from "./ColumnItem";
+import { CheckBox } from "../../atoms/CheckBox";
+
+export const RowItem = ({
+  productsArray = [],
+  chkOnChange,
+  onGridClick,
+  chkChecked,
+}) => {
+  return (
+    <Container>
+      {productsArray.map(({ cols, product, id }, i) => (
+        <div
+          className="row-container"
+          key={id}
+          onClick={(e) => onGridClick && onGridClick(e, product, i)}
+        >
+          <div
+            className="chk-container"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <CheckBox
+              id={"chk-" + id}
+              name={"chk-" + id}
+              className="chk-item"
+              onChange={(e) => chkOnChange && chkOnChange(e, product)}
+              defaultChecked={chkChecked && chkChecked(product)}
+            />
+          </div>
+          {cols.map((col, i) => (
+            <ColumnItem
+              key={id + "-" + i}
+              element={col.name}
+              flex={col.flex}
+              minWidth={col.minWidth}
+            />
+          ))}
+        </div>
+      ))}
+    </Container>
+  );
+};

package/src/components/molecules/RowItem/styles.js

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+import { FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  height: calc(100% - 36px);
+  overflow: auto;
+  min-width: fit-content;
+
+  .row-container {
+    display: flex;
+    cursor: pointer;
+    &:hover {
+      background-color: #fafafa;
+    }
+
+    .chk-container {
+      width: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .chk-item {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+`;
+
+export const Column = styled.div`
+  flex: ${({ flex }) => (flex ? flex : 1)};
+  min-width: ${({ minWidth }) => (minWidth ? minWidth : 100)}px;
+  text-align: center;
+  color: #262626;
+  font-family: ${FontFamily.Lato};
+  font-size: 12px;
+  line-height: 16px;
+  padding: 10px 5px;
+  display: flex;
+  justify-content: center;
+`;

package/src/components/molecules/ServiceDataValidator/ServiceDataValidator.stories.js

@@ -0,0 +1,90 @@
+import { ServiceDataValidator } from "./index";
+
+export default {
+  title: "Components/molecules/ServiceDataValidator",
+  component: ServiceDataValidator,
+};
+
+const Template = (args) => <ServiceDataValidator {...args} />;
+
+export const ServiceDataValidatorDefault = Template.bind({});
+ServiceDataValidatorDefault.args = {
+ activeRetailer:{
+    id:34,
+    image:"https://content-management-images.s3.amazonaws.com/retailers/34.png",
+    name:"San Pablo",
+    services:["AA", "AP", "AA"]
+  },
+  headerData:{
+    "orderId": 15275,
+    "status": "AA",
+    "datasheet_status": "AA",
+    "prio": "none",
+    "version": 3,
+    "description_status": "AA",
+    "images_status": "AA",
+    "brand": null,
+    "retailerOrder": 0,
+    "missing": {
+      "datasheet": null,
+      "descriptions": null,
+      "images": null
+    },
+    "services": {
+      "datasheets": 1,
+      "descriptions": 1,
+      "images": 1
+    },
+    "article": {
+      "category": "Abarrotes|Abarrotes Secos|Frutos Secos",
+      "company_name": "GRUPO BRAHMA",
+      "country": "México",
+      "id_category": "11",
+      "id_datasheet_especialist": 54,
+      "id_datasheet_facilitator": 52,
+      "id_description_especialist": 54,
+      "id_description_facilitator": 52,
+      "id_images_especialist": 55,
+      "id_images_facilitator": 53,
+      "id_order": 15275,
+      "id_article": 39485,
+      "id_auditor": 37,
+      "name": "Mix de nueces",
+      "timestamp": "2023-07-14T21:03:19.000Z",
+      "upc": "7543453453"
+    },
+    "retailers": [
+      {
+        "id": 34,
+        "name": "San Pablo",
+        "services": [
+          "AA",
+          "AP",
+          "AA"
+        ],
+        "image": "https://content-management-images.s3.amazonaws.com/retailers/34.png"
+      }
+    ],
+    "statusByRetailer": {
+      "34": {
+        "datasheet": "AA",
+        "description": "AA",
+        "images": "AA"
+      }
+    },
+    "retailersAvailable": [
+      {
+        "id": 34,
+        "name": "San Pablo"
+      }
+    ],
+    "categoryName": "Abarrotes|Abarrotes Secos|Frutos Secos",
+    "upc": "7543453453",
+    "id_article": 39485,
+    "id_order": 15275
+  },
+  showApproveRejectAll:true,
+  showValidationButtons:true,
+  text:"Descripción",
+  missingData:1,
+}

package/src/components/molecules/ServiceDataValidator/index.js

@@ -0,0 +1,49 @@
+import { Container } from "./styles";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { useEffect, useRef, useState } from "react";
+import { Validation } from "../Validation";
+
+export const ServiceDataValidator = ({
+  headerData,
+  activeRetailer,
+  setActiveRetailer,
+  showValidationButtons,
+  showApproveRejectAll,
+  approveAll,
+  rejectAll,
+  approve,
+  reject,
+  text,
+  complete,
+  showValidation,
+  missingData,
+}) => {
+  const headerTop = useRef();
+  return (
+    <Container
+      fontFamily={FontFamily.Raleway}
+      color={GlobalColors.original_magenta}
+      ref={headerTop}
+    >
+        <span className="service-text">
+          {text}:{" "}
+          <span className="service-complete">
+            {complete ? "Completado" : `${missingData} ${missingData > 1 ? 'Faltantes' : 'Faltante'}`}
+          </span>
+        </span>
+     { showValidation &&  (
+     <Validation
+           headerData={headerData}
+           activeRetailer={activeRetailer}
+           setActiveRetailer={setActiveRetailer}
+           showValidationButtons={showValidationButtons}
+           showApproveRejectAll={showApproveRejectAll}
+           approveAll={approveAll}
+           rejectAll={rejectAll}
+           approve={approve}
+           reject={reject}
+          ></Validation>
+        )}
+    </Container>
+  );
+};

package/src/components/molecules/ServiceDataValidator/styles.js

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+display:flex;
+padding:7px 15px;
+justify-content: space-between;
+background:${GlobalColors.blue_light};
+width: auto;
+height:34px;
+align-items: center;
+max-width:300px;
+border-radius:5px;
+
+
+  * + * {
+    margin-left: 10px;
+  }
+
+  .btn-gral{
+    min-width: 34px;
+    min-height:34px;
+  }
+  .images-buttons{
+    display:flex;
+  }
+  .service-text{
+    font-family:${FontFamily.RobotoMedium}, sans-serif;
+    font-size:12px;
+    font-weight: 500;
+    color:${GlobalColors.gray};
+  }
+  .service-complete{
+    color:${GlobalColors.black};
+  }
+`;

package/src/components/molecules/SignInLogin/index.js

@@ -54,25 +54,25 @@ export const SignInLogin = (props) => {
         } else {
           const userGroup =
             session.signInUserSession.accessToken.payload["cognito:groups"];
-          const response = await axios.get(
-            process.env.REACT_APP_USER_ENDPOINT,
-            {
-              headers: {
-                Authorization: session.signInUserSession.idToken.jwtToken,
-              },
-            }
-          );
-          if (userGroup[0] === props.users) {
+          if (userGroup.includes(props.users)) {
             sessionStorage.setItem("auth", true);
             sessionStorage.setItem(
               "jwt",
               session.signInUserSession.idToken.jwtToken
             );
+            const response = await axios.get(
+              process.env.REACT_APP_USER_ENDPOINT,
+              {
+                headers: {
+                  Authorization: session.signInUserSession.idToken.jwtToken,
+                },
+              }
+            );
             const user = JSON.parse(response.data.body).data[0];
             const company = JSON.parse(response.data.body).data[1];
             caches.keys().then((names) => {
               names.forEach((name) => {
-                caches.delete(name);
+                caches?.delete(name);
               });
             });
             user.src = `https://${
@@ -89,7 +89,7 @@ export const SignInLogin = (props) => {
           }
         }
       } catch (error) {
-        console.log(error.code);
+        console.log(error);
         setLoading(false);
         if (error.code === "NotAuthorizedException") {
           setSignInError("NotAuthorizedException");

package/src/components/molecules/StatusRetailer/StatusAsignationInfo.stories.js

@@ -0,0 +1,17 @@
+import { StatusRetailer } from "./index";
+
+export default {
+  title: "Components/molecules/StatusRetailer",
+  component: StatusRetailer,
+};
+
+const Template = (args) => <StatusRetailer {...args} />;
+
+export const StatusRetailerDefault = Template.bind({});
+StatusRetailerDefault.args = {
+  status: "AA",
+  image: {
+    src: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+  },
+  imagesSection: true,
+};

package/src/components/molecules/StatusRetailer/index.js

@@ -0,0 +1,55 @@
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+import { ProductSkuStatus } from "../ProductSkuStatus";
+import { RetailerSelectorv2 } from "../RetailerSelectorv2";
+export const StatusRetailer = ({
+  percent = 0,
+  id = "default-id",
+  showRetailer=false,
+  retailers,
+  activeRetailer,
+  setActiveRetailer,
+  headerData,
+  setShowVersionSelector,
+  version
+}) => {
+  const [showAsignationPanel, setShowAsignationPanel] = useState(false);
+
+  const closeAsignations = (e) => {
+    if (!e.target.closest("#default-id") && showAsignationPanel) {
+      document.removeEventListener("click", closeAsignations, false);
+      setShowAsignationPanel(false);
+    }
+  };
+
+  useEffect(() => {
+    if (showAsignationPanel) {
+      document.addEventListener("click", closeAsignations, false);
+    }
+  }, [showAsignationPanel]);
+  return (
+    <Container id={id}>
+      {showRetailer && 
+        <RetailerSelectorv2
+            retailers={retailers}
+            activeRetailer={activeRetailer}
+            setActiveRetailer={setActiveRetailer}
+          />
+      }
+      <ProductSkuStatus
+          productName={headerData?.article?.name || headerData?.name}
+          statusType={
+            headerData?.version_status ||
+            headerData?.status ||
+            headerData?.article_status
+          }
+          setShowVersionSelector={setShowVersionSelector}
+          percentRequired={percent}
+          percent={percent?.toFixed(0)}
+          containerClassName="bar-sku"
+          contClassName="bar-sku-cont"
+              version={version}
+        />
+    </Container>
+  );
+};

package/src/components/molecules/StatusRetailer/styles.js

@@ -0,0 +1,85 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  border-radius: 117px;
+  padding: 4px 5px;
+  display: flex;
+  border: 1px solid #F0F0F0;
+  gap:10px;
+  min-width: 128px;
+  justify-content:center;
+
+  .images-buttons {
+    button + * {
+      margin-left: 8px;
+    }
+  }
+
+  .assignations-container {
+    display: flex;
+    cursor: pointer;
+  }
+
+  .asignation-panel {
+    background: ${GlobalColors.s2};
+    border: 1px solid ${GlobalColors.s3};
+    box-sizing: border-box;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
+    border-radius: 4px;
+    padding: 10px 8px;
+    position: absolute;
+    top: calc(100% + 10px);
+    right: 0;
+    z-index: 10;
+
+    .asignation-header {
+      display: flex;
+      justify-content: space-between;
+
+      .asignation-status,
+      .asignation-percent {
+        & > p {
+          font-family: ${FontFamily.AvenirNext};
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 16px;
+          color: ${GlobalColors.s5};
+        }
+      }
+
+      .asignation-percent {
+        text-align: right;
+      }
+
+      & + * {
+        margin-top: 10px;
+      }
+    }
+
+    .asignations-list {
+      min-height: 40px;
+
+      .no-asignations {
+        padding: 5px;
+        font-family: ${FontFamily.AvenirNext};
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 16px;
+        color: ${GlobalColors.s5};
+      }
+
+      & + * {
+        margin-top: 10px;
+        border-top: 1px solid ${GlobalColors.s3};
+      }
+    }
+
+    .default-asignations-list {
+      padding-top: 10px;
+    }
+  }
+`;

package/src/components/molecules/StripeCardSelector/CardSelector.stories.js

@@ -8,6 +8,5 @@ export default {
 const Template = (args) => <CardSelector {...args} />;
 export const CardSelectorDefault = Template.bind({});
 CardSelectorDefault.args = {
-  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIxMTAyNWQzMi1kMTM5LTQ0MzctYmZlYy1hNWY1Njg0NDdjODciLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY5NDQ3ODQ2NSwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2OTQ0ODIwNjUsImlhdCI6MTY5NDQ3ODQ2NSwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.Fia8x4aahTvCOdt2GohSNoe_9XgBcVuF4bXGWvuNTJ7-_YTe9t1vxGlhw7AG0WC2-tqFiAdx8_UojxqX-UW4lE6vI3pGLmkF7hEfV4XCWq6I3pF5aXYDkRD4YBPyQfzBgwQsx4bR_rm5oRfHPItfc_zJwObV9rQgTYLEQ9u-SL2t0bdx2yOmAjCAtGHp83w5highRkcZx0huKGJnRQ4Wmt5HlgAvsnkzqAimC9E6NH-IDLMAXq8T2f9INPzcdMR403Ybpy3Zrqphw5ITHK1tkUUZxcVsaAnRM7g1-q0OA5S0vRFbcw2lRgaZ_DVJbk0Lzba5NK4nDZ4U97Nw_zXqLA",
-  isSelected: true,
+  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjQzNjAwMC0wYzgyLTRjNzYtYWEzNi1kM2Q1NGJjZTZiMTMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4NTU2OTUyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODU1NzMxMjMsImlhdCI6MTY4NTU2OTUyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.EotcxmtkUpBxwlXa3bo25iLAmRcT0kj1G3PVITVB_0ZtF8UC19rJIMTNSc1hYkl8cbfCuB_vkjYCAxi4b2SOru5MdMTRhgNjcQTVbiwIYww-QdUWq0WSv84nW_HaRoxCJ8ezm-wBZgUTpcD3VFuynUICbODKKHUfxVdKdVoAM6GGE6ymSbO7-0C7ZumoWEqaZ22BF4G1H-JvLkR-tL5iqXa2N-QCnNoteFmHstBfH6Sp5UZhPav1VBEGRmwdFfUnC-Xc-aNeIFwgWCXMsOXFWbbmWeh0uNF-Btu-QEJ7VkCu4pbElqHWJKBYLCx1zqDBrKrsrNxyvQlxsJ9NSOae8Q",
 };

package/src/components/molecules/TabsMenuv2/TabsMenuv2.stories.js

@@ -0,0 +1,19 @@
+import { TabsMenuv2 } from "./index";
+
+export default {
+  title: "Components/molecules/TabsMenuv2",
+  component: TabsMenuv2,
+};
+
+const Template = (args) => <TabsMenuv2 {...args} />;
+
+export const TabsMenuv2Default = Template.bind({});
+
+TabsMenuv2Default.args = {
+  tabsSections: {
+    Descripción: true,
+    "Ficha técnica": false,
+    Imágenes: false,
+    "Golden SKU": false,
+  },
+};

package/src/components/molecules/TabsMenuv2/index.js

@@ -0,0 +1,112 @@
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+
+import { Modal } from "../../organisms/Modal";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+import { TabSectionv2 } from "../../atoms/TabSectionv2";
+
+export const TabsMenuv2 = ({
+  tabsSections = {},
+  setImagesSection,
+  setActiveTab,
+  activeTab,
+  updatedDescriptions,
+  updatedDatasheets,
+  images,
+  setUpdatedDescriptions,
+  setUpdatedDatasheets,
+  setImages,
+  className
+}) => {
+  const [sections, setSections] = useState(tabsSections);
+
+  const [modal, setModal] = useState(false);
+  const [cancelAccept, setCancelAccept] = useState("");
+  const [llave, setLlave] = useState("");
+  const [objeto, setObjeto] = useState();
+
+  const activeSection = (key, array = {}) => {
+    let tempArray = {};
+    setImagesSection(key === "Imágenes");
+    Object.keys(array).forEach((section) => {
+      tempArray[section] = section === key;
+      if (section === key) return setActiveTab(key);
+    });
+    setSections(tempArray);
+  };
+
+  useEffect(() => {
+    if (cancelAccept === "Aceptar" && llave !== "") {
+      setCancelAccept("");
+      setModal(false);
+      activeSection(llave, objeto);
+      setUpdatedDescriptions([]);
+      setUpdatedDatasheets([]);
+      setImages({});
+    } else if (cancelAccept === "Cancelar" && llave !== "") {
+      setModal(false);
+      setCancelAccept("");
+    }
+  }, [cancelAccept]);
+
+  const detectClickFunction = (e, key, sections) => {
+    const targetIsTheCurrentTab = e.target.innerHTML === activeTab;
+    const descriptionsWereUpdated = updatedDescriptions.length > 0;
+    const datasheetWereUpdated = updatedDatasheets.length > 0;
+    const imagesWereUpdated = images?.values?.filter((f) => !f.id)?.length > 0;
+    const dataWereUpdated =
+      descriptionsWereUpdated || datasheetWereUpdated || imagesWereUpdated;
+
+    if (!targetIsTheCurrentTab && !dataWereUpdated) {
+      setLlave(key);
+      setObjeto(sections);
+      activeSection(key, sections);
+    } else if (!targetIsTheCurrentTab && dataWereUpdated) {
+      setModal(true);
+      setLlave(key);
+      setObjeto(sections);
+    }
+  };
+
+  return (
+    <>
+      {activeTab && (
+        <Modal
+          show={modal}
+          title="Cambios sin Guardar"
+          message="Estás cambiando de vista y aun no guardas cambios ¿Estás seguro?"
+          buttons={[
+            <ButtonV2
+              key="btn-Cancelar"
+              type="white"
+              label="Cancelar"
+              size={12}
+              onClick={() => setCancelAccept("Cancelar")}
+            />,
+            <ButtonV2
+              key="btn-Aceptar"
+              type="pink"
+              label="Aceptar"
+              size={12}
+              onClick={() => setCancelAccept("Aceptar")}
+            />,
+          ]}
+        />
+      )}
+
+      <Container>
+        {Object.keys(sections).map((key, index) => (
+          <TabSectionv2
+            key={index}
+            label={key}
+            className={`tab ${className}`}
+            active={sections[key]}
+            onClick={(e) => {
+              detectClickFunction(e, key, sections);
+            }}
+          />
+        ))}
+      </Container>
+    </>
+  );
+};

package/src/components/molecules/TabsMenuv2/styles.js

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  height: 34px;
+  align-items: center;
+  div {
+    font-family: Raleway-500;
+    color: #262626;
+    font-size: 12px;
+    line-height: 21px;
+    border-bottom: none;
+    width: 104px;
+    padding-bottom: 0px;
+    -webkit-transition: 0.1s all;
+    transition: 0.1s all;
+    cursor: pointer;
+  }
+`;

package/src/components/molecules/TagAndInput/index.js

@@ -30,12 +30,14 @@ export const TagAndInput = ({
   onKeyDown,
   showTooltip,
   auditClass,
-  onChange, 
+  onChange,
   dataInputs,
   inputGroup,
   boxOnboardingData,
 }) => {
-  const [boxOnboardingList, setBoxOnboardingList] = useState(boxOnboardingData || []);
+  const [boxOnboardingList, setBoxOnboardingList] = useState(
+    boxOnboardingData || []
+  );
 
   useEffect(() => {
     const temp = {};
@@ -52,12 +54,11 @@ export const TagAndInput = ({
     if (tempList.length > 0) {
       setBoxOnboardingList(
         tempList.map((value, index) =>
-          index === tempList.length - 1 ? {value } : { value }
+          index === tempList.length - 1 ? { value } : { value }
         )
       );
     }
   }, []);
-
   useEffect(() => {
     onChange && onChange(boxOnboardingList);
   }, [boxOnboardingList]);
@@ -68,7 +69,7 @@ export const TagAndInput = ({
       className={"input-container"}
       key={`generalTagInput-${inputType}`}
     >
-       {label?.length && (
+      {label?.length && (
         <div className="title-container">
           <ScreenHeader
             text={label}