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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "5.0.0-test.6",
+  "version": "5.0.0-test.7",
   "description": "It is a kitchen simulator.",
   "type": "module",
 
@@ -16,7 +16,17 @@
   },
 
   "files": [
-    "src",
+    "src/*.js",
+    "src/*.jsx",
+    "src/catalog",
+    "src/components",
+    "src/utils",
+    "src/actions",
+    "src/reducers",
+    "src/class",
+    "src/plugins",
+    "src/shared-style",
+    "src/translator",
     "README.md",
     "LICENSE"
   ],

package/src/components/toolbar/main/index.jsx

@@ -6,17 +6,16 @@ import { Map } from 'immutable';
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
 import { FaPlayCircle } from 'react-icons/fa';
-import * as testJsonData from '../../../../../../../../../test_projects/*.json';
-import * as door_closet from '../../../../demo/src/catalog/holes/door-closet/planner-element';
-import * as door_exterior from '../../../../demo/src/catalog/holes/door-exterior/planner-element';
-import * as door_interior from '../../../../demo/src/catalog/holes/door-interior/planner-element';
-import * as door_sliding from '../../../../demo/src/catalog/holes/door-sliding/planner-element';
-import * as door_framed from '../../../../demo/src/catalog/holes/doorway-framed/planner-element';
-import * as door_frameless from '../../../../demo/src/catalog/holes/doorway-frameless/planner-element';
-import * as window_clear from '../../../../demo/src/catalog/holes/window-clear/planner-element';
-import * as window_cross from '../../../../demo/src/catalog/holes/window-cross/planner-element';
-import * as window_double_hung from '../../../../demo/src/catalog/holes/window-double-hung/planner-element';
-import * as window_vertical from '../../../../demo/src/catalog/holes/window-vertical/planner-element';
+import * as door_closet from '../../../catalog/holes/door-closet/planner-element';
+import * as door_exterior from '../../../catalog/holes/door-exterior/planner-element';
+import * as door_interior from '../../../catalog/holes/door-interior/planner-element';
+import * as door_sliding from '../../../catalog/holes/door-sliding/planner-element';
+import * as door_framed from '../../../catalog/holes/doorway-framed/planner-element';
+import * as door_frameless from '../../../catalog/holes/doorway-frameless/planner-element';
+import * as window_clear from '../../../catalog/holes/window-clear/planner-element';
+import * as window_cross from '../../../catalog/holes/window-cross/planner-element';
+import * as window_double_hung from '../../../catalog/holes/window-double-hung/planner-element';
+import * as window_vertical from '../../../catalog/holes/window-vertical/planner-element';
 import { formatNumber, toFixedFloat } from '../../../utils/math';
 import FormNumberInput from '../../style/form-number-input';
 import PlgItem from '../plugin-item.jsx';
@@ -3885,32 +3884,6 @@ export default class Toolbar extends PureComponent {
       }
     };
 
-    let testData = [];
-    if (process.env.MODE === 'staging') {
-      for (let testJson in testJsonData) {
-        testData.push(
-          <S.testJsonItemWrapper
-            onClick={() => {
-              if (
-                window.confirm(
-                  `Do you really load ${testJson}.json for KC test?`
-                )
-              ) {
-                this.context.projectActions.loadProject(
-                  JSON.parse(testJsonData[testJson].project_data),
-                  this.props.categoryData
-                );
-                this.setState({ addingJson: false });
-                this.props.setToolbar('');
-              }
-            }}
-          >
-            {testJson}
-          </S.testJsonItemWrapper>
-        );
-      }
-    }
-
     const isShowMoldingMenuItem = (subCabinetCategory, item) => {
       if (subCabinetCategory.name === TOE_KICK_MOLDING) {
         const items = this.state.elements.items?.toArray() ?? [];
@@ -3997,25 +3970,6 @@ export default class Toolbar extends PureComponent {
                   );
                 })}
               </S.SubCategoryItemWrapper>
-              {process.env.MODE === 'staging' &&
-                !!Object.keys(testJsonData).length && (
-                  <S.SubCategoryItemWrapper
-                    onClick={() =>
-                      this.setState({
-                        addingJson: !this.state.addingJson,
-                        selectedRoomElement: ''
-                      })
-                    }
-                  >
-                    <S.SubCategoryItem>
-                      <S.SubCategoryItemLabel
-                        style={{ marginLeft: 15, color: TEXT_COLOR_NEUTRAL_0 }}
-                      >
-                        Test JSONs
-                      </S.SubCategoryItemLabel>
-                    </S.SubCategoryItem>
-                  </S.SubCategoryItemWrapper>
-                )}
             </S.SubToolbarWrapper>
             {selectedRoomElement && (
               <S.SubToolbarWrapper
@@ -4065,20 +4019,6 @@ export default class Toolbar extends PureComponent {
                   })}
               </S.SubToolbarWrapper>
             )}
-            {process.env.MODE === 'staging' &&
-              !!Object.keys(testJsonData).length &&
-              this.state.addingJson && (
-                <S.SubToolbarWrapper
-                  id="test_json_datas"
-                  style={{
-                    alignItems: 'flex-start',
-                    marginLeft: 20,
-                    minWidth: 250
-                  }}
-                >
-                  {testData}
-                </S.SubToolbarWrapper>
-              )}
           </div>
         )
       },

package/src/components/viewer3d/scene-creator.js

@@ -1,49 +1,46 @@
 import * as Three from 'three';
+import { Color, Group } from 'three';
 import createGrid from './grid-creator';
 import { disposeObject } from './three-memory-cleaner';
-import { Color, Group } from 'three';
-import { isUndefined } from 'util';
 import {
-  MODE_DRAWING_ITEM_3D,
-  EPSILON,
-  DISTANCE_EPSILON,
-  OBJTYPE_MESH,
-  ARROW_TEXT_FORECOLOR,
-  ARROW_TEXT_BACKCOLOR,
-  ARROW_TEXT_FONTFACE,
-  UNIT_CENTIMETER,
-  SHADE_DARK_PURPLE_COLOR,
-  MODE_DRAGGING_ITEM_3D,
-  MODE_ROTATING_ITEM_3D,
   ANIMATE_STEP_MAX,
   ANIMATE_STEP_MIN,
-  ANIMATE_OBJECT_OPEN_DOOR_ROTATION_UNIT,
-  TOP_MOLDING_LOCATION,
-  MIDDLE_MOLDING_LOCATION,
-  BOTTOM_MOLDING_LOCATION,
+  ARRAY_3D_MODES,
+  ARROW_TEXT_BACKCOLOR,
+  ARROW_TEXT_FONTFACE,
+  ARROW_TEXT_FORECOLOR,
   BASE_CABINET_LAYOUTPOS,
-  TALL_CABINET_LAYOUTPOS,
-  WALL_CABINET_LAYOUTPOS,
+  BOTTOM_MOLDING_LOCATION,
   DECIMAL_PLACES_2,
   DIFFERENT_VALUES_PATH_LENGTH,
+  DISTANCE_EPSILON,
+  EPSILON,
+  MIDDLE_MOLDING_LOCATION,
+  MODE_DRAGGING_ITEM_3D,
+  MODE_DRAWING_ITEM_3D,
+  MODE_IDLE,
   MODE_IDLE_3D,
-  ARRAY_3D_MODES,
-  MODE_IDLE
+  MODE_ROTATING_ITEM_3D,
+  OBJTYPE_MESH,
+  SHADE_DARK_PURPLE_COLOR,
+  TOP_MOLDING_LOCATION,
+  UNIT_CENTIMETER,
+  WALL_CABINET_LAYOUTPOS
 } from '../../constants';
-import { IDBroker, GeometryUtils, MoldingUtils } from '../../utils/export';
+import { GeometryUtils, IDBroker, MoldingUtils } from '../../utils/export';
 import convert from 'convert-units';
 import { verticesDistance } from '../../utils/geometry';
-import * as GeomUtils from '../../../demo/src/catalog/utils/geom-utils';
-import { loadTexture } from '../../../demo/src/catalog/utils/item-loader';
 import { returnReplaceableDeepSearchType } from '../viewer2d/utils';
 import {
-  replaceMeshesWithLineSegments,
+  animateDoor,
   isElevationView,
   isEmpty,
-  animateDoor,
+  replaceMeshesWithLineSegments,
   translateDrawer
 } from '../../../src/utils/helper';
 import { formatNumber } from '../../utils/math';
+import * as GeomUtils from '../../../src/catalog/utils/geom-utils.js';
+import { loadTexture } from '../../../src/catalog/utils/item-loader.jsx';
 
 let transformBox;
 export var fVLine = [];

package/src/components/viewer3d/viewer3d.js

@@ -5,32 +5,31 @@ import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import * as Three from 'three';
 import {
+  checkCabinetOverlap,
+  createBacksplash,
+  deleteSpecifiedMeshObjects,
+  fVLine,
+  getDistances,
   parseData,
   updateScene,
-  visibleTransformBox,
-  getDistances,
-  fVLine,
-  deleteSpecifiedMeshObjects,
-  createBacksplash,
-  checkCabinetOverlap
+  visibleTransformBox
 } from './scene-creator';
-import { disposeScene } from './three-memory-cleaner';
-import { disposeObject } from './three-memory-cleaner';
+import { disposeObject, disposeScene } from './three-memory-cleaner';
 import diff from 'immutablediff';
 import * as SharedStyle from '../../shared-style';
 import {
-  MODE_DRAWING_ITEM_3D,
-  MODE_IDLE_3D,
+  BASE_CABINET_LAYOUTPOS,
   MODE_3D_VIEW,
-  UNIT_CENTIMETER,
+  MODE_DRAGGING_ITEM_3D,
   MODE_DRAWING_HOLE_3D,
-  SECONDARY_PURPLE_COLOR,
+  MODE_DRAWING_ITEM_3D,
   MODE_ELEVATION_VIEW,
-  MODE_DRAGGING_ITEM_3D,
+  MODE_IDLE_3D,
   MODE_ROTATING_ITEM_3D,
-  WALL_CABINET_LAYOUTPOS,
-  BASE_CABINET_LAYOUTPOS,
-  TALL_CABINET_LAYOUTPOS
+  SECONDARY_PURPLE_COLOR,
+  TALL_CABINET_LAYOUTPOS,
+  UNIT_CENTIMETER,
+  WALL_CABINET_LAYOUTPOS
 } from '../../constants';
 
 import { isUndefined } from 'util';
@@ -40,13 +39,14 @@ import { GeometryUtils } from '../../utils/export';
 import { handleCamRect, isElevationView, isEmpty } from '../../utils/helper';
 import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
 import CameraControls from 'camera-controls';
-CameraControls.install({ THREE: Three });
 import { returnReplaceableDeepSearchType } from '../viewer2d/utils';
 import {
   getAllMeshes,
   vectorIntersectWithMesh
 } from '../../utils/objects-utils';
 
+CameraControls.install({ THREE: Three });
+
 export default class Scene3DViewer extends React.Component {
   constructor(props) {
     super(props);
@@ -2978,7 +2978,7 @@ export default class Scene3DViewer extends React.Component {
           line = line.children[0].children[0];
           // index(faces) of the line
           const indexAttribute = line.geometry.getIndex();
-          const firstFaceIndices = undefined;
+          let firstFaceIndices = undefined;
           if (indexAttribute && indexAttribute.length > 0) {
             firstFaceIndices = [
               indexAttribute.getX(0),

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);
-  }
-}