contentoh-components-library 21.0.9 → 21.0.13

package/src/components/atoms/GeneralInput/index.js

@@ -1,84 +1,38 @@
 import { useEffect, useState } from "react";
 import { Container } from "./styles";
-import { InputFormatter } from "../InputFormatter";
-import { CheckBox } from "../CheckBox";
 
 export const GeneralInput = ({
   inputType,
   inputId,
+  inputCols,
+  inputRows,
   inputName,
   inputValue,
   inputPlaceholder,
   validateInput,
   position,
   inputsArray,
+  maxLength,
   inputSize,
-  articleId,
-  updatedDatasheets,
-  setUpdatedDatasheets,
-  updatedDescriptions,
-  setUpdatedDescriptions,
-  maxChar,
-  isRequired,
-  version,
 }) => {
-  const [textValue, setTextValue] = useState({
-    value: inputValue,
-  });
-  const [requiredEmpty, setRequiredEmpty] = useState(false);
+  const [textValue, setTextValue] = useState({ value: inputValue ?? "" });
 
-  const onHandleChange = (evt) => {
-    if (validateInput) {
-      setTextValue({ value: validateInput(evt, position, inputsArray) });
-    } else {
-      setTextValue({
-        value: inputType === "checkbox" ? evt.target.checked : evt.target.value,
-      });
-      let dataSave = updatedDatasheets.slice();
-      if (dataSave.length === 0)
-        dataSave.push({
-          articleId: articleId,
-          versionId: version,
-          attributeId: inputId,
-          value:
-            inputType === "checkbox" ? evt.target.checked : evt.target.value,
-        });
-      else if (dataSave.some((e) => e.attributeId === inputId)) {
-        dataSave.forEach((e) => {
-          if (e.attributeId === inputId) {
-            e.value =
-              inputType === "checkbox" ? evt.target.checked : evt.target.value;
-          }
-        });
-      } else {
-        dataSave.push({
-          articleId: articleId,
-          versionId: version,
-          attributeId: inputId,
-          value:
-            inputType === "checkbox" ? evt.target.checked : evt.target.value,
-        });
-      }
-      setUpdatedDatasheets(dataSave);
-    }
+  const onHandleChange = (e) => {
+    validateInput
+      ? setTextValue({ value: validateInput(e, position, inputsArray) })
+      : setTextValue(({ value }) => (value = e.target.value));
   };
 
   useEffect(() => {
-    setRequiredEmpty(
-      isRequired &&
-        (textValue.value?.length === 0 || textValue.value === undefined)
-    );
+    const input = document.querySelector(`textarea#${inputId}`);
+    if (input) {
+      input.style.cssText = "height:" + input.scrollHeight + "px";
+    }
   }, [textValue]);
 
   return (
-    <Container isRequired={requiredEmpty}>
-      {inputType === "checkbox" ? (
-        <CheckBox
-          id={inputId}
-          onChange={(e) => onHandleChange(e)}
-          defaultChecked={textValue.value === "true" ? true : false}
-        />
-      ) : inputType !== "textarea" ? (
+    <Container>
+      {inputType !== "textarea" ? (
         <input
           type={inputType}
           id={inputId}
@@ -87,22 +41,18 @@ export const GeneralInput = ({
           placeholder={inputPlaceholder}
           value={textValue.value}
           onInput={(e) => onHandleChange(e)}
-          required={isRequired}
-          maxLength={maxChar}
+          maxLength={maxLength && maxLength}
         />
       ) : (
-        <InputFormatter
+        <textarea
           name={inputName}
-          inputId={inputId}
+          id={inputId}
+          cols={inputCols}
+          rows={inputRows}
           placeholder={inputPlaceholder}
-          mainValue={textValue.value}
+          value={textValue.value}
           onChange={onHandleChange}
-          articleId={articleId}
-          updatedDescriptions={updatedDescriptions}
-          setUpdatedDescriptions={setUpdatedDescriptions}
-          maxChar={maxChar}
-          isRequired={isRequired}
-        />
+        ></textarea>
       )}
     </Container>
   );

package/src/components/atoms/GeneralInput/styles.js

@@ -4,20 +4,10 @@ import { FontFamily, GlobalColors } from "../../../global-files/variables";
 export const Container = styled.div`
   width: 100%;
 
-  > div {
-    label {
-      &:before {
-        outline: 1px solid ${({ isRequired }) => (isRequired ? "red" : "none")};
-      }
-    }
-  }
-
   input,
   textarea {
     width: 100%;
-    border: 1px solid
-      ${({ isRequired }) => (isRequired ? "red" : `${GlobalColors.s2}`)};
-
+    border: 1px solid ${GlobalColors.s2};
     font-family: ${FontFamily.AvenirNext};
     color: ${GlobalColors.s4};
     font-weight: normal;

package/src/components/atoms/GenericModal/index.js

@@ -1,10 +1,10 @@
 import { Container } from "./styles";
 
-export const GenericModal = ({ componentsArray = [], buttonType, onClick }) => {
+export const GenericModal = ({ componentsArray = [], buttonType }) => {
   return (
     <Container>
       <div className={"global-styles " + buttonType}>
-        <button className="close-button" onClick={onClick} />
+        <button className="close-button" />
         {componentsArray?.map((component) => component)}
       </div>
     </Container>

package/src/components/atoms/GenericModal/styles.js

@@ -12,13 +12,6 @@ export const Container = styled.div`
   position: fixed;
   background-color: rgba(59, 59, 59, 0.53);
   backdrop-filter: blur(4px);
-  top: 0;
-  left: 0;
-  z-index: 100;
-
-  h2 {
-    overflow: initial;
-  }
 
   .global-styles {
     background-color: ${GlobalColors.deep_gray};
@@ -75,10 +68,9 @@ export const Container = styled.div`
           margin-top: 30px;
         }
       }
-      .product-name-header,
-      .retailer-name-header {
+      .product-name-header {
         & + * {
-          margin-top: 30px;
+          margin-bottom: 30px;
         }
       }
     }

package/src/components/atoms/PriorityFlag/index.js

@@ -6,7 +6,7 @@ import low from "../../../assets/images/flags/lowPriority.svg";
 
 export const PriorityFlag = ({ priority }) => {
   const PriorityFlags = {
-    ["none"]: without,
+    ["no priority"]: without,
     ["low"]: low,
     ["medium"]: medium,
     ["high"]: high,

package/src/components/atoms/ProductImage/styles.js

@@ -4,7 +4,7 @@ export const Container = styled.div`
   width: fit-content;
 
   img {
-    object-fit: contain;
+    object-fit: cover;
   }
 
   &.carousel-image {

package/src/components/atoms/ProgressBar/index.js

@@ -1,8 +1,8 @@
 import { Container } from "./styles";
 
-export const ProgressBar = ({ percent, progressBarType }) => {
+export const ProgressBar = ({ percent, backgroundColor }) => {
   return (
-    <Container className={`status-${progressBarType}`}>
+    <Container backgroundColor={backgroundColor}>
       <p>{percent}%</p>
     </Container>
   );

package/src/components/atoms/ProgressBar/styles.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
-  background-color: ${GlobalColors.s3};
+  background-color: ${(props) => GlobalColors[props.backgroundColor]};
   width: fit-content;
   height: 27px;
   padding: 4px;
@@ -11,59 +11,8 @@ export const Container = styled.div`
   font-weight: 600;
   font-size: 14px;
   line-height: 19px;
-  color: ${(backgroundColor) =>
-    backgroundColor === "s2" || backgroundColor === "s1"
+  color: ${(props) =>
+    props.backgroundColor === "s2" || props.backgroundColor === "s1"
       ? GlobalColors.s4
       : GlobalColors.white};
-
-  &.status-As,
-  &.status-P {
-    background-color: ${GlobalColors.in_progress};
-  }
-
-  &.status-Pr,
-  &.status-Rr {
-    background-color: ${GlobalColors.reception};
-  }
-
-  &.status-AA,
-  &.status-AP,
-  &.status-AC,
-  &.status-AF {
-    background-color: ${GlobalColors.finished};
-  }
-
-  &.status-RA,
-  &.status-RF,
-  &.status-RP,
-  &.status-RC {
-    background-color: ${GlobalColors.rejected_status};
-  }
-
-  &.status-Dat,
-  &.status-Dsc,
-  &.status-Imgs {
-    background-color: ${GlobalColors.s4};
-  }
-
-  &.status-Ex {
-    background-color: ${GlobalColors.exported};
-  }
-
-  &.status-DDI {
-    background-color: ${GlobalColors.original_purpura};
-  }
-
-  &.status-GLD {
-    background-color: ${GlobalColors.in_progress};
-  }
-
-  &.status-TAB {
-    background-color: ${GlobalColors.deep_gray};
-  }
-
-  &.status-Pt {
-    background-color: ${GlobalColors.s2};
-    color: ${GlobalColors.s4};
-  }
 `;

package/src/components/atoms/ScreenHeader/index.js

@@ -8,16 +8,12 @@ export const ScreenHeader = ({
   color,
   headerType,
   Paragraph,
+
 }) => {
   return (
-    <Container
-      fontFamily={fontFamily}
-      color={color}
-      className={headerType}
-      key={`title-${text}`}
-    >
+    <Container fontFamily={fontFamily} color={color} className={headerType} key={`title-${text}`}>
       {text} {boldText && <span> {boldText}</span>}
-      {Paragraph && <p>{Paragraph}</p>}
+      {<p>{Paragraph}</p>}
     </Container>
   );
 };

package/src/components/atoms/ScreenHeader/styles.js

@@ -52,11 +52,6 @@ export const Container = styled.h2`
     font-weight: 400;
     font-size: 11px;
     line-height: 18px;
-
-    &:last-child {
-      min-width: 50px;
-      text-align: center;
-    }
   }
 
   &.gray-table-row {
@@ -68,14 +63,12 @@ export const Container = styled.h2`
     background-color: ${GlobalColors.s2};
     padding: 1px 3px;
     border-radius: 3px;
-    min-width: 50px;
-    text-align: center;
   }
-  &.header-and-paragraph {
+  &.header-and-paragraph{
     font-family: ${FontFamily.Raleway};
     font-size: 36px;
     color: ${GlobalColors.s5};
-    p {
+    p{
       font-family: ${FontFamily.AvenirNext};
       font-size: 14px;
       color: ${GlobalColors.s4};

package/src/components/atoms/StatusTag/index.js

@@ -1,37 +1,9 @@
 import { Container } from "./styles";
 
 export const StatusTag = ({ statusType, ovalForm }) => {
-  const getShortStatus = (status) => {
-    switch (status) {
-      case "COMPLETED":
-        return "C";
-      case "RECEPTION":
-        return "Pr";
-      case "NULL":
-        return "-";
-      case "RECEIVED":
-        return "Rc";
-      case "IN_PROGRESS":
-        return "P";
-      case "ASSIGNED":
-        return "As";
-      case "APPROVED":
-        return "Ap";
-      case "VALIDATING":
-        return "V";
-      case "PAID_OUT":
-        return "Po";
-      default:
-        return status;
-    }
-  };
   return (
-    <Container
-      className={`status-${getShortStatus(statusType)} ${
-        ovalForm && "oval-form"
-      }`}
-    >
-      <p>{getShortStatus(statusType)}</p>
+    <Container className={`status-${statusType} ${ovalForm && "oval-form"}`}>
+      <p>{statusType}</p>
     </Container>
   );
 };

package/src/components/atoms/StatusTag/styles.js

@@ -2,8 +2,7 @@ import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
-  width: fit-content;
-  padding: 0 10px;
+  width: 30px;
   height: 20px;
   background-color: ${GlobalColors.s3};
   border-radius: 3px;
@@ -17,9 +16,7 @@ export const Container = styled.div`
   }
 
   &.status-As,
-  &.status-P,
-  &.status-IN_PROGRESS,
-  &.status-QF {
+  &.status-P {
     background-color: ${GlobalColors.in_progress};
   }
 
@@ -29,19 +26,10 @@ export const Container = styled.div`
   }
 
   &.status-AA,
-  &.status-AP,
-  &.status-AC,
-  &.status-AF {
+  &.status-AP {
     background-color: ${GlobalColors.finished};
   }
 
-  &.status-RA,
-  &.status-RF,
-  &.status-RP,
-  &.status-RC {
-    background-color: ${GlobalColors.rejected_status};
-  }
-
   &.status-Dat,
   &.status-Dsc,
   &.status-Imgs {

package/src/components/atoms/ValidationPanel/index.js

@@ -7,8 +7,8 @@ export const ValidationPanel = ({
   id,
   setOptionClicked,
   setShowValidationPanel,
-  sendToFacilitator,
 }) => {
+
   const optionSelected = (option) => {
     setOptionClicked(`${option}-button`);
     setShowValidationPanel(false);
@@ -18,7 +18,7 @@ export const ValidationPanel = ({
     <Container id={id}>
       <button
         onClick={() => {
-          sendToFacilitator("A");
+          optionSelected("accept");
         }}
         className="validation-option"
       >
@@ -27,7 +27,7 @@ export const ValidationPanel = ({
       </button>
       <button
         onClick={() => {
-          sendToFacilitator("R");
+          optionSelected("reject");
         }}
         className="validation-option"
       >

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

@@ -7,18 +7,8 @@ import { DropDownButton } from "../../atoms/DropDownButton";
 import { Button } from "../../atoms/GeneralButton";
 import { ValidationPanel } from "../../atoms/ValidationPanel";
 import { useEffect } from "react";
-import { RetailerSelector } from "../RetailerSelector";
 
-export const AvatarAndValidation = ({
-  retailers,
-  validation,
-  activeRetailer,
-  setActiveRetailer,
-  approveRejectButtons,
-  sendToFacilitator,
-  auditorAssigned,
-  userAssigned,
-}) => {
+export const AvatarAndValidation = ({ avatarData, validation }) => {
   const [showValidationPanel, setShowValidationPanel] = useState(false);
   const [buttonType, setButtonType] = useState(
     validation ? validation : "null-button"
@@ -43,26 +33,18 @@ export const AvatarAndValidation = ({
   return (
     <Container>
       <div className="buttons-container">
-        <RetailerSelector
-          retailers={retailers}
-          activeRetailer={activeRetailer}
-          setActiveRetailer={setActiveRetailer}
-        />
+        <Avatar image={avatarData?.image} altText={avatarData?.altText} />
         <DropDownButton />
-        {approveRejectButtons() &&
-          (auditorAssigned() || (userAssigned && userAssigned())) && (
-            <Button
-              buttonType={`circular-button ${buttonType}`}
-              onClick={() => setShowValidationPanel(true)}
-            />
-          )}
+        <Button
+          buttonType={`circular-button ${buttonType}`}
+          onClick={() => setShowValidationPanel(true)}
+        />
       </div>
       {showValidationPanel && (
         <ValidationPanel
           id="validation-panel"
           setOptionClicked={setButtonType}
           setShowValidationPanel={setShowValidationPanel}
-          sendToFacilitator={sendToFacilitator}
         />
       )}
     </Container>

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

@@ -8,7 +8,7 @@ export const Container = styled.div`
     display: flex;
     align-items: center;
 
-    > * + * {
+    * + * {
       margin-left: 3px;
     }
   }

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

@@ -15,16 +15,13 @@ export const FeaturesBar = ({ features }) => {
   return (
     <Container className={isIE ? "IEClass" : "gapClass"}>
       {features !== undefined &&
-        features.map(
-          (feature, index) =>
-            feature.value && (
-              <FeatureTag
-                key={index}
-                feature={feature.feature}
-                value={feature.value}
-              />
-            )
-        )}
+        features.map((feature, index) => (
+          <FeatureTag
+            key={index}
+            feature={feature.feature}
+            value={feature.value}
+          />
+        ))}
     </Container>
   );
 };