contentoh-components-library 21.5.34 → 21.5.36

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

@@ -1,84 +1,84 @@
-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;
-  }
-`;
+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 +1,12 @@
-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",
-};
+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 +1,59 @@
-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 />
-  );
-};
+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 +1,15 @@
-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;
-  }
-`;
+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 +1,17 @@
-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);
-  }
-};
+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);
+  }
+};

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

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

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

@@ -1,36 +1,36 @@
-import { Container } from "./styles";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import { StatusAsignationInfo } from "../StatusAsignationInfo";
-import { GlobalColors } from "../../../global-files/variables";
-
-export const TableHeader = ({
-  imagesStatus,
-  activeImage,
-  assignationsImages,
-  setAssignation,
-  isRetailer,
-  onClickSave,
-  showSaveButton,
-  version,
-  setShowVersionSelector,
-}) => {
-  return (
-    <Container>
-      <ScreenHeader
-        text={activeImage?.name || "-"}
-        color={GlobalColors.s5}
-        headerType={"input-name-header"}
-      />
-      <StatusAsignationInfo
-        status={imagesStatus}
-        assignationsImages={assignationsImages}
-        setAssignation={setAssignation}
-        isRetailer={isRetailer}
-        onClickSave={onClickSave}
-        showSaveButton={showSaveButton}
-        version={version}
-        setShowVersionSelector={setShowVersionSelector}
-      />
-    </Container>
-  );
-};
+import { Container } from "./styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { StatusAsignationInfo } from "../StatusAsignationInfo";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const TableHeader = ({
+  imagesStatus,
+  activeImage,
+  assignationsImages,
+  setAssignation,
+  isRetailer,
+  onClickSave,
+  showSaveButton,
+  version,
+  setShowVersionSelector,
+}) => {
+  return (
+    <Container>
+      <ScreenHeader
+        text={activeImage?.name || "-"}
+        color={GlobalColors.s5}
+        headerType={"input-name-header"}
+      />
+      <StatusAsignationInfo
+        status={imagesStatus}
+        assignationsImages={assignationsImages}
+        setAssignation={setAssignation}
+        isRetailer={isRetailer}
+        onClickSave={onClickSave}
+        showSaveButton={showSaveButton}
+        version={version}
+        setShowVersionSelector={setShowVersionSelector}
+      />
+    </Container>
+  );
+};

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

@@ -1,30 +1,30 @@
-import styled from "styled-components";
-import { GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: 5px;
-  border-bottom: 1px solid ${GlobalColors.s2};
-
-  .input-name-header {
-    overflow-x: auto;
-    max-width: 40%;
-    white-space: nowrap;
-    height: 23px;
-    line-height: 23px;
-    text-overflow: initial;
-  }
-  .status-asignation-info {
-    display: flex;
-    align-items: center;
-
-    * + * {
-      margin-left: 5px;
-    }
-  }
-
-  & + * {
-    margin-top: 4px;
-  }
-`;
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 5px;
+  border-bottom: 1px solid ${GlobalColors.s2};
+
+  .input-name-header {
+    overflow-x: auto;
+    max-width: 40%;
+    white-space: nowrap;
+    height: 23px;
+    line-height: 23px;
+    text-overflow: initial;
+  }
+  .status-asignation-info {
+    display: flex;
+    align-items: center;
+
+    * + * {
+      margin-left: 5px;
+    }
+  }
+
+  & + * {
+    margin-top: 4px;
+  }
+`;

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

@@ -1,18 +1,18 @@
-import { TableRow } from ".";
-
-export default {
-  title: "Components/molecules/TableRow",
-  component: TableRow,
-  argTypes: {
-    valueType: {
-      options: [true, false],
-      control: { type: "boolean" },
-    },
-  },
-};
-
-const Template = (args) => <TableRow {...args} />;
-
-export const TableRowDefault = Template.bind({});
-
-TableRowDefault.args = {};
+import { TableRow } from ".";
+
+export default {
+  title: "Components/molecules/TableRow",
+  component: TableRow,
+  argTypes: {
+    valueType: {
+      options: [true, false],
+      control: { type: "boolean" },
+    },
+  },
+};
+
+const Template = (args) => <TableRow {...args} />;
+
+export const TableRowDefault = Template.bind({});
+
+TableRowDefault.args = {};

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

@@ -1,14 +1,14 @@
-import { Container } from "./styles";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-
-export const TableRow = ({ feature, value, valueType }) => {
-  return (
-    <Container>
-      <ScreenHeader headerType={"table-row-text"} text={feature} />
-      <ScreenHeader
-        headerType={"table-row-text " + (valueType && "gray-table-row")}
-        text={value}
-      />
-    </Container>
-  );
-};
+import { Container } from "./styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+
+export const TableRow = ({ feature, value, valueType }) => {
+  return (
+    <Container>
+      <ScreenHeader headerType={"table-row-text"} text={feature} />
+      <ScreenHeader
+        headerType={"table-row-text " + (valueType && "gray-table-row")}
+        text={value}
+      />
+    </Container>
+  );
+};

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

@@ -1,11 +1,11 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  & + * {
-    margin-top: 4px;
-  }
-`;
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  & + * {
+    margin-top: 4px;
+  }
+`;