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

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

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

@@ -0,0 +1,180 @@
+.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);
+  }
+}