contentoh-components-library 21.4.20 → 21.4.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.4.20",
+  "version": "21.4.22",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",
@@ -16,6 +16,8 @@
     "@mui/material": "^5.12.0",
     "@mui/styled-engine-sc": "^5.12.0",
     "@storybook/addon-postcss": "^2.0.0",
+    "@stripe/react-stripe-js": "^2.1.1",
+    "@stripe/stripe-js": "^1.54.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -28,6 +30,7 @@
     "contentoh-components-library": "^21.0.18",
     "draft-js": "^0.11.7",
     "file-saver": "^2.0.5",
+    "infinite-react-carousel": "^1.2.11",
     "js-base64": "^3.7.2",
     "moment": "^2.29.4",
     "prop-types": "^15.7.2",

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

@@ -2,12 +2,18 @@ import { Container } from "./styles";
 import ReactImageFallback from "react-image-fallback";
 import defaultProfile from "../../../assets/images/defaultImages/defaultProfileImage.svg";
 
-export const Avatar = ({ image, altText, imageType, onClick }) => {
+export const Avatar = ({
+  image,
+  altText,
+  imageType,
+  onClick,
+  fallbackImage,
+}) => {
   return (
     <Container className={imageType}>
       <ReactImageFallback
         src={image}
-        fallbackImage={defaultProfile}
+        fallbackImage={fallbackImage || defaultProfile}
         alt={altText}
         onClick={onClick}
       />

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

@@ -1,9 +1,42 @@
 import { Container } from "./styles";
+import { CheckBox } from "../CheckBox";
+import { CardCvcElement, useStripe } from "@stripe/react-stripe-js";
+
+export const Card = ({
+  card = {},
+  selectedCard,
+  setSelectedCard,
+  setCard,
+  setStripe,
+}) => {
+  const stripe = useStripe();
+
+  const handleOnChange = (e, cardId) => {
+    if (e.target.checked) {
+      setCard && setCard({ ...card, isNew: 0 });
+      setStripe && setStripe(stripe);
+      setSelectedCard && setSelectedCard(cardId);
+    } else {
+      setSelectedCard && setSelectedCard("");
+      setCard && setCard(null);
+    }
+  };
 
-export const Card = ({ cardIcon, altText }) => {
   return (
     <Container>
-      <img src={cardIcon} alt={altText} />
+      <div className="card-details">
+        <CheckBox
+          id={card.id}
+          label={
+            <>
+              <span className="brand-card">{card.brand}</span>
+              <span>{`**** **** **** ${card.last4}`}</span>
+            </>
+          }
+          checked={selectedCard === card.id}
+          onChange={(e) => handleOnChange(e, card.id)}
+        />
+      </div>
     </Container>
   );
 };

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

@@ -1,8 +1,44 @@
 import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
-img {
-    width: 100%;
-    margin:auto;
-}
-`;
+  display: flex;
+  cursor: pointer;
+
+  .card-details {
+    label {
+      cursor: pointer;
+      height: 25px;
+      p {
+        margin-left: 40px;
+        span {
+          & + * {
+            margin-left: 20px;
+          }
+        }
+      }
+    }
+    & + * {
+      margin-left: 20px;
+    }
+  }
+
+  .cvc-input {
+    display: flex;
+    align-items: center;
+    color: ${GlobalColors.s4};
+    font-family: ${FontFamily.AvenirNext};
+    font-size: 13px;
+
+    .card-input {
+      border: 1px solid #f0f0f0 !important;
+      border-radius: 5px;
+      padding: 3px;
+      width: 50px;
+    }
+  }
+
+  & + * {
+    margin-top: 15px;
+  }
+`;

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

@@ -7,9 +7,11 @@ export const CheckBox = ({
   isFilter,
   defaultChecked,
   disabled = false,
+  checked,
+  className = "",
 }) => {
   return (
-    <Container key={`check-${id}`}>
+    <Container key={`check-${id}`} className={className}>
       <input
         type="checkbox"
         name={id}
@@ -17,6 +19,7 @@ export const CheckBox = ({
         onChange={onChange}
         defaultChecked={defaultChecked}
         disabled={disabled}
+        checked={checked}
       />
       <label htmlFor={id}>
         {label && <p className={isFilter && "filter-text"}>{label}</p>}

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

@@ -46,6 +46,8 @@ export const Container = styled.div`
       top: 50%;
       transform: translateY(-50%);
       background-image: url(${unchecked});
+      z-index: 5;
+      cursor: pointer;
     }
   }
 `;

package/src/components/atoms/ImageCarousel/ImgeSlider.stories.js

@@ -0,0 +1,76 @@
+import { ImageCarousel } from ".";
+
+export default {
+  title: "Components/atoms/ImageCarousel",
+  component: ImageCarousel,
+};
+
+const Template = (args) => <ImageCarousel {...args} />;
+export const ImageCarouselDefault = Template.bind({});
+ImageCarouselDefault.args = {
+  imageArray: [
+    {
+      id: 35596,
+      status: null,
+      image_id: 1,
+      packing_type: "3",
+      image_type: "1",
+      article_id: "38443",
+      src: "https://d24s337exbt5zr.cloudfront.net/eyJidWNrZXQiOiJjb250ZW50LW1hbmFnZW1lbnQtaW1hZ2VzIiwia2V5IjoiaWQtMzg0NDMvMTUvMS1kNDQ2ZjIwNy0wYTkzLTQyNzgtYWZjNi01MTY2ZjIyY2EzNDMucG5nIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjoxMDAwLCJoZWlnaHQiOjEwMDAsImZpdCI6ImNvbnRhaW4iLCJiYWNrZ3JvdW5kIjp7InIiOjI1NSwiZyI6MjU1LCJiIjoyNTUsImFscGhhIjoxfX19fQ==",
+      timestamp: "2023-05-30T03:01:12.000Z",
+      id_version: 15,
+      width: null,
+      height: null,
+      scene_type: null,
+      image_shot_type: null,
+      last_modified: "2023-06-05T23:49:49.000Z",
+      name: "Central (Frente Comercial)",
+      version: 15,
+      ext: "png",
+      uuid: "d446f207-0a93-4278-afc6-5166f22ca343",
+      srcDB: "id-38443/15/1-d446f207-0a93-4278-afc6-5166f22ca343.png",
+    },
+    {
+      id: 35597,
+      status: null,
+      image_id: 3,
+      packing_type: "3",
+      image_type: "1",
+      article_id: "38443",
+      src: "https://d24s337exbt5zr.cloudfront.net/eyJidWNrZXQiOiJjb250ZW50LW1hbmFnZW1lbnQtaW1hZ2VzIiwia2V5IjoiaWQtMzg0NDMvMTUvMy0yOTZkMzU3ZC00OTUzLTRiMzktYjFjMy04YWZmZDI2NDgwMWIucG5nIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjoxMDAwLCJoZWlnaHQiOjEwMDAsImZpdCI6ImNvbnRhaW4iLCJiYWNrZ3JvdW5kIjp7InIiOjI1NSwiZyI6MjU1LCJiIjoyNTUsImFscGhhIjoxfX19fQ==",
+      timestamp: "2023-05-30T03:01:12.000Z",
+      id_version: 15,
+      width: null,
+      height: null,
+      scene_type: null,
+      image_shot_type: null,
+      last_modified: "2023-06-05T23:49:49.000Z",
+      name: "Trasera (Back)",
+      version: 15,
+      ext: "png",
+      uuid: "296d357d-4953-4b39-b1c3-8affd264801b",
+      srcDB: "id-38443/15/3-296d357d-4953-4b39-b1c3-8affd264801b.png",
+    },
+    {
+      id: 35598,
+      status: null,
+      image_id: 16,
+      packing_type: "3",
+      image_type: "1",
+      article_id: "38443",
+      src: "https://d24s337exbt5zr.cloudfront.net/eyJidWNrZXQiOiJjb250ZW50LW1hbmFnZW1lbnQtaW1hZ2VzIiwia2V5IjoiaWQtMzg0NDMvMTUvMTYtOGMzNDIzM2YtZTRiMC00MjU0LWFlYzUtZjEyN2ZiYjhkYmVkLnBuZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6MTAwMCwiaGVpZ2h0IjoxMDAwLCJmaXQiOiJjb250YWluIiwiYmFja2dyb3VuZCI6eyJyIjoyNTUsImciOjI1NSwiYiI6MjU1LCJhbHBoYSI6MX19fX0=",
+      timestamp: "2023-05-30T03:01:12.000Z",
+      id_version: 15,
+      width: null,
+      height: null,
+      scene_type: null,
+      image_shot_type: null,
+      last_modified: "2023-06-05T23:49:49.000Z",
+      name: "Detalle / Características 1",
+      version: 15,
+      ext: "png",
+      uuid: "8c34233f-e4b0-4254-aec5-f127fbb8dbed",
+      srcDB: "id-38443/15/16-8c34233f-e4b0-4254-aec5-f127fbb8dbed.png",
+    },
+  ],
+};

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

@@ -0,0 +1,103 @@
+import { Container } from "./styles";
+import { useState, useEffect } from "react";
+import ReactImageFallback from "react-image-fallback";
+import spinner from "../../../assets/images/Icons/Spinner.gif";
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+import productImage from "../../../assets/images/defaultImages/defaultProductImage.png";
+
+export const ImageCarousel = ({ imageArray = [] }) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [transitioning, setTransitioning] = useState(false);
+  const [isHover, setIsHover] = useState(false);
+
+  const goToNextSlide = () => {
+    if (!transitioning) {
+      setTransitioning(true);
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % imageArray.length);
+
+      setTimeout(() => {
+        setTransitioning(false);
+      }, 500); // Adjust the transition duration to match your CSS
+    }
+  };
+
+  const goToPrevSlide = () => {
+    if (!transitioning) {
+      setTransitioning(true);
+      setCurrentIndex(
+        (prevIndex) => (prevIndex - 1 + imageArray.length) % imageArray.length
+      );
+
+      setTimeout(() => {
+        setTransitioning(false);
+      }, 500); // Adjust the transition duration to match your CSS
+    }
+  };
+
+  // useEffect(() => {
+  //   const delay = 0;
+  //   let repeat;
+  //   setTimeout(() => {
+  //     repeat = setInterval(() => {
+  //       if (!isHover && imageArray.length > 1) goToNextSlide();
+  //     }, 10000);
+  //   }, delay);
+  //   return () => {
+  //     clearInterval(repeat);
+  //   };
+  // }, [isHover]);
+
+  return (
+    <Container
+    // onMouseEnter={() => setIsHover(true)}
+    // onMouseLeave={() => setIsHover(false)}
+    >
+      {imageArray.length > 1 && (
+        <button
+          className="prev"
+          onClick={(e) => {
+            e.stopPropagation();
+            goToPrevSlide();
+          }}
+        >
+          <ArrowBackIosIcon />
+        </button>
+      )}
+      <div className="slide-container">
+        {imageArray.length ? (
+          imageArray.map((img, index) => (
+            <div
+              key={index}
+              className={`image-container slide ${
+                index === currentIndex ? "active" : ""
+              }`}
+            >
+              <ReactImageFallback
+                key={index}
+                src={`https://${process.env.REACT_APP_IMAGES_BUCKET}.s3.amazonaws.com/${img.src}`}
+                fallbackImage={spinner}
+                alt={img?.name}
+                style={{
+                  transform: `translateX(-${currentIndex * 100}%)`,
+                }}
+              />
+            </div>
+          ))
+        ) : (
+          <img src={productImage} alt="not image" />
+        )}
+      </div>
+      {imageArray.length > 1 && (
+        <button
+          className="next"
+          onClick={(e) => {
+            e.stopPropagation();
+            goToNextSlide();
+          }}
+        >
+          <ArrowBackIosIcon />
+        </button>
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,79 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 174px;
+  height: 175px;
+  border-radius: 5px 5px 0px 0px;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  background-color: #f0f0f0;
+
+  .slide-container {
+    display: flex;
+    width: 100%;
+
+    .image-container {
+      width: 100%;
+      height: 100%;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: fill;
+      }
+
+      &.slide {
+        flex: 0 0 100%;
+        opacity: 0;
+        transition: opacity 0.5s ease-in-out;
+
+        &.active {
+          opacity: 1;
+        }
+      }
+    }
+
+    & > img {
+      width: 100%;
+    }
+  }
+
+  button {
+    position: absolute;
+    top: 0;
+    border: none;
+    cursor: pointer;
+    background-color: transparent;
+    color: white;
+    z-index: 1;
+    height: 100%;
+    width: 30px;
+
+    svg {
+      font-size: 24px;
+    }
+
+    &.prev {
+      left: 0;
+
+      &:hover {
+        background: linear-gradient(90deg, darkgray, transparent);
+      }
+    }
+    &.next {
+      right: 0;
+
+      svg {
+        transform: rotate(180deg);
+      }
+      &:hover {
+        background: linear-gradient(-90deg, darkgray, transparent);
+      }
+    }
+  }
+
+  button:focus {
+    outline: none;
+  }
+`;

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

@@ -37,5 +37,6 @@ export const Container = styled.div`
     font-family: ${FontFamily.AvenirNext};
     color: ${GlobalColors.deep_gray};
     text-align: right;
+    margin-top: 5px;
   }
-`;
+`;

package/src/components/atoms/PercentTag/PercentTag.stories.js

@@ -0,0 +1,7 @@
+import { PercentTag } from ".";
+
+export default { title: "Components/atoms/PercentTag", component: PercentTag };
+
+const Template = (args) => <PercentTag {...args} />;
+export const PercentTagDefault = Template.bind({});
+PercentTagDefault.args = { percent: 88, progressBarType: "AA" };

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

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

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

@@ -0,0 +1,69 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  background-color: ${GlobalColors.s3};
+  display: inline-block;
+  padding: 0 10px;
+  border-radius: 5px;
+  font-family: ${FontFamily.Lato};
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 20px;
+  color: ${(backgroundColor) =>
+    backgroundColor === "s2" || backgroundColor === "s1"
+      ? GlobalColors.s4
+      : GlobalColors.white};
+
+  &.status-CA,
+  &.status-IE {
+    background-color: ${GlobalColors.in_progress};
+  }
+
+  &.status-R,
+  &.status-AS,
+  &.status-PA {
+    background-color: ${GlobalColors.reception};
+  }
+
+  &.status-AA,
+  &.status-AP,
+  &.status-ACA,
+  &.status-AC {
+    background-color: ${GlobalColors.finished};
+  }
+
+  &.status-RA,
+  &.status-RC,
+  &.status-RP,
+  &.status-RCA {
+    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/RatingStars/RatingStars.stories.js

@@ -0,0 +1,10 @@
+import { RatingStars } from ".";
+
+export default {
+  title: "Components/atoms/RatingStars",
+  component: RatingStars,
+};
+
+const Template = (args) => <RatingStars {...args} />;
+export const RatingStarsDefault = Template.bind({});
+RatingStarsDefault.args = { percent: 80 };

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

@@ -0,0 +1,31 @@
+import { Container } from "./styles";
+import { faStar as starIcon } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect } from "react";
+import { useState } from "react";
+
+export const RatingStars = ({ ratingValue = 0 }) => {
+  const [rating, setRating] = useState(0);
+
+  const handleRating = (value) => {
+    setRating(value);
+  };
+
+  useEffect(() => {
+    setRating(ratingValue);
+  }, []);
+
+  return (
+    <Container>
+      {[...Array(5)].map((_, index) => (
+        <span
+          key={index}
+          className={`star ${index < rating ? "active" : ""}`}
+          onClick={() => handleRating(index + 1)}
+        >
+          ★
+        </span>
+      ))}
+    </Container>
+  );
+};

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

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+
+  .star {
+    cursor: pointer;
+    font-size: 12px;
+    color: #d9d9d9;
+    transition: color 0.3s;
+    line-height: 10px;
+
+    &:hover {
+      color: gold;
+    }
+
+    &.active {
+      transform: scale(1.2);
+      color: #8a6caa;
+    }
+
+    &:not(:first-child) {
+      margin-left: 5px;
+    }
+  }
+`;

package/src/components/atoms/RetailerCatalog/RetailerCatalog.stories.js

@@ -0,0 +1,36 @@
+import { RetailerCatalog } from ".";
+
+export default {
+  title: "Components/atoms/RetailerCatalog",
+  component: RetailerCatalog,
+};
+
+const Template = (args) => <RetailerCatalog {...args} />;
+export const RetailerCatalogDefault = Template.bind({});
+RetailerCatalogDefault.args = {
+  limit: 3,
+  articleId: 39474,
+  orderId: 15270,
+  retailers: [
+    {
+      id: 58,
+      name: "The Home Depot Golden",
+    },
+    {
+      id: 59,
+      name: "The Home Depot Platinum",
+    },
+    {
+      id: 60,
+      name: "The Home Depot Resizing",
+    },
+    {
+      id: 61,
+      name: "Home Depot TAB",
+    },
+    {
+      id: 68,
+      name: "The Home Depot Dropship",
+    },
+  ],
+};

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

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import { Avatar } from "../Avatar";
+import { Container } from "./styles";
+import { useEffect } from "react";
+import { useCloseModal } from "../../../global-files/customHooks";
+import { RetailersList } from "../RetailersList";
+
+export const RetailerCatalog = ({
+  retailers = [],
+  limit = 3,
+  article,
+  id = "retailers-catalog",
+}) => {
+  const [retLimit, setRetLimit] = useState(0);
+  const [showRetailers, setShowRetailers] = useCloseModal(id);
+
+  useEffect(() => {
+    setRetLimit(limit);
+  }, [retailers]);
+
+  return (
+    <Container
+      onClick={(e) => {
+        setShowRetailers(!showRetailers);
+      }}
+      id={id}
+    >
+      {retailers.map(
+        (retailer, i) =>
+          i < limit && (
+            <Avatar
+              key={retailer.id + "-" + i}
+              image={`https://content-management-images.s3.amazonaws.com/retailers/${retailer.id}.png`}
+              altText={retailer?.name}
+              imageType={"medium-image"}
+            />
+          )
+      )}
+      {retailers.length > retLimit && (
+        <div className="retailers-limit">
+          <p>+{retailers.length - retLimit}</p>
+        </div>
+      )}
+      {showRetailers && (
+        <RetailersList retailers={retailers} article={article} />
+      )}
+    </Container>
+  );
+};