@openlettermarketing/olc-react-sdk 0.0.8 → 0.0.10

package/src/components/CreateTemplate/styles.scss

@@ -0,0 +1,363 @@
+@mixin errorField() {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--red);
+  line-height: 16.94px;
+}
+
+.createTemplateMaindiv {
+  .createTemplateMainBox {
+    position: relative;
+    height: 100%;
+
+    .tempTypeRadioWrapper {
+      padding: 20px 0px 30px 0px;
+      border-left: none;
+      border-right: none;
+      margin-left: 40px;
+
+      .tempTypeRadioHeading {
+        p {
+          color: var(--textColor);
+          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 {
+          input {
+            &:checked {
+              accent-color: var(--primaryColor);
+            }
+
+            &:focus {
+              outline: none !important;
+            }
+
+            cursor: pointer;
+          }
+
+          label {
+            cursor: pointer;
+            color: var(--textColor);
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: normal;
+          }
+        }
+      }
+
+      & .error-field {
+        @include errorField;
+        margin-left: 5px;
+      }
+    }
+  }
+  .createTemplateHeader {
+    padding-bottom: 15px;
+    margin-left: 40px;
+    
+    p {
+      color: var(--primaryColor);
+      font-size: 24px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: normal;
+      margin-bottom: 20px;
+    }
+
+    .templateInputWrapper {
+      p {
+        color: var(--textColor);
+        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 0px 0px 40px;
+      p {
+        color: var(--textColor);
+        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-left: 40px;
+
+    .productHeading {
+      p {
+        &:first-child {
+          color: var(--textColor);
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 500;
+          line-height: normal;
+        }
+
+        &:last-child {
+          color: var(--primaryColor);
+          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;
+      gap: 25px;
+
+      .productCard {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        border-radius: 6.299px;
+        border: 0.45px solid var(--borderColor);
+        background: var(--productCardBgColor);
+        width: 100%;
+        max-width: 185px;
+        height: 100%;
+        min-height: 135px;
+        cursor: pointer;
+        transition: 0.1s ease-in all;
+        gap: 17px;
+
+        &.active,
+        &:hover {
+          background: var(--productCardBackgroundColorActive);
+          border-color: var(--primaryColor);
+        }
+
+        p {
+          color: var(--primaryColor);
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 600;
+          line-height: normal;
+          margin: 0;
+        }
+
+        &:last-child {
+          img {
+            margin-bottom: 5px !important;
+          }
+        }
+
+        &.error {
+          border: 0.45px solid var(--red);
+        }
+      }
+    }
+
+    & .error-field {
+      margin-top: 10px;
+      @include errorField;
+    }
+  }
+
+  .postCardSizeWrapper {
+    padding: 20px 0px;
+    margin: 0px 0px 80px 40px;
+
+    .postCardHeading {
+      p {
+        color: var(--textColor);
+        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;
+      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(--borderColor);
+        background: var(--postCardBgColor);
+        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 {
+            fill: var(--postCardSVGColor);
+          }
+        }
+
+        &.active,
+        &:hover {
+          background: var(--postCardBackgroundColorActive);
+          border-color: var(--primaryColor);
+
+          svg {
+            &:nth-child(2) {
+              margin-bottom: 20px;
+            }
+
+            &:last-child {
+              margin-bottom: 20px;
+            }
+
+            path {
+              fill: var(--svgColor);
+
+              &:hover {
+                fill: var(--svgColor);
+              }
+            }
+          }
+        }
+
+        p {
+          color: var(--primaryColor);
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 600;
+          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(--borderColor);
+    background-color: var(--footerBgColor);
+
+    .createTemplateBtns {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 20px;
+      padding: 14px 95px 14px 35px;
+
+      button {
+        width: 100%;
+        max-width: 100px;
+        height: 100%;
+        min-height: 40px;
+        text-transform: capitalize;
+        border-radius: 3px;
+
+        &:first-child {
+          color: var(--secondaryButtonTextColor);
+          text-align: center;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 600;
+          line-height: normal;
+          border: 0.5px solid var(--borderColor);
+          background-color: var(--secondaryButtonBgColor);
+        }
+
+        &:last-child {
+          color: var(--primaryButtonTextColor);
+          text-align: center;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 600;
+          line-height: normal;
+          background-color: var(--primaryButtonBgColor);
+        }
+      }
+    }
+  }
+}
+
+.mb-5 {
+  margin-bottom: 6rem !important;
+}
+
+.error {
+  border: 1.5px solid var(--red);
+}

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

@@ -0,0 +1,21 @@
+import React, { CSSProperties, ReactNode, MouseEventHandler } from 'react';
+
+// styles
+import './styles.scss';
+
+interface ButtonProps {
+  children?: ReactNode;
+  style?: CSSProperties;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  className?: string;
+}
+
+const Button: React.FC<ButtonProps> = ({ children = '', style = {}, onClick, className = '' }) => {
+  return (
+    <div className={`basic-button ${className}`} onClick={onClick} style={style}>
+      {children}
+    </div>
+  );
+};
+
+export default Button;

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

@@ -0,0 +1,15 @@
+.basic-button {
+  background-color: var(--primaryColor);
+  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: 500;
+}

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

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

@@ -0,0 +1,98 @@
+.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);
+    }
+  }
+  .hide-loader {
+    .loader {
+      display: none !important; /* Hide the pseudo-element */
+    }
+  }
+}

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

@@ -0,0 +1,127 @@
+import React, { ReactNode, CSSProperties } from 'react';
+
+// components
+import Button from '../Button';
+import Typography from '../Typography';
+import CircularProgress from '../CircularProgress';
+
+// styles
+import './styles.scss';
+
+interface DialogProps {
+  icon?: ReactNode;
+  customStyles?: CSSProperties;
+  open: boolean;
+  handleClose: () => void;
+  loading?: boolean;
+  title?: string;
+  subHeading?: string;
+  description?: string;
+  onSubmit?: () => void;
+  onCancel?: () => void;
+  cancelText?: string;
+  submitText?: string;
+  children?: ReactNode;
+}
+
+const buttonStyles: CSSProperties = {
+  color: 'var(--primaryButtonTextColor)',
+  backgroundColor: 'var(--primaryButtonBgColor)',
+  maxWidth: '100px',
+  minHeight: '40px',
+  border: '0.5px solid var(--borderColor)',
+  fontSize: '14px',
+};
+
+const heading: CSSProperties = {
+  fontSize: '22px',
+  color: 'var(--dialogModalHeadingColor)',
+  fontWeight: '700',
+};
+
+const subHeadingStyle: CSSProperties = {
+  fontSize: '16px',
+  color: 'var(--dialogModalTextColor',
+  fontWeight: '700',
+  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 = [],
+}) => {
+  const contentAdjust = submitText.length > 6 ? "fit-content" : "100px";
+
+  return (
+    <div
+      id="myModal"
+      className="modal"
+      style={{display: open ? 'flex' : 'none'}}
+    >
+      <div className="modal-content" style={customStyles}>
+        <div className="modal-header">
+          <span className="close" onClick={handleClose}>
+            &times;
+          </span>
+        </div>
+        <div className="modal-body">
+          <div className="modal-icon">{icon}</div>
+          <Typography variant="p" style={heading}>
+            {title}
+          </Typography>
+          {subHeading && (
+            <Typography variant="p" style={subHeadingStyle}>
+              {subHeading}
+            </Typography>
+          )}
+          {description && (
+            <Typography
+              variant="p"
+              style={{...subHeadingStyle, fontWeight: '400'}}
+            >
+              {description}
+            </Typography>
+          )}
+          {children}
+        </div>
+        <div className="modal-footer">
+          <Button
+            onClick={onCancel}
+            style={{
+              ...buttonStyles,
+              color: 'var(--secondaryButtonTextColor)',
+              backgroundColor: 'var(--secondaryButtonBgColor)',
+            }}
+          >
+            {cancelText}
+          </Button>
+          <Button
+            style={{...buttonStyles, border: 'none', maxWidth: contentAdjust}}
+            onClick={onSubmit}
+          >
+            {loading ? <CircularProgress style={progressStyles} /> : submitText}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dialog;