kitchen-simulator 5.0.0-test.1 → 5.0.0-test.10

package/src/components/wizardstep/wizardstep-content-button.jsx

@@ -1,198 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as SharedStyle from '../../shared-style';
-import { FaTimes as IconClose } from 'react-icons/fa';
-
-const labelContainerStyle = {
-  width: 'auto',
-  display: 'inline-block',
-  margin: 0,
-  padding: '0px 5px 0px 0px'
-};
-
-const toggleButtonStyle = {
-  color: '#CCC',
-  textAlign: 'center',
-  cursor: 'pointer',
-  userSelect: 'none'
-};
-
-const toggleButtonStyleOver = {
-  ...toggleButtonStyle,
-  color: SharedStyle.COLORS.white
-};
-
-const contentContainerStyleActive = {
-  position: 'fixed',
-  width: 'calc( 100% - 2px )',
-  height: '40%',
-  left: 0,
-  bottom: 20,
-  backgroundColor: SharedStyle.PRIMARY_COLOR.alt,
-  borderTop: SharedStyle.PRIMARY_COLOR.border,
-  zIndex: 0,
-  padding: 0,
-  margin: 0,
-  transition: 'all 300ms ease'
-};
-
-const contentContainerStyleInactive = {
-  ...contentContainerStyleActive,
-  visibility: 'hidden',
-  height: 0
-};
-
-const contentHeaderStyle = {
-  position: 'relative',
-  width: '100%',
-  height: '2em',
-  top: 0,
-  left: 0,
-  borderBottom: SharedStyle.PRIMARY_COLOR.border
-};
-
-const titleStyle = {
-  position: 'relative',
-  height: '2em',
-  lineHeight: '2em',
-  marginLeft: '1em'
-};
-
-const contentAreaStyle = {
-  position: 'relative',
-  width: '100%',
-  height: 'calc( 100% - 2em )',
-  padding: '1em',
-  overflowY: 'auto'
-};
-
-const iconCloseStyleOut = {
-  position: 'absolute',
-  width: '2em',
-  height: '2em',
-  right: 0,
-  top: 0,
-  padding: '0.5em',
-  borderLeft: SharedStyle.PRIMARY_COLOR.border,
-  cursor: 'pointer'
-};
-
-const iconCloseStyleOver = {
-  ...iconCloseStyleOut,
-  color: SharedStyle.COLORS.white,
-  backgroundColor: SharedStyle.SECONDARY_COLOR.alt
-};
-
-const iconStyle = {
-  width: '15px',
-  height: '15px',
-  marginTop: '-2px',
-  marginRight: '2px'
-};
-
-const textStyle = {
-  position: 'relative'
-};
-
-export default class FooterContentButton extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      over: false,
-      closeOver: false,
-      active: this.props.toggleState || false
-    };
-  }
-
-  toggleOver(e) {
-    this.setState({ over: true });
-  }
-  toggleOut(e) {
-    this.setState({ over: false });
-  }
-
-  toggle(e) {
-    let isActive = !this.state.active;
-    this.setState({ active: isActive });
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    if (this.state.over != nextState.over) return true;
-    if (this.state.closeOver != nextState.closeOver) return true;
-    if (this.state.active != nextState.active) return true;
-
-    if (this.props.content.length != nextProps.content.length) return true;
-    if (this.props.toggleState != nextProps.toggleState) return true;
-
-    return false;
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.toggleState != this.props.toggleState)
-      this.state.active = nextProps.toggleState;
-  }
-
-  render() {
-    let s = this.state;
-    let p = this.props;
-
-    let LabelIcon = p.icon || null;
-    let labelIconStyle = p.iconStyle || {};
-    let labelTextStyle = p.textStyle || {};
-    let inputTitleStyle = p.titleStyle || {};
-
-    return (
-      <div style={labelContainerStyle}>
-        <div
-          style={s.over || s.active ? toggleButtonStyleOver : toggleButtonStyle}
-          onClick={e => this.toggle(e)}
-          title={p.title}
-        >
-          <LabelIcon style={{ ...labelIconStyle, ...iconStyle }} />
-          <span style={{ ...textStyle, ...labelTextStyle }}>{p.text}</span>
-        </div>
-        <div
-          style={
-            s.active
-              ? contentContainerStyleActive
-              : contentContainerStyleInactive
-          }
-        >
-          <div style={contentHeaderStyle}>
-            <b style={{ ...titleStyle, ...inputTitleStyle }}>{p.title}</b>
-            <IconClose
-              style={s.closeOver ? iconCloseStyleOver : iconCloseStyleOut}
-              onMouseOver={e => this.setState({ closeOver: true })}
-              onMouseOut={e => this.setState({ closeOver: false })}
-              onClick={e => this.toggle(e)}
-            />
-          </div>
-          <div style={contentAreaStyle}>{p.content}</div>
-        </div>
-      </div>
-    );
-  }
-}
-
-FooterContentButton.propTypes = {
-  state: PropTypes.object.isRequired,
-  text: PropTypes.string.isRequired,
-  textStyle: PropTypes.object,
-  icon: PropTypes.func,
-  iconStyle: PropTypes.object,
-  content: PropTypes.array.isRequired,
-  toggleState: PropTypes.bool,
-  title: PropTypes.string,
-  titleStyle: PropTypes.object
-};
-
-FooterContentButton.contextTypes = {
-  projectActions: PropTypes.object.isRequired,
-  viewer2DActions: PropTypes.object.isRequired,
-  viewer3DActions: PropTypes.object.isRequired,
-  linesActions: PropTypes.object.isRequired,
-  holesActions: PropTypes.object.isRequired,
-  itemsActions: PropTypes.object.isRequired,
-  translator: PropTypes.object.isRequired
-};

package/src/components/wizardstep/wizardstep-toggle-button.jsx

@@ -1,101 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as SharedStyle from '../../shared-style';
-
-const toggleButtonStyle = {
-  width: '5.5em',
-  color: '#CCC',
-  textAlign: 'center',
-  cursor: 'pointer',
-  userSelect: 'none',
-  border: '1px solid transparent',
-  margin: '-1px 5px 0 5px',
-  borderRadius: '2px',
-  display: 'inline-block'
-};
-
-const toggleButtonStyleOver = {
-  ...toggleButtonStyle,
-  backgroundColor: '#1c82c6',
-  border: '1px solid #FFF',
-  color: SharedStyle.COLORS.white
-};
-
-export default class FooterToggleButton extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      over: false,
-      active: this.props.toggleState || false
-    };
-  }
-
-  toggleOver(e) {
-    this.setState({ over: true });
-  }
-  toggleOut(e) {
-    this.setState({ over: false });
-  }
-
-  toggle(e) {
-    let isActive = !this.state.active;
-    this.setState({ active: isActive });
-
-    if (isActive) {
-      this.props.toggleOn();
-    } else {
-      this.props.toggleOff();
-    }
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    if (this.state.over != nextState.over) return true;
-    if (this.state.active != nextState.active) return true;
-    if (this.props.toggleState != nextProps.toggleState) return true;
-
-    return false;
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.toggleState != this.props.toggleState)
-      this.state.active = nextProps.toggleState;
-  }
-
-  render() {
-    return (
-      <div
-        style={
-          this.state.over || this.state.active
-            ? toggleButtonStyleOver
-            : toggleButtonStyle
-        }
-        onMouseOver={e => this.toggleOver(e)}
-        onMouseOut={e => this.toggleOut(e)}
-        onClick={e => this.toggle(e)}
-        title={this.props.title}
-      >
-        {this.props.text}
-      </div>
-    );
-  }
-}
-
-FooterToggleButton.propTypes = {
-  state: PropTypes.object.isRequired,
-  toggleOn: PropTypes.func.isRequired,
-  toggleOff: PropTypes.func.isRequired,
-  text: PropTypes.string.isRequired,
-  toggleState: PropTypes.bool,
-  title: PropTypes.string
-};
-
-FooterToggleButton.contextTypes = {
-  projectActions: PropTypes.object.isRequired,
-  viewer2DActions: PropTypes.object.isRequired,
-  viewer3DActions: PropTypes.object.isRequired,
-  linesActions: PropTypes.object.isRequired,
-  holesActions: PropTypes.object.isRequired,
-  itemsActions: PropTypes.object.isRequired,
-  translator: PropTypes.object.isRequired
-};

package/src/hooks/useCheckCart.js

@@ -1,38 +0,0 @@
-import axios from 'axios';
-import { useQuery } from 'react-query';
-import ls from 'localstorage-slim';
-import { LOCAL_STORAGE_TOKEN_VALUE } from '../../src/constants';
-
-const fetchCart = async () => {
-  const accessToken = ls.get(LOCAL_STORAGE_TOKEN_VALUE);
-  const visualizerName = sessionStorage.getItem('visualizerName');
-
-  const response = await axios.post(
-    `${process.env.API_URL}/api/project/checkCart`,
-    {
-      client_name: visualizerName,
-      user_token: accessToken
-    }
-  );
-
-  return response.data;
-};
-
-export const useCheckCart = ({ enabled = true }) =>
-  useQuery({
-    queryKey: ['cart'],
-    queryFn: fetchCart,
-    initialData: {
-      is_empty: true
-    },
-    enabled,
-    retry: 1,
-    refetchOnWindowFocus: false,
-    refetchOnWindowBlur: false,
-    onSuccess: data => {
-      console.log(`[useCheckCart] Fetched cart check data`, data);
-    },
-    onError: error => {
-      console.log(`[useCheckCart] Failed to fetch cart check`, error);
-    }
-  });

package/src/hooks/useGetPricesBySku.js

@@ -1,59 +0,0 @@
-import axios from 'axios';
-import { useQuery } from 'react-query';
-import ls from 'localstorage-slim';
-import {
-  LOCAL_STORAGE_TOKEN_VALUE,
-  LOCAL_STORAGE_CUSTOMER_INFO
-} from '../../src/constants';
-
-function formatPrice(value) {
-  const num = parseFloat((value || '').replace(/,/g, ''));
-  return isNaN(num) ? 0 : parseFloat(num.toFixed(2));
-}
-
-const fetchPricesBySku = async (ids, accessToken) => {
-  const customer = ls.get(LOCAL_STORAGE_CUSTOMER_INFO);
-
-  const visualizerName = sessionStorage.getItem('visualizerName');
-
-  const response = await axios.post(
-    `${process.env.API_URL}/api/pricing/getPrices`,
-    {
-      client_name: visualizerName,
-      customer_email: customer?.email || '',
-      skus: ids,
-      token: accessToken
-    }
-  );
-
-  return {
-    discount_type: response.data.discount_type || '',
-    prices: response.data.prices.map(priceProduct => ({
-      ...priceProduct,
-      sku: priceProduct.internal_sku,
-      regular_price: formatPrice(priceProduct.price),
-      discounted_price: formatPrice(priceProduct.discounted_price)
-    }))
-  };
-};
-
-export const useGetPricesBySku = ids => {
-  const accessToken = ls.get(LOCAL_STORAGE_TOKEN_VALUE);
-
-  return useQuery({
-    queryKey: ['prices', ids, accessToken],
-    queryFn: () => fetchPricesBySku(ids, accessToken),
-    enabled: Array.isArray(ids) && ids.length > 0,
-    initialData: {
-      discount_type: '',
-      prices: []
-    },
-    retry: 1,
-    onSuccess: data => {
-      ls.set('DISCOUNT_TYPE', data.discount_type);
-    },
-    onError: error => {
-      console.log(`[useGetPricesBySku] Failed to fetch prices`, error);
-    }
-  });
-};

package/src/hooks/useValidateToken.js

@@ -1,181 +0,0 @@
-// hooks/useValidateToken.js
-import axios from 'axios';
-import { useQuery } from 'react-query';
-import ls from 'localstorage-slim';
-import {
-  LOCAL_STORAGE_TOKEN_VALUE,
-  LOCAL_STORAGE_CUSTOMER_INFO,
-  LOCAL_STORAGE_ORIGINAL_TOKEN
-} from '../../src/constants';
-import {
-  ENCODED_QUERY_PARAM_TOKEN,
-  QUERY_PARAM_TOKEN
-} from '../../demo/src/CrossSignOn';
-
-const LOG_PREFIX = `[Cross Sign On]`;
-
-function persistAccessToken(accessToken) {
-  const url = new URL(window.location.href);
-  const token = url.searchParams.get(QUERY_PARAM_TOKEN);
-  const encodedToken = url.searchParams.get(ENCODED_QUERY_PARAM_TOKEN);
-
-  if (!accessToken) return;
-
-  if (!token && !encodedToken) {
-    return;
-  }
-
-  if (token) {
-    url.searchParams.set(QUERY_PARAM_TOKEN, accessToken);
-  }
-
-  if (encodedToken) {
-    url.searchParams.set(ENCODED_QUERY_PARAM_TOKEN, accessToken);
-  }
-
-  console.log(`${LOG_PREFIX} Persisting access token`);
-  ls.set(LOCAL_STORAGE_TOKEN_VALUE, accessToken);
-
-  if (window.location.href !== url.toString()) {
-    window.history.replaceState({}, document.title, url.toString());
-  }
-}
-
-function persistCustomerInfo(customerInfo) {
-  if (!customerInfo) return;
-
-  console.log(`${LOG_PREFIX} Persisting customer info`);
-  ls.set(LOCAL_STORAGE_CUSTOMER_INFO, customerInfo);
-}
-
-async function refreshToken(currentToken) {
-  const visualizerName = sessionStorage.getItem('visualizerName');
-
-  try {
-    const { data: refreshData } = await axios.post(
-      `${process.env.API_URL}/api/token/refresh`,
-      {
-        client_name: visualizerName,
-        token: currentToken
-      }
-    );
-
-    if (
-      refreshData &&
-      refreshData.status === 'success' &&
-      refreshData.accessToken
-    ) {
-      return {
-        refreshed: true,
-        token: refreshData.accessToken,
-        raw: refreshData
-      };
-    }
-
-    console.error(`${LOG_PREFIX} Token refresh failed`, refreshData?.message);
-    throw new Error(refreshData?.message || 'Token refresh failed');
-  } catch (err) {
-    console.error(`${LOG_PREFIX} Error refreshing token`, err);
-    throw err;
-  }
-}
-
-/**
- * Normalizes validate/refresh results so consumers have a predictable shape.
- * Returns:
- * {
- *   token: string | null,
- *   customer: { email, firstName, lastName, tier } | null,
- *   source: 'validated' | 'refreshed' | 'object' | 'unknown' | 'none'
- * }
- */
-async function fetchValidateToken(accessToken) {
-  const visualizerName = sessionStorage.getItem('visualizerName');
-  // Case: string token flow
-  if (typeof accessToken === 'string' && accessToken) {
-    try {
-      const { data } = await axios.post(
-        `${process.env.API_URL}/api/token/validate`,
-        {
-          client_name: visualizerName,
-          token: accessToken
-        }
-      );
-
-      if (data && data.status !== 'error' && data.email) {
-        const customer = {
-          email: data.email,
-          firstName: data.firstName,
-          lastName: data.lastName,
-          tier: data.tier
-        };
-        ls.set(LOCAL_STORAGE_ORIGINAL_TOKEN, accessToken);
-        persistAccessToken(accessToken);
-        persistCustomerInfo(customer);
-
-        return {
-          token: accessToken,
-          customer,
-          source: 'validated'
-        };
-      }
-
-      // If API returns an error status, try refresh
-      if (
-        data?.status === 'error' &&
-        data.message.toLowerCase().includes('expired')
-      ) {
-        console.log(`${LOG_PREFIX} Token validation failed`, data.message);
-        const refreshed = await refreshToken(accessToken);
-
-        if (refreshed.token && typeof refreshed.token === 'string') {
-          ls.set(LOCAL_STORAGE_ORIGINAL_TOKEN, refreshed.token);
-          persistAccessToken(refreshed.token);
-
-          window.dispatchEvent(
-            new CustomEvent('token-changed', { detail: refreshed.token })
-          );
-        }
-
-        return {
-          token: refreshed.token,
-          customer: null, // customer not returned by refresh; will be filled by next authenticated fetch
-          source: 'refreshed'
-        };
-      }
-
-      // If no email but not an explicit error, just return token
-      return {
-        token: accessToken,
-        customer: null,
-        source: 'validated'
-      };
-    } catch (e) {
-      console.log(`${LOG_PREFIX} Failed fetching customer info`, e);
-      const refreshed = await refreshToken(accessToken);
-      return {
-        token: refreshed.token ? refreshed.token : accessToken,
-        customer: null,
-        source: 'refreshed'
-      };
-    }
-  }
-
-  // No token
-  return { token: null, customer: null, source: 'unknown' };
-}
-
-export const useValidateToken = accessToken => {
-  return useQuery({
-    queryKey: [
-      'validate-token',
-      typeof accessToken === 'object' ? accessToken?.token : accessToken
-    ],
-    queryFn: () => fetchValidateToken(accessToken),
-    retry: 1,
-    onError: error => {
-      console.error(`[useValidateToken] Validation failed`, error);
-    },
-    initialData: { token: null, customer: null, source: 'none' }
-  });
-};

package/src/styles/export.js

@@ -1,7 +0,0 @@
-import * as TabsStyle from './tabs.css';
-
-export { TabsStyle };
-
-export default {
-  TabsStyle
-};

package/src/styles/tabs.css

@@ -1,40 +0,0 @@
-.react-tabs__tab-list {
-  border-bottom: 1px solid #aaa;
-  margin: 0 0 10px;
-  padding: 0;
-}
-
-.react-tabs__tab {
-  display: inline-block;
-  border: 1px solid transparent;
-  border-bottom: none;
-  bottom: -1px;
-  position: relative;
-  list-style: none;
-  padding: 6px 12px;
-  cursor: pointer;
-}
-
-.react-tabs__tab--selected,
-.react-tabs__tab:focus {
-  border-color: #aaa;
-  color: #1ca6fc;
-  outline: none;
-}
-
-.react-tabs__tab-panel {
-  display: none;
-}
-
-.react-tabs__tab-panel--selected {
-  display: block;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}