Task: Complete the product configurator

In this task, you will complete a product configurator that allows users to create a customized product. The configurator consists of product types that users can select. Your task is to implement the missing parts of the configurator and ensure that the user interface works and displays correctly. Please find below detailed requirements for the implementation and extension of the product configurator.

Requirements for the product configurator:

General requirements

Set up the project environment and install the necessary dependencies.
Analyze the existing code and understand the structure and functionality of the product configurator.
Implement the missing parts of the configurator and, if necessary, customize existing components to complete the functionality.

Step 1: Positioning and customization of components

The ProductInfo-component is currently on the right side and should be displayed on the left side under the product image. The Summary-component contains the selected configuration options in the form of a list. However, it seems that the styling of the Summary-component is not working. Make sure that the component is displayed correctly in the top left corner and that the styling is correct.
One of the three accordion components is faulty and not displayed correctly. Make sure that all three accordion components are displayed correctly and contain the configuration options for the floor lamp. The accordion-components should all be closed at the beginning.

Step 2: Extending the configurator to include components for hanging lamps

The tab selection should allow you to choose between »floor lamp« and »pendant lamp«. So far, the selection option for the pendant lamp has not yet been implemented. Add an additional tab selection for the pendant lamp.
When the user selects »pendant lamp«, the configuration options for the pendant lamp should be displayed. The configuration options for the pendant lamp include:
- Number of planets: 1-3
- Size of planets: normal, large
- Cable color: black (cotton), beige (cotton), white (cotton)
- Color of mounting base: black (lacquered), white (lacquered)
When a type is selected, the component ProductFloorLamp and ProductPendantLamp should be exchanged accordingly.

Step 3: Customizing the State Object

The initialConfiguratorState-state object currently contains only the floor lamp configuration options. Expand the state object to include the pendant lamp configuration options. As a result, the state object should contain two distinct sub-objects for the floor and pendant lamps, with the appropriate attributes. In addition, the state object should save the current selection of the product type and calculate the price based on the configuration options.

Example of the extended state object:
```
{
type: 'floor',
floor: {
  amount: 1,
  size: 'normal',
  cableColor: 'black-cotton',
  standColor: 'black-aluminum',
  price: 20,
},
  pendant: {
  amount: 1,
  size: 'normal',
  cableColor: 'black-cotton',
  standColor: 'black-aluminum',
  price: 60,
  },
}
```
- The configReducer-function needs to be extended with the appropriate actions of the products. The actions for the lamps include UPDATE_TYPE, UPDATE_SIZE, UPDATE_AMOUNT, UPDATE_STAND_COLOR, and UPDATE_CABLE_COLOR.
- The calculatePrice() function from the utils-folder must be successfully implemented in the configReducer.jsx file and calculate the price based on the configuration options.

Step 4: Extending the summary

The summary component must be expanded to correctly display the configuration options for the lamp selection. The summary should include the following information:
Number of planets
Size of planets
Wire color
Color of mounting base or floor lamp
Price

Step 5: Product Preview and User Interface

The ProductImage component currently only displays one image. Implement the ability to change the product images when the product type configuration is changed. The product images for the floor and hanging lamp should be displayed correctly.
The product preview should also be updated correctly when the number of planets is selected. The product preview display seems to be faulty. Make sure that the product preview is working correctly and that the configuration options for the floor and hanging lamps are displayed.

Step 6: Refactoring and Deployment

The tab component for selecting the floor and hanging lamp can be optimized by moving the Tab component to a separate file.
The ProductFloorLamp and ProductPendantLamp components should also be moved to separate files.
The redundancy of the label objects cableColorLabels and standColorLabels should be eliminated by moving them to a separate file or providing them as a context.
Remove unnecessary comments and console output.
File and folder renaming may be performed to ensure a meaningful structure and readability
Finally, run the build process and ensure that the application contains a dist folder with the compiled files.

License and terms of use

This material is provided solely for students enrolled in courses offered by Web Professional Institute Inc. By accessing or using this code, you acknowledge that it is strictly for educational use within the context of Web Professional Institute Inc. programs.

Usage Restrictions:

Redistribution, sharing, or copying of this material outside the course environment is strictly prohibited.
The content is designed to support your learning objectives and is not authorized for commercial projects, public repositories, or applications beyond the course scope.
Unauthorized commercial use or open-source distribution is strictly prohibited and may result in expulsion from the program and legal action.

Agreement & Rights:

As a student, you have agreed to these terms as part of your enrollment agreement, which includes additional details on permitted uses, restrictions, and policies. The author and Web Professional Institute Inc. retain all rights to this material, including the code base and instructional content.

For any questions regarding these terms, please contact Web Professional Institute Inc. for clarification.