contentoh-components-library 21.4.123 → 21.4.124

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

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

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

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

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

@@ -1,36 +0,0 @@
-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/StatusRetailer/StatusAsignationInfo.stories.js

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

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

@@ -1,85 +0,0 @@
-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/TabsMenuv2/TabsMenuv2.stories.js

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

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

@@ -1,19 +0,0 @@
-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/TagAndInputv2/TagAndInputv2.stories.js

@@ -1,24 +0,0 @@
-import { TagAndInputv2 } from "./index";
-
-export default {
-  title: "Components/molecules/TagAndInputv2",
-  component: TagAndInputv2,
-};
-
-const Template = (args) => <TagAndInputv2 {...args} />;
-
-export const InputType = Template.bind({});
-InputType.args = {
-  label: "Default text label",
-  inputType: "text",
-  value: "default text",
-  inputPlaceHolder: "default placeholder",
-};
-
-export const TextAreaType = Template.bind({});
-TextAreaType.args = {
-  label: "Default textarea label",
-  inputType: "textarea",
-  value: "default textarea text",
-  inputPlaceHolder: "default textarea placeholder",
-};

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

@@ -1,86 +0,0 @@
-import { Container } from "./styles";
-import { GeneralInputv2 } from "../../atoms/GeneralInputv2";
-import { ScreenHeaderv2 } from "../../atoms/ScreenHeaderv2";
-
-export const TagAndInputv2 = ({
-  inputType,
-  label,
-  value,
-  inputPlaceHolder,
-  inputId,
-  updatedDescriptions,
-  setUpdatedDescriptions,
-  updatedDatasheets,
-  setUpdatedDatasheets,
-  articleId,
-  version,
-  index,
-  isRequired,
-  dinamicHeight,
-  inputCols,
-  inputRows,
-  minChar,
-  maxChar,
-  minWords,
-  maxWords,
-  required,
-  optionList,
-  description,
-  inputOnChange,
-  color,
-  disabled,
-  onKeyDown,
-  showTooltip,
-  auditClass,
-  showMissingChars,
-}) => {
-  return (
-    <Container
-      inputType={inputType}
-      className={"input-container"}
-      key={`generalTagInput-${inputType}`}
-    >
-      {label?.length && (
-        <div className="title-container">
-          <ScreenHeaderv2
-            text={label}
-            headerType={"input-name-header"}
-            color={color}
-            showInfoTool={true}
-            minChar={minChar}
-            maxChar={maxChar}
-            minWords={minWords}
-            maxWords={maxWords}
-            required={required}
-            description={description}
-            showMissingChars={showMissingChars}
-          />
-        </div>
-      )}
-      <GeneralInputv2
-        inputId={inputId}
-        inputType={inputType}
-        inputValue={value}
-        index={index}
-        disabled={disabled}
-        isRequired={isRequired}
-        inputPlaceholder={inputPlaceHolder}
-        updatedDescriptions={updatedDescriptions}
-        setUpdatedDescriptions={setUpdatedDescriptions}
-        updatedDatasheets={updatedDatasheets}
-        setUpdatedDatasheets={setUpdatedDatasheets}
-        articleId={articleId}
-        version={version}
-        dinamicHeight={dinamicHeight}
-        inputCols={inputCols}
-        inputRows={inputRows}
-        maxChar={maxChar}
-        optionList={optionList}
-        description={description}
-        inputOnChange={inputOnChange}
-        onKeyDown={onKeyDown}
-        auditClass={auditClass}
-      />
-    </Container>
-  );
-};