@openlettermarketing/olc-react-sdk 2.1.4 → 2.1.5-beta.2

package/src/components/CreateTemplate/styles.scss

@@ -0,0 +1,404 @@
+@mixin errorField() {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--error-color);
+  line-height: 16.94px;
+}
+
+.hideTemplateBuilder {
+  display: none;
+  @media (width <= 600px) {
+    display: block;
+    text-align: center;
+  }
+}
+
+.createTemplateMaindiv {
+  @media (width <= 600px) {
+    display: none;
+  }
+  .createTemplateMainBox {
+    position: relative;
+    height: 100%;
+
+    .tempTypeRadioWrapper {
+      padding: 20px 0px 30px 0px;
+      border-left: none;
+      border-right: none;
+      margin-left: 40px;
+
+      .tempTypeRadioHeading {
+        p {
+          color: var(--text-color);
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 500;
+          line-height: normal;
+        }
+      }
+
+      .tempTypeRadioBox {
+        margin-top: 20px;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        gap: 25px;
+
+        .tempRadio {
+          cursor: pointer;
+          input {
+            &:checked {
+              accent-color: var(--primary-color);
+            }
+
+            &:focus {
+              outline: none !important;
+            }
+          }
+
+          label {
+            cursor: pointer;
+            color: var(--text-color);
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: normal;
+          }
+        }
+      }
+
+      & .error-field {
+        @include errorField;
+        margin-left: 5px;
+      }
+    }
+  }
+  .createTemplateHeader {
+    padding-bottom: 15px;
+    margin: 0px 40px;
+
+    p {
+      color: var(--primary-color);
+      font-size: 24px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: normal;
+      margin-bottom: 20px;
+    }
+
+    .templateInputWrapper {
+      p {
+        color: var(--text-color);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+        margin-bottom: 16px;
+      }
+
+      & .error-field {
+        @include errorField;
+        margin-top: 10px !important;
+      }
+    }
+  }
+
+  .templateSelectWrapper {
+    padding-bottom: 15px;
+    margin: 20px 40px 80px 40px;
+    p {
+      color: var(--text-color);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: normal;
+      margin-bottom: 16px;
+    }
+
+    & .error-field {
+      @include errorField;
+      margin-top: 10px !important;
+      font-weight: 400;
+    }
+  }
+
+  .productTypeWrapper {
+    padding: 20px 0px;
+    margin: 0px 40px;
+
+    .productHeading {
+      p {
+        &:first-child {
+          color: var(--text-color);
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 500;
+          line-height: normal;
+        }
+
+        &:last-child {
+          color: var(--primary-color);
+          font-size: 10px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 18px;
+          text-decoration-line: underline;
+        }
+      }
+    }
+
+    .productsWrapper {
+      margin-top: 20px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 25px;
+
+      .productCard {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        border-radius: 6.299px;
+        border: 0.45px solid var(--border-color);
+        width: 100%;
+        max-width: 185px;
+        height: 100%;
+        min-height: 135px;
+        cursor: pointer;
+        transition: 0.1s ease-in all;
+        gap: 17px;
+        position: relative;
+
+        &.active,
+        &:hover {
+          background: var(--secondary-color);
+          border-color: var(--primary-color);
+        }
+
+        p {
+          color: var(--primary-color);
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 500;
+          line-height: normal;
+          margin: 0;
+        }
+
+        &:last-child {
+          img {
+            margin-bottom: 5px !important;
+          }
+        }
+
+        &.error {
+          border: 0.45px solid var(--error-color);
+        }
+
+        .productTooltip {
+          position: absolute;
+          top: 5px;
+          right: 5px;
+          z-index: 1 !important;
+
+          svg{
+            &:focus{
+              outline: none !important;
+            }
+          }
+
+          .customTooltipClass{
+            padding: 8px !important;
+            .react-tooltip-arrow{
+              border-color: var(--border-color) !important;
+            }
+          }
+
+          
+          .productTooltipContent {
+            display: flex;
+            flex-direction: column;
+            width: 170px;
+            border-radius: 5px;
+            font-size: 12px;
+            font-weight: 500;
+            line-height: normal;
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            .heading{
+              font-weight: 500 !important;
+              font-size: 16px;
+              line-height: normal;
+              color: var(--text-color);
+              margin-bottom: 10px;
+            }
+
+            .contentWrapper{
+              display: flex;
+              justify-content: flex-start;
+              align-items: flex-start;
+              flex-direction: column;
+              gap: 5px;
+              p {
+                color: var(--text-color) !important;
+                font-weight: 400;
+                font-size: 14px;
+                text-align: left;
+                span{
+                  font-weight: 600;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    & .error-field {
+      margin-top: 10px;
+      @include errorField;
+    }
+  }
+
+  .postCardSizeWrapper {
+    padding: 20px 0px;
+    margin: 0px 40px 80px 40px;
+
+    .postCardHeading {
+      p {
+        color: var(--text-color);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+      }
+    }
+
+    .postCardWrapper {
+      margin-top: 20px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      gap: 25px;
+
+      .postCard {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 20px;
+        flex-direction: column;
+        border-radius: 6.299px;
+        border: 0.45px solid var(--border-color);
+        cursor: pointer;
+        padding: 13px 20px;
+        transition: 0.1s ease-in all;
+
+        svg {
+          &:nth-child(2) {
+            margin-bottom: 20px;
+          }
+
+          &:last-child {
+            margin-bottom: 20px;
+          }
+        }
+
+        svg {
+          path:has(.rplSubCards) {
+            fill: var(--svg-color-not-active);
+          }
+        }
+
+        &.active,
+        &:hover {
+          background: var(--secondary-color);
+          border-color: var(--primary-color);
+
+          svg {
+            &:nth-child(2) {
+              margin-bottom: 20px;
+            }
+
+            &:last-child {
+              margin-bottom: 20px;
+            }
+
+            path:has(.rplSubCards) {
+              fill: var(--svg-color);
+
+              &:hover:has(.rplSubCards) {
+                fill: var(--svg-color);
+              }
+            }
+          }
+        }
+
+        p {
+          color: var(--primary-color);
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 500;
+          line-height: normal;
+          margin: 0;
+        }
+      }
+
+      .postCard-small {
+        width: 100%;
+        max-width: 150px;
+        height: 100%;
+        min-height: 148px;
+      }
+
+      .postCard-mid {
+        width: 100%;
+        max-width: 196px;
+        height: 100%;
+        min-height: 182px;
+      }
+
+      .postCard-large {
+        width: 100%;
+        max-width: 248px;
+        height: 100%;
+        min-height: 226px;
+      }
+    }
+
+    & .error-field {
+      margin-top: 10px;
+      @include errorField;
+    }
+  }
+
+  .footerBtns {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    border-top: 0.5px solid var(--border-color);
+    background-color: #fff;
+
+    .createTemplateBtns {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 20px;
+      padding: 14px 95px 14px 35px;
+    }
+  }
+  .error {
+    border: 1.5px solid var(--error-color);
+  }
+}
+
+.rplSubCards {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 150px;
+  min-height: 100px;
+}

package/src/components/GenericUIBlocks/Button/index.tsx

@@ -0,0 +1,54 @@
+import React, { CSSProperties, ReactNode, MouseEventHandler } from 'react';
+
+// styles
+import './styles.scss';
+
+interface ButtonProps {
+  children?: ReactNode;
+  style?: CSSProperties;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  className?: string;
+  disabled?: boolean;
+  backdrop?: boolean;
+  currentTheme?: string | null | undefined;
+}
+
+const Button: React.FC<ButtonProps> = ({
+  children = '',
+  style = {},
+  onClick,
+  className = '',
+  disabled = false,
+  backdrop = true,
+  currentTheme = 'default'
+}) => {
+  return (
+    <>
+      {
+        currentTheme === 'v2' ? (
+          <div
+            className={`basic-button ${currentTheme === 'v2' && 'new-theme-button'} ${className} ${disabled ? 'disabled' : ''}`}
+            onClick={disabled ? undefined : onClick}
+            style={style}
+          >
+            {children}
+            {/* {backdrop && <span className="backdrop" />} */}
+          </div>
+        )
+          :
+          (
+            <div
+              className={`basic-button ${className} ${disabled ? 'disabled' : ''}`}
+              onClick={disabled ? undefined : onClick}
+              style={style}
+            >
+              {children}
+              {backdrop && <span className="backdrop" />}
+            </div>
+          )
+      }
+    </>
+  );
+};
+
+export default Button;

package/src/components/GenericUIBlocks/Button/styles.scss

@@ -0,0 +1,43 @@
+.basic-button {
+  background-color: var(--primary-color);
+  color: white;
+  width: 100%;
+  max-width: fit-content;
+  padding: 0px 10px;
+  font-size: 16px;
+  cursor: pointer;
+  height: 100%;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  position: relative;
+  
+  &.disabled{
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .backdrop{
+    opacity: 0;
+    transition: opacity 0.1s ease-in !important;
+    background: #00000012 !important;
+    position: absolute !important;
+    top: 0px !important;
+    left: 0px !important;
+    width: 100% !important;
+    height: 100% !important;
+    border-radius: 3px !important;
+  }
+  &:hover{
+    .backdrop{
+      opacity: 1 !important;
+    }
+  }
+}
+
+// new theme button
+.new-theme-button{
+  height: 50px;
+  border-radius: 8px;
+}

package/src/components/GenericUIBlocks/CircularProgress/index.tsx

@@ -0,0 +1,18 @@
+import React, { useState, useEffect, CSSProperties } from 'react';
+
+// styles
+import './styles.scss';
+
+interface CircularProgressProps {
+  style?: CSSProperties;
+}
+
+const CircularProgress: React.FC<CircularProgressProps> = ({ style = {} }) => {
+  return (
+    <div className={'basic-progress'}>
+      <div className="loader" style={style} />
+    </div>
+  );
+}
+
+export default CircularProgress;

package/src/components/GenericUIBlocks/CircularProgress/styles.scss

@@ -0,0 +1,93 @@
+.basic-progress {
+  .loader {
+    width: 50px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    animation: l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;
+  }
+  @keyframes l20-1 {
+    0% {
+      clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
+    }
+    12.5% {
+      clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        100% 0%,
+        100% 0%,
+        100% 0%,
+        100% 0%
+      );
+    }
+    25% {
+      clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        100% 0%,
+        100% 100%,
+        100% 100%,
+        100% 100%
+      );
+    }
+    50% {
+      clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        100% 0%,
+        100% 100%,
+        50% 100%,
+        0% 100%
+      );
+    }
+    62.5% {
+      clip-path: polygon(
+        50% 50%,
+        100% 0,
+        100% 0%,
+        100% 0%,
+        100% 100%,
+        50% 100%,
+        0% 100%
+      );
+    }
+    75% {
+      clip-path: polygon(
+        50% 50%,
+        100% 100%,
+        100% 100%,
+        100% 100%,
+        100% 100%,
+        50% 100%,
+        0% 100%
+      );
+    }
+    100% {
+      clip-path: polygon(
+        50% 50%,
+        50% 100%,
+        50% 100%,
+        50% 100%,
+        50% 100%,
+        50% 100%,
+        0% 100%
+      );
+    }
+  }
+  @keyframes l20-2 {
+    0% {
+      transform: scaleY(1) rotate(0deg);
+    }
+    49.99% {
+      transform: scaleY(1) rotate(135deg);
+    }
+    50% {
+      transform: scaleY(-1) rotate(0deg);
+    }
+    100% {
+      transform: scaleY(-1) rotate(-135deg);
+    }
+  }
+}

package/src/components/GenericUIBlocks/CustomTooltip/index.tsx

@@ -0,0 +1,88 @@
+import React, {useEffect, useRef} from 'react';
+
+// Icons
+import ToolArrow from '../../../assets/images/tooltip/tool-arrow';
+
+// Styles
+import './styles.scss';
+
+interface TooltipProps {
+  place: 'top' | 'right' | 'bottom' | 'left' | 'top-start';
+  children?: React.ReactNode;
+  open?: boolean;
+  handleClose?: () => void;
+}
+
+const CustomTooltip: React.FC<TooltipProps> = ({
+  place,
+  children,
+  open,
+  handleClose,
+}) => {
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const handleClickAway = (event: MouseEvent) => {
+    if (
+      tooltipRef.current &&
+      !tooltipRef.current.contains(event.target as Node)
+    ) {
+      handleClose?.();
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      document.addEventListener('mousedown', handleClickAway);
+    } else {
+      document.removeEventListener('mousedown', handleClickAway);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickAway);
+    };
+  }, [open]);
+
+  //  positions
+  const positions = (place: string) => {
+    switch (place) {
+      case 'top':
+        return {inset: '-98px 0px auto 10%'};
+      case 'bottom':
+        return {inset: 'auto 0px -17px 9.3%'};
+      default:
+        return {top: '0', left: '0'};
+    }
+  };
+
+  const arrowPosition = (place: string) => {
+    switch (place) {
+      case 'top':
+        return {
+          inset: 'auto auto -8px 15px',
+        };
+      case 'bottom':
+        return {
+          inset: '-10px auto auto 15px',
+          transform: 'rotate(180deg)',
+        };
+      default:
+        return {top: '0', left: '0'};
+    }
+  };
+
+  return (
+    <>
+      {open && (
+        <div
+          className="custom-tooltip"
+          ref={tooltipRef}
+          style={positions(place)}
+        >
+          {children}
+          <ToolArrow className="arrow" style={arrowPosition(place)} />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default CustomTooltip;

package/src/components/GenericUIBlocks/CustomTooltip/styles.scss

@@ -0,0 +1,19 @@
+.custom-tooltip {
+    width: 90% !important;
+    max-width: fit-content !important;
+    text-align: center !important;
+    background-color: #ffffff !important;
+    color: #000 !important;
+    box-shadow: 0px 2px 6px #989595 !important;
+    opacity: 1 !important;
+    z-index: 9999999 !important;
+    padding: 10px;
+    position: absolute;
+    border-radius: 5px;
+    .arrow {
+      position: absolute;
+      width: 14px;
+      height: 14px;
+      filter: drop-shadow(0px 5px 1px rgba(0, 0, 0, 0.155));
+    }
+  }