kitchen-simulator 5.0.0-test.5 → 5.0.0-test.6

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/styles.js

@@ -0,0 +1,151 @@
+import styled from 'styled-components';
+import {
+  BG_COLOR_1,
+  BG_COLOR_HOVER,
+  DEFAULT_FONT_FAMILY,
+  SECONDARY_PURPLE_COLOR,
+  TEXT_COLOR_NEUTRAL_1,
+  TEXT_COLOR_NEUTRAL_2,
+  TEXT_COLOR_NEUTRAL_3
+} from '../../../../constants';
+
+export const DialogTitle = styled.span`
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 30px;
+  text-align: left;
+  margin-bottom: 1rem;
+`;
+
+export const DialogContent = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 18px;
+  text-align: left;
+  width: 100%;
+  margin-bottom: 32px;
+`;
+
+export const DialogContents = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  padding: 10px 0px;
+  font-size: 14px;
+`;
+
+export const DialogContentSelection = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 300px);
+  overflow-y: scroll;
+`;
+
+export const DialogAction = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 2rem;
+`;
+
+export const Button = styled.div`
+  padding: 10px 20px;
+  cursor: pointer;
+  margin-right: 10px;
+  color: ${SECONDARY_PURPLE_COLOR};
+  font-weight: bold;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 16px;
+  border-radius: 20px;
+  :hover {
+    background-color: ${BG_COLOR_HOVER};
+  }
+`;
+
+export const DialogTextArea = styled.textarea`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 22px;
+  text-align: left;
+  padding: 10px;
+  resize: none;
+  height: 140px;
+  width: 100%;
+  outline: 0;
+  border-radius: 5px;
+  :hover {
+    border: 2px solid ${SECONDARY_PURPLE_COLOR};
+  }
+  :focus {
+    border: 2px solid ${SECONDARY_PURPLE_COLOR};
+  }
+`;
+
+export const StyledInputWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin: 10px 0px;
+`;
+
+export const PlusImage = styled.img`
+  position: absolute;
+  height: 25px;
+  width: 25px;
+  transform: rotate(45deg);
+  right: 10px;
+  cursor: pointer;
+  background-color: ${TEXT_COLOR_NEUTRAL_3};
+  -webkit-mask-image: url(${props => props.maskImage + '?nocache=2025'});
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+`;
+
+export const StyledInput = styled.input`
+  width: 100%;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 22px;
+  height: 44px;
+  text-align: left;
+  padding: 10px;
+  color: ${TEXT_COLOR_NEUTRAL_2};
+  border: 1px solid;
+  border-radius: 5px;
+  outline: 0;
+  :focus {
+    border: 2px solid ${SECONDARY_PURPLE_COLOR};
+  }
+  :hover {
+    border: 2px solid ${SECONDARY_PURPLE_COLOR};
+  }
+`;
+
+export const StyledInputLabel = styled.span`
+  font-size: 16px;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-weight: 400;
+  line-height: 22px;
+  text-align: left;
+  position: absolute;
+  left: 12px;
+  color: ${TEXT_COLOR_NEUTRAL_2};
+`;
+
+export const StyledInputHeadLabel = styled.span`
+  font-size: 12px;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-weight: 400;
+  line-height: 18px;
+  text-align: left;
+  position: absolute;
+  left: 12px;
+  top: -9px;
+  background-color: ${BG_COLOR_1};
+  padding: 0px 7px;
+  color: ${SECONDARY_PURPLE_COLOR};
+`;