kitchen-simulator 5.0.0-test.18 → 5.0.0-test.19

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

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

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

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