@openlettermarketing/olc-react-sdk 2.1.6 → 2.1.8

package/src/components/CreateTemplate/styles.scss

@@ -1,404 +0,0 @@
-@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

@@ -1,54 +0,0 @@
-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

@@ -1,43 +0,0 @@
-.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

@@ -1,18 +0,0 @@
-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

@@ -1,93 +0,0 @@
-.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

@@ -1,88 +0,0 @@
-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

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