Creating a wishlist widget

The create-wishlist-widget.tsx file contains the sample source code that creates the wishlist widget. This document describes the implementation logic in detail.

About this task

Procedure

Import the Styled user interface components from the @hcl-commerce-store-sdk/react-component packages, and Add a icon from the Material user interface.

//stadard libraries
import React from "react";
//UI
import {
 StyledGrid,
 StyledTextField,
 StyledBox,
 StyledPaper,
 StyledIconLabel,
 StyledButton,
} from "@hcl-commerce-store-sdk/react-component";
import Add from "@material-ui/icons/Add";

Create an interface called CreateWishListWidgetProps with the needed properties for functional component CreateWishListWidget. Create the CreateWishListWidget react function component and design the create wishlist widget by using the imported Styled user interface as well as Add icon components using the following code:

interface CreateWishListWidgetProps {
translation: any;
WishListName: String;
handelWishListName: Function;
validateWishListName: Function;
canCreatewishlist: Function;
createWishList: Function;
EMPTY_STRING: string;
}

Props	Descriptions
translation	The translation object contains the i18n strings.
wishListName	React hook state variable to store wish list name.
handleWishListName	React hook state setter function to set the wish list name.
validateWishListName	Function to validate the wish list name entered.
canCreateWishList	Function to enable/disable the Create List button.
createWishList	Function to create the wishlist which will call the REST API.
EMPTY_STRING	Empty string constant “”.