contentoh-components-library 21.4.32 → 21.4.34

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/StripeCardForm/StripeCardForm.stories.js

@@ -1,14 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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>
-  );
-};

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

@@ -1,84 +0,0 @@
-import styled from "styled-components";
-import { FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div``;
-
-export const PaymentFormContainer = styled.form`
-  padding: 20px;
-  border: 1px solid #f0f0f0;
-  border-radius: 10px;
-
-  h2 {
-    font-size: 15px;
-    line-height: 20px;
-    color: #262626;
-    font-family: ${FontFamily.RobotoMedium};
-
-    & + * {
-      margin-top: 10px;
-    }
-  }
-
-  .card-fields {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    .element {
-      display: flex;
-      align-items: center;
-
-      label {
-        color: #808080;
-        font-family: ${FontFamily.Lato};
-        font-size: 12px;
-        display: flex;
-
-        & + * {
-          margin-left: 6px;
-        }
-      }
-
-      .card-input {
-        border: 1px solid #f0f0f0 !important;
-        border-radius: 5px;
-        padding: 3px;
-        font-family: ${FontFamily.Lato};
-        font-size: 12px;
-        flex: 1;
-        background-color: #fff;
-      }
-
-      &.card-name {
-        flex: 1 0 100%;
-        label + * {
-          margin-left: 6px;
-        }
-      }
-
-      &.card-number {
-        flex: 1 0 100%;
-        label + * {
-          margin-left: 43px;
-        }
-      }
-
-      &.expiration-date,
-      &.cvc-code {
-        flex: 1 1 49%;
-        label + * {
-          margin-left: 9px;
-        }
-      }
-    }
-  }
-  position: relative;
-  ${({ isSelected }) =>
-    isSelected &&
-    `border-color: #8A6CAA;
-  background: #F7F7FC;`}
-  img {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-  }
-`;

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

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

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

@@ -1,59 +0,0 @@
-import { useState, useEffect } from "react";
-import { Container } from "./styles";
-import { loadStripe } from "@stripe/stripe-js";
-import { Elements } from "@stripe/react-stripe-js";
-import { getAllCards } from "./utils";
-import { Card } from "../../atoms/Card";
-import { Loading } from "../../atoms/Loading";
-import check from "../../../assets/images/defaultImages/check_circle.svg";
-const stripeApiKey = loadStripe(`${process.env.REACT_APP_KEY_STRIPE}`);
-
-export const CardSelector = ({
-  jwt,
-  setCard,
-  setStripe,
-  isSelected = false,
-  onClick,
-}) => {
-  const [stripeLoaded, setStripeLoaded] = useState(false);
-  const [cards, setCards] = useState([]);
-  const [selectedCard, setSelectedCard] = useState("");
-
-  const loadStripeJS = async () => {
-    await stripeApiKey;
-    setStripeLoaded(true);
-    const cardsResponse = await getAllCards(jwt);
-    setCards(cardsResponse);
-  };
-
-  useEffect(() => {
-    // loadStripeJS();
-    stripeApiKey.then(() => {
-      setStripeLoaded(true);
-      getAllCards(jwt).then((cardsResponse) => {
-        setCards(cardsResponse);
-      });
-    });
-  }, []);
-
-  return stripeLoaded ? (
-    <Container isSelected={isSelected} onClick={() => onClick && onClick()}>
-      {isSelected ? <img src={check} alt="Seleccionado" /> : null}
-      <h2>Tarjetas guardadas</h2>
-      <Elements stripe={stripeApiKey}>
-        {cards.map((card) => (
-          <Card
-            key={card.id}
-            card={card}
-            selectedCard={selectedCard}
-            setSelectedCard={setSelectedCard}
-            setCard={setCard}
-            setStripe={setStripe}
-          />
-        ))}
-      </Elements>
-    </Container>
-  ) : (
-    <Loading />
-  );
-};

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

@@ -1,15 +0,0 @@
-import styled from "styled-components";
-import { PaymentFormContainer } from "../StripeCardForm/styles";
-
-export const Container = styled(PaymentFormContainer)`
-  position: relative;
-  ${({ isSelected }) =>
-    isSelected &&
-    `border-color: #8A6CAA;
-  background: #F7F7FC;`}
-  img {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-  }
-`;

package/src/components/molecules/StripeCardSelector/utils.js

@@ -1,17 +0,0 @@
-import axios from "axios";
-
-export const getAllCards = async (jwt) => {
-  try {
-    const response = await axios({
-      method: "get",
-      url: `${process.env.REACT_APP_CARDS_ENDPOINT}`,
-      headers: {
-        Authorization: jwt,
-      },
-    });
-    const stripeCards = JSON.parse(response.data.body).data;
-    return stripeCards;
-  } catch (error) {
-    console.log(error);
-  }
-};