contentoh-components-library 21.4.35 → 21.4.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.4.35",
+  "version": "21.4.36",
   "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.2.0",
+    "@stripe/stripe-js": "^2.1.4",
     "@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/assets/images/defaultImages/check_circle.svg

@@ -0,0 +1,10 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="check_circle">
+<mask id="mask0_204_774" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
+<rect id="Bounding box" width="14" height="14" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_204_774)">
+<path id="check_circle_2" d="M5.9675 10.185L10.92 5.2325L10.115 4.445L5.9675 8.5925L3.8675 6.4925L3.08 7.28L5.9675 10.185ZM7 14C6.04333 14 5.13917 13.8162 4.2875 13.4487C3.43583 13.0812 2.69208 12.5796 2.05625 11.9437C1.42042 11.3079 0.91875 10.5642 0.55125 9.7125C0.18375 8.86083 0 7.95667 0 7C0 6.03167 0.18375 5.12167 0.55125 4.27C0.91875 3.41833 1.42042 2.6775 2.05625 2.0475C2.69208 1.4175 3.43583 0.91875 4.2875 0.55125C5.13917 0.18375 6.04333 0 7 0C7.96833 0 8.87833 0.18375 9.73 0.55125C10.5817 0.91875 11.3225 1.4175 11.9525 2.0475C12.5825 2.6775 13.0812 3.41833 13.4487 4.27C13.8162 5.12167 14 6.03167 14 7C14 7.95667 13.8162 8.86083 13.4487 9.7125C13.0812 10.5642 12.5825 11.3079 11.9525 11.9437C11.3225 12.5796 10.5817 13.0812 9.73 13.4487C8.87833 13.8162 7.96833 14 7 14Z" fill="#8A6CAA"/>
+</g>
+</g>
+</svg>

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 { 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",
+    },
+  ],
+};