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

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

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