contentoh-components-library 21.5.35 → 21.5.36

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

@@ -1,55 +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>
-  );
-};
+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 +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;
-    }
-  }
-`;
+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/StripeCardForm/StripeCardForm.stories.js

@@ -1,14 +1,14 @@
-import { StripeCardForm } from ".";
-
-export default {
-  title: "Components/molecules/StripeCardForm",
-  component: StripeCardForm,
-};
-
-const Template = (args) => <StripeCardForm {...args} />;
-export const StripeCardFormDefault = Template.bind({});
-StripeCardFormDefault.args = {
-  customerId: "cus_KuEt6R6vwmN09f",
-  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjQzNjAwMC0wYzgyLTRjNzYtYWEzNi1kM2Q1NGJjZTZiMTMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4NTU2OTUyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODU1NzMxMjMsImlhdCI6MTY4NTU2OTUyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.EotcxmtkUpBxwlXa3bo25iLAmRcT0kj1G3PVITVB_0ZtF8UC19rJIMTNSc1hYkl8cbfCuB_vkjYCAxi4b2SOru5MdMTRhgNjcQTVbiwIYww-QdUWq0WSv84nW_HaRoxCJ8ezm-wBZgUTpcD3VFuynUICbODKKHUfxVdKdVoAM6GGE6ymSbO7-0C7ZumoWEqaZ22BF4G1H-JvLkR-tL5iqXa2N-QCnNoteFmHstBfH6Sp5UZhPav1VBEGRmwdFfUnC-Xc-aNeIFwgWCXMsOXFWbbmWeh0uNF-Btu-QEJ7VkCu4pbElqHWJKBYLCx1zqDBrKrsrNxyvQlxsJ9NSOae8Q",
-  isSelected: true,
-};
+import { StripeCardForm } from ".";
+
+export default {
+  title: "Components/molecules/StripeCardForm",
+  component: StripeCardForm,
+};
+
+const Template = (args) => <StripeCardForm {...args} />;
+export const StripeCardFormDefault = Template.bind({});
+StripeCardFormDefault.args = {
+  customerId: "cus_KuEt6R6vwmN09f",
+  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjQzNjAwMC0wYzgyLTRjNzYtYWEzNi1kM2Q1NGJjZTZiMTMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4NTU2OTUyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODU1NzMxMjMsImlhdCI6MTY4NTU2OTUyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.EotcxmtkUpBxwlXa3bo25iLAmRcT0kj1G3PVITVB_0ZtF8UC19rJIMTNSc1hYkl8cbfCuB_vkjYCAxi4b2SOru5MdMTRhgNjcQTVbiwIYww-QdUWq0WSv84nW_HaRoxCJ8ezm-wBZgUTpcD3VFuynUICbODKKHUfxVdKdVoAM6GGE6ymSbO7-0C7ZumoWEqaZ22BF4G1H-JvLkR-tL5iqXa2N-QCnNoteFmHstBfH6Sp5UZhPav1VBEGRmwdFfUnC-Xc-aNeIFwgWCXMsOXFWbbmWeh0uNF-Btu-QEJ7VkCu4pbElqHWJKBYLCx1zqDBrKrsrNxyvQlxsJ9NSOae8Q",
+  isSelected: true,
+};

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

@@ -1,45 +1,45 @@
-import { Container } from "./styles";
-import { useEffect, useState } from "react";
-import { loadStripe } from "@stripe/stripe-js";
-import { Elements } from "@stripe/react-stripe-js";
-import { PaymentForm } from "./paymentForm";
-import { Loading } from "../../atoms/Loading";
-const stripeApiKey = loadStripe(`${process.env.REACT_APP_KEY_STRIPE}`);
-
-export const StripeCardForm = ({
-  setToken,
-  setCard,
-  setStripe,
-  setModalErrorCard,
-  setMsj,
-  isSelected = false,
-  onClick,
-}) => {
-  const [stripeLoaded, setStripeLoaded] = useState(false);
-
-  const loadStripeJS = async () => {
-    await stripeApiKey;
-    setStripeLoaded(true);
-  };
-  useEffect(() => {
-    loadStripeJS();
-  }, []);
-
-  return stripeLoaded ? (
-    <Container onClick={() => onClick && onClick()}>
-      <Elements stripe={stripeApiKey}>
-        <PaymentForm
-          labelForm={"Pago con tarjeta"}
-          setToken={setToken}
-          setCard={setCard}
-          setStripe={setStripe}
-          setModalErrorCard={setModalErrorCard}
-          setMsj={setMsj}
-          isSelected={isSelected}
-        />
-      </Elements>
-    </Container>
-  ) : (
-    <Loading />
-  );
-};
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+import { loadStripe } from "@stripe/stripe-js";
+import { Elements } from "@stripe/react-stripe-js";
+import { PaymentForm } from "./paymentForm";
+import { Loading } from "../../atoms/Loading";
+const stripeApiKey = loadStripe(`${process.env.REACT_APP_KEY_STRIPE}`);
+
+export const StripeCardForm = ({
+  setToken,
+  setCard,
+  setStripe,
+  setModalErrorCard,
+  setMsj,
+  isSelected = false,
+  onClick,
+}) => {
+  const [stripeLoaded, setStripeLoaded] = useState(false);
+
+  const loadStripeJS = async () => {
+    await stripeApiKey;
+    setStripeLoaded(true);
+  };
+  useEffect(() => {
+    loadStripeJS();
+  }, []);
+
+  return stripeLoaded ? (
+    <Container onClick={() => onClick && onClick()}>
+      <Elements stripe={stripeApiKey}>
+        <PaymentForm
+          labelForm={"Pago con tarjeta"}
+          setToken={setToken}
+          setCard={setCard}
+          setStripe={setStripe}
+          setModalErrorCard={setModalErrorCard}
+          setMsj={setMsj}
+          isSelected={isSelected}
+        />
+      </Elements>
+    </Container>
+  ) : (
+    <Loading />
+  );
+};

package/src/components/molecules/StripeCardForm/paymentForm.js

@@ -1,126 +1,126 @@
-import { useState, useEffect } from "react";
-import { PaymentFormContainer } from "./styles";
-import {
-  useStripe,
-  useElements,
-  CardNumberElement,
-  CardExpiryElement,
-  CardCvcElement,
-} from "@stripe/react-stripe-js";
-import check from "../../../assets/images/defaultImages/check_circle.svg";
-
-export const PaymentForm = ({
-  labelForm = "Pago con tarjeta",
-  setToken,
-  setCard,
-  setStripe,
-  setModalErrorCard,
-  setMsj,
-  isSelected = false,
-}) => {
-  const stripe = useStripe();
-  const elements = useElements();
-  const [cardName, setCardName] = useState("");
-  const [valuesComplete, setValuesComplete] = useState({
-    name: false,
-    number: false,
-    cvc: false,
-    exp: false,
-  });
-
-  const handleIputChange = (event, key) => {
-    const temp = { ...valuesComplete };
-    if (key === "name") {
-      temp[key] = event?.length;
-      setValuesComplete(temp);
-    } else {
-      temp[key] = event.complete;
-      setValuesComplete(temp);
-    }
-  };
-
-  /**
-   * Este método crea un nuevo token que será enviado a la bd para generar una nueva tarjeta
-   */
-  const createToken = async () => {
-    /* isNew values
-      1: is new
-      0: use card existing
-      -1: use other payment metoh */
-    let token = "";
-    token = await stripe.createToken(elements.getElement(CardNumberElement));
-
-    const { error, paymentMethod } = await stripe.createPaymentMethod({
-      type: "card",
-      card: elements.getElement(CardNumberElement),
-      billing_details: {
-        name: cardName,
-      },
-    });
-
-    try {
-      if (token.token) {
-        token = token.token.id;
-      } else {
-        setModalErrorCard && setModalErrorCard(true);
-        setMsj && setMsj(token.error.message);
-      }
-
-      paymentMethod.isNew = 1;
-      setToken && setToken(token);
-      setCard && setCard(paymentMethod);
-    } catch (err) {
-      console.log(err, error);
-    }
-  };
-
-  useEffect(() => {
-    const valuesArray = Object.values(valuesComplete);
-    const allValuesComplete = valuesArray?.every((val) => val);
-    allValuesComplete ? createToken() : "le falta algo oiga";
-    setStripe && setStripe(stripe);
-  }, [valuesComplete]);
-
-  const handleCardNameChange = (event) => {
-    handleIputChange(event.target.value, "name");
-    setCardName(event.target.value);
-  };
-
-  return (
-    <PaymentFormContainer isSelected={isSelected}>
-      {isSelected ? <img src={check} alt="Seleccionado" /> : null}
-      <h2>{labelForm}</h2>
-      <div className="card-fields">
-        <div className="element card-name">
-          <label>Nombre en la tarjeta</label>
-          <input
-            className="card-input"
-            value={cardName}
-            onChange={handleCardNameChange}
-          />
-        </div>
-        <div className="element card-number">
-          <label>No. de tarjeta</label>
-          <CardNumberElement
-            className="card-input"
-            onChange={(e) => handleIputChange(e, "number")}
-          />
-        </div>
-        <div className="element expiration-date">
-          <label>Fecha de expiración</label>
-          <CardExpiryElement
-            className="card-input"
-            onChange={(e) => handleIputChange(e, "exp")}
-          />
-        </div>
-        <div className="element cvc-code ">
-          <label>CVC</label>
-          <CardCvcElement
-            className="card-input"
-            onChange={(e) => handleIputChange(e, "cvc")}
-          />
-        </div>
-      </div>
-    </PaymentFormContainer>
-  );
-};
+import { useState, useEffect } from "react";
+import { PaymentFormContainer } from "./styles";
+import {
+  useStripe,
+  useElements,
+  CardNumberElement,
+  CardExpiryElement,
+  CardCvcElement,
+} from "@stripe/react-stripe-js";
+import check from "../../../assets/images/defaultImages/check_circle.svg";
+
+export const PaymentForm = ({
+  labelForm = "Pago con tarjeta",
+  setToken,
+  setCard,
+  setStripe,
+  setModalErrorCard,
+  setMsj,
+  isSelected = false,
+}) => {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [cardName, setCardName] = useState("");
+  const [valuesComplete, setValuesComplete] = useState({
+    name: false,
+    number: false,
+    cvc: false,
+    exp: false,
+  });
+
+  const handleIputChange = (event, key) => {
+    const temp = { ...valuesComplete };
+    if (key === "name") {
+      temp[key] = event?.length;
+      setValuesComplete(temp);
+    } else {
+      temp[key] = event.complete;
+      setValuesComplete(temp);
+    }
+  };
+
+  /**
+   * Este método crea un nuevo token que será enviado a la bd para generar una nueva tarjeta
+   */
+  const createToken = async () => {
+    /* isNew values
+      1: is new
+      0: use card existing
+      -1: use other payment metoh */
+    let token = "";
+    token = await stripe.createToken(elements.getElement(CardNumberElement));
+
+    const { error, paymentMethod } = await stripe.createPaymentMethod({
+      type: "card",
+      card: elements.getElement(CardNumberElement),
+      billing_details: {
+        name: cardName,
+      },
+    });
+
+    try {
+      if (token.token) {
+        token = token.token.id;
+      } else {
+        setModalErrorCard && setModalErrorCard(true);
+        setMsj && setMsj(token.error.message);
+      }
+
+      paymentMethod.isNew = 1;
+      setToken && setToken(token);
+      setCard && setCard(paymentMethod);
+    } catch (err) {
+      console.log(err, error);
+    }
+  };
+
+  useEffect(() => {
+    const valuesArray = Object.values(valuesComplete);
+    const allValuesComplete = valuesArray?.every((val) => val);
+    allValuesComplete ? createToken() : "le falta algo oiga";
+    setStripe && setStripe(stripe);
+  }, [valuesComplete]);
+
+  const handleCardNameChange = (event) => {
+    handleIputChange(event.target.value, "name");
+    setCardName(event.target.value);
+  };
+
+  return (
+    <PaymentFormContainer isSelected={isSelected}>
+      {isSelected ? <img src={check} alt="Seleccionado" /> : null}
+      <h2>{labelForm}</h2>
+      <div className="card-fields">
+        <div className="element card-name">
+          <label>Nombre en la tarjeta</label>
+          <input
+            className="card-input"
+            value={cardName}
+            onChange={handleCardNameChange}
+          />
+        </div>
+        <div className="element card-number">
+          <label>No. de tarjeta</label>
+          <CardNumberElement
+            className="card-input"
+            onChange={(e) => handleIputChange(e, "number")}
+          />
+        </div>
+        <div className="element expiration-date">
+          <label>Fecha de expiración</label>
+          <CardExpiryElement
+            className="card-input"
+            onChange={(e) => handleIputChange(e, "exp")}
+          />
+        </div>
+        <div className="element cvc-code ">
+          <label>CVC</label>
+          <CardCvcElement
+            className="card-input"
+            onChange={(e) => handleIputChange(e, "cvc")}
+          />
+        </div>
+      </div>
+    </PaymentFormContainer>
+  );
+};