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

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

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

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

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