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

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

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

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

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

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

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

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