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

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

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

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

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

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

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

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