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

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

@@ -1,192 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import {
-  Box,
-  Typography,
-  FormGroup,
-  FormControlLabel,
-  Checkbox,
-  TextField,
-  Divider,
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-  Radio
-} from '@material-ui/core';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import * as S from './styles';
-import { StepDots } from './StepDots';
-
-const REVIEW_OPTIONS = [
-  'Validate my design for accuracy',
-  'Confirm door style and finish',
-  'Optimize layout for better space usage',
-  'Identify potential cost savings',
-  'Confirm availability and lead times',
-  'Review for any installation concerns',
-  'Suggest matching accessories (e.g. moldings, fillers, organizers)',
-  'Check compatibility with appliances or plumbing',
-  'Provide professional recommendations'
-];
-
-const AddToCartOptions = ({
-  onSubmit,
-  onCancel,
-  currentStep,
-  onStepChange
-}) => {
-  const [expanded, setExpanded] = useState('review'); // keep default open
-  const [selected, setSelected] = useState([]);
-  const [notes, setNotes] = useState('');
-  const [skipReview, setSkipReview] = useState(false);
-
-  const handlePanelToggle = panel => (_e, isExpanded) => {
-    setExpanded(isExpanded ? panel : '');
-  };
-
-  const handleToggle = option => () => {
-    setSkipReview(false);
-    setSelected(prev =>
-      prev.includes(option) ? prev.filter(v => v !== option) : [...prev, option]
-    );
-  };
-
-  const payload = useMemo(
-    () => ({
-      reviewOptions: selected,
-      notes: notes.trim(),
-      expressCheckout: skipReview
-    }),
-    [selected, notes, skipReview]
-  );
-
-  const handleSubmit = () => {
-    if (onSubmit) onSubmit(payload);
-  };
-
-  return (
-    <Box>
-      <Divider />
-      <Box
-        style={{
-          maxHeight: '100%',
-          overflowX: 'auto'
-        }}
-      >
-        <Accordion
-          elevation={0}
-          expanded={expanded.includes('review')}
-          onChange={handlePanelToggle('review')}
-        >
-          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-            <Typography
-              style={{
-                color: 'rgb(67, 77, 99)'
-              }}
-              variant="h6"
-            >
-              Submit options
-            </Typography>
-          </AccordionSummary>
-          <AccordionDetails
-            style={{
-              padding: 0
-            }}
-          >
-            <FormGroup>
-              {REVIEW_OPTIONS.map(option => (
-                <FormControlLabel
-                  key={option}
-                  control={
-                    <Checkbox
-                      color="primary"
-                      checked={selected.includes(option)}
-                      onChange={handleToggle(option)}
-                    />
-                  }
-                  label={option}
-                />
-              ))}
-            </FormGroup>
-          </AccordionDetails>
-        </Accordion>
-        <Accordion
-          elevation={0}
-          expanded={expanded.includes('others')}
-          onChange={handlePanelToggle('others')}
-        >
-          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-            <Typography
-              style={{
-                color: 'rgb(67, 77, 99)'
-              }}
-              variant="h6"
-            >
-              Others (review notes)
-            </Typography>
-          </AccordionSummary>
-          <AccordionDetails
-            style={{
-              padding: 0
-            }}
-          >
-            <TextField
-              label="Add any additional notes"
-              placeholder="e.g., special instructions or edge cases"
-              value={notes}
-              onChange={e => {
-                if (e.target.value) {
-                  setSkipReview(false);
-                }
-                setNotes(e.target.value);
-              }}
-              fullWidth
-              multiline
-              rows={3}
-              variant="outlined"
-            />
-          </AccordionDetails>
-        </Accordion>
-      </Box>
-
-      <Divider />
-
-      <Box mt={2} mb={1}>
-        <Typography variant="subtitle1">
-          Express Checkout: <em>(optional)</em>
-        </Typography>
-        <FormControlLabel
-          control={
-            <Radio
-              color="primary"
-              checked={skipReview}
-              onChange={e => {
-                const checked = e.target.checked;
-                setSkipReview(checked);
-                if (checked) {
-                  setSelected([]);
-                  setNotes('');
-                  setExpanded('');
-                }
-              }}
-            />
-          }
-          label="Skip review and Go to Cart."
-        />
-      </Box>
-
-      <Box
-        display="flex"
-        justifyContent="flex-end"
-        mt={2}
-        mb={expanded.includes('review') ? 2 : 0}
-      >
-        <StepDots currentStep={currentStep} onStepChange={onStepChange} />
-
-        <S.Button onClick={onCancel}>Cancel</S.Button>
-        <S.Button onClick={handleSubmit}>Next</S.Button>
-      </Box>
-    </Box>
-  );
-};
-
-export default AddToCartOptions;

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

@@ -1,96 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import {
-  FormGroup,
-  FormControlLabel,
-  Checkbox,
-  TextField,
-  Box
-} from '@material-ui/core';
-import * as S from './styles';
-import { StepDots } from './StepDots';
-
-const options = [
-  'Setting up my room layout (walls, doors, windows)',
-  'Selecting and placing my cabinets',
-  'Choosing door style',
-  'Understanding product options (e.g. cabinet construction, finishes, accessories)',
-  'Matching my budget',
-  'Using the DIY design app',
-  'Others'
-];
-
-const CustomerRequestsForm = ({
-  onSubmit,
-  onCancel,
-  currentStep,
-  onStepChange
-}) => {
-  const [selected, setSelected] = useState([]);
-  const [notes, setNotes] = useState('');
-
-  const handleToggle = option => () => {
-    setSelected(prev =>
-      prev.includes(option) ? prev.filter(v => v !== option) : [...prev, option]
-    );
-  };
-
-  const payload = useMemo(
-    () => ({
-      reviewOptions: selected,
-      notes: notes.trim()
-    }),
-    [selected, notes]
-  );
-
-  const handleSubmit = () => {
-    if (onSubmit) onSubmit(payload);
-  };
-
-  return (
-    <Box>
-      <FormGroup>
-        {options.map(option => (
-          <FormControlLabel
-            key={option}
-            control={
-              <Checkbox
-                checked={selected.includes(option)}
-                onChange={handleToggle(option)}
-                color="primary"
-              />
-            }
-            label={option}
-          />
-        ))}
-      </FormGroup>
-      {selected.includes('Others') && (
-        <TextField
-          label="Add any additional notes"
-          placeholder="e.g., special instructions or edge cases"
-          value={notes}
-          fullWidth
-          multiline
-          rows={3}
-          variant="outlined"
-          onChange={e => setNotes(e.target.value)}
-        />
-      )}
-
-      <Box display="flex" justifyContent="flex-end" mt={2}>
-        <StepDots currentStep={currentStep} onStepChange={onStepChange} />
-
-        <S.Button onClick={onCancel}>Cancel</S.Button>
-        <S.Button
-          style={{
-            marginRight: 0
-          }}
-          onClick={handleSubmit}
-        >
-          Next
-        </S.Button>
-      </Box>
-    </Box>
-  );
-};
-
-export default CustomerRequestsForm;

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

@@ -1,54 +0,0 @@
-import React from 'react';
-import { Typography, Box } from '@material-ui/core';
-import * as S from './styles';
-import { StepDots } from './StepDots';
-
-const SkipDesignerReview = ({
-  onBack,
-  onProceed,
-  currentStep,
-  onStepChange
-}) => {
-  return (
-    <Box position="relative">
-      <Typography variant="h6" gutterBottom>
-        Going directly to the cart means:
-      </Typography>
-      <ul
-        style={{
-          marginTop: '1rem',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '1rem'
-        }}
-      >
-        <li>
-          <Typography>
-            You confirm your project is complete and accurate.
-          </Typography>
-        </li>
-        <li>
-          <Typography>
-            You accept full responsibility for measurements and order details.
-          </Typography>
-        </li>
-      </ul>
-
-      <Typography>
-        <strong>
-          Recommended only for experienced DIY users or small/simple projects.
-        </strong>{' '}
-        Otherwise, we suggest a designer review for peace of mind.
-      </Typography>
-
-      <Box display="flex" justifyContent="flex-end" mt={2}>
-        <StepDots currentStep={currentStep} onStepChange={onStepChange} />
-
-        <S.Button onClick={onBack}>Back</S.Button>
-        <S.Button onClick={onProceed}>Proceed to Cart</S.Button>
-      </Box>
-    </Box>
-  );
-};
-
-export default SkipDesignerReview;

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

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Box } from '@material-ui/core';
-
-export const StepDots = ({ currentStep = 0, totalSteps = 2, onStepChange }) => {
-  const dots = Array.from({ length: totalSteps });
-  return (
-    <Box display="flex" alignItems="center" marginRight="auto">
-      {dots.map((_, i) => (
-        <Box
-          key={i}
-          onClick={onStepChange ? () => onStepChange(i) : undefined}
-          style={{
-            width: 10,
-            height: 10,
-            borderRadius: '50%',
-            marginRight: i === totalSteps - 1 ? 0 : 8,
-            background:
-              i === currentStep ? 'rgb(98, 0, 238)' : 'rgba(0,0,0,0.25)',
-            cursor: onStepChange ? 'pointer' : 'default'
-          }}
-        />
-      ))}
-    </Box>
-  );
-};

package/src/components/toolbar/popup/submitforquote/cart-choice.jsx

@@ -1,116 +0,0 @@
-import React, { useEffect } from 'react';
-import {
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  Radio,
-  RadioGroup
-} from '@material-ui/core';
-import { useCheckCart } from '../../../../../src/hooks/useCheckCart';
-import ls from 'localstorage-slim';
-import {
-  CLIENTS_NAME,
-  LOCAL_STORAGE_CART_ACTION
-} from '../../../../../src/constants';
-import Skeleton from '@material-ui/lab/Skeleton';
-import { useValidateToken } from '../../../../../src/hooks/useValidateToken';
-
-export default function CartChoice({ accessToken }) {
-  const visualizerName = sessionStorage.getItem('visualizerName');
-  const [cartAction, setCartAction] = React.useState('add');
-
-  const handleChange = event => {
-    const value = event.target.value;
-    setCartAction(value);
-    ls.set(LOCAL_STORAGE_CART_ACTION, value);
-  };
-
-  const { data } = useValidateToken(accessToken);
-
-  const {
-    data: { is_empty },
-    isFetching: isCheckingCart
-  } = useCheckCart({
-    enabled: data?.source !== 'none'
-  });
-
-  useEffect(() => {
-    if (is_empty) {
-      ls.set(LOCAL_STORAGE_CART_ACTION, 'add');
-    }
-  }, [is_empty]);
-
-  if (isCheckingCart || data?.source === 'none') {
-    return (
-      <div
-        style={{
-          marginBottom: '1rem'
-        }}
-      >
-        <Skeleton
-          variant="text"
-          width={220}
-          height={32}
-          style={{ marginBottom: 16 }}
-        />
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-            <Skeleton variant="circle" width={24} height={24} />
-            <Skeleton variant="text" width={120} height={28} />
-          </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-            <Skeleton variant="circle" width={24} height={24} />
-            <Skeleton variant="text" width={120} height={28} />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (is_empty) {
-    return <></>;
-  }
-
-  return (
-    <div style={{ marginTop: '0.5rem', marginBottom: '1rem' }}>
-      <FormControl component="fieldset">
-        <FormLabel
-          style={{ marginBottom: '0.5rem', fontSize: '1rem', color: 'black' }}
-        >
-          What would you like to do with your cart?
-        </FormLabel>
-        <RadioGroup
-          aria-label="cart-choice"
-          name="cart-choice"
-          value={cartAction}
-          onChange={handleChange}
-        >
-          <FormControlLabel
-            value="add"
-            control={<Radio style={{ color: 'rgb(76, 18, 161)' }} />}
-            label="Add to Cart"
-          />
-          <FormControlLabel
-            value="replace"
-            control={<Radio style={{ color: 'rgb(76, 18, 161)' }} />}
-            label="Replace Cart*"
-          />
-        </RadioGroup>
-        {cartAction === 'replace' && (
-          <FormLabel
-            style={{
-              fontSize: 14,
-              color: 'rgba(0, 0, 0, 0.54)',
-              paddingLeft: '1.75rem',
-              lineHeight: '1rem'
-            }}
-          >
-            {`*If you replace the items in your cart with your current design, any
-            pre-existing items will be removed. Log in to your ${CLIENTS_NAME[visualizerName]}
-            account and save them as a quote first if you wish to keep them.`}
-          </FormLabel>
-        )}
-      </FormControl>
-    </div>
-  );
-}

package/src/components/toolbar/popup/submitforquote/doorstyle-menus.js

@@ -1,38 +0,0 @@
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-import React from 'react';
-
-export let DoorsConcernedMenu = ({ selected, data, onChange, getValue }) => {
-  return data.length ? (
-    <Select
-      className="submit-for-quote-form-item-button"
-      value={selected}
-      onChange={e => onChange(e.target.value)}
-      MenuProps={{
-        PaperProps: {
-          style: {
-            background: '#464647',
-            color: 'white'
-          }
-        }
-      }}
-    >
-      {data.map((item, key) => (
-        <MenuItem key={key} value={getValue(item)}>
-          <div className="submit-for-quote-form-item-button-icon">
-            <img
-              height="20"
-              src={item.thumbnail}
-              className="submit-for-quote-form-item-button-img"
-            />
-          </div>
-          <font size="2">{item.name}</font>
-        </MenuItem>
-      ))}
-    </Select>
-  ) : null;
-};
-
-DoorsConcernedMenu.defaultProps = {
-  getValue: it => it.name
-};