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

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

@@ -0,0 +1,269 @@
+import React, {ChangeEvent, FC, useState} from 'react';
+
+// components
+import Typography from '../Typography';
+import CustomTooltip from '../CustomTooltip';
+import Button from '../Button';
+
+// icon
+import Search from '../../../assets/images/input/search';
+import Cancel from '../../../assets/images/input/cancel';
+import VideoInfo from '../../../assets/images/modal-icons/info';
+import ToolCancel from '../../../assets/images/modal-icons/tool-cancel';
+import CancelInput from '../../../assets/images/modal-icons/cancel-input';
+
+// styles
+import './styles.scss';
+
+const errorStyles = {
+  color: 'var(--error-color)',
+  fontWeight: '400',
+  fontSize: '14px',
+  margin: "0"
+};
+
+interface InputProps {
+  variant?: keyof JSX.IntrinsicElements;
+  type: any;
+  value: string,
+  onChange: (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | any>
+  ) => void;
+  placeholder?: string;
+  label?: string;
+  error?: string;
+  inputIcon?: boolean;
+  searchApplied?: boolean;
+  onClick?: () => void;
+  removeSearchInput?: () => void;
+  onKeyDown?: () => void;
+  builderInput?: boolean;
+  gellerySearch?: boolean;
+  videoTooltip?: boolean;
+  handleFileRemove?: () => void;
+  qrField?: boolean;
+  onlyNumber?: boolean;
+  currentTheme?: string | null | undefined;
+  required?: boolean;
+  isClearable?: boolean;
+  className?: string;
+}
+
+const Input: FC<InputProps> = ({
+  variant = 'input',
+  type,
+  value,
+  onChange,
+  placeholder,
+  label,
+  error,
+  inputIcon = false,
+  onClick,
+  searchApplied,
+  removeSearchInput,
+  onKeyDown,
+  builderInput,
+  gellerySearch = false,
+  videoTooltip = false,
+  handleFileRemove,
+  qrField = false,
+  onlyNumber = false,
+  currentTheme = '',
+  required = false,
+  isClearable = false,
+  className = ''
+}) => {
+  const InputVariant = variant || 'input';
+
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
+
+  const loomButtonStyles = {
+    backgroundColor: 'var(--primary-color)',
+    fontSize: '12px',
+    padding: '10px 20px',
+    borderRadius: '4px',
+    maxHeight: '25px',
+  };
+
+  const URLTooltip = (
+    <div className="videoUrlTooltip">
+      <p>
+        You can use Loom to create this video. Create your free Loom account
+        now.
+      </p>
+      <Button
+        style={loomButtonStyles}
+        onClick={(e) => {
+          e.stopPropagation();
+          window.open('https://www.loom.com/','_blank');
+        }}
+      >
+        Open Loom
+      </Button>
+      <ToolCancel onClick={()=>setShowTooltip(false)}/>
+    </div>
+  );
+
+  const handleClose = () => {
+    setShowTooltip(false);
+  };
+
+  return (
+    <>
+    {currentTheme === 'v2' ? (
+      <div className={`input-layout ${currentTheme === 'v2' && 'new-theme-input-layout'} ${className} ${gellerySearch && 'gallery-input-layout'} ${qrField && 'qr-input-layout'}`}>
+      <label className="basic-label" style={{ 
+          marginBottom: label === 'Template Name' ? '4px' : '0',
+        }}>
+        {label ? <>{label} {required && <span className="required-asterisk">*</span>}</> : ''}
+        {videoTooltip && (
+          <>
+            <span className="urlTooltip" 
+            onMouseOver={()=>setShowTooltip(true)}
+            >
+              <VideoInfo />
+            </span>
+            <CustomTooltip
+              children={URLTooltip}
+              open={showTooltip}
+              handleClose={handleClose}
+              place="top"
+              />
+          </>
+        )}
+      </label>
+      <div
+        className={`input-with-icon ${searchApplied && 'focused'} ${error ? 'errorBorder' : ''} ${gellerySearch && 'galleryInput'} ${qrField && 'qrInputDiv'}`}
+        style={{
+          paddingRight: isClearable ? '20px' : '16px'
+        }}
+      >
+        {type === 'file' ? (
+          <input
+            type="file"
+            onChange={(e) => onChange(e)}
+            accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
+            multiple
+            className={`basic-input ${builderInput && 'builder-input'}`}
+          />
+        ) : (
+          <InputVariant
+            type={type}
+            value={value}
+            onChange={onChange}
+            placeholder={placeholder}
+            className={`basic-input ${builderInput && 'builder-input'}`}
+            onKeyDown={onlyNumber ? (event) => {
+              if (event.key === 'e' || event.key === 'E' || event.key === '-' || event.key === '+') {
+                event.preventDefault();
+              }
+            } : onKeyDown}
+            style={{
+              fontSize: label === 'Template Name' ? '16px' : 'inherit',
+              color: label === 'Template Name' ? '#000000' : 'inherit',
+            }}
+          />
+        )}
+        {inputIcon && (
+          <>
+            {searchApplied && value?.length > 0 ? (
+              <div className="cancel-input-button" onClick={removeSearchInput}>
+                <Cancel fill="var(--border-color)" />
+              </div>
+            ) : null}
+            <div
+              className="search-input-button"
+              onClick={value?.length > 0 ? onClick : () => {}}
+            >
+              <Search fill="var(--primary-color)" />
+            </div>
+          </>
+        )}
+        {(isClearable && value?.length > 0) && (
+          <div className="clear-search-input" onClick={removeSearchInput}>
+            <CancelInput />
+          </div>
+        )}
+      </div>
+      {error && (
+        <Typography variant="p" style={errorStyles}>
+          <sup>*</sup>
+          {error}
+        </Typography>
+      )}
+      </div>
+      ) : (
+        <div className={`input-layout ${gellerySearch && 'gallery-input-layout'} ${qrField && 'qr-input-layout'}`}>
+        <label className="basic-label">
+          {label ? label : ''}
+          {videoTooltip && (
+            <>
+              <span className="urlTooltip" 
+              onMouseOver={()=>setShowTooltip(true)}
+              >
+                <VideoInfo />
+              </span>
+              <CustomTooltip
+                children={URLTooltip}
+                open={showTooltip}
+                handleClose={handleClose}
+                place="top"
+                />
+            </>
+          )}
+        </label>
+        <div
+          className={`input-with-icon ${searchApplied && 'focused'} ${error ? 'errorBorder' : ''} ${gellerySearch && 'galleryInput'} ${qrField && 'qrInputDiv'}`}
+        >
+          {type === 'file' ? (
+            <input
+              type="file"
+              onChange={(e) => onChange(e)}
+              accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
+              multiple
+              className={`basic-input ${builderInput && 'builder-input'}`}
+            />
+          ) : (
+            <InputVariant
+              type={type}
+              value={value}
+              onChange={onChange}
+              placeholder={placeholder}
+              className={`basic-input ${builderInput && 'builder-input'}`}
+              onKeyDown={onlyNumber ? (event) => {
+                if (event.key === 'e' || event.key === 'E' || event.key === '-' || event.key === '+') {
+                  event.preventDefault();
+                }
+              } : onKeyDown}
+            />
+          )}
+          {inputIcon && (
+            <>
+              {searchApplied && value?.length > 0 ? (
+                <div className="cancel-input-button" onClick={removeSearchInput}>
+                  <Cancel fill="var(--border-color)" />
+                </div>
+              ) : null}
+              <div
+                className="search-input-button"
+                onClick={value?.length > 0 ? onClick : () => {}}
+              >
+                <Search fill="var(--primary-color)" />
+              </div>
+            </>
+          )}
+        </div>
+        {error && (
+          <Typography variant="p" style={errorStyles}>
+            <sup>*</sup>
+            {error}
+          </Typography>
+        )}
+        </div>
+      )
+    }
+    </>
+  );
+};
+
+export default Input;

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

@@ -0,0 +1,332 @@
+.input-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  gap: 10px;
+  position: relative;
+ 
+ 
+  .basic-label {
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--text-color);
+  }
+  .urlTooltip {
+    position: absolute;
+    left: 80px;
+    top: 1px;
+    cursor: pointer;
+  }
+ 
+ 
+  .input-with-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 0.5px solid var(--border-color);
+    border-radius: 7px;
+    height: 100%;
+    min-height: 55px;
+    width: 100%;
+    background: #fff;
+ 
+ 
+    .basic-input {
+      width: 100%;
+      padding: 5px 20px;
+      background: transparent;
+      font-size: 14px;
+      font-family: var(--font-family) !important;
+      font-weight: 400;
+      line-height: 24px;
+      color: var(--text-color);
+      border: none;
+      border-radius: 7px;
+      &:focus {
+        outline: none;
+      }
+      &::placeholder {
+        opacity: 50%;
+        color: var(--text-color);
+      }
+    }
+    .builder-input {
+      color: #000;
+      &::placeholder {
+        color: #000;
+      }
+    }
+ 
+ 
+    .search-input-button {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      &::before {
+        content: '';
+        position: absolute;
+        background-color: #303030;
+        height: 100%;
+        width: 1px;
+        top: 0;
+        right: 40px;
+      }
+      svg {
+        margin-right: 10px;
+        cursor: pointer;
+      }
+    }
+ 
+ 
+    .cancel-input-button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      svg {
+        width: 15px !important;
+        margin-right: 10px;
+        cursor: pointer;
+      }
+    }
+ 
+ 
+    &.errorBorder {
+      border: 1.5px solid var(--error-color);
+    }
+  }
+ 
+ 
+  .focused {
+    background-color: var(--secondary-color);
+  }
+ 
+ 
+  .galleryInput {
+    min-height: 40px !important;
+    border-radius: 3px !important;
+  }
+ 
+ 
+  .file-upload-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 0.5px solid var(--border-color);
+    border-radius: 8px;
+    padding: 20px;
+    background-color: #fff;
+    width: 100%;
+    height: 135px;
+    position: relative;
+ 
+ 
+    .file-input {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      cursor: pointer;
+    }
+ 
+ 
+    .upload-area {
+      text-align: center;
+ 
+ 
+      .upload-icon {
+        font-size: 32px;
+        color: #ff6347; /* Customize color */
+        margin-bottom: 10px;
+      }
+ 
+ 
+      .upload-text {
+        color: #ff6347; /* Customize color */
+        font-weight: 400;
+        text-decoration: underline;
+        cursor: pointer;
+      }
+ 
+ 
+      .upload-info {
+        margin-top: 10px;
+        color: #545454;
+        font-size: 12px;
+      }
+    }
+  }
+ 
+ 
+  .uploaded-files {
+    width: 100%;
+  }
+ 
+ 
+  h3 {
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--text-color);
+    margin-bottom: 10px;
+  }
+ 
+ 
+  .file-item {
+    display: flex;
+    align-items: center;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 10px;
+    margin-bottom: 10px;
+    background-color: #fff;
+ 
+ 
+    .file-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 5px;
+      border-radius: 4px;
+      margin-right: 10px;
+      width: 50px;
+    }
+ 
+ 
+    .file-details {
+      flex-grow: 1;
+ 
+ 
+      .file-name {
+      font-size: 14px !important;
+        margin: 0;
+        font-weight: 500;
+        color: #303030 !important;
+      }
+ 
+ 
+      .file-size {
+        font-size: 12px !important;
+        color: #b3b3b3 !important;
+        font-weight: 300 !important;
+      }
+    }
+ 
+ 
+    .file-remove {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+  }
+ }
+ 
+ 
+ .videoUrlTooltip {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-end;
+  flex-direction: column;
+  width: 100%;
+  max-width: 330px;
+  p {
+    text-align: left;
+    font-size: 12px !important;
+    font-weight: 400 !important;
+    color: #000 !important;
+  }
+  svg{
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    top: 2px;
+    right: 3px;
+    cursor: pointer;
+  }
+ }
+ 
+ 
+ .gallery-input-layout {
+  min-width: 320px !important;
+ }
+
+.qr-input-layout{
+  .qrInputDiv{
+    min-height: 35px !important;
+    border-radius: 3px !important;
+  }
+}
+
+// new theme input layout
+.new-theme-input-layout{
+  gap: 8px;
+  .basic-label {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 20px;
+    color: #111827;
+    position: relative;
+    
+    .required-asterisk{
+      color: #E10606;
+      position: absolute;
+      top: -1px;
+    }
+  }
+  .input-with-icon{
+    min-height: 44px !important;
+    border-radius: 4px !important;
+    border: 1px solid #E5E7EB;
+    position: relative;
+
+    .basic-input{
+      padding: 5px 16px;
+    }
+
+    .clear-search-input{
+      position: absolute;
+      right: 16px;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+  }
+}
+
+.NewDesignSearch{
+  margin-top: 32px;
+  max-width: 300px;
+
+  .basic-label{
+    font-size: 16px;
+    font-weight: 400;
+    color: var(--input-label-color);
+  }
+
+  .input-with-icon{
+    min-height: 42px;
+    border: 0.5px solid #B0B0B0;
+  }
+}
+
+.searchInput-v2{
+  width: auto !important;
+  min-height: 42px !important;
+  flex-direction: row !important;
+  min-width: 258px !important;
+  
+  .input-with-icon{
+    padding-right: 0 !important;
+    border-radius: 7px !important;
+
+    .basic-input{
+      padding: 5px 16px;
+
+      &::placeholder{
+        color: #00000099 !important;
+      }
+    }
+  }
+}
+ 

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

@@ -0,0 +1,71 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import './styles.scss'; 
+
+const Tabs = ({ value, onChange, tabs, className, tabClassName, indicatorClassName }: any) => {
+  const [indicatorStyle, setIndicatorStyle] = useState({});
+  const tabRefs = useRef<Array<HTMLDivElement | null>>([]);
+
+  const calculateIndicatorPosition = () => {
+    const activeIndex = tabs.findIndex((tab: any) => tab.id === value.id);
+
+    if (tabRefs.current[activeIndex]) {
+      const tabWidth = tabRefs.current[activeIndex]?.offsetWidth || 0;
+      const tabLeft = tabRefs.current[activeIndex]?.offsetLeft || 0;
+
+      let indicatorLeft;
+      if (window.innerWidth < 768) {
+        const indicatorWidth = tabWidth * 0.5;
+        indicatorLeft = tabLeft + (tabWidth - indicatorWidth) / 2;
+        setIndicatorStyle({
+          width: `${indicatorWidth}px`,
+          left: `${indicatorLeft}px`,
+        });
+      } else {
+        const indicatorWidth = 50; 
+        indicatorLeft = tabLeft + tabWidth / 2 - indicatorWidth / 2;
+        setIndicatorStyle({
+          width: `${indicatorWidth}px`,
+          left: `${indicatorLeft}px`,
+        });
+      }
+    }
+  };
+
+  useLayoutEffect(() => {
+    calculateIndicatorPosition();
+    window.addEventListener('resize', calculateIndicatorPosition);
+
+    return () => {
+      window.removeEventListener('resize', calculateIndicatorPosition);
+    };
+  }, [value, tabs.length]);
+
+  useEffect(() => {
+    if (tabs.length > 0 && !value.id) {
+      onChange(tabs[0]); 
+    }
+  }, [tabs, value, onChange]);
+
+  return (
+    <div className={`tabsWrapper ${className}`}>
+      <div className="tabsContainer">
+        {tabs.map((tab:any, index:any) => (
+          <div
+            key={index}
+            ref={(el) => (tabRefs.current[index] = el)}
+            className={`tab ${tabClassName} ${value.id === tab.id ? 'activeTab' : ''}`}
+            onClick={() => onChange(tab)}
+          >
+            {tab.label}
+          </div>
+        ))}
+      </div>
+        <div
+          className={`tabsIndicator ${indicatorClassName}`}
+          style={indicatorStyle}
+        />
+    </div>
+  );
+};
+
+export default Tabs;

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

@@ -0,0 +1,42 @@
+.tabsWrapper {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  transition: left 0.3s ease-in-out;
+
+  .tabsContainer {
+    display: flex;
+    gap: 55px;
+    width: 100%;
+    
+    .tab {
+      padding: 10px 0;
+      cursor: pointer;
+      text-align: center;
+      font-size: 18px;
+      flex: 1;
+      width: 100%;
+      min-width: fit-content;
+      transition: left 0.3s ease-in-out;
+      
+      @media (width <= 768px){
+        font-size: 15px;
+      }
+
+      &.activeTab {
+        font-weight: bold;
+        color: var(--primary-color);
+      }
+    }
+  }
+
+  .tabsIndicator {
+    position: absolute;
+    bottom: 3px;
+    height: 1.5px;
+    background-color: var(--primary-color);
+    transition: left 0.3s ease-in-out;
+  }
+}