fix build errors

examples/ecommerce-jewellery-store/src/components/CardHolder.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { TextBox } from '@progress/kendo-react-inputs';
 
 const CardNumber = () => {

examples/ecommerce-jewellery-store/src/components/CardNumber.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { MaskedTextBox } from '@progress/kendo-react-inputs';
 
 const CardNumber = () => {

examples/ecommerce-jewellery-store/src/components/ExpiryDate.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { DateInput } from "@progress/kendo-react-dateinputs";
 
 const ExpiryDate = () => {

examples/ecommerce-jewellery-store/src/components/FilterComponent.tsx

@@ -26,7 +26,7 @@ const statuses: string[] = ["Sale", "Recommended", "Must Have"];
 const materials: string[] = ["Gold", "Silver"];
 
 const DropDownSettings: DropDownsPopupSettings = {
-  minWidth: "119px",
+  width: "119px",
 };
 
 export const FilterComponent = (props: any) => {

examples/ecommerce-jewellery-store/src/components/Header.tsx

@@ -1,8 +1,7 @@
 import React from "react";
-import { Menu, AppBarSpacer, MenuItem } from "@progress/kendo-react-layout";
+import { Menu, AppBarSpacer } from "@progress/kendo-react-layout";
 import { Button } from "@progress/kendo-react-buttons";
 import { SvgIcon } from "@progress/kendo-react-common";
-import { useNavigate } from "react-router-dom";
 
 import {
   InputPrefix,
@@ -24,8 +23,6 @@ import languageItems from "@/data/language-items";
 import { AppBar, AppBarSection } from "@progress/kendo-react-layout";
 
 const Header: React.FC = () => {
-  const navigate = useNavigate();
-
   return (
     <>
       <AppBar themeColor="inherit">

examples/ecommerce-jewellery-store/src/components/ShoppingCartList.tsx

@@ -11,14 +11,15 @@ import {
   Field,
   FormElement,
   FieldRenderProps,
-  FormRenderProps,
   FieldWrapper,
 } from "@progress/kendo-react-form";
 import { Error } from "@progress/kendo-react-labels";
 import { Input } from "@progress/kendo-react-inputs";
 import { Button } from "@progress/kendo-react-buttons";
 import { useCart } from "../helpers/CartContext";
-import { NumericTextBox } from "@progress/kendo-react-inputs";
+import {
+  NumericTextBox
+} from "@progress/kendo-react-inputs";
 import { useNavigate } from "react-router-dom";
 import { Layout } from "./Layout";
 import shoppingCartImage from "../assets/shoppingCartImg.png";
@@ -48,18 +49,13 @@ export const ShoppingCartList: React.FC = () => {
   };
 
   const updateQuantity = (event) => {
+    console.log(typeof event);
     const target = event.target.element;
     const id = target.getAttribute("id");
 
     updateIndividualCartItem(id);
   };
 
-  const onResetClick = (event) => {
-    const target = event.target.element;
-    const id = target.getAttribute("id");
-
-    updateIndividualCartItem(id);
-  };
   return (
     <>
       <Layout>
@@ -89,8 +85,8 @@ export const ShoppingCartList: React.FC = () => {
             >
               <img
                 className="k-rounded-lg"
-                src={isCartItem ? item.product.img : null}
-                alt={isCartItem ? item.product.title : null}
+                src={isCartItem ? item.product.img : undefined}
+                alt={isCartItem ? item.product.title : undefined}
                 style={{
                   maxHeight: "120px",
                 }}
@@ -112,18 +108,12 @@ export const ShoppingCartList: React.FC = () => {
                   ) : (
                     <span>Quantity not available</span>
                   )}
-                  <Button
-                    svgIcon={trashIcon}
-                    fillMode={"flat"}
-                    onClick={onResetClick}
-                  ></Button>
+                  <Button svgIcon={trashIcon} fillMode={"flat"}></Button>
                 </span>
                 <span>
-                  {isCartItem
-                    ? `$${(
-                        item.quantity * item.product.newPrice
-                      ).toLocaleString()}`
-                    : `$${item.product.newPrice.toLocaleString()}`}
+                  {`$${(
+                    item.quantity * item.product.newPrice
+                  ).toLocaleString()}`}
                 </span>
               </div>
             </div>
@@ -135,7 +125,7 @@ export const ShoppingCartList: React.FC = () => {
           <section className="k-d-flex k-justify-content-between k-align-items-center">
             <div className="k-col-span-3">
               <Form
-                render={(formRenderProps: FormRenderProps) => (
+                render={() => (
                   <FormElement style={{ maxWidth: 650 }}>
                     <fieldset className={"k-form-fieldset"}>
                       <legend className={"k-h2"}>Order Details</legend>

examples/ecommerce-jewellery-store/src/data/types.ts

@@ -4,24 +4,25 @@ export type CardDescriptor = {
 };
 
 export type DataModel = {
-    text: string;
+    text: string | undefined;
 }
 
 export type ListDataDescriptor = {
     id?: number;
-    img: string | null;
+    img: string | undefined;
     status: string | null;
     title: string;
-    category: "Bracelets" | "Earrings" | "Rings" | "Watches" | "Necklaces";
-    material: "Silver" | "Gold";
+    rating?: number;
+    category: string;
+    material: string;
     oldPrice: number | null;
     newPrice: number;
 };
 
 export type BackgroundImageProps = {
     title: string;
     subtitle: string;
-    buttonText: string;
+    buttonText?: string;
     img: string;
 };
 

examples/ecommerce-jewellery-store/src/pages/PaymentDetails.tsx

@@ -11,7 +11,6 @@ import {
   Form,
   Field,
   FormElement,
-  FormRenderProps,
   FieldWrapper,
 } from "@progress/kendo-react-form";
 import {
@@ -50,7 +49,7 @@ const PaymentDetails: React.FC = () => {
               </div>
             </div>
             <Form
-              render={(formRenderProps: FormRenderProps) => (
+              render={() => (
                 <FormElement>
                   <div className="k-form-layout k-d-grid k-gap-y-6 k-gap-x-4">
                     <FieldWrapper className="k-col-span-1">

examples/ecommerce-jewellery-store/src/pages/ProductsDetails.tsx

@@ -12,20 +12,22 @@ import { CustomSection } from "../components/CustomizedSection";
 import { useCart } from "../helpers/CartContext";
 import { useNavigate } from "react-router-dom";
 
-
 export const ProductDetails = () => {
   const { id } = useParams();
-  const productId = parseInt(id, 10);
+  const productId = id ? parseInt(id, 10) : null;
+
   const descriptionText =
     "Elegant wedding bands featuring lustrous pearls, beautifully set in sleek, timeless bands. These rings offer a unique blend of classic charm and modern sophistication, making them a perfect symbol of everlasting love. The delicate pearls add a touch of grace, creating a refined and distinctive look that’s perfect for a memorable occasion.";
   const { addItemToCart } = useCart();
   const productToAdd = listData.find((item) => item.id === productId);
   const navigate = useNavigate();
 
   const addToCart = () => {
-    addItemToCart(productToAdd);
-    navigate("/shoppingcart")
-  }
+    if (productToAdd) {
+      addItemToCart(productToAdd);
+    }
+    navigate("/shoppingcart");
+  };
 
   const data: CardDescriptor[] = [
     {

examples/ecommerce-jewellery-store/tsconfig.json

@@ -4,4 +4,4 @@
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" }
   ]
-}
+}