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

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

@@ -0,0 +1,698 @@
+import React from 'react';
+import * as S from './styles';
+import './styles.css';
+import { withStyles } from '@material-ui/core/styles';
+import { emailValidation } from '../../../../utils/email-validator';
+import {
+  SECONDARY_PURPLE_COLOR,
+  TEXT_COLOR_NEUTRAL_1,
+  DEFAULT_FONT_FAMILY,
+  TEXT_COLOR_NEUTRAL_2,
+  BG_COLOR_1,
+  SUBMIT_REQUEST_ASSIST,
+  SUBMIT_ADD_CART,
+  LOCAL_STORAGE_CUSTOMER_INFO
+} from '../../../../constants';
+import Dialog from '@material-ui/core/Dialog';
+import styled from 'styled-components';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import SnackBar from '../../../atoms/Snackbar/index';
+import { phoneValidation } from '../../../../utils/phone-validator';
+import CartChoice from '../../../../../src/components/toolbar/popup/submitforquote/cart-choice';
+import CustomerRequestsForm from './CustomerRequestsForm';
+import { Box } from '@material-ui/core';
+import AddToCartOptions from '../../../../../src/components/toolbar/popup/submitforquote/AddToCartOptions';
+import SkipDesignerReview from '../../../../../src/components/toolbar/popup/submitforquote/SkipDesignerReview';
+import { StepDots } from './StepDots';
+
+const StyledDialog = styled(Dialog)`
+  .MuiDialog-paperWidthSm {
+    border-radius: 10px;
+    width: 480px;
+    padding: 32px;
+  }
+`;
+
+const StyledMuiCheckbox = withStyles({
+  root: {
+    color: TEXT_COLOR_NEUTRAL_2,
+    '&$checked': {
+      color: SECONDARY_PURPLE_COLOR
+    }
+  },
+  checked: {}
+})(props => <Checkbox color="default" {...props} />);
+
+const DialogContents = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  padding: 10px 0px;
+
+  @media screen and (min-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (max-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (min-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (max-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (min-width: 1440) {
+    font-size: 16px;
+  }
+  @media screen and (max-width: 1440) {
+    font-size: 16px;
+  }
+  font-weight: 400;
+  line-height: 18px;
+  text-align: left;
+`;
+class SubmitForQuotePopup extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const email = sessionStorage.getItem('email');
+    const phone = sessionStorage.getItem('phone');
+
+    this.state = {
+      email,
+      emailfocusOn: false,
+      phone,
+      phonefocusOn: false,
+      notes: '',
+      notesFocusOn: false,
+
+      check: 'email',
+      error: false,
+
+      // // For Door Styles
+      // selectedDoorCategory: '',
+      // selectedDoorColor: 0
+
+      //For question
+      isSnackBarOpen: false,
+      snackBarMessage: '',
+      phoneCall: false,
+      phoneSMS: false,
+      isLoading: false,
+      customer_requests: {
+        reviewOptions: [],
+        notes: '',
+        expressCheckout: false
+      },
+      step: 0
+    };
+  }
+
+  setEmailAndPhone() {
+    const email = sessionStorage.getItem('email');
+    const phone = sessionStorage.getItem('phone');
+    if (email !== null && email !== 'temp_xxx@yyy.com') {
+      this.setState({ email });
+    }
+    if (phone !== null) {
+      this.setState({ phone });
+    }
+  }
+
+  componentDidMount() {
+    this.setEmailAndPhone();
+  }
+
+  /**
+   * Get door information
+   * @param {{success:boolean,data}} categoryData Category data from server
+   * @param {number} doorColorId Door color id
+   * @returns {[selectedDoorCategory,selectedDoorStyle,selectedDoorColor,selectedDoorColorItem]} Door tree information
+   */
+  getDoorInfo(categoryData, doorColorId) {
+    if (categoryData.success) {
+      let {
+        data: { doorStyles: doorStyleProp }
+      } = categoryData;
+
+      // According to door style id
+      // Find out the name of door category & door style
+      let styleItem = null;
+      let colorItem = null;
+      let categoryItem = doorStyleProp.items.find(category => {
+        let tempStyleItem = category.items.find(style => {
+          let item = style.items.find(it => it.id === doorColorId);
+          if (item) {
+            colorItem = item;
+            return true;
+          } else {
+            return false;
+          }
+        });
+        if (tempStyleItem) {
+          styleItem = tempStyleItem;
+        }
+        return !!tempStyleItem;
+      });
+
+      if (!categoryItem) {
+        return null;
+      }
+
+      return [categoryItem.name, styleItem.name, doorColorId, colorItem];
+    }
+    return null;
+  }
+
+  componentWillReceiveProps(newProps) {
+    // When visible
+    if (newProps.visible && !this.props.visible) {
+      this.setEmailAndPhone();
+      this.setState({ error: false });
+    }
+
+    // Check for curDoorStyle change
+    if (
+      this.props.curDoorStyle !== newProps.curDoorStyle &&
+      newProps.curDoorStyle !== null
+    ) {
+      if (newProps.curDoorStyle !== undefined) {
+        let doorColorId =
+          newProps.curDoorStyle.id !== undefined
+            ? newProps.curDoorStyle.id
+            : newProps.curDoorStyle.get('id');
+        let { categoryData } = this.props;
+        let info = this.getDoorInfo(categoryData, doorColorId);
+        if (info)
+          this.setState({
+            selectedDoorCategory: info[0],
+            selectedDoorColor: info[2]
+          });
+      }
+    }
+  }
+
+  async _submit() {
+    const {
+      email,
+      phone,
+      check,
+      selectedDoorCategory,
+      selectedDoorColor,
+      notes,
+      phoneCall,
+      phoneSMS
+    } = this.state;
+    let info = this.getDoorInfo(this.props.categoryData, selectedDoorColor);
+    let colorItem = info[3];
+    let selectedDoorStyle = info[1];
+
+    if (check === '') {
+      this.setState({
+        snackBarMessage: 'Please select a preferred contact method.',
+        isSnackBarOpen: true
+      });
+      return;
+    }
+
+    if (
+      (email === '' && check === 'email') ||
+      (!emailValidation(email) && check === 'email') ||
+      (phone === '' && check === 'phone') ||
+      (!phoneValidation(phone) && check === 'phone')
+    ) {
+      let msg;
+      if (email === '' && check === 'email') msg = 'Type your email address';
+      else if (phone === '' && check === 'phone')
+        msg = 'Type your phone number';
+      else if (!emailValidation(email) && check === 'email')
+        msg = 'Type your valid email address';
+      else if (!phoneValidation(phone) && check === 'phone')
+        msg = 'Type your valid phone';
+      this.setState({ snackBarMessage: msg, isSnackBarOpen: true });
+      return;
+    }
+
+    let contact_preference = 'Email';
+    if (check === 'phone') {
+      if (phoneCall) {
+        contact_preference = 'Call';
+      } else if (phoneSMS) {
+        contact_preference = 'Text/SMS';
+      }
+    }
+
+    if (this) {
+      this.setState({ isLoading: true });
+      const rlt = await this.props.submitForQuote({
+        email,
+        phone,
+        check,
+        contact_preference,
+        firstName: sessionStorage.getItem('firstName'),
+        lastName: sessionStorage.getItem('lastName'),
+        products: JSON.parse(sessionStorage.getItem('usedObjects')),
+        selectedDoorCategory,
+        selectedDoorColor: `${colorItem.name}/${colorItem.thumbnail}`,
+        selectedDoorStyle,
+        customer_requests: this.state.customer_requests,
+        flag: this.props.submitType
+      });
+      if (rlt?.success) {
+        this.closePanel();
+      }
+      this.setState({ isLoading: false });
+    }
+  }
+
+  closePanel() {
+    this.setState({
+      step: 0
+    });
+    this.props.handleSubmitForQuote(false);
+  }
+  handleEmailChange(e) {
+    this.setState({ email: e.target.value });
+  }
+  handleCheckChange(event) {
+    this.setState({ [event.target.value]: event.target.checked });
+  }
+
+  render() {
+    let { visible, submitType } = this.props;
+    const {
+      email,
+      emailfocusOn,
+      phone,
+      phonefocusOn,
+      check,
+      phoneSMS,
+      phoneCall,
+      isLoading
+    } = this.state;
+
+    const updatePhoneSectionOnFocusHandler = () => {
+      this.setState(prevState => {
+        let newPhoneCall = prevState.phoneCall;
+        let newPhoneSMS = prevState.phoneSMS;
+        if (!prevState.phoneCall && !prevState.phoneSMS) {
+          newPhoneCall = true;
+          newPhoneSMS = false;
+        }
+
+        return {
+          phonefocusOn: true,
+          check: 'phone',
+          phoneCall: newPhoneCall,
+          phoneSMS: newPhoneSMS
+        };
+      });
+    };
+
+    const updatePhoneReceiveMethodHandler = (callClicked = true) => {
+      this.setState(prevState => {
+        let newPhoneCall = prevState.phoneCall;
+        let newPhoneSMS = prevState.phoneSMS;
+
+        if (callClicked) {
+          newPhoneCall = !newPhoneCall;
+          newPhoneSMS = !newPhoneCall;
+        } else {
+          newPhoneSMS = !newPhoneSMS;
+          newPhoneCall = !newPhoneSMS;
+        }
+
+        return {
+          phoneCall: newPhoneCall,
+          phoneSMS: newPhoneSMS,
+          check: 'phone'
+        };
+      });
+    };
+
+    if (this.state.step === 0 && submitType === SUBMIT_REQUEST_ASSIST) {
+      return (
+        <StyledDialog open={visible} onClose={() => this.closePanel()}>
+          <SnackBar
+            isOpen={this.state.isSnackBarOpen}
+            message={this.state.snackBarMessage}
+            handleClose={() =>
+              this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
+            }
+          />
+          <S.DialogTitle>Request Designer Assistance</S.DialogTitle>
+          <S.DialogContent>
+            <div
+              style={{
+                marginBottom: '2rem'
+              }}
+            >
+              We’re here to help! Tell us a bit more so our designers can assist
+              you quickly and accurately.
+            </div>
+            <div style={{ marginBottom: '10px' }}>
+              <b>* What do you need help with? </b>(select all that apply)
+            </div>
+          </S.DialogContent>
+          <S.DialogContentSelection>
+            {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>
+            )}
+
+            <CustomerRequestsForm
+              currentStep={this.state.step}
+              onStepChange={stepNumber => {
+                this.setState({ step: stepNumber });
+              }}
+              onCancel={() => this.closePanel()}
+              onSubmit={result => {
+                this.setState({ step: 1, customer_requests: result });
+              }}
+            />
+          </S.DialogContentSelection>
+        </StyledDialog>
+      );
+    }
+
+    if (this.state.step === 0 && submitType === SUBMIT_ADD_CART) {
+      return (
+        <StyledDialog open={visible} onClose={this.closePanel.bind(this)}>
+          <SnackBar
+            isOpen={this.state.isSnackBarOpen}
+            message={this.state.snackBarMessage}
+            handleClose={() =>
+              this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
+            }
+          />
+          <S.DialogTitle>Add to Cart</S.DialogTitle>
+          <S.DialogContent
+            style={{
+              paddingTop: 0,
+              paddingBottom: 0,
+              lineHeight: '21px',
+              marginBottom: '2rem'
+            }}
+          >
+            <>
+              Once you submit, one of our designers will review your project for
+              accuracy, check for issues, and help ensure your quote is
+              complete.
+            </>
+          </S.DialogContent>
+          <S.DialogContentSelection>
+            <CartChoice accessToken={this.props.accessToken} />
+            <AddToCartOptions
+              currentStep={this.state.currentStep}
+              onStepChange={stepNumber => {
+                this.setState({ step: stepNumber });
+              }}
+              onCancel={() => this.closePanel()}
+              onSubmit={result => {
+                if (
+                  !result.notes &&
+                  !result.reviewOptions.length &&
+                  !result.expressCheckout
+                ) {
+                  this.setState({
+                    snackBarMessage: 'Please choose an option.',
+                    isSnackBarOpen: true
+                  });
+                } else {
+                  this.setState({ step: 1, customer_requests: result });
+                }
+              }}
+            />
+          </S.DialogContentSelection>
+        </StyledDialog>
+      );
+    }
+
+    if (this.state.customer_requests?.expressCheckout) {
+      return (
+        <StyledDialog open={visible} onClose={this.closePanel.bind(this)}>
+          {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>
+          )}
+          <SnackBar
+            isOpen={this.state.isSnackBarOpen}
+            message={this.state.snackBarMessage}
+            handleClose={() =>
+              this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
+            }
+          />
+          <S.DialogTitle>Skip Designer Review?</S.DialogTitle>
+          <S.DialogContent>
+            <SkipDesignerReview
+              currentStep={this.state.step}
+              onStepChange={stepNumber => {
+                this.setState({ step: stepNumber });
+              }}
+              onBack={() => {
+                this.setState({ step: 0 });
+              }}
+              onProceed={this._submit.bind(this)}
+            />
+          </S.DialogContent>
+        </StyledDialog>
+      );
+    }
+
+    return (
+      <StyledDialog open={visible} onClose={this.closePanel.bind(this)}>
+        {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>
+        )}
+        <SnackBar
+          isOpen={this.state.isSnackBarOpen}
+          message={this.state.snackBarMessage}
+          handleClose={() =>
+            this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
+          }
+        />
+        <S.DialogTitle>Request Designer Assistance</S.DialogTitle>
+        <S.DialogContent
+          style={{
+            paddingTop: 0,
+            paddingBottom: 0,
+            fontSize: 14,
+            lineHeight: '21px',
+            marginBottom: '2rem'
+          }}
+        >
+          What is the best way to reach you for the next steps?
+          <br />
+        </S.DialogContent>
+        <S.DialogContentSelection>
+          <S.StyledInputWrapper>
+            <S.StyledCheck
+              style={{
+                color: check === 'email' && SECONDARY_PURPLE_COLOR,
+                backgroundColor:
+                  check === 'email' ? SECONDARY_PURPLE_COLOR : BG_COLOR_1
+              }}
+              onClick={() =>
+                this.setState({
+                  check: 'email',
+                  phoneCall: false,
+                  phoneSMS: false
+                })
+              }
+            />
+            <S.StyledInput
+              style={{ cursor: check !== 'email' && 'pointer' }}
+              value={email}
+              // onClick={() => this.setState({emailCheck: true})}
+              onChange={e => this.setState({ email: e.target.value })}
+              onFocus={e =>
+                this.setState({
+                  emailfocusOn: true,
+                  check: 'email',
+                  phoneCall: false,
+                  phoneSMS: false
+                })
+              }
+              onBlur={e => this.setState({ emailfocusOn: false })}
+              required
+              // disabled={!emailCheck}
+            />
+            {!emailfocusOn && !!!email.length && (
+              <S.StyledInputLabel
+                style={{
+                  cursor: check !== 'email' && 'no-drop',
+                  pointerEvents: 'none'
+                }}
+              >
+                Email Address
+              </S.StyledInputLabel>
+            )}
+            {(emailfocusOn || !!email.length) && (
+              <S.StyledInputHeadLabel
+                style={{ color: !emailfocusOn && TEXT_COLOR_NEUTRAL_2 }}
+              >
+                Email Address
+              </S.StyledInputHeadLabel>
+            )}
+            {emailfocusOn && !!!email.length && (
+              <S.StyledInputLabel>Enter email address</S.StyledInputLabel>
+            )}
+            {!!email.length && (
+              <S.PlusImage
+                maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
+                onClick={() => this.setState({ email: '' })}
+              />
+            )}
+          </S.StyledInputWrapper>
+          <S.StyledInputWrapper>
+            <S.StyledCheck
+              style={{
+                color: check === 'phone' && SECONDARY_PURPLE_COLOR,
+                backgroundColor:
+                  check === 'phone' ? SECONDARY_PURPLE_COLOR : BG_COLOR_1
+              }}
+              onClick={updatePhoneSectionOnFocusHandler}
+            />
+            <S.StyledInput
+              style={{ cursor: check !== 'phone' && 'pointer' }}
+              value={phone}
+              onChange={e => this.setState({ phone: e.target.value })}
+              onFocus={updatePhoneSectionOnFocusHandler}
+              onBlur={e => this.setState({ phonefocusOn: false })}
+              maxLength={50}
+              required
+            />
+            {!phonefocusOn && !!!phone.length && (
+              <S.StyledInputLabel
+                style={{
+                  cursor: check !== 'phone' && 'no-drop',
+                  pointerEvents: 'none'
+                }}
+              >
+                Phone
+              </S.StyledInputLabel>
+            )}
+            {(phonefocusOn || !!phone.length) && (
+              <S.StyledInputHeadLabel
+                style={{ color: !phonefocusOn && TEXT_COLOR_NEUTRAL_2 }}
+              >
+                Phone
+              </S.StyledInputHeadLabel>
+            )}
+            {phonefocusOn && !!!phone.length && (
+              <S.StyledInputLabel>Enter phone number</S.StyledInputLabel>
+            )}
+            {!!phone.length && (
+              <S.PlusImage
+                maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
+                onClick={() => this.setState({ phone: '' })}
+              />
+            )}
+          </S.StyledInputWrapper>
+          <S.StyledPhoneMethod style={{ paddingLeft: '30px' }}>
+            <span style={{ paddingRight: '10px' }}>Method: </span>
+            <FormControlLabel
+              style={{ alignItems: 'flex-start' }}
+              margin-left="10px"
+              control={
+                <StyledMuiCheckbox
+                  style={{ padding: 'unset', margin: '0 5px' }}
+                  checked={phoneCall}
+                  onChange={() => updatePhoneReceiveMethodHandler(true)}
+                  value={phoneCall}
+                />
+              }
+              label={<S.DialogContents> Call </S.DialogContents>}
+            />
+            <span style={{ paddingRight: '18px' }}> or </span>
+            <FormControlLabel
+              style={{ alignItems: 'flex-start' }}
+              margin-left="10px"
+              control={
+                <StyledMuiCheckbox
+                  style={{ padding: 'unset', margin: '0 5px' }}
+                  checked={phoneSMS}
+                  onChange={() => updatePhoneReceiveMethodHandler(false)}
+                  value={phoneSMS}
+                />
+              }
+              label={<S.DialogContents> Text/SMS </S.DialogContents>}
+            />
+          </S.StyledPhoneMethod>
+        </S.DialogContentSelection>
+
+        <S.DialogAction>
+          <StepDots
+            currentStep={this.state.step}
+            onStepChange={stepNumber => {
+              this.setState({ step: stepNumber });
+            }}
+          />
+
+          <S.Button
+            onClick={() =>
+              this.setState({
+                step: 0,
+                customer_requests: {
+                  reviewOptions: [],
+                  notes: '',
+                  expressCheckout: false
+                }
+              })
+            }
+          >
+            Back
+          </S.Button>
+          <S.Button
+            style={{
+              marginRight: 0
+            }}
+            onClick={this._submit.bind(this)}
+          >
+            Send
+          </S.Button>
+        </S.DialogAction>
+      </StyledDialog>
+    );
+  }
+}
+
+export default SubmitForQuotePopup;