@openlettermarketing/olc-react-sdk 2.1.6 → 2.1.8

package/src/components/SidePanel/Templates/ModalGallery/HireDesigner/index.tsx

@@ -1,424 +0,0 @@
-import React, {useEffect, useState} from 'react';
-
-// Hooks
-import {useDispatch, useSelector} from 'react-redux';
-import { RootState } from '../../../../../redux/reducers';
-import {AppDispatch} from '../../../../../redux/store';
-
-// Actions
-import {success} from '../../../../../redux/actions/snackbarActions';
-
-// Utils
-import {post} from '../../../../../utils/api';
-import { getItem, removeItem, setItem } from '../../../../../utils/local-storage';
-import { dataURLtoBlob } from '../../../../../utils/helper';
-import {EMAIL_REGEX, VIDEO_URL_REGEX} from '../../../../../utils/constants';
-import { MESSAGES } from '../../../../../utils/message';
-
-// Components
-import Dialog from '../../../../GenericUIBlocks/Dialog';
-import Input from '../../../../GenericUIBlocks/Input';
-import Typography from '../../../../GenericUIBlocks/Typography';
-import Button from '../../../../GenericUIBlocks/Button';
-
-// Icons
-import PDF from '../../../../../assets/images/modal-icons/pdf';
-import PNG from '../../../../../assets/images/modal-icons/png';
-import DOC from '../../../../../assets/images/modal-icons/doc';
-import DOCX from '../../../../../assets/images/modal-icons/docx';
-import JPG from '../../../../../assets/images/modal-icons/jpg';
-import JPEG from '../../../../../assets/images/modal-icons/jpeg';
-import CancelFile from '../../../../../assets/images/modal-icons/cancel-file';
-import Add from '../../../../../assets/images/modal-icons/add';
-
-// Styles
-import './styles.scss';
-
-
-const hireModalStyles = {
-  maxWidth: '725px',
-  minHeight: '760px',
-};
-
-const hireModalButtonStyles = {
-  fontWeight: '600',
-  fontSize: '18px',
-  maxWidth: '643px',
-  minHeight: '55px',
-};
-
-const errorStyles = {
-  color: 'var(--error-color)',
-  fontWeight: '400',
-  fontSize: '14px',
-  margin: '0',
-};
-
-const HireDesigner = (props: any) => {
-  const { open, onClose, onCreateCustomTemplateQuery, productId } = props;
-
-  const [queryTitle, setQueryTitle] = useState('');
-  const [queryEmail, setQueryEmail] = useState('');
-  const [queryFile, setQueryFile] = useState([]);
-  const [queryVideoUrl, setQueryVideoUrl] = useState('');
-  const [queryComments, setQueryComments] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [formErrors, setFormErrors] = useState({
-    title: '',
-    email: '',
-    files: '',
-    videoUrl: '',
-    comments: '',
-  });
-
-  const dispatch: AppDispatch = useDispatch();
-
-  const designerFormStates = useSelector((state: RootState) => state.templates.hireDesignerForm);
-
-  const handleTitleChange = (event: any) => {
-    const newTitle = event.target.value;
-    setQueryTitle(newTitle);
-    setFormErrors((prevErrors) => ({
-      ...prevErrors,
-      title: newTitle.trim() && '',
-    }));
-    dispatch({type: 'SET_HIRE_DESIGNER_FORM_FIELDS', payload: { queryTitle: newTitle }});
-  };
-
-  const handleEmailChange = (event: any) => {
-    const newEmail = event.target.value;
-    setQueryEmail(newEmail);
-    setFormErrors((prevErrors) => ({
-      ...prevErrors,
-      email: newEmail.trim() && '',
-    }));
-    dispatch({type: 'SET_HIRE_DESIGNER_FORM_FIELDS', payload: { queryEmail: newEmail }});
-  };
-
-  const handleVideoUrlChange = (event: any) => {
-    const newVideoUrl = event.target.value;
-    setQueryVideoUrl(newVideoUrl);
-    setFormErrors((prevErrors) => ({
-      ...prevErrors,
-      videoUrl: newVideoUrl.trim() && '',
-    }));
-    dispatch({type: 'SET_HIRE_DESIGNER_FORM_FIELDS', payload: { queryVideoUrl: newVideoUrl }});
-  };
-
-  const handleCommentsChange = (event: any) => {
-    const newComments = event.target.value;
-    setQueryComments(newComments);
-    setFormErrors((prevErrors: any) => ({
-      ...prevErrors,
-      comments: newComments.trim() && '',
-    }));
-    dispatch({type: 'SET_HIRE_DESIGNER_FORM_FIELDS', payload: { queryComments: newComments }})
-  };
-
-  const saveFilesToLocalStorage = (files: File[]) => {
-    const fileData = files.map((file) => ({
-      name: file.name,
-      type: file.type,
-      size: file.size,
-      content: "",
-    }));
-
-    files.forEach((file, index) => {
-      const reader = new FileReader();
-      reader.onload = () => {
-        fileData[index].content = reader.result as string;
-        if (index === files.length - 1) {
-          dispatch({type: 'SET_HIRE_DESIGNER_FORM_FIELDS', payload: { queryFiles: fileData }});
-        }
-      };
-      reader.readAsDataURL(file);
-    });
-  };
-
-  // Retrieve files from localStorage
-  const getFilesFromLocalStorage = () => {
-    const savedFiles =  designerFormStates.queryFiles;
-    if (!savedFiles) return [];
-    const fileData = savedFiles;
-
-    return fileData.map((file: any) => {
-      const blob = dataURLtoBlob(file.content, file.type);
-      return new File([blob], file.name, { type: file.type });
-    });
-  };
-
-  const handleFileChange = (event: any) => {
-    const newFilesArray = Array.from(event.target.files);
-    const acceptableTypes = ['image/png', 'image/jpeg', 'image/jpg', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
-  
-    const validFiles = newFilesArray.filter((file: any) => acceptableTypes.includes(file.type));
-    const invalidFiles = newFilesArray.filter((file: any) => !acceptableTypes.includes(file.type));
-  
-    if (invalidFiles.length > 0) {
-      setFormErrors((prevErrors) => ({
-        ...prevErrors,
-        files: MESSAGES.TEMPLATE.HIRE_DESIGNER.FILE_VALLIDATION,
-      }));
-      setTimeout(() => {
-        setFormErrors((prevErrors) => ({
-          ...prevErrors,
-          files: '',
-        }));
-      }, 6000);
-    } else {
-      setFormErrors((prevErrors) => ({
-        ...prevErrors,
-        files: '',
-      }));
-    }
-  
-    if (validFiles.length > 0) {
-      setQueryFile((prevFiles: any) => [...prevFiles, ...validFiles] as never[]);
-      saveFilesToLocalStorage([...queryFile, ...validFiles] as never[]);
-    }
-    event.target.value = null;
-  };
-
-  const handleFileRemove = (file: any) => {
-    const updatedFiles = queryFile.filter((f: any) => f.name !== file.name);
-    setQueryFile(updatedFiles);
-    updatedFiles.length ?
-      saveFilesToLocalStorage([...updatedFiles] as never[])
-      : dispatch({ type: 'SET_HIRE_DESIGNER_FORM_FIELDS', payload: { queryFiles: [] as never[] } });
-  };
-
-  const validateForm = (formData: any, setFormErrors: any) => {
-    const errors: any = {};
-
-    if (!formData.queryTitle.trim()) {
-      errors.title = MESSAGES.TEMPLATE.HIRE_DESIGNER.TITLE_REQUIRED;
-    }
-
-    if (!formData.queryVideoUrl.trim()) {
-      errors.videoUrl = MESSAGES.TEMPLATE.HIRE_DESIGNER.URL_REQUIRED;
-    } else if (!VIDEO_URL_REGEX.test(formData.queryVideoUrl.trim())) {
-      errors.videoUrl = MESSAGES.TEMPLATE.HIRE_DESIGNER.URL_VAIDATION;
-    }
-
-    if (!formData.queryComments.trim()) {
-      errors.comments = MESSAGES.TEMPLATE.HIRE_DESIGNER.COMMENT_REQUIRED;
-    }
-
-    if (!formData.queryEmail.trim()) {
-      errors.email = MESSAGES.TEMPLATE.HIRE_DESIGNER.EMAIL_REQUIRED;
-    } else if (!EMAIL_REGEX.test(formData.queryEmail.trim())) {
-      errors.email =  MESSAGES.TEMPLATE.HIRE_DESIGNER.EMAIL_VALIDATION;
-    }
-
-    setFormErrors(errors);
-
-    return Object.keys(errors).length === 0;
-  };
-
-  const resetForm = () => {
-    setQueryTitle('');
-    setQueryEmail('');
-    setQueryVideoUrl('');
-    setQueryFile([]);
-    setQueryComments('');
-    setFormErrors({
-      title: '',
-      email: '',
-      files: '',
-      videoUrl: '',
-      comments: '',
-    });
-    removeItem('hireDesignerFormState');
-    removeItem('queryFiles');
-    dispatch({type: 'CLEAR_HIRE_DESIGNER_FORM_FIELDS'});
-  };
-
-  const handleSubmit = async (event: any) => {
-    try {
-      event.preventDefault();
-
-      const formData = {
-        queryTitle,
-        queryVideoUrl,
-        queryComments,
-        queryFile,
-        queryEmail,
-      };
-
-      const isValid = validateForm(formData, setFormErrors);
-      if (!isValid) return;
-      setIsLoading(true);
-
-      const form = new FormData();
-      form.append('title', queryTitle);
-      form.append('comments', queryComments);
-      form.append('email', queryEmail);
-      form.append('productId', productId);
-      form.append('url', queryVideoUrl);
-
-      queryFile.forEach((file: any) => {
-        form.append('files', file);
-      });
-
-      const response: any = await post('/custom-template-queries/create', form);
-      if (response && response.status === 200) {
-        setIsLoading(false);
-        closeHireModal();
-        dispatch(success(response.data.message));
-        onCreateCustomTemplateQuery(response.data);
-      } else {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-    } catch (error) {
-      return error;
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const closeHireModal = () => {
-    onClose();
-    resetForm();
-  }
-  
-  useEffect(() => {
-    setQueryTitle(designerFormStates.queryTitle);
-    setQueryEmail(designerFormStates.queryEmail);
-    setQueryVideoUrl(designerFormStates.queryVideoUrl);
-    setQueryComments(designerFormStates.queryComments);
-    const savedFiles: any = getFilesFromLocalStorage();
-    setQueryFile(savedFiles);
-  }, [open])
-
-  return (
-    <Dialog
-      open={open}
-      customStyles={hireModalStyles}
-      handleClose={closeHireModal}
-      isGallery={true}
-      submitText="Next"
-    >
-      <div className="designerFormWrapper">
-        <Typography variant="h2">{MESSAGES.TEMPLATE.HIRE_DESIGNER.TITLE}</Typography>
-        <form className="designerForm">
-          <Input
-            type="text"
-            placeholder="Template Name"
-            label="Template Name*"
-            value={queryTitle}
-            onChange={handleTitleChange}
-            error={formErrors.title}
-          />
-          <div className={`input-layout`}>
-            <label className="basic-label">{MESSAGES.TEMPLATE.HIRE_DESIGNER.UPLOAD_HEADING}</label>
-            <div className="file-upload-wrapper">
-              <input
-                type="file"
-                onChange={handleFileChange}
-                multiple
-                accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
-                className="file-input"
-              />
-              <div className="upload-area">
-                <div className="upload-icon">
-                  <Add />
-                </div>
-                <label htmlFor="fileInput" className="upload-text">
-                  Upload a File
-                </label>{' '}
-                or drag and drop
-                <div className="upload-info">
-                  Supported formats: .png, .jpg, .jpeg, .pdf, .doc, .docx
-                </div>
-              </div>
-            </div>
-            {formErrors.files && (
-              <Typography variant="p" style={errorStyles}>
-                {formErrors.files}
-              </Typography>
-            )}
-          {queryFile.length > 0 && (
-            <div className="uploaded-files">
-              <h3>{MESSAGES.TEMPLATE.HIRE_DESIGNER.UPLOADED_TEXT}</h3>
-              {queryFile.map((file: File, index: number) => (
-                <div className="file-item" key={index}>
-                  <div className="file-icon">
-                    {file.type === 'application/pdf' ? (
-                      <PDF />
-                    ) : file.type === 'image/jpeg' ? (
-                      <JPEG />
-                    ) : file.type === 'image/png' ? (
-                      <PNG />
-                    ) : file.type === 'image/jpg' ? (
-                      <JPG />
-                    ) : file.type === 'application/msword' ? (
-                      <DOC />
-                    ) : file.type ===
-                      'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ? (
-                      <DOCX />
-                    ) : null}
-                  </div>
-                  <div className="file-details">
-                    <p className="file-name">{file.name}</p>
-                    <p className="file-size">
-                      {(file.size / (1024 * 1024)).toFixed(2)} MB
-                    </p>
-                  </div>
-                  <div
-                    className="file-remove"
-                    onClick={() => handleFileRemove(file)}
-                  >
-                    <CancelFile />
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-          </div>
-          <Input
-            type="text"
-            placeholder="https://www.example.com"
-            label="Video URL*"
-            videoTooltip={true}
-            value={queryVideoUrl}
-            onChange={handleVideoUrlChange}
-            error={formErrors.videoUrl}
-          />
-          <Input
-            type="email"
-            placeholder="Email"
-            label="Email*"
-            value={queryEmail}
-            onChange={handleEmailChange}
-            error={formErrors.email}
-          />
-          <Input
-            type="textarea"
-            placeholder="Comments"
-            label="Comments*"
-            value={queryComments}
-            onChange={handleCommentsChange}
-            error={formErrors.comments}
-          />
-        </form>
-        <div className="button-container">
-          <Button
-            onClick={handleSubmit}
-            disabled={isLoading}
-            style={hireModalButtonStyles}
-          >
-            {isLoading ? (
-              <div className="loading-container">
-                <div className="loading-icon" />
-              </div>
-            ) : (
-              'Next'
-            )}
-          </Button>
-        </div>
-      </div>
-    </Dialog>
-  );
-};
-
-export default HireDesigner;

package/src/components/SidePanel/Templates/ModalGallery/HireDesigner/styles.scss

@@ -1,180 +0,0 @@
-.designerFormWrapper {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  h2 {
-    color: var(--primary-color);
-    font-weight: 600;
-    font-size: 18px;
-    margin: 0;
-  }
-  .designerForm {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    height: 635px;
-    overflow-y: auto;
-    padding: 20px 40px 24px;
-    &::-webkit-scrollbar {
-      width: 8px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: var(--scrollbar-thumb-color) !important;
-      border-radius: 3px;
-    }
-
-    @supports not selector(::-webkit-scrollbar) {
-      body {
-        scrollbar-color: var(--scrollbar-thumb-color)
-          var(--scrollbar-track-color);
-      }
-    }
-  }
-
-  .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: var(--svg-color); /* Customize color */
-        margin-bottom: 10px;
-      }
- 
- 
-      .upload-text {
-        color: var(--primary-color); /* 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;
-        margin: 0 !important;
-      }
-    }
- 
- 
-    .file-remove {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-    }
-  }
-
-  .loading-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    .loading-icon {
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      border: 2px solid white;
-      border-top-color: transparent;
-      animation: spin 1s linear infinite;
-    }
-  }
-
-  .button-container {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    padding: 0 40px;
-  }
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}