kitchen-simulator 5.0.0-test.7 → 5.0.0-test.8

package/src/components/toolbar/popup/savedesign/FullPictureForm.jsx

@@ -1,146 +0,0 @@
-import React from 'react';
-import {
-  Typography,
-  FormControl,
-  InputLabel,
-  Select,
-  MenuItem,
-  Button,
-  Box,
-  CircularProgress
-} from '@material-ui/core';
-import * as S from './styles';
-
-const FullPictureForm = ({ onComplete, onSkip, isLoading, initialValues }) => {
-  const [form, setForm] = React.useState(initialValues);
-
-  const handleChange = e => {
-    const { name, value } = e.target;
-    setForm(prev => ({
-      ...prev,
-      [name]: value
-    }));
-  };
-
-  return (
-    <Box position="relative">
-      {isLoading && (
-        <Box
-          position="absolute"
-          top={0}
-          left={0}
-          width="100%"
-          height="100%"
-          display="flex"
-          alignItems="center"
-          justifyContent="center"
-          zIndex={2}
-          style={{ opacity: 0.5 }}
-        >
-          <CircularProgress size={40} style={{ color: '#4C12A1' }} />
-        </Box>
-      )}
-      <form
-        style={isLoading ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
-      >
-        <FormControl
-          style={{
-            marginTop: '10px'
-          }}
-          variant="outlined"
-          fullWidth
-          margin="normal"
-        >
-          <InputLabel>What best describes you?</InputLabel>
-          <Select
-            name="userType"
-            value={form.userType}
-            onChange={handleChange}
-            label="What best describes you?"
-          >
-            <MenuItem value="">
-              <em>Select an option</em>
-            </MenuItem>
-            <MenuItem value="homeowner">Homeowner</MenuItem>
-            <MenuItem value="contractor">Contractor</MenuItem>
-            <MenuItem value="design-professional">Design Professional</MenuItem>
-            <MenuItem value="real-estate-investor">
-              Real Estate Investor
-            </MenuItem>
-            <MenuItem value="other">Other</MenuItem>
-          </Select>
-        </FormControl>
-
-        <FormControl
-          style={{
-            marginTop: '10px'
-          }}
-          variant="outlined"
-          fullWidth
-          margin="normal"
-        >
-          <InputLabel>What are you designing today?</InputLabel>
-          <Select
-            name="designType"
-            value={form.designType}
-            onChange={handleChange}
-            label="What are you designing today?"
-          >
-            <MenuItem value="">
-              <em>Select an option</em>
-            </MenuItem>
-            <MenuItem value="kitchen">Kitchen</MenuItem>
-            <MenuItem value="bathroom">Bathroom</MenuItem>
-            <MenuItem value="laundry-room">Laundry Room</MenuItem>
-            <MenuItem value="tv-room">TV Room</MenuItem>
-            <MenuItem value="bar-room">Bar Room</MenuItem>
-            <MenuItem value="office">Office</MenuItem>
-            <MenuItem value="mudroom">Mudroom</MenuItem>
-            <MenuItem value="pantry">Pantry</MenuItem>
-            <MenuItem value="closet">Closet</MenuItem>
-            <MenuItem value="garage">Garage</MenuItem>
-            <MenuItem value="outdoor-cabinetry">Outdoor Cabinetry</MenuItem>
-            <MenuItem value="other">Other</MenuItem>
-          </Select>
-        </FormControl>
-
-        <FormControl
-          style={{
-            marginTop: '10px'
-          }}
-          variant="outlined"
-          fullWidth
-          margin="normal"
-        >
-          <InputLabel>When do you plan to start your project?</InputLabel>
-          <Select
-            name="startTime"
-            value={form.startTime}
-            onChange={handleChange}
-            label="When do you plan to start your project?"
-          >
-            <MenuItem value="">
-              <em>Select an option</em>
-            </MenuItem>
-            <MenuItem value="asap">As soon as possible</MenuItem>
-            <MenuItem value="1-2-months">1–2 months</MenuItem>
-            <MenuItem value="2-4-months">2–4 months</MenuItem>
-            <MenuItem value="4-plus-months">4+ months</MenuItem>
-            <MenuItem value="other">Other</MenuItem>
-          </Select>
-        </FormControl>
-
-        <Box display="flex" justifyContent="flex-end" mt={2}>
-          <S.Button onClick={() => onSkip(form)} disabled={isLoading}>
-            Skip
-          </S.Button>
-          <S.Button onClick={() => onComplete(form)} disabled={isLoading}>
-            Complete
-          </S.Button>
-        </Box>
-      </form>
-    </Box>
-  );
-};
-
-export default FullPictureForm;

package/src/components/toolbar/popup/savedesign/index.jsx

@@ -1,495 +0,0 @@
-import React from 'react';
-import * as S from './styles';
-import {
-  DEFAULT_FONT_FAMILY,
-  PROJECT_NAME_LENGTH_LIMIT,
-  TEXT_COLOR_NEUTRAL_1,
-  TEXT_COLOR_NEUTRAL_0,
-  TEXT_COLOR_NEUTRAL_2,
-  LOCAL_STORAGE_CUSTOMER_INFO,
-  CLIENTS_NAME
-} from '../../../../constants';
-import { emailValidation } from '../../../../utils/email-validator';
-import Dialog from '@material-ui/core/Dialog';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import styled from 'styled-components';
-import SnackBar from '../../../atoms/Snackbar/index';
-import { phoneValidation } from '../../../../utils/phone-validator';
-import ls from 'localstorage-slim';
-import FullPictureForm from '../../../../../src/components/toolbar/popup/savedesign/FullPictureForm';
-
-const StyledDialog = styled(Dialog)`
-  .MuiDialog-paperWidthSm {
-    border-radius: 10px;
-    width: 480px;
-    padding: 32px;
-  }
-`;
-
-class SaveDesignPopup extends React.Component {
-  constructor(props) {
-    super(props);
-    let customerInfo = {};
-    try {
-      customerInfo = ls.get(LOCAL_STORAGE_CUSTOMER_INFO);
-    } catch (e) {
-      customerInfo = {};
-    }
-
-    const email = props.match.params.token
-      ? sessionStorage.getItem('email')
-      : customerInfo?.email;
-    const firstName = props.match.params.token
-      ? sessionStorage.getItem('firstName')
-      : customerInfo?.firstName;
-    const lastName = props.match.params.token
-      ? sessionStorage.getItem('lastName')
-      : customerInfo?.lastName;
-    this.state = {
-      email: email || '',
-      emailfocusOn: false,
-      phone: sessionStorage.getItem('phone') || '',
-      phonefocusOn: false,
-      notes: '',
-      notefocusOn: false,
-      firstName: firstName || '',
-      firstNamefocusOn: false,
-      lastNamefocusOn: false,
-      lastName: lastName || '',
-      projectNamefocusOn: false,
-      projectName: 'Untitled',
-
-      // error handling
-      pjNameLimit: false,
-      isSnackBarOpen: false,
-      snackBarMessage: '',
-      isLoading: false,
-      showFullForm: false
-    };
-
-    this.timeoutId = null;
-
-    functionBinder.call(this);
-
-    function functionBinder() {
-      this.closePanel = this.closePanel.bind(this);
-      this.projectNameChangeHandler = this.projectNameChangeHandler.bind(this);
-    }
-  }
-
-  componentWillReceiveProps(newProps) {
-    let customerInfo = {};
-    try {
-      customerInfo = ls.get(LOCAL_STORAGE_CUSTOMER_INFO);
-    } catch (e) {
-      customerInfo = {};
-    }
-
-    const email = customerInfo?.email || sessionStorage.getItem('email');
-    const phone = sessionStorage.getItem('phone');
-    const firstName =
-      customerInfo?.firstName || sessionStorage.getItem('firstName');
-    const lastName =
-      customerInfo?.lastName || sessionStorage.getItem('lastName');
-    let projectName = sessionStorage.getItem('projectTitle');
-    if (newProps.state.scene.title !== '') {
-      projectName =
-        newProps.state.scene.title || sessionStorage.getItem('projectTitle');
-    }
-
-    if (newProps.visible !== this.props.visible && newProps.visible) {
-      if (email !== null && email !== 'temp_xxx@yyy.com') {
-        this.setState({ email: email });
-      }
-      if (phone !== null) {
-        this.setState({ phone: phone });
-      }
-      if (firstName !== null) {
-        this.setState({ firstName: firstName });
-      }
-      if (lastName !== null) {
-        this.setState({ lastName: lastName });
-      }
-      if (projectName !== null) {
-        this.setState({ projectName });
-      }
-    }
-  }
-
-  closePanel() {
-    this.props.handleSaveDesign(false);
-    setTimeout(() => {
-      this.setState({
-        firstName: '',
-        lastName: '',
-        email: '',
-        projectName: '',
-        notes: '',
-        phone: '',
-        showFullForm: false
-      });
-    }, 500);
-  }
-
-  projectNameChangeHandler(e) {
-    if (e.target.value.length >= PROJECT_NAME_LENGTH_LIMIT) {
-      this.setState({ pjNameLimit: true });
-      clearTimeout(this.timeoutId);
-      this.timeoutId = setTimeout(
-        () => this.setState({ pjNameLimit: false }),
-        2000
-      );
-    } else {
-      this.setState({ projectName: e.target.value });
-    }
-  }
-
-  submitFinalData = async payload => {
-    this.setState({ isLoading: true });
-    const result = await this.props.saveProject(payload);
-    if (result?.success) {
-      this.closePanel(); // Reset state, close modal
-    }
-    this.setState({ isLoading: false });
-  };
-
-  render() {
-    let { visible } = this.props;
-    let {
-      email,
-      emailfocusOn,
-      phone,
-      phonefocusOn,
-      notes,
-      firstName,
-      firstNamefocusOn,
-      lastName,
-      lastNamefocusOn,
-      projectName,
-      projectNamefocusOn,
-      notefocusOn,
-      isLoading
-    } = this.state;
-
-    const initialFullFormValues = {
-      userType: sessionStorage.getItem('user_type') || '',
-      designType: sessionStorage.getItem('project_type') || '',
-      startTime: sessionStorage.getItem('project_timeline') || ''
-    };
-
-    const visualizerName = sessionStorage.getItem('visualizerName');
-
-    if (this.state.showFullForm) {
-      return (
-        <StyledDialog
-          open={visible}
-          onClose={!isLoading ? this.closePanel.bind(this) : undefined}
-        >
-          <SnackBar
-            isOpen={this.state.isSnackBarOpen}
-            message={this.state.snackBarMessage}
-            handleClose={() =>
-              this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
-            }
-          />
-          <S.DialogTitle>Give Us the Full Picture</S.DialogTitle>
-          <S.DialogContent>
-            <div>
-              <b>Thanks for saving your project!</b>
-            </div>
-            <br />
-            <div>
-              Sharing a few details helps us guide you based on your goals and
-              experience.
-            </div>
-          </S.DialogContent>
-          <S.DialogContentSelection>
-            <FullPictureForm
-              isLoading={isLoading}
-              initialValues={initialFullFormValues}
-              onComplete={extraFormData => {
-                sessionStorage.setItem('user_type', extraFormData.userType);
-                sessionStorage.setItem(
-                  'project_type',
-                  extraFormData.designType
-                );
-                sessionStorage.setItem(
-                  'project_timeline',
-                  extraFormData.startTime
-                );
-
-                const payload = {
-                  ...this.state,
-                  user_type: extraFormData.userType,
-                  project_type: extraFormData.designType,
-                  project_timeline: extraFormData.startTime,
-                  ...extraFormData
-                };
-                this.submitFinalData(payload);
-              }}
-              onSkip={extraFormData => {
-                const payload = {
-                  ...this.state,
-                  user_type: extraFormData.userType,
-                  project_type: extraFormData.designType,
-                  project_timeline: extraFormData.startTime,
-                  ...extraFormData
-                };
-                this.submitFinalData(payload);
-              }}
-            />
-          </S.DialogContentSelection>
-        </StyledDialog>
-      );
-    }
-
-    return (
-      <StyledDialog
-        open={visible}
-        onClose={!isLoading ? this.closePanel.bind(this) : undefined}
-      >
-        <SnackBar
-          isOpen={this.state.isSnackBarOpen}
-          message={this.state.snackBarMessage}
-          handleClose={() =>
-            this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
-          }
-        />
-        <S.DialogTitle>Save your project</S.DialogTitle>
-        <S.DialogContent>
-          Save your project in order to request Designer Assistance and/or Add
-          to Cart, and to be able to access it later via the email link.
-        </S.DialogContent>
-        <S.DialogContentSelection>
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: '1rem'
-            }}
-          >
-            <S.StyledInputWrapper>
-              <S.StyledInput
-                id="first_name_input"
-                value={firstName}
-                onChange={e => this.setState({ firstName: e.target.value })}
-                onFocus={e => this.setState({ firstNamefocusOn: true })}
-                onBlur={e => this.setState({ firstNamefocusOn: false })}
-                placeholder={
-                  firstNamefocusOn ? 'Enter first name' : 'First name'
-                }
-                required
-              ></S.StyledInput>
-              {(firstNamefocusOn || !!firstName.length) && (
-                <S.StyledInputHeadLabel
-                  style={{ color: !firstNamefocusOn && TEXT_COLOR_NEUTRAL_2 }}
-                >
-                  First Name
-                </S.StyledInputHeadLabel>
-              )}
-              {!!firstName.length && (
-                <S.PlusImage
-                  maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
-                  onClick={() => this.setState({ firstName: '' })}
-                />
-              )}
-            </S.StyledInputWrapper>
-            <S.StyledInputWrapper>
-              <S.StyledInput
-                value={lastName}
-                onChange={e => this.setState({ lastName: e.target.value })}
-                onFocus={e => this.setState({ lastNamefocusOn: true })}
-                onBlur={e => this.setState({ lastNamefocusOn: false })}
-                placeholder={lastNamefocusOn ? 'Enter last name' : 'Last name'}
-                required
-              />
-              {(lastNamefocusOn || !!lastName.length) && (
-                <S.StyledInputHeadLabel
-                  style={{ color: !lastNamefocusOn && TEXT_COLOR_NEUTRAL_2 }}
-                >
-                  Last Name
-                </S.StyledInputHeadLabel>
-              )}
-              {!!lastName.length && (
-                <S.PlusImage
-                  maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
-                  onClick={() => this.setState({ lastName: '' })}
-                />
-              )}
-            </S.StyledInputWrapper>
-          </div>
-          <S.StyledInputWrapper>
-            <S.StyledInput
-              value={email}
-              onChange={e => this.setState({ email: e.target.value })}
-              onFocus={e => this.setState({ emailfocusOn: true })}
-              onBlur={e => this.setState({ emailfocusOn: false })}
-              placeholder={
-                emailfocusOn ? 'Enter email address' : 'Email Address'
-              }
-              required
-            />
-            {(emailfocusOn || !!email.length) && (
-              <S.StyledInputHeadLabel
-                style={{ color: !emailfocusOn && TEXT_COLOR_NEUTRAL_2 }}
-              >
-                Email Address
-              </S.StyledInputHeadLabel>
-            )}
-            {!!email.length && (
-              <S.PlusImage
-                maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
-                onClick={() => this.setState({ email: '' })}
-              />
-            )}
-          </S.StyledInputWrapper>
-          <S.StyledInputWrapper>
-            <S.StyledInput
-              value={phone}
-              onChange={e => {
-                this.setState({ phone: e.target.value });
-              }}
-              onFocus={e => this.setState({ phonefocusOn: true })}
-              onBlur={e => this.setState({ phonefocusOn: false })}
-              maxLength={50}
-              placeholder={phonefocusOn ? 'Enter phone number' : 'Phone Number'}
-              required
-            />
-            {(phonefocusOn || !!phone.length) && (
-              <S.StyledInputHeadLabel
-                style={{ color: !phonefocusOn && TEXT_COLOR_NEUTRAL_2 }}
-              >
-                Phone Number
-              </S.StyledInputHeadLabel>
-            )}
-            {!!phone.length && (
-              <S.PlusImage
-                maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
-                onClick={() => this.setState({ phone: '' })}
-              />
-            )}
-          </S.StyledInputWrapper>
-          <S.StyledInputWrapper>
-            <S.StyledInput
-              style={{ fontWeight: 700, color: TEXT_COLOR_NEUTRAL_0 }}
-              value={projectName}
-              onChange={e => this.setState({ projectName: e.target.value })}
-              onFocus={e => this.setState({ projectNamefocusOn: true })}
-              onBlur={e => this.setState({ projectNamefocusOn: false })}
-              placeholder={
-                projectNamefocusOn ? 'Enter project name' : 'Project Name'
-              }
-              required
-            />
-            {(projectNamefocusOn || !!projectName.length) && (
-              <S.StyledInputHeadLabel
-                style={{ color: !projectNamefocusOn && TEXT_COLOR_NEUTRAL_2 }}
-              >
-                Project Name
-              </S.StyledInputHeadLabel>
-            )}
-            {!!projectName.length && (
-              <S.PlusImage
-                maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
-                onClick={() => this.setState({ projectName: '' })}
-              />
-            )}
-          </S.StyledInputWrapper>
-          <div style={{ width: '100%', marginTop: 10, display: 'none' }}>
-            <S.StyledInputWrapper>
-              <S.DialogTextArea
-                value={notes}
-                maxLength={200}
-                onFocus={e => this.setState({ notefocusOn: true })}
-                onBlur={e => this.setState({ notefocusOn: false })}
-                placeholder={notefocusOn ? 'Input' : 'Notes (optional)'}
-                onChange={e => this.setState({ notes: e.target.value })}
-              />
-              {(notefocusOn || !!notes.length) && (
-                <S.StyledInputHeadLabel
-                  style={{
-                    color: !notefocusOn && TEXT_COLOR_NEUTRAL_2,
-                    left: 7
-                  }}
-                >
-                  Notes (optional)
-                </S.StyledInputHeadLabel>
-              )}
-            </S.StyledInputWrapper>
-            <span
-              style={{
-                fontFamily: DEFAULT_FONT_FAMILY,
-                fontSize: 13,
-                color: TEXT_COLOR_NEUTRAL_1,
-                float: 'right',
-                lineHeight: '18px',
-                fontWeight: 400
-              }}
-            >
-              {notes.length}/200 characters
-            </span>
-          </div>
-          <span
-            style={{
-              fontFamily: DEFAULT_FONT_FAMILY,
-              fontSize: 12,
-              color: TEXT_COLOR_NEUTRAL_1,
-              lineHeight: '16px',
-              marginTop: 10
-            }}
-          >
-            {`By entering your email, you agree to receive marketing
-            communications from ${CLIENTS_NAME[visualizerName]}. We respect your privacy and
-            will never share your information with third parties. You can
-            unsubscribe at any time.`}
-          </span>
-        </S.DialogContentSelection>
-        <S.DialogAction>
-          <S.Button onClick={() => this.closePanel()}>Cancel</S.Button>
-          <S.Button
-            style={{
-              marginRight: 0
-            }}
-            onClick={() => {
-              const { firstName, lastName, email, projectName, phone } =
-                this.state;
-              if (
-                firstName === '' ||
-                lastName === '' ||
-                email === '' ||
-                projectName === '' ||
-                !emailValidation(email) ||
-                phone === '' ||
-                !phoneValidation(phone) ||
-                projectName.trim() === '' ||
-                firstName.trim() === '' ||
-                lastName.trim() === ''
-              ) {
-                let msg;
-                if (firstName === '' || firstName.trim() === '')
-                  msg = 'Type your first name';
-                else if (lastName === '' || lastName.trim() === '')
-                  msg = 'Type your last name';
-                else if (email === '') msg = 'Type your email address';
-                else if (phone === '') msg = 'Type your phone number';
-                else if (projectName === '' || projectName.trim() === '')
-                  msg = 'Type your project name';
-                else if (!emailValidation(email))
-                  msg = 'Type your valid email address';
-                else if (!phoneValidation(phone)) msg = 'Type your valid phone';
-                this.setState({ isSnackBarOpen: true, snackBarMessage: msg });
-                return;
-              }
-
-              this.setState({ showFullForm: true });
-            }}
-          >
-            {isLoading ? <CircularProgress size={20} /> : 'Save'}
-          </S.Button>
-        </S.DialogAction>
-      </StyledDialog>
-    );
-  }
-}
-
-export default SaveDesignPopup;

package/src/components/toolbar/popup/savedesign/savedesign.style.css

@@ -1,16 +0,0 @@
-.savedesign-row {
-  position: relative;
-  padding-top: 20px;
-  width: 360px;
-}
-
-.savedesign-warning {
-  word-break: keep-all;
-  margin-top: 3px;
-  color: #ff7373;
-  font-size: 11px;
-  padding-right: 3px;
-  position: absolute;
-  right: 0px;
-  top: 40px;
-}