@openlettermarketing/olc-react-sdk 2.1.7 → 2.1.8

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

@@ -1,406 +0,0 @@
-.select-layout {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-  gap: 8px;
-
-  label {
-    color: var(--text-color);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    margin-bottom: 5px;
-  }
-
-  .generic-select-container {
-    width: 100%;
-    cursor: pointer;
-    font-size: 16px;
-    line-height: 21px;
-    .generic-select__control {
-      height: 100%;
-      min-height: 55px;
-      background-color: transparent;
-      border: 0.5px solid var(--border-color);
-      border-radius: 7px;
-      padding-left: 10px;
-      font-size: 14px;
-      .generic-select__value-container {
-        .generic-select__placeholder{
-          color: var(--text-color);
-          opacity: 0.5;
-        }
-        .generic-select__input-container{
-          color: var(--text-color);
-        }
-        .generic-select__single-value {
-          color: var(--text-color);
-          font-size: 14px;
-        }
-      }
-      &:hover {
-        border: 0.5px solid var(--border-color);
-      }
-      &::placeholder {
-        opacity: 0.5;
-      }
-      &.generic-select__control--is-focused {
-        border: 0.5px solid var(--border-color);
-        box-shadow: none;
-      }
-      .generic-select__indicators {
-        transition: 0.2s ease-in all;
-        .generic-select__indicator-separator {
-          display: none !important;
-        }
-        .generic-select__clear-indicator{
-          svg{
-            width: 22px;
-            cursor: pointer;
-          }
-        }
-      }
-    }
-
-    .generic-select__menu {
-      .generic-select__menu-list {
-        padding: 0px 5px;
-        .generic-select__menu-notice{
-          cursor: not-allowed;
-          color: var(--text-color);
-        }
-        .generic-select__option {
-          font-size: 14px;
-          font-weight: 400;
-          line-height: 16.94px;
-          text-align: left;
-          color: var(--text-color);
-          padding: auto 10px;
-          border-bottom: 0.5px solid var(--border-color);
-          cursor: pointer;
-          &:last-child {
-            border: none;
-          }
-          &.generic-select__option--is-focused {
-            background-color: var(--secondary-color);
-            color: var(--text-color);
-          }
-        }
-      }
-    }
-  }
-  .template-select{
-    .generic-select__control{
-      .generic-select__value-container{
-        .generic-select__placeholder{
-          color: #000;
-        }
-        .generic-select__input-container{
-          color: #000;
-        }
-        .generic-select__single-value {
-          color: #000;
-        }
-      }
-    }
-
-    .generic-select__menu {
-      .generic-select__menu-list {
-        .generic-select__menu-notice{
-          color: #000;
-        }
-        .generic-select__option {
-          color: #000;
-          border-bottom: 0.5px solid #303030;
-          &:last-child {
-            border: none;
-          }
-          &.generic-select__option--is-focused {
-            color: #000;
-          }
-        }
-      }
-    }
-  }
-  
-  .gallery-select{
-    .generic-select__control{
-      background-color: #fff !important;
-      min-height: 40px !important;
-      border-radius: 3px !important;
-      min-width: 320px !important;
-      .generic-select__value-container{
-        .generic-select__placeholder{
-          color: #000;
-        }
-        .generic-select__input-container{
-          color: #000;
-        }
-        .generic-select__single-value {
-          color: #000;
-        }
-      }
-    }
-
-    .generic-select__menu {
-      box-shadow: 0 0 3px 1px hsla(0, 0%, 0%, 0.1),0 4px 11px hsla(0, 0%, 0%, 0.1) !important;
-      .generic-select__menu-list {
-        padding: 12px !important;
-        .generic-select__menu-notice{
-          color: #000;
-        }
-        .generic-select__option {
-          color: #000;
-          font-size: 14px !important;
-          font-weight: 300 !important;
-          border-bottom: 0.5px solid rgba(84, 84, 84, 0.3);
-          padding: 12px !important;
-          &:last-child {
-            border: none;
-          }
-          &.generic-select__option--is-focused {
-            color: #000;
-          }
-        }
-      }
-    }
-  }
-
-  .qr-select{
-    .generic-select__control{
-      min-height: 35px !important;
-      border-radius: 3px !important;
-    }
-  }
-}
-
-.select-layout-v2 {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-  gap: 8px;
-
-  label {
-    color: var(--text-color);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-    margin-bottom: 5px;
-  }
-
-  .generic-select-container {
-    width: 100%;
-    cursor: pointer;
-    font-size: 16px;
-    line-height: 21px;
-    .generic-select__control {
-      height: 44px;
-      background-color: transparent;
-      border: 1px solid #E5E7EB;
-      border-radius: 4px;
-      padding-left: 10px;
-      font-size: 14px;
-      .generic-select__value-container {
-        .generic-select__placeholder{
-          color: var(--text-color);
-          opacity: 0.5;
-        }
-        .generic-select__input-container{
-          color: var(--text-color);
-        }
-        .generic-select__single-value {
-          color: var(--text-color);
-          font-size: 14px;
-        }
-      }
-      &:hover {
-        cursor: pointer;
-      }
-      &::placeholder {
-        opacity: 0.5;
-      }
-      &.generic-select__control--is-focused {
-        box-shadow: none;
-      }
-      .generic-select__indicators {
-        transition: 0.2s ease-in all;
-        .generic-select__indicator-separator {
-          display: none !important;
-        }
-        .generic-select__clear-indicator{
-          svg{
-            width: 22px;
-            cursor: pointer;
-          }
-        }
-      }
-    }
-
-    .generic-select__menu {
-      .generic-select__menu-list {
-        padding: 0px 5px;
-        max-height: 160px !important;
-        .generic-select__menu-notice{
-          cursor: not-allowed;
-          color: var(--text-color);
-        }
-        .generic-select__option {
-          font-size: 14px;
-          font-weight: 400;
-          line-height: 16.94px;
-          text-align: left;
-          color: var(--text-color);
-          padding: auto 10px;
-          border-bottom: 0.5px solid var(--border-color);
-          cursor: pointer;
-          transition: all 0.3s ease;
-
-          &:last-child {
-            border: none;
-          }
-
-          &.generic-select__option--is-focused {
-            background-color: var(--secondary-color);
-            color: var(--text-color);
-          }
-        }
-      }
-    }
-  }
-  .template-select{
-    .generic-select__control{
-      .generic-select__value-container{
-        .generic-select__placeholder{
-          color: #000;
-        }
-        .generic-select__input-container{
-          color: #000;
-        }
-        .generic-select__single-value {
-          color: #000;
-        }
-      }
-    }
-
-    .generic-select__menu {
-      .generic-select__menu-list {
-        .generic-select__menu-notice{
-          color: #000;
-        }
-        .generic-select__option {
-          color: #000;
-          border-bottom: 0.5px solid #303030;
-          &:last-child {
-            border: none;
-          }
-          &.generic-select__option--is-focused {
-            color: #000;
-          }
-        }
-      }
-    }
-  }
-  
-  .gallery-select{
-    .generic-select__control{
-      background-color: #fff !important;
-      min-height: 48px !important;
-      height: 48px !important;
-      border-radius: 8px !important;
-      border: 1px solid #E5E5E5 !important;
-      padding: 0 12px !important;
-      box-shadow: none !important;
-      
-      &:hover {
-        border: 1px solid #E5E5E5 !important;
-      }
-
-      &.generic-select__control--is-focused {
-        border: 1px solid #E5E5E5 !important;
-        box-shadow: none !important;
-      }
-
-      .generic-select__value-container{
-        padding: 0 !important;
-        
-        .generic-select__placeholder{
-          color: #303030;
-          font-size: 14px;
-          font-weight: 400;
-          margin: 0;
-        }
-        .generic-select__input-container{
-          color: #303030;
-          margin: 0;
-          padding: 0;
-        }
-        .generic-select__single-value {
-          color: #303030;
-          font-size: 14px;
-          font-weight: 400;
-          margin: 0;
-        }
-      }
-
-      .generic-select__indicators {
-        .generic-select__dropdown-indicator {
-          padding: 0 !important;
-        }
-      }
-    }
-
-    .generic-select__menu {
-      border-radius: 8px !important;
-      box-shadow: 0 0 3px 1px hsla(0, 0%, 0%, 0.1),0 4px 11px hsla(0, 0%, 0%, 0.1) !important;
-      border: 1px solid #E5E5E5 !important;
-      margin-top: 4px !important;
-      
-      .generic-select__menu-list {
-        padding: 8px !important;
-        border-radius: 8px !important;
-        
-        .generic-select__menu-notice{
-          color: #303030;
-          font-size: 14px;
-        }
-        .generic-select__option {
-          color: #303030;
-          font-size: 14px !important;
-          font-weight: 400 !important;
-          border-radius: 4px !important;
-          padding: 10px 12px !important;
-          margin-bottom: 2px !important;
-          border: none !important;
-          
-          &:last-child {
-            border: none;
-            margin-bottom: 0 !important;
-          }
-          
-          &.generic-select__option--is-focused {
-            background-color: #F5F5F5 !important;
-            color: #303030;
-          }
-
-          &.generic-select__option--is-selected {
-            // background-color: #F0F0F0 !important;
-            color: #303030;
-          }
-        }
-      }
-    }
-  }
-
-  .qr-select{
-    .generic-select__control{
-      min-height: 35px !important;
-      border-radius: 3px !important;
-    }
-  }
-}

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

@@ -1,25 +0,0 @@
-import React from 'react';
-
-// react-tooltip
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-// styles
-import './styles.scss';
-
-interface GeneralTooltipProps {
-  anchorSelect: string;
-  place: 'top' | 'right' | 'bottom' | 'left';
-  title: string | React.ReactNode;
-  className?: string;
-}
-
-const GeneralTooltip: React.FC<GeneralTooltipProps> = ({ anchorSelect, place, title, className }) => {
-  return (
-    <Tooltip className={`basic-tooltip ${className}`} anchorSelect={anchorSelect} place={place}>
-      {title}
-    </Tooltip>
-  );
-};
-
-export default GeneralTooltip;

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

@@ -1,20 +0,0 @@
-.basic-tooltip {
-  width: 90%;
-  max-width: fit-content;
-  text-align: center !important;
-  background-color: #ffffff !important;
-  color: #000 !important;
-  box-shadow: 0px 0px 12px 0px #989595 !important;
-  opacity: 1;
-  z-index: 1;
-  animation: fadeIn 0.1s ease-in-out !important;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1 !important;
-  }
-}

package/src/components/GenericUIBlocks/GenericSnackbar/Toast/index.tsx

@@ -1,91 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-// Action
-import { CLEAR_SNACKBAR } from '../../../../redux/actions/action-types';
-
-// redux
-import { useDispatch, useSelector } from 'react-redux';
-import { AppDispatch, RootState } from '../../../../redux/store';
-
-// utils
-import { MESSAGES } from '../../../../utils/message';
-
-// icon
-import Cross from '../../../../assets/images/modal-icons/cross';
-
-// styles
-import './styles.scss';
-
-const GenericSnackbar = () => {
-  const open = useSelector(
-    (state: RootState) => state.snackbarReducers.snackbar.open
-  );
-
-  const heading = useSelector(
-    (state: RootState) => state.snackbarReducers.snackbar.heading
-  );
-  const message = useSelector(
-    (state: RootState) => state.snackbarReducers.snackbar.message
-  );
-  const dispatch: AppDispatch = useDispatch();
-
-  const snackbar = useSelector((state: any) => state.snackbarReducers.snackbar); // Adjust this based on your root reducer
-
-  const Toast: React.FC<{
-    snackMessage: string;
-    snackHeading: string;
-    type: 'success' | 'error';
-    onClose: () => void;
-    onPauseHover: boolean;
-  }> = ({ snackMessage, snackHeading, type, onClose, onPauseHover }) => {
-    const [animateOut, setAnimateOut] = useState(false); // Control when to start exit animation
-
-    useEffect(() => {
-      // Automatically trigger exit after 3 seconds
-      const autoCloseTimer = setTimeout(() => {
-        setAnimateOut(true); // Start exit animation
-        dispatch({ type: CLEAR_SNACKBAR });
-      }, 3000);
-
-      // Fully remove the toast after exit animation finishes
-      const removeTimer = setTimeout(() => {
-        onClose();
-      }, 3500); // 3.5s allows the exit animation to complete
-
-      return () => {
-        clearTimeout(autoCloseTimer);
-        clearTimeout(removeTimer);
-      };
-    }, [open, onClose]);
-
-    return (
-      <div className={`toast ${type} ${animateOut ? 'slideOut' : 'slideIn'}`}>
-        <div className="toastContent">
-          <span>{snackHeading || 'Notifications'}</span>
-          <p>{snackMessage || MESSAGES.GENERAL_ERROR}</p>
-        </div>
-        <button className="closeIcon" onClick={onClose}>
-          <Cross toast={true} />
-        </button>
-      </div>
-    );
-  };
-
-  return (
-    <>
-      <div className={`toast-container ${!open && 'noToast'}`}>
-        {open && (
-          <Toast
-            snackMessage={message}
-            snackHeading={heading}
-            type={snackbar.status}
-            onClose={() => dispatch({ type: CLEAR_SNACKBAR })}
-            onPauseHover={true}
-          />
-        )}
-      </div>
-    </>
-  );
-};
-
-export default GenericSnackbar;

package/src/components/GenericUIBlocks/GenericSnackbar/Toast/styles.scss

@@ -1,92 +0,0 @@
-.toast-container {
-    position: fixed;
-    top: 10px;
-    right: 10px;
-    width: 100%;
-    min-width: 370px !important;
-    max-width: fit-content;
-    height: 100%;
-    max-height: 75px;
-    z-index: 999999999 !important;
-    
-    .toast {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      background-color: var(--notification-background-color);
-      padding: 10px 10px 10px 15px;
-      height: 100%;
-      border-radius: 10px;
-      position: relative;
-      opacity: 0;
-      transform: translateX(100%);
-
-      &.slideIn{
-        animation: slideIn 0.2s ease-in forwards;
-      }
-      
-      &.slideOut{
-        animation: slideOut 0.2s ease-in forwards;
-      }
-    
-      .toastContent {
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-        span {
-          font-family: var(--font-family) !important;
-          color: var(--notification-text-color);
-          font-weight: 600;
-        }
-        p {
-          font-family: var(--font-family) !important;
-          color: var(--notification-text-color);
-          margin: 0;
-        }
-      }
-    
-      .closeIcon {
-        position: absolute;
-        top: 5px;
-        right: 0;
-        background: none;
-        border: none;
-        cursor: pointer;
-        &:focus{
-          outline: none;
-          border: none;
-        }
-        svg{
-          width: 25px;
-          height: 18px;
-        }
-      }
-    }
-
-    /* Slide-in from the right */
-@keyframes slideIn {
-  0% {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-/* Slide-out to the right */
-@keyframes slideOut {
-  0% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-}
-  }
-.noToast{
-  display: none !important;
-}

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

@@ -1,82 +0,0 @@
-// src/components/Grid.js
-import React from 'react';
-
-// styled components
-import styled from 'styled-components';
-
-interface GridItemProps {
-  xs?: number;
-  sm?: number;
-  md?: number;
-  lg?: number;
-  xl?: number;
-}
-
-const breakpoints = {
-  xs: '0px',
-  sm: '600px',
-  md: '960px',
-  lg: '1280px',
-  xl: '1920px',
-};
-
-const Container = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-`;
-
-const Col = styled.div<GridItemProps>`
-  padding: 0 8px;
-  box-sizing: border-box;
-  ${(props) =>
-    props.xs &&
-    `flex: 0 0 ${(props.xs / 12) * 100}%; 
-    max-width: ${
-      (props.xs / 12) * 100
-    }%;`}
-  @media (min-width: ${breakpoints.sm}) {
-    ${(props) =>
-      props.sm &&
-      `flex: 0 0 ${(props.sm / 12) * 100}%; 
-      max-width: ${
-        (props.sm / 12) * 100
-      }%;`}
-  }
-  @media (min-width: ${breakpoints.md}) {
-    ${(props) =>
-      props.md &&
-      `flex: 0 0 ${(props.md / 12) * 100}%; 
-      max-width: ${
-        (props.md / 12) * 100
-      }%;`}
-  }
-  @media (min-width: ${breakpoints.lg}) {
-    ${(props) =>
-      props.lg &&
-      `flex: 0 0 ${(props.lg / 12) * 100}%; 
-      max-width: ${
-        (props.lg / 12) * 100
-      }%;`}
-  }
-  @media (min-width: ${breakpoints.xl}) {
-    ${(props) =>
-      props.xl &&
-      `flex: 0 0 ${(props.xl / 12) * 100}%; 
-      max-width: ${
-        (props.xl / 12) * 100
-      }%;`}
-  }
-`;
-
-export const GridContainer = ({children, style = {}}: any) => {
-  return <Container style={style}>{children}</Container>;
-};
-
-export const GridItem = ({xs, sm, md, lg, xl, children}: any) => {
-  return (
-    <Col xs={xs} sm={sm} md={md} lg={lg} xl={xl}>
-      {children}
-    </Col>
-  );
-};