@openlettermarketing/olc-react-sdk 2.1.6 → 2.1.8

package/src/components/GenericUIBlocks/Dialog/V2/index.tsx

@@ -1,227 +0,0 @@
-import React, { ReactNode, CSSProperties, useRef, useEffect } from 'react';
-
-// components
-import Typography from '../../Typography';
-import CircularProgress from '../../CircularProgress';
-
-// @ts-ignore
-import CloseNew from '../../../../assets/images/modal-icons/close-new.svg'
-
-// styles
-import './styles.scss';
-
-interface DialogProps {
-  icon?: ReactNode;
-  customStyles?: CSSProperties;
-  open: boolean;
-  handleClose: () => void;
-  loading?: boolean;
-  title?: string | ReactNode;
-  subHeading?: string;
-  description?: string;
-  onSubmit?: () => void;
-  onCancel?: () => void;
-  cancelText?: string;
-  submitText?: string;
-  children?: ReactNode;
-  isGallery?: boolean;
-  currentTheme?: string | null | undefined;
-  isQRCode?: boolean;
-}
-
-const buttonStyles: CSSProperties = {
-  color: '#fff',
-  backgroundColor: 'var(--primary-color)',
-  maxWidth: '100%',
-  minHeight: '50px',
-  border: '0.5px solid var(--border-color)',
-  fontSize: '14px',
-  borderRadius: '8px'
-};
-
-const heading: CSSProperties = {
-  color: '#000',
-  fontWeight: '600',
-  textAlign: 'center',
-  margin: '0',
-};
-
-const subHeadingStyle: CSSProperties = {
-  fontSize: '16px',
-  color: '#656565',
-  fontWeight: '400',
-  textAlign: 'center',
-  width: '100%',
-  maxWidth: '400px',
-  margin: '0',
-  fontFamily: 'var(--font-family)',
-  lineHeight: '20px',
-};
-
-const progressStyles: CSSProperties = {
-  width: '20px',
-  height: '20px',
-  border: '2px solid #fff',
-};
-
-const DialogV2: React.FC<DialogProps> = ({
-  icon = null,
-  customStyles = {},
-  open,
-  handleClose,
-  loading = false,
-  title = "",
-  subHeading = "",
-  description = "",
-  onSubmit,
-  onCancel,
-  cancelText = "",
-  submitText = "",
-  children = [],
-  isGallery = false,
-  currentTheme = "default",
-  isQRCode = false
-}) => {
-  const contentAdjust = submitText.length > 6 ? "fit-content" : "100px";
-
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
-      handleClose();
-    }
-  };
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (event.key === 'Escape' && !loading) {
-      handleClose();
-    }
-  }
-
-  useEffect(() => {
-    if (open) {
-      // document.addEventListener('mousedown', handleClickOutside);
-      document.addEventListener('keydown', handleKeyDown);
-    } else {
-      // document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('keydown', handleKeyDown);
-    }
-
-    return () => {
-      // document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [open]);
-
-  useEffect(() => {
-    const handleCopy = (event: KeyboardEvent) => {
-      if ((event.metaKey || event.ctrlKey) && event.key === 'c') {
-        event.stopPropagation();
-      }
-    };
-
-    document.addEventListener('keydown', handleCopy, true);
-
-    return () => {
-      document.removeEventListener('keydown', handleCopy, true);
-    };
-  }, []);
-
-  return (
-    <>
-      {
-        isGallery || isQRCode ? (
-          <div
-            id="myModal"
-            className={`modal-v2 ${isGallery && 'galleryModal'}`}
-            style={{ display: open ? 'flex' : 'none' }}
-          >
-            <div className="modal-content" style={customStyles} ref={modalRef}>
-              <div className="modal-header" style={{ paddingRight: !isQRCode ? '40px' : '0' }}>
-                <Typography variant="p" style={{ ...heading, fontSize: "20px" }}>
-                  {title}
-                </Typography>
-                <img src={CloseNew} alt="close" onClick={handleClose} />
-              </div>
-              <div className="modal-body">
-                {icon && <div className="modal-icon">{icon}</div>}
-                {subHeading && (
-                  <Typography variant="p" style={subHeadingStyle}>
-                    {subHeading}
-                  </Typography>
-                )}
-                {description && (
-                  <Typography
-                    variant="p"
-                    style={subHeadingStyle}
-                  >
-                    {description}
-                  </Typography>
-                )}
-                {children}
-                <div className="modal-footer">
-                  {(!isGallery || isQRCode) &&
-                    <>
-                      <button onClick={onSubmit} disabled={loading}>
-                        {loading ? <CircularProgress style={progressStyles} /> : submitText}
-                      </button>
-                      <button onClick={onCancel}>
-                        {cancelText}
-                      </button>
-                    </>
-                  }
-                </div>
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div
-            id="myModal"
-            className={`confirm-modal-v2 ${isGallery && 'galleryModal'}`}
-            style={{ display: open ? 'flex' : 'none' }}
-          >
-            <div className="confirm-modal-content" style={customStyles} ref={modalRef}>
-              <div className="confirm-modal-header">
-                {icon && <div className="confirm-modal-icon">{icon}</div>}
-                <Typography variant="p" style={{ ...heading, fontSize: "24px", lineHeight: "24px" }}>
-                  {title}
-                </Typography>
-                <img src={CloseNew} className="confirm-modal-close" alt="close" onClick={handleClose} />
-              </div>
-              <div className="confirm-modal-body">
-                {subHeading && (
-                  <Typography variant="p" style={subHeadingStyle}>
-                    {subHeading}
-                  </Typography>
-                )}
-                {description && (
-                  <Typography
-                    variant="p"
-                    style={subHeadingStyle}
-                  >
-                    {description}
-                  </Typography>
-                )}
-                {children}
-                <div className="confirm-modal-footer">
-                  {!isGallery &&
-                    <>
-                      <button onClick={onSubmit} disabled={loading}>
-                        {loading ? <CircularProgress style={progressStyles} /> : submitText}
-                      </button>
-                      <button onClick={onCancel}>
-                        {cancelText}
-                      </button>
-                    </>
-                  }
-                </div>
-              </div>
-            </div>
-          </div>
-        )
-      }
-    </>
-  );
-};
-
-export default DialogV2;

package/src/components/GenericUIBlocks/Dialog/V2/styles.scss

@@ -1,289 +0,0 @@
-.modal-v2 {
-    display: none;
-    justify-content: center;
-    align-items: center;
-    position: fixed;
-    z-index: 99999;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden !important;
-    background-color: rgb(0 0 0 / 60%);
-  
-    .modal-content {
-      position: relative;
-      background-color: #fff;
-      margin: auto;
-      padding: 0;
-      border: 1px solid #888;
-      width: 80%;
-      max-height: 90%;
-      box-shadow:
-        0 4px 8px 0 rgba(0, 0, 0, 0.2),
-        0 6px 20px 0 rgba(0, 0, 0, 0.19);
-      -webkit-animation-name: animatetop;
-      -webkit-animation-duration: 0.4s;
-      animation-name: animatetop;
-      animation-duration: 0.4s;
-      border-radius: 11px;
-
-      .modal-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        height: 100%;
-        min-height: 20px;
-        color: var(--text-color);
-
-        img{
-          cursor: pointer;
-          transition: all 0.3s ease;
-
-          &:hover{
-            opacity: 0.8;
-          }
-        }
-      }
-  
-      .modal-body {
-        padding: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        color: var(--text-color);
-
-        .modal-icon {
-            width: 100%;
-            max-width: 60px;
-            height: 100%;
-            max-height: 59px;
-        }
-      }
-  
-      .modal-footer {
-        color: var(--text-color);
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 16px;
-
-        button{
-          min-height: 50px;
-          font-size: 16px;
-          font-weight: 600;
-          border-radius: 8px;
-          width: 100%;
-          font-family: var(--font-family);
-          cursor: pointer;
-          transition: all 0.3s ease;
-
-          &:focus{
-            outline: none !important;
-          }
-          
-          &:first-child{
-            background-color: var(--primary-color);
-            color: #fff;
-            border: none;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            
-            &:hover{
-              background-color: var(--primary-color-btn-hover);
-            }
-          }
-          
-          &:last-child{
-            color: var(--text-color);
-            background-color: #F1F1F1;
-            border: none;
-            border: 0.5px solid #F1F1F1;
-
-            &:hover{
-              background-color: #FFFFFF;
-              border: 0.5px solid rgba(0, 0, 0, 0.24);
-            }
-          }
-        }
-      }
-    }
-  
-    @-webkit-keyframes animatetop {
-      from {
-        top: -300px;
-        opacity: 0;
-      }
-      to {
-        top: 0;
-        opacity: 1;
-      }
-    }
-  
-    @keyframes animatetop {
-      from {
-        top: -300px;
-        opacity: 0;
-      }
-      to {
-        top: 0;
-        opacity: 1;
-      }
-    }
-  }
-
-
-
-.confirm-modal-v2 {
-    display: none;
-    justify-content: center;
-    align-items: center;
-    position: fixed;
-    z-index: 99999;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden !important;
-    background-color: rgb(0 0 0 / 60%);
-  
-    .confirm-modal-content {
-      position: relative;
-      background-color: #fff;
-      margin: auto;
-      padding: 0;
-      border: 1px solid #888;
-      width: 80%;
-      max-height: 90%;
-      overflow-y: auto;
-      box-shadow:
-        0 4px 8px 0 rgba(0, 0, 0, 0.2),
-        0 6px 20px 0 rgba(0, 0, 0, 0.19);
-      -webkit-animation-name: animatetop;
-      -webkit-animation-duration: 0.4s;
-      animation-name: animatetop;
-      animation-duration: 0.4s;
-      border-radius: 11px;
-
-      .confirm-modal-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex-direction: column;
-        gap: 16px;
-        height: 100%;
-        min-height: 20px;
-        color: var(--text-color);
-        position: relative;
-
-        .confirm-modal-close{
-          position: absolute;
-          right: -25px;
-          top: -25px;
-          cursor: pointer;
-          transition: all 0.3s ease;
-          
-          &:hover{
-            opacity: 0.8;
-          }
-        }
-        
-        .confirm-modal-icon {
-          width: 100%;
-          max-width: 60px;
-          height: 100%;
-          min-height: 59px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          border-radius: 50%;
-          background-color: var(--modal-svg-bg);
-        }
-      }
-  
-      .confirm-modal-body {
-        padding: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        color: var(--text-color);
-        margin-top: 16px;
-      }
-  
-      .confirm-modal-footer {
-        color: var(--text-color);
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 12px;
-        margin-top: 16px;
-
-        button{
-          min-height: 50px;
-          font-size: 16px;
-          font-weight: 600;
-          border-radius: 8px;
-          width: 100%;
-          font-family: var(--font-family);
-          cursor: pointer;
-          transition: all 0.3s ease;
-
-          &:focus{
-            outline: none !important;
-          }
-          
-          &:first-child{
-            background-color: var(--primary-color);
-            color: #fff;
-            border: none;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            
-            &:hover{
-              background-color: var(--primary-color-btn-hover);
-            }
-          }
-          
-          &:last-child{
-            color: var(--text-color);
-            background-color: #F1F1F1;
-            border: none;
-            border: 0.5px solid #F1F1F1;
-
-            &:hover{
-              background-color: #FFFFFF;
-              border: 0.5px solid rgba(0, 0, 0, 0.24);
-            }
-          }
-        }
-      }
-    }
-  
-    @-webkit-keyframes animatetop {
-      from {
-        top: -300px;
-        opacity: 0;
-      }
-      to {
-        top: 0;
-        opacity: 1;
-      }
-    }
-  
-    @keyframes animatetop {
-      from {
-        top: -300px;
-        opacity: 0;
-      }
-      to {
-        top: 0;
-        opacity: 1;
-      }
-    }
-  }

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

@@ -1,185 +0,0 @@
-import React, { ReactNode, CSSProperties, useRef, useEffect } from 'react';
-
-// components
-import Button from '../Button';
-import Typography from '../Typography';
-import CircularProgress from '../CircularProgress';
-
-// cross-icon
-import Cross from '../../../assets/images/modal-icons/cross'
-import NewCancel from '../../../assets/images/modal-icons/new-cancel'
-
-// styles
-import './styles.scss';
-
-interface DialogProps {
-  icon?: ReactNode;
-  customStyles?: CSSProperties;
-  open: boolean;
-  handleClose: () => void;
-  loading?: boolean;
-  title?: string | ReactNode;
-  subHeading?: string;
-  description?: string;
-  onSubmit?: () => void;
-  onCancel?: () => void;
-  cancelText?: string;
-  submitText?: string;
-  children?: ReactNode;
-  isGallery?: boolean;
-  currentTheme?: string | null | undefined;
-}
-
-const buttonStyles: CSSProperties = {
-  color: '#fff',
-  backgroundColor: 'var(--primary-color)',
-  maxWidth: '100px',
-  minHeight: '40px',
-  border: '0.5px solid var(--border-color)',
-  fontSize: '14px',
-};
-
-const heading: CSSProperties = {
-  color: 'var(--primary-color)',
-  fontWeight: '600',
-  textAlign: 'center',
-};
-
-const subHeadingStyle: CSSProperties = {
-  fontSize: '16px',
-  color: 'var(--text-color)',
-  fontWeight: '600',
-  textAlign: 'center',
-};
-
-const progressStyles: CSSProperties = {
-  width: '20px',
-  height: '20px',
-  border: '2px solid #fff',
-};
-
-const Dialog: React.FC<DialogProps> = ({
-  icon = null,
-  customStyles = {},
-  open,
-  handleClose,
-  loading = false,
-  title = "",
-  subHeading = "",
-  description = "",
-  onSubmit,
-  onCancel,
-  cancelText = "",
-  submitText = "",
-  children = [],
-  isGallery = false,
-  currentTheme = "default"
-}) => {
-  const contentAdjust = submitText.length > 6 ? "fit-content" : "100px";
-
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
-      handleClose();
-    }
-  };
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (event.key === 'Escape' && !loading) {
-      handleClose();
-    }
-  }
-
-  useEffect(() => {
-    if (open) {
-      // document.addEventListener('mousedown', handleClickOutside);
-      document.addEventListener('keydown', handleKeyDown);
-    } else {
-      // document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('keydown', handleKeyDown);
-    }
-
-    return () => {
-      // document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [open]);
-
-  useEffect(() => {
-    const handleCopy = (event: KeyboardEvent) => {
-      if ((event.metaKey || event.ctrlKey) && event.key === 'c') {
-        event.stopPropagation();
-      }
-    };
-
-    document.addEventListener('keydown', handleCopy, true);
-
-    return () => {
-      document.removeEventListener('keydown', handleCopy, true);
-    };
-  }, []);
-
-  return (
-    <div
-      id="myModal"
-      className={`modal ${isGallery && 'galleryModal'}`}
-      style={{ display: open ? 'flex' : 'none' }}
-    >
-      <div className="modal-content" style={customStyles} ref={modalRef}>
-        <div className="modal-header">
-          <span className="close" onClick={handleClose}>
-            <Cross />
-          </span>
-        </div>
-        <div className="modal-body" style={{
-          padding: isGallery ? '0px' : "2px 16px"
-        }}>
-          {icon && <div className="modal-icon">{icon}</div>}
-          <Typography variant="p" style={{ ...heading, fontSize: isGallery ? "26px" : "22px" }}>
-            {title}
-          </Typography>
-          {subHeading && (
-            <Typography variant="p" style={subHeadingStyle}>
-              {subHeading}
-            </Typography>
-          )}
-          {description && (
-            <Typography
-              variant="p"
-              style={{ ...subHeadingStyle, fontWeight: '400', fontSize: '14px' }}
-            >
-              {description}
-            </Typography>
-          )}
-          {children}
-        </div>
-        <div className="modal-footer">
-          {!isGallery &&
-            <>
-              <Button
-                onClick={onCancel}
-                style={{
-                  ...buttonStyles,
-                  color: 'var(--text-color)',
-                  backgroundColor: '#fff',
-                }}
-              >
-                {cancelText}
-              </Button>
-              <Button
-                style={{ ...buttonStyles, border: 'none', maxWidth: contentAdjust }}
-                onClick={onSubmit}
-                disabled={loading}
-              >
-                {loading ? <CircularProgress style={progressStyles} /> : submitText}
-              </Button>
-            </>
-          }
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Dialog;