+
+ {errorMessage && (
+
+ );
+ }
+);
+
+export default DateTimePicker;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/Dropdown.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/Dropdown.tsx
index f45d4cd7..4426b1e2 100644
--- a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/Dropdown.tsx
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/Dropdown.tsx
@@ -189,6 +189,7 @@ const Dropdown = forwardRef(
{isDropdownMenuShown && (
+
+
+
+ }
+ />
+
+ )}
+
{/* Selected Item Comes First */}
{selectedItem && (
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/FullPageLoadingSpinner.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/FullPageLoadingSpinner.tsx
index a3c35ffd..08212aaf 100644
--- a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/FullPageLoadingSpinner.tsx
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/FullPageLoadingSpinner.tsx
@@ -1,14 +1,20 @@
import LoadingSpinner from "../icons/LoadingSpinner";
import { createPortal } from "react-dom";
+import Text from "./Text";
-const FullPageLoadingSpinner = () => {
+interface FullPageLoadingSpinnerProps {
+ message?: string;
+}
+const FullPageLoadingSpinner = (props: FullPageLoadingSpinnerProps) => {
+ const { message = "" } = props;
return (
<>
{createPortal(
-
+
{message} }
,
- document.getElementById('root') || document.body
+ document.getElementById("root") || document.body
)}
);
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/Grid.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/Grid.tsx
new file mode 100644
index 00000000..65301f5e
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/Grid.tsx
@@ -0,0 +1,129 @@
+import {
+ ColDef,
+ SizeColumnsToContentStrategy,
+ SizeColumnsToFitGridStrategy,
+ SizeColumnsToFitProvidedWidthStrategy,
+} from "ag-grid-community";
+import "ag-grid-community/styles/ag-grid.css";
+import "ag-grid-community/styles/ag-theme-quartz.css";
+import { AgGridReact } from "ag-grid-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useAppSelector } from "../../store";
+import "../../styles/Grid.css";
+
+interface GridProps {
+ rowData: RowType[] | null;
+ columnDefination: ColDef[];
+ rowSelection?: "single" | "multiple" | undefined;
+ onRowSelectionChanged?(selectedRows: Array): void;
+ autoSizeAllColumnsAfterDataUpdate?: boolean;
+ autoSizeStrategy?:
+ | SizeColumnsToFitGridStrategy
+ | SizeColumnsToFitProvidedWidthStrategy
+ | SizeColumnsToContentStrategy;
+}
+
+const Grid = (props: GridProps) => {
+ const {
+ rowData,
+ columnDefination,
+ autoSizeStrategy,
+ rowSelection,
+ onRowSelectionChanged,
+ autoSizeAllColumnsAfterDataUpdate = false,
+ } = props;
+
+ const isRTL = useAppSelector((state) => state.language.isRTL);
+
+ /* Grid ready flag: To know if grid is ready to be customized by API calls */
+ const [isGridReady, setIsGridReady] = useState(false);
+
+ const gridRef = useRef(null);
+
+ /* On grid ready, update isGridReady state */
+ const gridReadyHandler = () => {
+ setIsGridReady(true);
+ };
+
+ const windowResizeHandler = useCallback(() => {
+ /* If the grid is ready */
+ if (isGridReady) {
+ /* Calling gridApi methods according to the autoSizeStrategy */
+ if (autoSizeStrategy?.type === "fitGridWidth") {
+ gridRef.current!.api.sizeColumnsToFit();
+ } else if (autoSizeStrategy?.type === "fitCellContents") {
+ gridRef.current!.api.autoSizeAllColumns();
+ }
+ }
+ }, [isGridReady, autoSizeStrategy]);
+
+ /* Once row selection has changed */
+ const onSelectionChanged = useCallback(() => {
+ if (onRowSelectionChanged) {
+ /* Pass the selected rows to the parent */
+ const selectedRows = gridRef.current!.api.getSelectedRows();
+ onRowSelectionChanged(selectedRows);
+ }
+ }, [onRowSelectionChanged]);
+
+ /* On row data updated */
+ const onRowDataUpdatedHandler = () => {
+ /* If autoSizeAllColumnsAfterDataUpdate is true*/
+ if (autoSizeAllColumnsAfterDataUpdate && isGridReady) {
+ /**
+ * Auto size all columns after .5 seconds, and this event doesn't coincide with
+ * data rendered by AG Grid.
+ */
+ setTimeout(() => {
+ gridRef.current?.api.autoSizeAllColumns();
+ }, 500);
+ }
+ };
+
+ useEffect(() => {
+ /* Resize grid according to the passed autoSizeStrategy, resize on window resize as well */
+ windowResizeHandler();
+ window.addEventListener("resize", windowResizeHandler);
+
+ /* Removing even listener */
+ return () => {
+ window.removeEventListener("resize", windowResizeHandler);
+ };
+ }, [windowResizeHandler]);
+
+ /* Show loading over lay, if null is passed */
+ useEffect(() => {
+ if(isGridReady){
+ if(rowData === null){
+ gridRef.current?.api.showLoadingOverlay();
+ }
+ else{
+ gridRef.current?.api.hideOverlay();
+ }
+ }
+ }, [rowData, isGridReady])
+
+ return (
+ <>
+ ) => {
- const target = event.currentTarget;
- target.onerror = null;
- target.src = backupImageSrc;
- }
- return (
- 
- )
-}
+ /* On error loading the image, show the backupImage */
+ const imgLoadErrorHandler = (
+ event: SyntheticEvent
+ ) => {
+ const target = event.currentTarget;
+ /* On error of backupImageSrc, set loading to false */
+ target.onerror = () => {setIsLoading(false)};
+ target.src = backupImageSrc;
+ };
+
+ /* Once the image is loaded hide the loading spinner */
+ const onImageLoaded = () => {
+ setIsLoading(false);
+ };
+
+ return (
+ <>
+ {isLoading && (
+
+
+ );
+};
-export default Image;
\ No newline at end of file
+export default Image;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/ImagePicker.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/ImagePicker.tsx
new file mode 100644
index 00000000..dbaad8f0
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/ImagePicker.tsx
@@ -0,0 +1,110 @@
+import React, { ChangeEvent, useEffect, useMemo, useState } from "react";
+import { ForwardedRef, useId } from "react";
+import AddIcon from "../icons/AddIcon";
+import Image from "./Image";
+import ErrorMessage from "./ErrorMessage";
+import DeleteIcon from "../icons/DeleteIcon";
+import { useAppSelector } from "../../store";
+import Button from "./Button";
+
+
+export interface ImagePickerActions {
+ forceSetSelectedImage(file: File): void;
+}
+interface ImagePickerProps {
+ className?: string;
+ altText: string;
+ onChange(selectedImage?: File): void;
+ errorMessage?: string;
+ actionsRef?: ImagePickerActions;
+}
+const ImagePicker = React.forwardRef(
+ (props: ImagePickerProps, ref: ForwardedRef) => {
+ const {
+ className = "",
+ altText = "",
+ onChange,
+ errorMessage = "",
+ actionsRef
+ } = props;
+ const id = useId();
+
+ const isRTL = useAppSelector((state) => state.language.isRTL);
+
+ /* Selected Image File */
+ const [selectedImage, setSelectedImage] = useState();
+
+ /* Image Change Handler */
+ const imageChangeHandler = (event: ChangeEvent) => {
+ /* Setting state and passing data back to parent */
+ if (event?.target?.files?.[0]) {
+ setSelectedImage(event.target.files[0]);
+ onChange(event.target.files[0]);
+ }
+ };
+
+ /* Remove Image Handler setting selected image to undefined, and passing it to parent */
+ const removeImageHandler = () => {
+ setSelectedImage(undefined);
+ onChange(undefined);
+ }
+
+
+ /* URL for previewing the image */
+ const previewSource = useMemo(() => {
+ if (selectedImage) {
+ return URL.createObjectURL(selectedImage);
+ }
+ return null;
+ }, [selectedImage]);
+
+ useEffect(() => {
+ if(actionsRef){
+ actionsRef.forceSetSelectedImage = (file: File) => {
+ setSelectedImage(file);
+ }
+ }
+ }, [actionsRef])
+
+ return (
+ <>
+
+ {errorMessage && (
+
+
+
+ );
+};
+
+export default Grid;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/Image.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/Image.tsx
index cfb0860f..d0857d68 100644
--- a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/Image.tsx
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/Image.tsx
@@ -1,23 +1,50 @@
-import { SyntheticEvent } from "react";
+import { SyntheticEvent, useState } from "react";
+import LoadingSpinner from "../icons/LoadingSpinner";
interface ImageProps {
- src: string,
- alt: string,
- backupImageSrc: string,
- className?: string
+ src: string;
+ alt: string;
+ backupImageSrc: string;
+ className?: string;
}
const Image = (props: ImageProps) => {
+ const { src, alt, backupImageSrc, className = "" } = props;
- const {src, alt, backupImageSrc, className = ''} = props
+ const [isLoading, setIsLoading] = useState(true);
- const imgLoadErrorHandler = (event: SyntheticEvent
+
+ )}
+
+
+
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/RadioButtons.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/RadioButtons.tsx
index a1420156..c9c20d53 100644
--- a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/RadioButtons.tsx
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/RadioButtons.tsx
@@ -7,6 +7,7 @@ interface RadioButtonsProps {
items: Array>;
containerClassName?: string;
radioButtonContainerClassName?: string;
+ radioButtonClassName?: string;
onChange(selectedItem: T): void;
errorMessage?: string;
}
@@ -19,6 +20,7 @@ const RadioButtons = React.forwardRef(
items,
containerClassName = "",
radioButtonContainerClassName = "",
+ radioButtonClassName = "",
onChange,
errorMessage = "",
} = props;
@@ -46,7 +48,7 @@ const RadioButtons = React.forwardRef(
defaultChecked={item.isDefaultSelected}
ref={ref}
className={`appearance-none cursor-pointer w-4 h-4 bg-white rounded-full outline outline-2 outline-black
- checked:border-[3px] checked:border-white checked:bg-black
+ checked:border-[3px] checked:border-white checked:bg-black ${radioButtonClassName}
${isRTL ? "ml-2" : "mr-2"}`}
onChange={() => {
onChange(item.data);
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/addeditcategorymodal/container/AddEditCategoryModalContainer.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/addeditcategorymodal/container/AddEditCategoryModalContainer.tsx
new file mode 100644
index 00000000..7e9e1933
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/addeditcategorymodal/container/AddEditCategoryModalContainer.tsx
@@ -0,0 +1,92 @@
+import { useState } from "react";
+import { AddCategoryFields, EditCategoryFields } from "../../../../constants";
+import { Category } from "../../../../services/category/CategoryTypes";
+import AddEditCategoryModal from "../presentation/AddEditCategoryModal";
+import CategoryService from "../../../../services/category/CategoryService";
+import ApiError from "../../../../services/ApiError";
+import FeedbackModal from "../../feedbackmodal/presentation/FeedbackModal";
+import { useTranslation } from "react-i18next";
+
+interface AddEditCategoryModalContainer {
+ category?: Category;
+ hideModal(): void;
+ onCategoryAddedOrUpdatedHandler(category: Category): void;
+}
+const AddEditCategoryModalContainer = (
+ props: AddEditCategoryModalContainer
+) => {
+ const { category, hideModal, onCategoryAddedOrUpdatedHandler } = props;
+
+ const { t } = useTranslation();
+
+ /* API Call in progress flag */
+ const [isLoading, setIsLoading] = useState(false);
+
+ /* Error from API */
+ const [apiErrorMessage, setApiErrorMessage] = useState("");
+
+ /* State to show success dialog once add or edit operation is complete */
+ const [isAddOrEditComplete, setIsAddOrEditComplete] = useState(false);
+
+ const addCategoryHandler = async (fields: AddCategoryFields) => {
+ setIsLoading(true);
+ setApiErrorMessage("");
+
+ const response = await CategoryService.addCategory(fields.categoryName);
+
+ setIsLoading(false);
+
+ if (!(response instanceof ApiError)) {
+ setIsAddOrEditComplete(true);
+ onCategoryAddedOrUpdatedHandler(response);
+ } else {
+ setApiErrorMessage(
+ response.errorResponse?.message || response.errorMessage
+ );
+ }
+ };
+
+ const editCategoryHandler = async (fields: EditCategoryFields) => {
+ setIsLoading(true);
+ setApiErrorMessage("");
+
+ const response = await CategoryService.editCategory(fields);
+
+ setIsLoading(false);
+
+ if (!(response instanceof ApiError)) {
+ setIsAddOrEditComplete(true);
+ onCategoryAddedOrUpdatedHandler(response);
+ } else {
+ setApiErrorMessage(
+ response.errorResponse?.message || response.errorMessage
+ );
+ }
+ };
+ return (
+ <>
+ {isAddOrEditComplete ? (
+ ();
+
+ /* If a category is passed set it's value in the input */
+ useEffect(() => {
+ if (category) {
+ setValue("categoryName", category.name);
+ }
+ }, [category, setValue]);
+
+ return (
+
+
+
+ );
+};
+
+export default AddEditCategoryModal;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/addeditcouponmodal/container/AddEditCouponModalContainer.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/addeditcouponmodal/container/AddEditCouponModalContainer.tsx
new file mode 100644
index 00000000..a8a05747
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/addeditcouponmodal/container/AddEditCouponModalContainer.tsx
@@ -0,0 +1,95 @@
+import { useState } from "react";
+import { CouponClass } from "../../../../services/coupon/CouponTypes";
+import { useTranslation } from "react-i18next";
+import AddEditCouponModal from "../presentation/AddEditCouponModal";
+import { AddEditCouponFields } from "../../../../constants";
+import FeedbackModal from "../../feedbackmodal/presentation/FeedbackModal";
+import CouponService from "../../../../services/coupon/CouponService";
+import ApiError from "../../../../services/ApiError";
+
+interface AddEditCouponModalContainerProps {
+ hideModal(): void;
+ onCouponAddedOrEdited(coupon: CouponClass): void;
+ coupon?: CouponClass;
+}
+const AddEditCouponModalContainer = (
+ props: AddEditCouponModalContainerProps
+) => {
+ const { hideModal, onCouponAddedOrEdited, coupon } = props;
+
+ const { t } = useTranslation();
+
+ const [isLoading, setIsLoading] = useState(false);
+
+ const [apiErrorMessage, setApiErrorMessage] = useState("");
+
+ const [isAddOrEditComplete, setIsAddOrEditComplete] = useState(false);
+
+ const addCouponHandler = async (fields: AddEditCouponFields) => {
+ setIsLoading(true);
+ setApiErrorMessage("");
+
+ const response = await CouponService.addCoupon(fields);
+
+ setIsLoading(false);
+
+ /* Success */
+ if (!(response instanceof ApiError)) {
+ setIsAddOrEditComplete(true);
+ onCouponAddedOrEdited(response);
+ } else {
+ /* Error */
+ setApiErrorMessage(
+ response.errorResponse?.message || response.errorMessage
+ );
+ }
+ };
+ const editCouponHandler = async (fields: AddEditCouponFields) => {
+ if (coupon) {
+ setIsLoading(true);
+ setApiErrorMessage("");
+
+ const response = await CouponService.editCoupon(fields, coupon?._id);
+
+ setIsLoading(false);
+
+ /* Success */
+ if (!(response instanceof ApiError)) {
+ setIsAddOrEditComplete(true);
+ onCouponAddedOrEdited(response);
+ } else {
+ /* Error */
+ setApiErrorMessage(
+ response.errorResponse?.message || response.errorMessage
+ );
+ }
+ }
+ };
+
+ return (
+ <>
+ {isAddOrEditComplete ? (
+ ();
+
+ /* Default Values, for editing a coupon */
+ useEffect(() => {
+ if (coupon) {
+ setValue("name", coupon.name);
+ setValue("couponCode", coupon.couponCode);
+ setValue("discountValue", coupon.discountValue);
+ }
+ }, [coupon, setValue]);
+
+ return (
+
+
+
+ );
+};
+
+export default AddEditCouponModal;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/addeditproductmodal/container/AddEditProductModalContainer.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/addeditproductmodal/container/AddEditProductModalContainer.tsx
new file mode 100644
index 00000000..5fc67716
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/addeditproductmodal/container/AddEditProductModalContainer.tsx
@@ -0,0 +1,215 @@
+import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+ AddEditProductFieldsForService,
+ DropdownItem,
+ EditProductFieldsForService
+} from "../../../../constants";
+import ApiError from "../../../../services/ApiError";
+import CategoryService from "../../../../services/category/CategoryService";
+import ProductService from "../../../../services/product/ProductService";
+import { Product } from "../../../../services/product/ProductTypes";
+import FeedbackModal from "../../feedbackmodal/presentation/FeedbackModal";
+import AddEditProductModal from "../presentation/AddEditProductModal";
+
+interface AddEditProductModalContainerProps {
+ hideModal(): void;
+ product?: Product;
+ onProductAddedOrUpdated(newProduct: Product): void;
+}
+const AddEditProductModalContainer = (
+ props: AddEditProductModalContainerProps
+) => {
+ const { hideModal, product, onProductAddedOrUpdated } = props;
+
+ const { t } = useTranslation();
+
+ /* Categories Dropdown */
+ const [categoriesDropdown, setCategoriesDropdown] = useState(
+ []
+ );
+
+ /* Loader flag */
+ const [isLoading, setIsLoading] = useState(false);
+
+ /* Error message when editing or adding a product */
+ const [apiErrorMessage, setApiErrorMessage] = useState("");
+
+ /* Once add or edit is complete to show the final success modal */
+ const [isAddOrEditOperationComplete, setIsAddOrEditOperationComplete] =
+ useState(false);
+
+ /* Default category selected in case of edit product */
+ const [defaultSelectedCategory, setDefaultSelectedCategory] =
+ useState();
+
+ /* Fetch all categories for dropdown menu */
+ const fetchAllCategories = useCallback(() => {
+ CategoryService.getAllCategoriesAsync((data, _, error) => {
+ if (!error) {
+ /* Set Categories Dropdown Items */
+ setCategoriesDropdown((prev) => {
+ const formatted = data.map((category) => {
+ /* Formatting the object to include id as category id, and text as category name */
+ const formattedCategory = { id: category._id, text: category.name };
+
+ /* If a product is passed and it's id is same as the current category id, set it as the default selected category */
+ if (product && category._id === product.category) {
+ setDefaultSelectedCategory(formattedCategory);
+ }
+
+ /* Return formatted category from the map function */
+ return formattedCategory;
+ });
+
+ /* Adding to the list of dropdown items for categories */
+ return [...prev, ...formatted];
+ });
+ } else {
+ console.error("Error -- fetchAllCategories()", error);
+ }
+ });
+ }, [product]);
+
+ const editProductHandler = async (fields: AddEditProductFieldsForService) => {
+ if (product) {
+ setIsLoading(true);
+ setApiErrorMessage("");
+
+ /* Object which will consist of all the fields to update */
+ const fieldsToUpdate: EditProductFieldsForService = { ...fields };
+
+ let isFieldsChanged = false;
+
+ let key: keyof typeof fieldsToUpdate;
+
+ /* Iterating through each key to only keep the fields which have been updated */
+ for (key in fieldsToUpdate) {
+ const value = fieldsToUpdate[key];
+
+ /* Main Image */
+ if (value instanceof File) {
+ /* If the mainImage has not changed delete it from the fieldsToUpdate */
+ if (product.mainImage._id === value.name) {
+ delete fieldsToUpdate.mainImage;
+ }
+ else{
+ isFieldsChanged = true;
+ }
+ }
+ /* SubImages */
+ else if (Array.isArray(value)) {
+ /* For each existing sub image of the product */
+ for (const existingSubImage of product.subImages) {
+ /* Checking if image exists in the updated subImages list */
+ const imageIndex = value.findIndex((subImage) => {
+ if (subImage.name === existingSubImage._id) {
+ return true;
+ }
+ });
+ /* If the image does not exist */
+ if (imageIndex === -1) {
+ /* Remove the image */
+ const response = await ProductService.removeSubImageOfProduct(
+ existingSubImage._id,
+ product._id
+ );
+ /* Error removing the image, return an ApiError */
+ if (response instanceof ApiError) {
+ setApiErrorMessage(
+ response.errorResponse?.message || response.errorMessage
+ );
+ setIsLoading(false);
+ console.error("-- Error removing Image", response);
+ return;
+ }
+ isFieldsChanged = true;
+ } else {
+ /* Removing from the list of sub images in fields to update as the image already exists */
+ value.splice(imageIndex, 1);
+ }
+ }
+ }
+ else if(typeof value === "object" && "id" in value){
+ if(product.category !== value.id){
+ isFieldsChanged = true;
+ }
+ }
+ else {
+ if(value === product[key]){
+ delete fieldsToUpdate[key]
+ }
+ else{
+ isFieldsChanged = true;
+ }
+ }
+ }
+
+ if(!isFieldsChanged){
+ setApiErrorMessage(t("nothingToUpdate"));
+ setIsLoading(false);
+ return;
+ }
+
+ const response = await ProductService.editProduct(fieldsToUpdate, product._id);
+
+ setIsLoading(false);
+
+ if(!(response instanceof ApiError)){
+ /* Success */
+ setIsAddOrEditOperationComplete(true);
+ onProductAddedOrUpdated(response);
+ }
+ else{
+ /* Error */
+ setApiErrorMessage(response.errorResponse?.message || response.errorMessage)
+ }
+
+ }
+ };
+
+ const addProductHandler = async (fields: AddEditProductFieldsForService) => {
+ setIsLoading(true);
+ setApiErrorMessage("");
+ const response = await ProductService.addProduct(fields);
+ setIsLoading(false);
+
+ if (!(response instanceof ApiError)) {
+ setIsAddOrEditOperationComplete(true);
+ onProductAddedOrUpdated(response);
+ } else {
+ setApiErrorMessage(
+ response.errorResponse?.message || response.errorMessage
+ );
+ }
+ };
+
+ useEffect(() => {
+ fetchAllCategories();
+ }, [fetchAllCategories]);
+
+ return (
+ <>
+ {isAddOrEditOperationComplete ? (
+ ({
+ forceSetSelectedImage(_) {},
+ });
+
+ /* Sub Image Actions Ref as an array for setting the inital image in case of edit operation */
+ const subImagesActionsRef = useRef([]);
+ subImagesListForIteration.forEach((_) => {
+ subImagesActionsRef.current.push({ forceSetSelectedImage(_) {} });
+ });
+
+ /* If product exists: edit mode is true */
+ const isInEditMode = useMemo(() => {
+ return product ? true : false;
+ }, [product]);
+
+ const {
+ register,
+ setValue,
+ handleSubmit,
+ control,
+ formState: { errors },
+ } = useForm();
+
+ /* Submit Handler */
+ const submitHandler = (fields: AddEditProductFields) => {
+ /* Change type, appending all subImages into a single list */
+ const fieldsForApiCall: AddEditProductFieldsForService = {
+ ...fields,
+ subImages: [],
+ };
+
+ /* For each subImage adding it to a single array in fieldsForApiCall */
+ subImagesListForIteration.forEach((_, index) => {
+ const subImage =
+ fields[`subImage${index + 1}` as keyof AddEditProductFields];
+ if (subImage && subImage instanceof File) {
+ fieldsForApiCall.subImages.push(subImage);
+ }
+ /* Deleting subImage1, 2, etc.. as they got added when the object was initialized */
+ delete fieldsForApiCall[
+ `subImage${index + 1}` as keyof AddEditProductFieldsForService
+ ];
+ });
+
+ if (isInEditMode) {
+ editProductHandler(fieldsForApiCall);
+ } else {
+ addProductHandler(fieldsForApiCall);
+ }
+ };
+
+ /* Setting the default values: If the modal is for update */
+ useEffect(() => {
+ const setDefaultProductValues = async () => {
+ if (product) {
+ setIsPreparingModalForEdit(true);
+
+ /* Setting name, description, price and stock */
+ setValue("name", product?.name);
+ setValue("description", product.description);
+ setValue("price", product.price);
+ setValue("stock", product.stock);
+
+ /* Setting the category of the product */
+ if (defaultSelectedCategory) {
+ setValue("category", defaultSelectedCategory);
+ }
+
+ /* Getting a main image as a blob*/
+ const mainImageFile = await UtilServices.getImageUrlAsFileObject(
+ product.mainImage.url,
+ product.mainImage._id
+ );
+
+ /* Setting the mainImage, forceSetting it in the Image Picker component */
+ setValue("mainImage", mainImageFile);
+ mainImageActionsRef.current.forceSetSelectedImage(mainImageFile);
+
+ /* Performing the same action for each subImage */
+ for (let index = 0; index < subImagesListForIteration.length; index++) {
+ if (product?.subImages?.[index]) {
+ const subImageFile = await UtilServices.getImageUrlAsFileObject(
+ product.subImages[index].url,
+ product.subImages[index]._id
+ );
+ setValue(
+ `subImage${index + 1}` as keyof AddEditProductFields,
+ subImageFile
+ );
+ subImagesActionsRef.current[index].forceSetSelectedImage(
+ subImageFile
+ );
+ }
+ }
+
+ setIsPreparingModalForEdit(false);
+ }
+ };
+ setDefaultProductValues();
+ }, [product, defaultSelectedCategory, setValue, subImagesListForIteration]);
+
+ return (
+
+
+
+ );
+};
+
+export default AddEditProductModal;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/changecouponstatusmodal/container/ChangeCouponStatusModalContainer.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/changecouponstatusmodal/container/ChangeCouponStatusModalContainer.tsx
new file mode 100644
index 00000000..a6a394e2
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/changecouponstatusmodal/container/ChangeCouponStatusModalContainer.tsx
@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import ApiError from "../../../../services/ApiError";
+import CouponService from "../../../../services/coupon/CouponService";
+import { CouponClass } from "../../../../services/coupon/CouponTypes";
+import FeedbackModal from "../../feedbackmodal/presentation/FeedbackModal";
+import ChangeCouponStatusModal from "../presentation/ChangeCouponStatusModal";
+
+interface ChangeCouponStatusModalContainerProps {
+ hideModal(): void;
+ coupon: CouponClass;
+ resetCouponData(coupon: CouponClass): void;
+}
+const ChangeCouponStatusModalContainer = (
+ props: ChangeCouponStatusModalContainerProps
+) => {
+ const { hideModal, coupon, resetCouponData } = props;
+
+ const { t } = useTranslation();
+
+ /* Loading flag */
+ const [isLoading, setIsLoading] = useState(false);
+
+ /* API Error message */
+ const [apiErrorMessage, setApiErrorMessage] = useState("");
+
+ /* Status change completed flag */
+ const [isStatusChangeComplete, setIsStatusChangeComplete] = useState(false);
+
+ /* Change status handler */
+ const changeCouponStatusHandler = async () => {
+ setIsLoading(true);
+ setApiErrorMessage("");
+ const response = await CouponService.updateCouponActiveStatus(
+ coupon._id,
+ coupon.isActive
+ );
+
+ setIsLoading(false);
+
+ if (!(response instanceof ApiError)) {
+ /* Success: show feedback modal */
+ setIsStatusChangeComplete(true);
+ } else {
+ /* Error: Show feedback modal and reset coupon data to the previous isActive flag */
+ setApiErrorMessage(
+ response.errorResponse?.message || response.errorMessage
+ );
+ resetCouponData({ ...coupon, isActive: !coupon.isActive });
+ }
+ };
+
+ /* On click of cancel, reset data and hide modal */
+ const hideModalAndResetCouponData = () => {
+ resetCouponData({...coupon, isActive: !coupon.isActive})
+ hideModal();
+ }
+
+ return (
+ <>
+ {isStatusChangeComplete || apiErrorMessage ? (
+
+
+ );
+};
+
+export default ChangeCouponStatusModal;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/deletecategorymodal/container/DeleteCategoryModalContainer.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/deletecategorymodal/container/DeleteCategoryModalContainer.tsx
new file mode 100644
index 00000000..144cc233
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/deletecategorymodal/container/DeleteCategoryModalContainer.tsx
@@ -0,0 +1,70 @@
+import { useState } from "react";
+import { Category } from "../../../../services/category/CategoryTypes";
+import DeleteCategoryModal from "../presentation/DeleteCategoryModal";
+import { useTranslation } from "react-i18next";
+import CategoryService from "../../../../services/category/CategoryService";
+import ApiError from "../../../../services/ApiError";
+import FeedbackModal from "../../feedbackmodal/presentation/FeedbackModal";
+
+interface DeleteCategoryModalContainerProps {
+ hideModal(): void;
+ category: Category;
+ onCategoryDeleted(deletedCategory: Category): void;
+}
+const DeleteCategoryModalContainer = (
+ props: DeleteCategoryModalContainerProps
+) => {
+ const { hideModal, category, onCategoryDeleted } = props;
+
+ const { t } = useTranslation();
+
+ /* API Call in progress flag */
+ const [isLoading, setIsLoading] = useState(false);
+
+ /* Error from API */
+ const [apiErrorMessage, setApiErrorMessage] = useState("");
+
+ /* State to show success dialog once delete operation is complete */
+ const [isDeletionComplete, setIsDeletionComplete] = useState(false);
+
+ const deleteCategoryHandler = async () => {
+ setIsLoading(true);
+ setApiErrorMessage("");
+
+ const response = await CategoryService.deleteCategory(category);
+
+ setIsLoading(false);
+
+ if (!(response instanceof ApiError)) {
+ /* Success */
+ setIsDeletionComplete(true);
+ onCategoryDeleted(response.data.deletedCategory);
+ } else {
+ /* Error */
+ setApiErrorMessage(
+ response.errorResponse?.message || response.errorMessage
+ );
+ }
+ };
+
+ return (
+ <>
+ {isDeletionComplete || apiErrorMessage ? (
+
+
+ )
+}
+
+export default DeleteCategoryModal;
\ No newline at end of file
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/deletecouponmodal/container/DeleteCouponModalContainer.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/deletecouponmodal/container/DeleteCouponModalContainer.tsx
new file mode 100644
index 00000000..b42eab12
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/deletecouponmodal/container/DeleteCouponModalContainer.tsx
@@ -0,0 +1,70 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import ApiError from "../../../../services/ApiError";
+import CouponService from "../../../../services/coupon/CouponService";
+import { CouponClass } from "../../../../services/coupon/CouponTypes";
+import FeedbackModal from "../../feedbackmodal/presentation/FeedbackModal";
+import DeleteCouponModal from "../presentation/DeleteCouponModal";
+
+interface DeleteCouponModalContainerProps {
+ hideModal(): void;
+ coupon: CouponClass;
+ onCouponDeleted(deletedCoupon: CouponClass): void;
+}
+const DeleteCouponModalContainer = (props: DeleteCouponModalContainerProps) => {
+ const { hideModal, coupon, onCouponDeleted } = props;
+
+ const { t } = useTranslation();
+
+ /* API Call in progress flag */
+ const [isLoading, setIsLoading] = useState(false);
+
+ /* Error from API */
+ const [apiErrorMessage, setApiErrorMessage] = useState("");
+
+ /* State to show success dialog once delete operation is complete */
+ const [isDeletionComplete, setIsDeletionComplete] = useState(false);
+
+ const deleteCouponHandler = async () => {
+ setIsLoading(true);
+ setApiErrorMessage("");
+
+ const response = await CouponService.deleteCoupon(coupon._id);
+
+ setIsLoading(false);
+
+ if (!(response instanceof ApiError)) {
+ /* Success */
+ setIsDeletionComplete(true);
+ onCouponDeleted(response);
+ } else {
+ /* Error */
+ setApiErrorMessage(
+ response.errorResponse?.message || response.errorMessage
+ );
+ }
+ };
+
+ return (
+ <>
+ {isDeletionComplete || apiErrorMessage ? (
+
+
+ );
+};
+
+export default DeleteCouponModal;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/deleteproductmodal/container/DeleteProductModalContainer.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/deleteproductmodal/container/DeleteProductModalContainer.tsx
new file mode 100644
index 00000000..6ecbdec3
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/deleteproductmodal/container/DeleteProductModalContainer.tsx
@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import ApiError from "../../../../services/ApiError";
+import ProductService from "../../../../services/product/ProductService";
+import { Product } from "../../../../services/product/ProductTypes";
+import FeedbackModal from "../../feedbackmodal/presentation/FeedbackModal";
+import DeleteProductModal from "../presentation/DeleteProductModal";
+
+interface DeleteProductModalContainerProps {
+ hideModal(): void;
+ product: Product;
+ onProductDeleted(deletedProduct: Product): void;
+}
+const DeleteProductModalContainer = (
+ props: DeleteProductModalContainerProps
+) => {
+ const { hideModal, product, onProductDeleted } = props;
+
+ const { t } = useTranslation();
+
+ /* API Call in progress flag */
+ const [isLoading, setIsLoading] = useState(false);
+
+ /* Error from API */
+ const [apiErrorMessage, setApiErrorMessage] = useState("");
+
+ /* State to show success dialog once delete operation is complete */
+ const [isDeletionComplete, setIsDeletionComplete] = useState(false);
+
+ const deleteProductHandler = async () => {
+ setIsLoading(true);
+ setApiErrorMessage("");
+
+ const response = await ProductService.deleteProduct(product._id);
+
+ setIsLoading(false);
+
+ if (!(response instanceof ApiError)) {
+ /* Success */
+ setIsDeletionComplete(true);
+ onProductDeleted(response);
+ } else {
+ /* Error */
+ setApiErrorMessage(
+ response.errorResponse?.message || response.errorMessage
+ );
+ }
+ };
+
+ return (
+ <>
+ {isDeletionComplete || apiErrorMessage ? (
+
+
+ );
+};
+
+export default DeleteProductModal;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/editorderstatusmodal/container/EditOrderStatusModalContainer.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/editorderstatusmodal/container/EditOrderStatusModalContainer.tsx
new file mode 100644
index 00000000..058d9861
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/editorderstatusmodal/container/EditOrderStatusModalContainer.tsx
@@ -0,0 +1,75 @@
+import { useTranslation } from "react-i18next";
+import { ORDER_STATUS } from "../../../../data/applicationData";
+import ApiError from "../../../../services/ApiError";
+import OrderService from "../../../../services/order/OrderService";
+import { OrderClass } from "../../../../services/order/OrderTypes";
+import FeedbackModal from "../../feedbackmodal/presentation/FeedbackModal";
+import EditOrderStatusModal from "../presentation/EditOrderStatusModal";
+import { useState } from "react";
+
+interface EditOrderStatusModalContainerProps {
+ hideModal(): void;
+ order: OrderClass;
+ onOrderStatusUpdatedHandler(orderId: string, status: ORDER_STATUS): void;
+}
+const EditOrderStatusModalContainer = (
+ props: EditOrderStatusModalContainerProps
+) => {
+ const { hideModal, onOrderStatusUpdatedHandler, order } = props;
+
+ const { t } = useTranslation();
+
+ /* API Call in progress flag */
+ const [isLoading, setIsLoading] = useState(false);
+
+ /* Error from API */
+ const [apiErrorMessage, setApiErrorMessage] = useState("");
+
+ /* State to show success dialog once edit operation is completed*/
+ const [isEditComplete, setIsEditComplete] = useState(false);
+
+ /* Edit Status Handler */
+ const editStatusHandler = async (status: ORDER_STATUS) => {
+ setIsLoading(true);
+ setApiErrorMessage("");
+
+ const response = await OrderService.editOrderStatus(status, order._id);
+
+ setIsLoading(false);
+
+ /* Success */
+ if (!(response instanceof ApiError)) {
+ setIsEditComplete(true);
+ onOrderStatusUpdatedHandler(order._id, status);
+ } else {
+ /* Error */
+ setApiErrorMessage(
+ response.errorResponse?.message || response.errorMessage
+ );
+ }
+ };
+ return (
+ <>
+ {apiErrorMessage || isEditComplete ? (
+ = useMemo(() => {
+ /* Array of Order Statuses with id and textKey both as the status */
+ return Object.keys(ORDER_STATUS).map((status) => {
+ return {
+ id: status,
+ textKey: status.toLowerCase(),
+ };
+ });
+ }, []);
+
+ /* Submit button handler */
+ const submitButtonHandler = (fields: { status: DropdownItem }) => {
+ /* Call the container edit status function passind the status selected */
+ editStatusHandler(fields.status.id as ORDER_STATUS);
+ };
+
+ /* For setting selected dropdown item value */
+ const statusDropdownActionsRef = useRef({
+ forceSetSelectedItem(_) {},
+ });
+
+ const { control, handleSubmit, watch, setValue } = useForm<{
+ status: DropdownItem;
+ }>();
+
+ /* Update button enabled flag */
+ const [isUpdateButtonEnabled, setIsUpdateButtonEnabled] = useState(false);
+
+ /* Watching for changed in the form */
+ useEffect(() => {
+ const subscription = watch((value) => {
+ /*
+ If the selected status is not equal to the order status, enable the update button,
+ else disable it
+ */
+ if(value.status?.id && order.status !== value.status.id){
+ setIsUpdateButtonEnabled(true);
+ }
+ else{
+ setIsUpdateButtonEnabled(false);
+ }
+ });
+ return () => {
+ subscription.unsubscribe();
+ };
+ }, [watch, order]);
+
+ /* On change of order */
+ useEffect(() => {
+ if (order) {
+ /* Default selected dropdown item based on the order status */
+ const selectedDropdownItem = orderStatusDropdownItems.find(
+ (item) => item.id === order.status
+ );
+
+ /* Setting the default status dropdown value */
+ if (selectedDropdownItem) {
+ setValue("status", selectedDropdownItem);
+ statusDropdownActionsRef.current.forceSetSelectedItem(
+ selectedDropdownItem
+ );
+ }
+ }
+ }, [order, orderStatusDropdownItems, setValue]);
+
+ return (
+
+
+
+ );
+};
+
+export default EditOrderStatusModal;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/logoutmodal/container/LogoutModalContainer.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/logoutmodal/container/LogoutModalContainer.tsx
index 2d9001e8..304ffa75 100644
--- a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/logoutmodal/container/LogoutModalContainer.tsx
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/modals/logoutmodal/container/LogoutModalContainer.tsx
@@ -30,6 +30,7 @@ const LogoutModalContainer = (props: LogoutModalContainerProps) => {
//Error
setErrorMessage(response.errorResponse?.message || response.errorMessage)
} else {
+ hideModal();
dispatch(logOut());
navigate("/");
}
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/categoriestable/container/CategoriesTableContainer.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/categoriestable/container/CategoriesTableContainer.tsx
new file mode 100644
index 00000000..d0a7a7d9
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/categoriestable/container/CategoriesTableContainer.tsx
@@ -0,0 +1,112 @@
+import { useCallback, useEffect, useState } from "react";
+import CategoryService from "../../../../services/category/CategoryService";
+import CategoriesTable from "../presentation/CategoriesTable";
+import { Category } from "../../../../services/category/CategoryTypes";
+import {
+ convertUTCToLocalTime,
+ formatDateTime,
+} from "../../../../utils/dateTimeHelper";
+import { DATE_TIME_FORMATS } from "../../../../constants";
+
+const CategoriesTableContainer = () => {
+
+ /*
+ Flag for whether categories are being fetched
+ (To show loading spinner until the first response come)
+ */
+ const [isFetchingCategories, setIsFetchingCategories] = useState(true);
+
+ /* Key value categories object, key is id and value is the Category */
+ const [categories, setCategories] = useState<{ [key: string]: Category }>({});
+
+ /* To know if an error has occurred when fetching categories */
+ const [isError, setIsError] = useState(false);
+
+ const formatCategory = (category: Category) => {
+ /* Cloning the object, so the original object from container doesn't get updated */
+ category = { ...category };
+
+ /* Converting all times to local and formatting them */
+ category.createdAt = formatDateTime(
+ convertUTCToLocalTime(
+ category.createdAt,
+ DATE_TIME_FORMATS.standardDateWithTime
+ ),
+ DATE_TIME_FORMATS.standardDateWithTime,
+ DATE_TIME_FORMATS.displayedDateWithTime
+ );
+
+ category.updatedAt = formatDateTime(
+ convertUTCToLocalTime(
+ category.updatedAt,
+ DATE_TIME_FORMATS.standardDateWithTime
+ ),
+ DATE_TIME_FORMATS.standardDateWithTime,
+ DATE_TIME_FORMATS.displayedDateWithTime
+ );
+ return category;
+ };
+
+ /* Fetch All Categories Asynchronously */
+ const fetchAllCategories = useCallback(() => {
+ setIsFetchingCategories(true);
+ CategoryService.getAllCategoriesAsync((data, _, error) => {
+ if (!error) {
+ setCategories((prev) => {
+ data.map((category) => {
+ /* Formatting category */
+ category = formatCategory(category);
+
+ /* At key: Category ID, value is the category object */
+ prev[category._id] = category;
+ });
+ return {...prev};
+ });
+
+ setIsFetchingCategories(false);
+
+ } else {
+ setIsFetchingCategories(false);
+ console.error("Error -- fetchAllCategories()", error);
+ setIsError(true);
+ }
+ });
+ }, []);
+
+ /* Once a category has been updated or added (In order to avoid another apiCall) */
+ const onCategoryAddedOrUpdatedHandler = (
+ newCategory: Category,
+ ) => {
+ /* Update category object at the categoryId */
+ setCategories((prev) => {
+ prev[newCategory._id] = formatCategory(newCategory);
+ return {...prev};
+ });
+ };
+
+ const onCategoryDeletedHandler = (deletedCategory: Category) => {
+ /* Removing the key value pair of the deletedCategory */
+ setCategories((prev) => {
+ delete prev[deletedCategory._id]
+ return {...prev};
+ });
+ };
+
+ /* Initial Render */
+ useEffect(() => {
+ fetchAllCategories();
+ }, [fetchAllCategories]);
+
+ return (
+ <>
+ ();
+
+ /* Toggle Add Category Dialog */
+ const toggleAddCategoryModal = () => {
+ /* Reset selected category */
+ setSelectedCategory(undefined);
+ setIsAddEditCategoryModalShown((prev) => !prev);
+ };
+
+ /* Toggle Edit or Delete Category Dialog */
+ function toggleEditOrDeleteCategoryModal(
+ category: Category,
+ type: "EDIT" | "DELETE"
+ ) {
+ /* If there is no selected category: Toggle is to show the dialog */
+ if (!selectedCategory && category) {
+ /* Set selected category */
+ setSelectedCategory(category);
+ } else {
+ /* Set category to undefined */
+ setSelectedCategory(undefined);
+ }
+ /* Toggle the dialog */
+ if (type === "EDIT") {
+ setIsAddEditCategoryModalShown((prev) => !prev);
+ } else {
+ setIsDeleteCategoryModalShown((prev) => !prev);
+ }
+ }
+
+ /*
+ On Large screens fit the entire width, on smaller screens fit the contents of a cell
+ */
+ const autoSizeStrategy:
+ | SizeColumnsToFitGridStrategy
+ | SizeColumnsToFitProvidedWidthStrategy
+ | SizeColumnsToContentStrategy = useMemo(() => {
+ if (isLG) {
+ return {
+ type: "fitGridWidth",
+ };
+ }
+ return {
+ type: "fitCellContents",
+ };
+ }, [isLG]);
+
+ return (
+ <>
+ {isError ? (
+
+ onCategoryAddedOrUpdatedHandler(category)
+ }
+ />
+ )}
+ {isDeleteCategoryModalShown && selectedCategory && (
+
+ toggleEditOrDeleteCategoryModal(selectedCategory, "DELETE")
+ }
+ category={selectedCategory}
+ onCategoryDeleted={(deletedCategory) => {
+ onCategoryDeletedHandler(deletedCategory);
+ }}
+ />
+ )}
+ ();
+
+ const toggleCouponStatusChangeModal = () => {
+ setCouponStatusPropertiesState((prev) => {
+ if (prev.isModalShown) {
+ return { isModalShown: false, coupon: undefined };
+ }
+ return prev;
+ });
+ };
+
+ /* Toggle Add Coupon Dialog */
+ const toggleAddCouponModal = () => {
+ /* Reset selected coupon */
+ setSelectedCoupon(undefined);
+ setIsAddEditCouponModalShown((prev) => !prev);
+ };
+
+ /* Toggle Edit or Delete Coupon Dialog */
+ function toggleEditOrDeleteCouponModal(
+ coupon: CouponClass,
+ type: "EDIT" | "DELETE"
+ ) {
+ /* If there is no selected coupon: Toggle is to show the dialog */
+ if (!selectedCoupon && coupon) {
+ /* Set selected coupon */
+ setSelectedCoupon(coupon);
+ } else {
+ /* Set coupon to undefined */
+ setSelectedCoupon(undefined);
+ }
+ /* Toggle the dialog */
+ if (type === "EDIT") {
+ setIsAddEditCouponModalShown((prev) => !prev);
+ } else {
+ setIsDeleteCouponModalShown((prev) => !prev);
+ }
+ }
+
+ return (
+ <>
+ {isError ? (
+
+ toggleEditOrDeleteCouponModal(selectedCoupon, "DELETE")
+ }
+ onCouponDeleted={onCouponDeletedHandler}
+ />
+ )}
+ {couponStatusPropertiesState.isModalShown &&
+ couponStatusPropertiesState.coupon && (
+
) {
+ const { isAdminPageLayoutShown } = props;
const navigate = useCustomNavigate();
const dispatch = useAppDispatch();
+ const userDetails = useAppSelector((state) => state.auth.userDetails);
const isLoggedIn = useAppSelector((state) => state.auth.isLoggedIn);
const userCart = useAppSelector((state) => state.cart.userCart);
@@ -86,8 +95,14 @@ const HeaderContainer = React.forwardRef(function HeaderContainer(
/* Get Navigation Item List based on isLoggedIn flag */
useEffect(() => {
- setNavigationList(getNavigationItemList(isLoggedIn));
- }, [isLoggedIn]);
+ if (isAdminPageLayoutShown) {
+ setNavigationList(ADMIN_NAVIGATION_ITEMS);
+ } else {
+ setNavigationList(
+ getNavigationItemList(isLoggedIn, userDetails?.role || USER_ROLES.user)
+ );
+ }
+ }, [isLoggedIn, userDetails?.role, isAdminPageLayoutShown]);
return (
) {
-
- const {logoClickHandler, navItemList, itemsInCart = 0, cartClickHandler, searchHandler} = props;
+const Header = forwardRef(function Header(
+ props: HeaderProps,
+ ref: ForwardedRef
+) {
+ const {
+ logoClickHandler,
+ navItemList,
+ itemsInCart = 0,
+ cartClickHandler,
+ searchHandler,
+ isAdminPageLayoutShown,
+ } = props;
const { t } = useTranslation();
const isRTL = useAppSelector((state) => state.language.isRTL);
const isLG = useBreakpointCheck(BREAKPOINTS.lg);
+ const [isLogoutModalShown, setIsLogoutModalShown] = useState(false);
+
+ const toggleLogoutModal = () => {
+ setIsLogoutModalShown((prev) => !prev);
+ };
+
/* Mobile & Tablet */
if (!isLG) {
return (
@@ -33,12 +54,9 @@ const Header = forwardRef(function Header(props: HeaderProps, ref: ForwardedRef<
+
+ {t("areYouSureYouWantToChangeCouponStatusTo")}
+
+
+ {coupon.isActive ? t("active") : t("inactive")}
+
+
+
+
+ {t("areYouSureYouWantToDeleteTheCategory")}
+
+
+ {category.name}
+
+
+
+
+
+ {t("areYouSureYouWantToDeleteTheCoupon")}
+
+
+ {coupon.name}
+
+
+
+
+ {t("areYouSureYouWantToDeleteTheProduct")}
+
+
+ {product.name}
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default CategoriesTable;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/categoriestable/presentation/CategoryOptionsCell.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/categoriestable/presentation/CategoryOptionsCell.tsx
new file mode 100644
index 00000000..3809e76d
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/categoriestable/presentation/CategoryOptionsCell.tsx
@@ -0,0 +1,34 @@
+import { CustomCellRendererProps } from "ag-grid-react";
+import { Category } from "../../../../services/category/CategoryTypes";
+import Button from "../../../basic/Button";
+import DeleteIcon from "../../../icons/DeleteIcon";
+import EditIcon from "../../../icons/EditIcon";
+
+interface CategoryOptionsCellProps extends CustomCellRendererProps {
+ onEditOrDeleteClickHandler(category: Category, type: "DELETE" | "EDIT"): void;
+}
+/* For options cell for a particular category in the Category Table */
+const CategoryOptionsCell = (props: CategoryOptionsCellProps) => {
+ return (
+ <>
+
+
+
+
+
+ );
+};
+
+export default CategoryOptionsCell;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/couponstable/container/CouponsTableContainer.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/couponstable/container/CouponsTableContainer.tsx
new file mode 100644
index 00000000..9a177e6f
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/couponstable/container/CouponsTableContainer.tsx
@@ -0,0 +1,117 @@
+import { useCallback, useEffect, useState } from "react";
+import { DATE_TIME_FORMATS } from "../../../../constants";
+import CouponService from "../../../../services/coupon/CouponService";
+import { CouponClass } from "../../../../services/coupon/CouponTypes";
+import {
+ convertUTCToLocalTime,
+ formatDateTime,
+} from "../../../../utils/dateTimeHelper";
+import CouponsTable from "../presentation/CouponsTable";
+
+const CouponsTableContainer = () => {
+
+ /*
+ Flag for whether coupons are being fetched
+ (To show loading spinner until the first response come)
+ */
+ const [isFetchingCoupons, setIsFetchingCoupons] = useState(true);
+
+ /* Key value coupons object, key is id and value is the Coupon */
+ const [coupons, setCoupons] = useState<{ [key: string]: CouponClass }>({});
+
+ /* To know if an error has occurred when fetching coupons */
+ const [isError, setIsError] = useState(false);
+
+ const formatCoupon = (coupon: CouponClass) => {
+ /* Cloning the object, so the original object doesn't get updated */
+ coupon = { ...coupon };
+
+ /* Converting expiryDate and startDate to local and formatting them,
+ as expiry date will be visible */
+ coupon.expiryDate = formatDateTime(
+ convertUTCToLocalTime(
+ coupon.expiryDate,
+ DATE_TIME_FORMATS.standardDateWithTime
+ ),
+ DATE_TIME_FORMATS.standardDateWithTime,
+ DATE_TIME_FORMATS.displayedDateWithTime
+ );
+ coupon.startDate = formatDateTime(
+ convertUTCToLocalTime(
+ coupon.startDate,
+ DATE_TIME_FORMATS.standardDateWithTime
+ ),
+ DATE_TIME_FORMATS.standardDateWithTime,
+ DATE_TIME_FORMATS.displayedDateWithTime
+ );
+
+ return coupon;
+ };
+
+ /* Fetch All Coupons Asynchronously */
+ const fetchAllCoupons = useCallback(() => {
+ setIsFetchingCoupons(true);
+ CouponService.getAllCouponsAsync((data, _, error) => {
+ if (!error) {
+ setCoupons((prev) => {
+ data.map((coupon) => {
+ /* Formatting coupon */
+ coupon = formatCoupon(coupon);
+
+ /* At key: Coupon ID, value is the coupon object */
+ prev[coupon._id] = coupon;
+ });
+ return { ...prev };
+ });
+ setIsFetchingCoupons(false);
+ } else {
+ console.error("Error -- fetchAllCoupons() Admin", error);
+ setIsError(true);
+ setIsFetchingCoupons(false);
+ }
+ });
+ }, []);
+
+ /* Once a coupon has been updated or added (In order to avoid another apiCall) */
+ const onCouponAddedOrUpdatedHandler = (newCoupon: CouponClass) => {
+ /* Update coupon object at the couponId */
+ setCoupons((prev) => {
+ prev[newCoupon._id] = formatCoupon(newCoupon);
+ return { ...prev };
+ });
+ };
+
+ const onCouponDeletedHandler = (deletedCoupon: CouponClass) => {
+ /* Removing the key value pair of the deletedCoupon */
+ setCoupons((prev) => {
+ delete prev[deletedCoupon._id];
+ return { ...prev };
+ });
+ };
+
+ const resetCouponStatusHandler = (coupon: CouponClass) => {
+ setCoupons((prev) => {
+ prev[coupon._id] = coupon;
+ return { ...prev };
+ });
+ };
+
+ /* Initial Render */
+ useEffect(() => {
+ fetchAllCoupons();
+ }, [fetchAllCoupons]);
+
+ return (
+ <>
+
+
+
+
+
+ );
+};
+
+export default CouponsOptionsCell;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/couponstable/presentation/CouponsTable.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/couponstable/presentation/CouponsTable.tsx
new file mode 100644
index 00000000..74087e84
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/couponstable/presentation/CouponsTable.tsx
@@ -0,0 +1,231 @@
+import {
+ ColDef
+} from "ag-grid-community";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ButtonTypes } from "../../../../constants";
+import { CouponClass } from "../../../../services/coupon/CouponTypes";
+import { useAppSelector } from "../../../../store";
+import {
+ gridDateFilterComparator,
+ gridDateSortComparator,
+} from "../../../../utils/dateTimeHelper";
+import Button from "../../../basic/Button";
+import ErrorMessage from "../../../basic/ErrorMessage";
+import Grid from "../../../basic/Grid";
+import AddEditCouponModalContainer from "../../../modals/addeditcouponmodal/container/AddEditCouponModalContainer";
+import ChangeCouponStatusModalContainer from "../../../modals/changecouponstatusmodal/container/ChangeCouponStatusModalContainer";
+import DeleteCouponModalContainer from "../../../modals/deletecouponmodal/container/DeleteCouponModalContainer";
+import CouponsOptionsCell from "./CouponsOptionsCell";
+
+interface CouponsTableProps {
+ coupons: CouponClass[] | null;
+ isError: boolean;
+ onCouponAddedOrUpdatedHandler(newCoupon: CouponClass): void;
+ onCouponDeletedHandler(deletedCoupon: CouponClass): void;
+ resetCouponStatusHandler(resetCoupon: CouponClass): void;
+}
+const CouponsTable = (props: CouponsTableProps) => {
+ const {
+ coupons,
+ onCouponAddedOrUpdatedHandler,
+ onCouponDeletedHandler,
+ resetCouponStatusHandler,
+ isError,
+ } = props;
+
+ const { t } = useTranslation();
+
+ const isRTL = useAppSelector((state) => state.language.isRTL);
+
+ const [couponStatusPropertiesState, setCouponStatusPropertiesState] =
+ useState<{ isModalShown: boolean; coupon?: CouponClass }>({
+ isModalShown: false,
+ coupon: undefined,
+ });
+
+ /* Column Defination for the grid */
+ const COUPONS_TABLE_COL_DEFS: ColDef[] = [
+ {
+ field: "name",
+ sortable: false,
+ filter: "agTextColumnFilter",
+ filterParams: {
+ maxNumConditions: 1,
+ filterOptions: ["contains"],
+ },
+ },
+ {
+ field: "couponCode",
+ sortable: false,
+ filter: "agTextColumnFilter",
+ filterParams: {
+ maxNumConditions: 1,
+ filterOptions: ["contains"],
+ },
+ },
+ {
+ field: "isActive",
+ sortable: true,
+ editable: true,
+ onCellValueChanged: (event) => {
+ setCouponStatusPropertiesState({
+ isModalShown: true,
+ coupon: event.data,
+ });
+ },
+ },
+ {
+ field: "expiryDate",
+ unSortIcon: true,
+ comparator: gridDateSortComparator,
+ filter: "agDateColumnFilter",
+ filterParams: {
+ suppressAndOrCondition: true,
+ filterOptions: ["equals"],
+ comparator: gridDateFilterComparator,
+ },
+ },
+ {
+ field: "minimumCartValue",
+ sortable: true,
+ },
+ {
+ field: "discountValue",
+ sortable: true,
+ },
+ {
+ field: "type",
+ sortable: false,
+ },
+ {
+ field: "startDate",
+ unSortIcon: true,
+ comparator: gridDateSortComparator,
+ filter: "agDateColumnFilter",
+ filterParams: {
+ suppressAndOrCondition: true,
+ filterOptions: ["equals"],
+ comparator: gridDateFilterComparator,
+ },
+ },
+ {
+ field: "",
+ maxWidth: 100,
+ resizable: false,
+ cellRenderer: CouponsOptionsCell,
+ cellRendererParams: {
+ onEditOrDeleteClickHandler: toggleEditOrDeleteCouponModal,
+ },
+ pinned: isRTL ? 'left' : 'right'
+ },
+ ];
+
+ /* Visibility of AddEdit Coupon dialog */
+ const [isAddEditCouponModalShown, setIsAddEditCouponModalShown] =
+ useState(false);
+
+ /* Visibility of Delete Coupon dialog */
+ const [isDeleteCouponModalShown, setIsDeleteCouponModalShown] =
+ useState(false);
+
+ /* Selected coupon for edit & delete options */
+ const [selectedCoupon, setSelectedCoupon] = useState
+
+
+
+ )}
+
+ );
+};
+
+export default CouponsTable;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/header/container/HeaderContainer.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/header/container/HeaderContainer.tsx
index 8035c480..0122c841 100644
--- a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/header/container/HeaderContainer.tsx
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/header/container/HeaderContainer.tsx
@@ -12,19 +12,28 @@ import {
NavigationOption,
ROUTE_PATHS,
QUERY_PARAMS,
+ USER_ROLES,
} from "../../../../constants";
-import { getNavigationItemList } from "../../../../data/applicationData";
+import {
+ ADMIN_NAVIGATION_ITEMS,
+ getNavigationItemList,
+} from "../../../../data/applicationData";
import { useAppDispatch, useAppSelector } from "../../../../store";
import { getUserCartThunk, resetCartSlice } from "../../../../store/CartSlice";
import { createSearchParams } from "react-router-dom";
+interface HeaderContainerProps {
+ isAdminPageLayoutShown: boolean;
+}
const HeaderContainer = React.forwardRef(function HeaderContainer(
- _,
+ props: HeaderContainerProps,
ref: ForwardedRef
- ();
+
+ /* Column Defination for the grid */
+ const ORDERS_TABLE_COL_DEFS: ColDef[] = [
+ {
+ field: "_id",
+ sortable: false,
+ filter: "agTextColumnFilter",
+ cellRenderer: OrderLinkCell,
+ filterParams: {
+ maxNumConditions: 1,
+ filterOptions: ["contains"],
+ },
+ },
+ {
+ field: "customer.username",
+ sortable: false,
+ filter: "agTextColumnFilter",
+ filterParams: {
+ maxNumConditions: 1,
+ filterOptions: ["contains"],
+ },
+ },
+ {
+ field: "customer.email",
+ sortable: false,
+ filter: "agTextColumnFilter",
+ filterParams: {
+ maxNumConditions: 1,
+ filterOptions: ["contains"],
+ },
+ },
+ {
+ field: "createdAt",
+ unSortIcon: true,
+ comparator: gridDateSortComparator,
+ filter: "agDateColumnFilter",
+ filterParams: {
+ suppressAndOrCondition: true,
+ filterOptions: ["equals"],
+ comparator: gridDateFilterComparator,
+ },
+ },
+ {
+ field: "updatedAt",
+ unSortIcon: true,
+ comparator: gridDateSortComparator,
+ filter: "agDateColumnFilter",
+ filterParams: {
+ suppressAndOrCondition: true,
+ filterOptions: ["equals"],
+ comparator: gridDateFilterComparator,
+ },
+ },
+ {
+ field: "discountedOrderPrice",
+ sortable: true,
+ },
+ {
+ field: "paymentId",
+ sortable: false,
+ filter: "agTextColumnFilter",
+ filterParams: {
+ maxNumConditions: 1,
+ filterOptions: ["contains"],
+ },
+ },
+ {
+ field: "",
+ maxWidth: 100,
+ resizable: false,
+ hide: selectedOrderStatus !== ORDER_STATUS.PENDING,
+ cellRenderer: OrdersOptionsCell,
+ cellRendererParams: {
+ onEditClickHandler: toggleEditOrderModal,
+ },
+ pinned: isRTL ? "left" : "right",
+ },
+ ];
+
+ const orderStatusRadioButtons: Array> =
+ useMemo(() => {
+ return [
+ {
+ label: t("pending"),
+ isDefaultSelected: true,
+ data: ORDER_STATUS.PENDING,
+ id: ORDER_STATUS.PENDING,
+ },
+ {
+ label: t("cancelled"),
+ isDefaultSelected: false,
+ data: ORDER_STATUS.CANCELLED,
+ id: ORDER_STATUS.CANCELLED,
+ },
+ {
+ label: t("delivered"),
+ isDefaultSelected: false,
+ data: ORDER_STATUS.DELIVERED,
+ id: ORDER_STATUS.DELIVERED,
+ },
+ ];
+ }, [t]);
+
+ /* On order type changed */
+ const onOrderTypeChangeHandler = (status: ORDER_STATUS) => {
+ /* If the previous status is not equal to the new status */
+ if (status !== selectedOrderStatus) {
+ /* Set selected order status */
+ setSelectedOrderStatus(status);
+
+ /* Fetch orders of the particular status */
+ fetchOrders(status);
+ }
+ };
+
+ /* Toggle Edit Order Dialog */
+ function toggleEditOrderModal(order: OrderClass) {
+ /* If there is no selected order: Toggle is to show the dialog */
+ if (!selectedOrder && order) {
+ /* Set selected order */
+ setSelectedOrder(order);
+ } else {
+ /* Set order to undefined */
+ setSelectedOrder(undefined);
+ }
+ /* Toggle the dialog */
+ setIsEditOrderModalShown((prev) => !prev);
+ }
+
+ return (
+ <>
+ {isError ? (
+ toggleEditOrderModal(selectedOrder)}
+ order={selectedOrder}
+ onOrderStatusUpdatedHandler={onOrderStatusUpdatedHandler}
+ />
+ )}
+ => {
+ /* Checking for category name locally */
+ const categoryName = categoryNames.current?.[categoryId];
+
+ /* If the category name is not found */
+ if (!categoryName) {
+ /* Fetch category by id */
+ const response = await CategoryService.getCategoryById(categoryId);
+
+ /* Success return category name */
+ if (!(response instanceof ApiError)) {
+ /* Save it in memory */
+ categoryNames.current[categoryId] = response.name;
+
+ return response.name;
+ } else {
+ /* Return empty string */
+ return "";
+ }
+ }
+ return categoryName;
+ };
+
+ const fetchProducts = useCallback(async () => {
+
+ setIsFetchingProducts(true);
+ /* Hiding error, Displaying loading spinner, Resetting products list state */
+ setIsError(false);
+
+ /* Get all products asynchronously */
+ ProductService.getAllProductsAsync(async (data, _, error) => {
+ /* Success */
+ if (!error) {
+ const tempProducts: typeof products = {};
+
+ /* Iterating through fetched products */
+ for (const product of data) {
+ /* Category Name*/
+ const categoryName = await getCategoryName(product.category)
+
+ /* Set products state */
+ tempProducts[product._id] = { ...product, categoryName };
+ }
+
+ /* Set products */
+ setProducts((prev) => {
+ return { ...prev, ...tempProducts };
+ });
+ setIsFetchingProducts(false);
+ } else {
+
+ setIsFetchingProducts(false);
+ /* API Error */
+ setIsError(true);
+ }
+ });
+ }, []);
+
+ /* Once a product has been updated or added (In order to avoid another apiCall) */
+ const onProductAddedOrUpdatedHandler = async (newProduct: Product) => {
+ /* Getting the category name */
+ const categoryName = await getCategoryName(newProduct.category);
+
+ /* Update products object at the productId */
+ setProducts((prev) => {
+ prev[newProduct._id] = {
+ ...newProduct,
+ categoryName
+ };
+
+ return { ...prev };
+ });
+ };
+
+ const onProductDeletedHandler = (deletedProduct: Product) => {
+ /* Removing the key value pair of the deletedProduct */
+ setProducts((prev) => {
+ delete prev[deletedProduct._id];
+ return { ...prev };
+ });
+ };
+
+ useEffect(() => {
+ fetchProducts();
+ }, [fetchProducts]);
+
+ return (
+ <>
+ ();
+
+ /* Toggle Add Product Dialog */
+ const toggleAddProductModal = () => {
+ /* Reset selected product */
+ setSelectedProduct(undefined);
+ setIsAddEditProductModalShown((prev) => !prev);
+ };
+
+ /* Toggle Edit or Delete Product Dialog */
+ function toggleEditOrDeleteProductModal(
+ product: Product,
+ type: "EDIT" | "DELETE"
+ ) {
+ /* If there is no product: Toggle is to show the dialog */
+ if (!selectedProduct && product) {
+ /* Set selected product */
+ setSelectedProduct(product);
+ } else {
+ /* Set product to undefined */
+ setSelectedProduct(undefined);
+ }
+ /* Toggle the dialog */
+ if (type === "EDIT") {
+ setIsAddEditProductModalShown((prev) => !prev);
+ } else {
+ setIsDeleteProductModalShown((prev) => !prev);
+ }
+ }
+
+ /*
+ On Large screens fit the entire width, on smaller screens fit the contents of a cell
+ */
+ const autoSizeStrategy:
+ | SizeColumnsToFitGridStrategy
+ | SizeColumnsToFitProvidedWidthStrategy
+ | SizeColumnsToContentStrategy = useMemo(() => {
+ if (isLG) {
+ return {
+ type: "fitGridWidth",
+ };
+ }
+ return {
+ type: "fitCellContents",
+ };
+ }, [isLG]);
+
+ return (
+ <>
+ {isError ? (
+
+ toggleEditOrDeleteProductModal(selectedProduct, "DELETE")
+ }
+ onProductDeleted={onProductDeletedHandler}
+ product={selectedProduct}
+ />
+ )}
+ >
-}
\ No newline at end of file
+}
+
+export interface AddCategoryFields {
+ categoryName: string;
+}
+
+export interface EditCategoryFields {
+ category: Category;
+ newCategoryName: string;
+}
+
+export interface AddEditProductFields {
+ name: string,
+ description: string,
+ category: DropdownItem,
+ price: number,
+ stock: number,
+ mainImage: File,
+ subImage1: File,
+ subImage2: File,
+ subImage3: File,
+ subImage4: File
+}
+
+export interface AddEditProductFieldsForService {
+ name: string,
+ description: string,
+ category: DropdownItem,
+ price: number,
+ stock: number,
+ mainImage: File,
+ subImages: File[]
+}
+
+/* For api call */
+export interface EditProductFieldsForService {
+ name?: string,
+ description?: string,
+ category?: DropdownItem,
+ price?: number,
+ stock?: number,
+ mainImage?: File,
+ subImages?: File[]
+}
+
+export interface AddEditCouponFields {
+ name: string,
+ couponCode: string,
+ type: COUPON_TYPES,
+ discountValue: number,
+ minimumCartValue: number,
+ startDate: Date,
+ expiryDate: Date
+}
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/data/applicationData.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/data/applicationData.tsx
index a59bf600..61a6b362 100644
--- a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/data/applicationData.tsx
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/data/applicationData.tsx
@@ -11,8 +11,10 @@ import {
CategoryIcon,
DropdownItem,
NavigationOption,
+ ROUTE_PATHS,
SelectionMenuItem,
TabItemConfig,
+ USER_ROLES,
} from "../constants";
import i18n from "../i18n";
@@ -25,40 +27,72 @@ export const DRAWER_ITEMS: Array = [
{
id: 2,
textKey: "about",
- navigateTo: "/about",
+ navigateTo: ROUTE_PATHS.about,
},
{
id: 3,
textKey: "login",
- navigateTo: "/login",
+ navigateTo: ROUTE_PATHS.login,
},
];
-export const getNavigationItemList = (isLoggedIn: boolean) => {
+export const ADMIN_NAVIGATION_ITEMS: Array = [
+ {
+ id: 1,
+ textKey: "categories",
+ navigateTo: ROUTE_PATHS.adminCategories,
+ },
+ {
+ id: 2,
+ textKey: "products",
+ navigateTo: ROUTE_PATHS.adminProducts,
+ },
+ {
+ id: 3,
+ textKey: "orders",
+ navigateTo: ROUTE_PATHS.adminOrders,
+ },
+ {
+ id: 4,
+ textKey: "coupons",
+ navigateTo: ROUTE_PATHS.adminCoupons,
+ }
+];
+
+export const getNavigationItemList = (
+ isLoggedIn: boolean,
+ role: USER_ROLES
+) => {
const tempDrawerItems = [...DRAWER_ITEMS];
if (isLoggedIn) {
tempDrawerItems.pop();
+ if (role === USER_ROLES.admin) {
+ tempDrawerItems.push({
+ id: 4,
+ textKey: "admin",
+ navigateTo: ROUTE_PATHS.adminCategories,
+ });
+ }
tempDrawerItems.push({
- id: 4,
+ id: 5,
textKey: "myAccount",
navigateTo: "my-account",
- customComponent: = [
{
id: 1,
textKey: "manageAccount",
- icon: = [
{
- id: 1,
- tabHeadingKey: "editProfile"
+ id: 1,
+ tabHeadingKey: "editProfile",
},
{
- id: 2,
- tabHeadingKey: "myAddresses"
- }
-]
+ id: 2,
+ tabHeadingKey: "myAddresses",
+ },
+];
export enum ORDER_STATUS {
- PENDING= "PENDING",
- CANCELLED= "CANCELLED",
- DELIVERED= "DELIVERED",
+ PENDING = "PENDING",
+ CANCELLED = "CANCELLED",
+ DELIVERED = "DELIVERED",
}
export const ORDER_STATUS_FILTERS_CHECKBOX: Array> = [
{
id: ORDER_STATUS.PENDING,
- data: null,
+ data: null,
isDefaultSelected: true,
isLabelKey: true,
- label: i18n.t("pending")
+ label: i18n.t("pending"),
},
{
id: ORDER_STATUS.CANCELLED,
- data: null,
+ data: null,
isDefaultSelected: true,
label: i18n.t("cancelled"),
isLabelKey: true,
},
{
id: ORDER_STATUS.DELIVERED,
- data: null,
+ data: null,
isDefaultSelected: true,
label: i18n.t("delivered"),
isLabelKey: true,
- }
-]
+ },
+];
+
+
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/layouts/PageLayout.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/layouts/PageLayout.tsx
index 874470ab..a60aae95 100644
--- a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/layouts/PageLayout.tsx
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/layouts/PageLayout.tsx
@@ -3,20 +3,35 @@ import { useDispatch } from "react-redux";
import { updateBreakpoint } from "../store/BreakpointSlice";
import { getCurrentBreakpoint } from "../utils/breakpointsHelper";
-import { Outlet } from "react-router-dom";
+import { Outlet, useLocation } from "react-router-dom";
import ArrowButton from "../components/basic/ArrowButton";
import ToastMessage from "../components/basic/ToastMessage";
import FooterContainer from "../components/widgets/footer/container/FooterContainer";
import HeaderContainer from "../components/widgets/header/container/HeaderContainer";
-import { ARROW_BUTTONS } from "../constants";
+import { ARROW_BUTTONS, ROUTE_PATHS, USER_ROLES } from "../constants";
import { useAppSelector } from "../store";
+import { updateHeaderHeight } from "../store/UIinfoSlice";
const PageLayout = () => {
const dispatch = useDispatch();
+ /* Page Location */
+ const location = useLocation();
+
/* isRTL language */
const isRTL = useAppSelector((state) => state.language.isRTL);
+ /* Logged in user details */
+ const userDetails = useAppSelector((state) => state.auth.userDetails);
+
+ /*
+ Shown admin page layout: if the logged in user is admin,
+ and the location path includes is /admin
+ */
+ const isAdminPageLayoutShown =
+ userDetails?.role === USER_ROLES.admin &&
+ location.pathname.includes(ROUTE_PATHS.admin);
+
/* Header height in pixels */
const [headerHeight, setHeaderHeight] = useState("0px");
@@ -44,7 +59,8 @@ const PageLayout = () => {
/* Updating header height */
useEffect(() => {
setHeaderHeight(`${headerContainerRef.current?.clientHeight}px`);
- }, [headerContainerRef]);
+ dispatch(updateHeaderHeight(headerContainerRef?.current?.clientHeight));
+ }, [headerContainerRef, dispatch]);
/* Scroll to top smoothly */
const scrollToTop = () => {
@@ -55,20 +71,22 @@ const PageLayout = () => {
{
+ const apiRequest = new ApiRequest(this.BASE_URL);
+
+ const response = await apiRequest.postRequest({
+ name: categoryName,
+ });
+
+ if (response instanceof ApiResponse && response.success) {
+ return response.data;
+ } else if (response instanceof ApiResponse) {
+ return new ApiError(response.message);
+ }
+ return response;
+ }
+
+ async editCategory(fields: EditCategoryFields): Promise {
+ const apiRequest = new ApiRequest(
+ `${this.BASE_URL}/${fields.category._id}`
+ );
+
+ const response = await apiRequest.patchRequest({
+ name: fields.newCategoryName,
+ });
+
+ if (response instanceof ApiResponse && response.success) {
+ return response.data;
+ } else if (response instanceof ApiResponse) {
+ return new ApiError(response.message);
+ }
+ return response;
+ }
+
+ async deleteCategory(
+ category: Category
+ ): Promise | ApiError> {
+ const apiRequest = new ApiRequest(`${this.BASE_URL}/${category._id}`);
+
+ const response = await apiRequest.deleteRequest<{
+ deletedCategory: Category;
+ }>();
+
+ if (response instanceof ApiResponse && response.success) {
+ return response;
+ } else if (response instanceof ApiResponse) {
+ return new ApiError(response.message);
+ }
+ return response;
+ }
+
+ async getCategoryById(categoryId: string): Promise {
+ const apiRequest = new ApiRequest(`${this.BASE_URL}/${categoryId}`);
+
+ const response = await apiRequest.getRequest();
+
+ if (response instanceof ApiResponse && response.success) {
+ return response.data;
+ } else if (response instanceof ApiResponse) {
+ return new ApiError(response.message);
+ }
+ return response;
+ }
}
export default new CategoryService();
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/services/coupon/CouponService.ts b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/services/coupon/CouponService.ts
index e2f2d2c6..45fab486 100644
--- a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/services/coupon/CouponService.ts
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/services/coupon/CouponService.ts
@@ -1,14 +1,87 @@
+import { AddEditCouponFields, DATE_TIME_FORMATS } from "../../constants";
+import { getMomentObjectFromDateObject } from "../../utils/dateTimeHelper";
import ApiError from "../ApiError";
import ApiRequest from "../ApiRequest";
import ApiResponse from "../ApiResponse";
import { UserCart } from "../cart/CartTypes";
-import { CouponClass, CouponListClass } from "./CouponTypes";
+import { COUPON_TYPES, CouponClass, CouponListClass } from "./CouponTypes";
class CouponService {
BASE_URL = "/api/v1/ecommerce/coupons";
defaultPageLimit = 50;
defaultPageNumber = 1;
+ /* Get All Coupons Asynchronously: As the requests keep fulfilling response will be sent as callback */
+ async getAllCouponsAsync(
+ callback: (
+ data: CouponClass[],
+ isDone: boolean,
+ errorMessage?: ApiError
+ ) => void
+ ) {
+ /* API Request */
+ const apiRequest = new ApiRequest(this.BASE_URL);
+
+ /* Initializing Page Number Counter */
+ let pageNumberCounter = this.defaultPageNumber;
+
+ /* First Request to know the total pages */
+ const firstResponse = await apiRequest.getRequest({
+ page: pageNumberCounter,
+ limit: this.defaultPageLimit,
+ });
+
+ /* If the first request is successful */
+ if (firstResponse instanceof ApiResponse && firstResponse.success) {
+ /* Total Number of Pages */
+ const totalPages = firstResponse.data.totalPages;
+
+ /* Incrementing page counter */
+ pageNumberCounter++;
+
+ /* Number of requests to be made */
+ let requestsPending = totalPages - pageNumberCounter + 1;
+
+ /* If first request is the last request: return */
+ if (!requestsPending) {
+ return callback(firstResponse.data.coupons, true);
+ } else {
+ callback(firstResponse.data.coupons, false);
+ }
+
+ /* Remaining requests made in parallel */
+ for (let counter = pageNumberCounter; counter <= totalPages; counter++) {
+ apiRequest
+ .getRequest({
+ page: counter,
+ limit: this.defaultPageLimit,
+ })
+ .then((res) => {
+ /* Decrementing pending requests count */
+ requestsPending--;
+
+ /* Error in request: Return */
+ if (!(res instanceof ApiResponse && res.success)) {
+ return res instanceof ApiError
+ ? callback([], true, res)
+ : callback([], true, new ApiError(res.message));
+ } else if (!requestsPending) {
+ /* All Requests are done */
+ return callback(res.data.coupons, true);
+ } else {
+ /* Sending the data of an in between request */
+ callback(res.data.coupons, false);
+ }
+ });
+ }
+ } else {
+ // Error
+ return firstResponse instanceof ApiError
+ ? callback([], true, firstResponse)
+ : callback([], true, new ApiError(firstResponse.message));
+ }
+ }
+
/* Get All Coupons Available to User Asynchronously: As the requests keep fulfilling response will be sent as callback */
async getAllCouponsAvailableToUserAsync(
callback: (
@@ -105,6 +178,84 @@ class CouponService {
return response;
}
}
+
+ async updateCouponActiveStatus(
+ couponId: string,
+ isActive: boolean
+ ): Promise {
+ const apiRequest = new ApiRequest(`${this.BASE_URL}/status/${couponId}`);
+
+ const response = await apiRequest.patchRequest({ isActive });
+
+ if (response instanceof ApiResponse && response.success) {
+ return response.data;
+ } else if (response instanceof ApiResponse) {
+ return new ApiError(response.message);
+ }
+ return response;
+ }
+
+ async addCoupon(
+ fields: AddEditCouponFields
+ ): Promise {
+ const apiRequest = new ApiRequest(this.BASE_URL);
+
+ const response = await apiRequest.postRequest({
+ name: fields.name,
+ couponCode: fields.couponCode,
+ type: COUPON_TYPES.FLAT,
+ discountValue: fields.discountValue,
+ minimumCartValue: fields.minimumCartValue,
+ expiryDate: getMomentObjectFromDateObject(fields.expiryDate).format(
+ DATE_TIME_FORMATS.standardDateWithTime
+ ),
+ startDate: getMomentObjectFromDateObject(fields.startDate).format(
+ DATE_TIME_FORMATS.standardDateWithTime
+ ),
+ });
+
+ if (response instanceof ApiResponse && response.success) {
+ return response.data;
+ } else if (response instanceof ApiResponse) {
+ return new ApiError(response.message);
+ }
+ return response;
+ }
+
+ async editCoupon(
+ fields: AddEditCouponFields,
+ couponId: string
+ ): Promise {
+ const apiRequest = new ApiRequest(`${this.BASE_URL}/${couponId}`);
+
+ const response = await apiRequest.patchRequest({
+ name: fields.name,
+ couponCode: fields.couponCode,
+ discountValue: fields.discountValue,
+ });
+
+ if (response instanceof ApiResponse && response.success) {
+ return response.data;
+ } else if (response instanceof ApiResponse) {
+ return new ApiError(response.message);
+ }
+ return response;
+ }
+
+ async deleteCoupon(couponId: string): Promise {
+ const apiRequest = new ApiRequest(`${this.BASE_URL}/${couponId}`);
+
+ const response = await apiRequest.deleteRequest<{
+ deletedCoupon: CouponClass;
+ }>();
+
+ if (response instanceof ApiResponse && response.success) {
+ return response.data.deletedCoupon;
+ } else if (response instanceof ApiResponse) {
+ return new ApiError(response.message);
+ }
+ return response;
+ }
}
export default new CouponService();
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/services/order/OrderService.ts b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/services/order/OrderService.ts
index 746e2df6..b92bcd76 100644
--- a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/services/order/OrderService.ts
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/services/order/OrderService.ts
@@ -4,12 +4,17 @@ import ApiRequest from "../ApiRequest";
import ApiResponse from "../ApiResponse";
import {
GeneratePayPalOrderResponseClass,
- OrderDetailClass
+ OrderClass,
+ OrderDetailClass,
+ OrderListClass,
} from "./OrderTypes";
+import { ORDER_STATUS } from "../../data/applicationData";
class OrderService {
BASE_ORDERS_URL = "/api/v1/ecommerce/orders";
BASE_URL = "/api/v1/ecommerce/orders/provider";
+ defaultPageNumber = 1;
+ defaultPageLimit = 50;
async generatePayPalOrder(
addressId: string
@@ -54,6 +59,83 @@ class OrderService {
}
return response;
}
+
+ async getOrdersAsync(
+ status: ORDER_STATUS | undefined,
+ callback: (data: OrderClass[], isDone: boolean, error?: ApiError) => void
+ ) {
+ const apiRequest = new ApiRequest(`${this.BASE_ORDERS_URL}/list/admin`);
+
+ let page = this.defaultPageNumber;
+
+ const firstResponse = await apiRequest.getRequest({
+ page,
+ limit: this.defaultPageLimit,
+ status: status,
+ });
+
+ if (firstResponse instanceof ApiResponse && firstResponse.success) {
+ const totalPages = firstResponse.data.totalPages;
+
+ page++;
+ let requestsPending = totalPages - page + 1;
+
+ if (!requestsPending) {
+ return callback(firstResponse.data.orders, true);
+ } else {
+ callback(firstResponse.data.orders, false);
+ }
+
+ for (page; page <= totalPages; page++) {
+ apiRequest
+ .getRequest({
+ page,
+ limit: this.defaultPageLimit,
+ status: status,
+ })
+ .then((res) => {
+ requestsPending--;
+
+ /* Error in request: Return */
+ if (!(res instanceof ApiResponse && res.success)) {
+ return res instanceof ApiError
+ ? callback([], true, res)
+ : callback([], true, new ApiError(res.message));
+ } else if (!requestsPending) {
+ /* All Requests are done */
+ return callback(res.data.orders, true);
+ } else {
+ /* Sending the data of an in between request */
+ callback(res.data.orders, false);
+ }
+ });
+ }
+ } else if (firstResponse instanceof ApiResponse) {
+ return callback([], false, new ApiError(firstResponse.message));
+ } else {
+ return callback([], false, firstResponse);
+ }
+ }
+
+ async editOrderStatus(
+ status: ORDER_STATUS,
+ orderId: string
+ ): Promise<{ status: ORDER_STATUS } | ApiError> {
+ const apiRequest = new ApiRequest(
+ `${this.BASE_ORDERS_URL}/status/${orderId}`
+ );
+
+ const response = await apiRequest.patchRequest<{ status: ORDER_STATUS }>({
+ status,
+ });
+
+ if (response instanceof ApiResponse && response.success) {
+ return response.data;
+ } else if (response instanceof ApiResponse) {
+ return new ApiError(response.message);
+ }
+ return response;
+ }
}
export default new OrderService();
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/services/product/ProductService.ts b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/services/product/ProductService.ts
index 254657f6..8bbc6a97 100644
--- a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/services/product/ProductService.ts
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/services/product/ProductService.ts
@@ -1,3 +1,7 @@
+import {
+ AddEditProductFieldsForService,
+ EditProductFieldsForService,
+} from "../../constants";
import { generateRandomNumber } from "../../utils/commonHelper";
import ApiError from "../ApiError";
import ApiRequest from "../ApiRequest";
@@ -115,7 +119,12 @@ class ProductService {
}
async getAllProductsAsync(
- callback: (data: Array, isDone: boolean, error?: ApiError, categoryInfo?: {_id: string, name: string}) => void,
+ callback: (
+ data: Array,
+ isDone: boolean,
+ error?: ApiError,
+ categoryInfo?: { _id: string; name: string }
+ ) => void,
categoryId?: string
) {
/*
@@ -146,9 +155,19 @@ class ProductService {
/* If no requests are pending return else send intermediate response */
if (!requestsPending) {
- return callback(firstResponse.data.products, true, undefined, firstResponse.data.category);
+ return callback(
+ firstResponse.data.products,
+ true,
+ undefined,
+ firstResponse.data.category
+ );
} else {
- callback(firstResponse.data.products, false, undefined, firstResponse.data.category);
+ callback(
+ firstResponse.data.products,
+ false,
+ undefined,
+ firstResponse.data.category
+ );
}
for (let counter = page; counter <= totalPages; counter++) {
apiRequest
@@ -164,10 +183,20 @@ class ProductService {
: callback([], true, new ApiError(response.message));
} else if (!requestsPending) {
/* All Requests are done */
- return callback(response.data.products, true, undefined, response.data.category);
+ return callback(
+ response.data.products,
+ true,
+ undefined,
+ response.data.category
+ );
} else {
/* Sending the data of an in between request */
- callback(response.data.products, false, undefined, response.data.category);
+ callback(
+ response.data.products,
+ false,
+ undefined,
+ response.data.category
+ );
}
});
}
@@ -218,6 +247,127 @@ class ProductService {
return response;
}
}
+
+ async addProduct(
+ fields: AddEditProductFieldsForService
+ ): Promise {
+ const apiRequest = new ApiRequest(this.BASE_URL);
+
+ /* Form data as body */
+ const productFormData = new FormData();
+ productFormData.append("name", fields.name);
+ productFormData.append("description", fields.description);
+ productFormData.append("price", fields.price.toString());
+ productFormData.append("stock", fields.stock.toString());
+ productFormData.append("category", fields.category.id as string);
+ productFormData.append("mainImage", fields.mainImage);
+
+ fields.subImages.forEach((subImage) => {
+ productFormData.append("subImages", subImage);
+ });
+
+ /* API Call */
+ const response = await apiRequest.postRequest(productFormData);
+
+ if (response instanceof ApiResponse && response.success) {
+ return response.data;
+ } else if (response instanceof ApiResponse) {
+ return new ApiError(response.message);
+ }
+ return response;
+ }
+
+ /* Edit Product */
+ async editProduct(
+ fields: EditProductFieldsForService,
+ productId: string
+ ): Promise {
+ const apiRequest = new ApiRequest(`${this.BASE_URL}/${productId}`);
+
+ /* Form data */
+ const formData = new FormData();
+
+ let key: keyof typeof fields;
+ for (key in fields) {
+ const value = fields[key];
+ if (value !== undefined) {
+ /* For string types: name, description */
+
+ if (typeof value === "string") {
+ formData.append(key, value);
+ }
+ else if (typeof value === "number") {
+ /* Number types: price, stock */
+
+ formData.append(key, value.toString());
+ }
+ else if (
+
+ /* Category */
+ "id" in value &&
+ "text" in value &&
+ typeof value.id === "string"
+ )
+ {
+ /* Dropdown Item */
+ formData.append(key, value.id);
+ }
+ else if (value instanceof File) {
+ /* mainImage */
+ formData.append(key, value);
+ }
+ else if (Array.isArray(value)) {
+ /* Sub Images */
+ value.forEach((subImage) => {
+ formData.append(key, subImage);
+ });
+ }
+ }
+ }
+
+ const response = await apiRequest.patchRequest(formData);
+ if (response instanceof ApiResponse && response.success) {
+ return response.data;
+ } else if (response instanceof ApiResponse) {
+ return new ApiError(response.message);
+ }
+
+ return response;
+ }
+
+ /* Remove a sub image of the product */
+ async removeSubImageOfProduct(
+ subImageId: string,
+ productId: string
+ ): Promise {
+ const apiRequest = new ApiRequest(
+ `${this.BASE_URL}/remove/subimage/${productId}/${subImageId}`
+ );
+
+ const response = await apiRequest.patchRequest({});
+
+ if (response instanceof ApiResponse && response.success) {
+ return response.data;
+ } else if (response instanceof ApiResponse) {
+ return new ApiError(response.message);
+ }
+ return response;
+ }
+
+ async deleteProduct(productId: string): Promise {
+ const apiRequest = new ApiRequest(`${this.BASE_URL}/${productId}`);
+
+ const response = await apiRequest.deleteRequest<{
+ deletedProduct: Product;
+ }>();
+
+ if (response instanceof ApiResponse && response.success) {
+ return response.data.deletedProduct;
+ } else if (response instanceof ApiResponse) {
+ return new ApiError(response.message);
+ }
+ return response;
+ }
}
export default new ProductService();
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/store/UIinfoSlice.ts b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/store/UIinfoSlice.ts
new file mode 100644
index 00000000..42b65064
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/store/UIinfoSlice.ts
@@ -0,0 +1,17 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+ headerHeight: 0,
+};
+const UIinfoSlice = createSlice({
+ name: "UIinfoSlic",
+ initialState,
+ reducers: {
+ updateHeaderHeight(state, { payload }) {
+ state.headerHeight = payload;
+ },
+ },
+});
+
+export const { updateHeaderHeight } = UIinfoSlice.actions;
+export default UIinfoSlice;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/store/index.ts b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/store/index.ts
index 54e3f48e..61a23966 100644
--- a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/store/index.ts
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/store/index.ts
@@ -5,6 +5,7 @@ import BreakpointSlice from "./BreakpointSlice";
import AuthSlice from "./AuthSlice";
import ToastMessageSlice from "./ToastMessageSlice";
import CartSlice from "./CartSlice";
+import UIinfoSlice from "./UIinfoSlice";
const store = configureStore({
reducer: {
@@ -12,7 +13,8 @@ const store = configureStore({
breakpoint: BreakpointSlice.reducer,
auth: AuthSlice.reducer,
toastMessage: ToastMessageSlice.reducer,
- cart: CartSlice.reducer
+ cart: CartSlice.reducer,
+ uiInfo: UIinfoSlice.reducer
}
})
/* useAppSelector and useAppDispatch for typescript */
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/styles/Grid.css b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/styles/Grid.css
new file mode 100644
index 00000000..b30bd7e7
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/styles/Grid.css
@@ -0,0 +1,4 @@
+/* Hiding dropdown in the column filter */
+.ag-filter .ag-picker-field {
+ display: none;
+}
\ No newline at end of file
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/utils/dateTimeHelper.ts b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/utils/dateTimeHelper.ts
index 4131ea9c..3bad8c98 100644
--- a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/utils/dateTimeHelper.ts
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/utils/dateTimeHelper.ts
@@ -73,3 +73,38 @@ export const checkIfDateIsInRange = (
}
return false;
};
+
+
+/* Grid Date Comparator for filter */
+export const gridDateFilterComparator = (filterLocalDateAtMidnight: Date, cellValue: DATE_TIME_FORMATS.displayedDateWithTime) => {
+
+ const filterValueMoment = moment(filterLocalDateAtMidnight);
+ const cellValueMoment = moment(cellValue, DATE_TIME_FORMATS.displayedDateWithTime);
+ if(filterValueMoment.isSame(cellValueMoment, 'date')){
+ return 0;
+ }
+ else if(filterValueMoment.isAfter(cellValueMoment, 'date')){
+ return -1;
+ }
+
+ return 1;
+
+}
+/* Grid Date Comparator for sorting */
+export const gridDateSortComparator = (dateA: DATE_TIME_FORMATS.displayedDateWithTime, dateB: DATE_TIME_FORMATS.displayedDateWithTime) => {
+
+ const dateAMoment = moment(dateA, DATE_TIME_FORMATS.displayedDateWithTime);
+ const dateBMoment = moment(dateB, DATE_TIME_FORMATS.displayedDateWithTime);
+
+ if(dateAMoment.isSame(dateBMoment)){
+ return 0;
+ }
+ else if(dateAMoment.isAfter(dateBMoment)){
+ return -1;
+ }
+ return 1;
+}
+
+export const getMomentObjectFromDateObject = (date: Date) => {
+ return moment(date);
+}
\ No newline at end of file
-
);
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/orderstable/container/OrdersTableContainer.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/orderstable/container/OrdersTableContainer.tsx
new file mode 100644
index 00000000..ac5bfefe
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/orderstable/container/OrdersTableContainer.tsx
@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useState } from "react";
+import { DATE_TIME_FORMATS } from "../../../../constants";
+import { ORDER_STATUS } from "../../../../data/applicationData";
+import OrderService from "../../../../services/order/OrderService";
+import { OrderClass } from "../../../../services/order/OrderTypes";
+import {
+ convertUTCToLocalTime,
+ formatDateTime,
+} from "../../../../utils/dateTimeHelper";
+import OrdersTable from "../presentation/OrdersTable";
+
+const OrdersTableContainer = () => {
+
+ /*
+ Flag for whether orders are being fetched
+ (To show loading spinner until the first response come)
+ */
+ const [isFetchingOrders, setIsFetchingOrders] = useState(true);
+
+ /* Key value orders object, key is id and value is the order */
+ const [orders, setOrders] = useState<{ [key: string]: OrderClass }>({});
+
+ /* To know if an error has occurred when fetching orders */
+ const [isError, setIsError] = useState(false);
+
+ const formatOrder = (order: OrderClass) => {
+ /* Cloning the object, so the original object doesn't get updated */
+ order = { ...order };
+
+ /* Converting createdAt and updatedAt to local and formatting them */
+ order.createdAt = formatDateTime(
+ convertUTCToLocalTime(
+ order.createdAt,
+ DATE_TIME_FORMATS.standardDateWithTime
+ ),
+ DATE_TIME_FORMATS.standardDateWithTime,
+ DATE_TIME_FORMATS.displayedDateWithTime
+ );
+ order.updatedAt = formatDateTime(
+ convertUTCToLocalTime(
+ order.updatedAt,
+ DATE_TIME_FORMATS.standardDateWithTime
+ ),
+ DATE_TIME_FORMATS.standardDateWithTime,
+ DATE_TIME_FORMATS.displayedDateWithTime
+ );
+
+ return order;
+ };
+
+ /* Fetch Orders Asynchronously */
+ const fetchOrders = useCallback((status: ORDER_STATUS) => {
+ setOrders({});
+ setIsFetchingOrders(true);
+ OrderService.getOrdersAsync(status, (data, _, error) => {
+ if (!error) {
+ setOrders((prev) => {
+ data.map((order) => {
+ /* Formatting order */
+ order = formatOrder(order);
+
+ /* At key: Order ID, value is the order object */
+ prev[order._id] = order;
+ });
+ return { ...prev };
+ });
+ setIsFetchingOrders(false);
+ } else {
+ console.error("Error -- fetchOrders() Admin", error);
+ setIsFetchingOrders(false);
+ setIsError(true);
+ }
+ });
+ }, []);
+
+
+ /* Once a order status has been updated */
+ const onOrderStatusUpdatedHandler = (
+ orderId: string,
+ _: ORDER_STATUS
+ ) => {
+ /* Update order object at the orderId */
+ setOrders((prev) => {
+ delete prev[orderId]
+ return { ...prev };
+ });
+ };
+
+ /* Initial Render */
+ useEffect(() => {
+ fetchOrders(ORDER_STATUS.PENDING);
+ }, [fetchOrders]);
+
+ return (
+ <>
+
-
+ {!isAdminPageLayoutShown && (
+
+ <>
+
+ )}
+ {isAdminPageLayoutShown && (
+ <>
+ {isLogoutModalShown && (
+
+
+
+
+ );
+};
+
+export default OrdersOptionsCell;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/orderstable/presentation/OrdersTable.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/orderstable/presentation/OrdersTable.tsx
new file mode 100644
index 00000000..d4aa1b8f
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/orderstable/presentation/OrdersTable.tsx
@@ -0,0 +1,216 @@
+import { ColDef } from "ag-grid-community";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+ RADIO_BUTTON_TYPE
+} from "../../../../constants";
+import { ORDER_STATUS } from "../../../../data/applicationData";
+import { OrderClass } from "../../../../services/order/OrderTypes";
+import { useAppSelector } from "../../../../store";
+import {
+ gridDateFilterComparator,
+ gridDateSortComparator,
+} from "../../../../utils/dateTimeHelper";
+import ErrorMessage from "../../../basic/ErrorMessage";
+import Grid from "../../../basic/Grid";
+import RadioButtons from "../../../basic/RadioButtons";
+import EditOrderStatusModalContainer from "../../../modals/editorderstatusmodal/container/EditOrderStatusModalContainer";
+import OrderLinkCell from "./OrderLinkCell";
+import OrdersOptionsCell from "./OrdersOptionsCell";
+
+interface OrdersTableProps {
+ orders: OrderClass[] | null;
+ isError: boolean;
+ onOrderStatusUpdatedHandler(orderId: string, status: ORDER_STATUS): void;
+ fetchOrders(status: ORDER_STATUS): void;
+}
+const OrdersTable = (props: OrdersTableProps) => {
+ const { orders, onOrderStatusUpdatedHandler, fetchOrders, isError } = props;
+
+ const { t } = useTranslation();
+
+ const isRTL = useAppSelector((state) => state.language.isRTL);
+
+ /* Visibility of Edit Order dialog */
+ const [isEditOrderModalShown, setIsEditOrderModalShown] = useState(false);
+
+ /* Order status of the orders which are visibile */
+ const [selectedOrderStatus, setSelectedOrderStatus] = useState(
+ ORDER_STATUS.PENDING
+ );
+
+ /* Selected order for edit operation*/
+ const [selectedOrder, setSelectedOrder] = useState
+
+
+ )}
+
+ );
+};
+
+export default OrdersTable;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/productstable/container/ProductsTableContainer.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/productstable/container/ProductsTableContainer.tsx
new file mode 100644
index 00000000..0cabd14f
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/productstable/container/ProductsTableContainer.tsx
@@ -0,0 +1,130 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Product } from "../../../../services/product/ProductTypes";
+import ProductService from "../../../../services/product/ProductService";
+import ProductsTable from "../presentation/ProductsTable";
+import CategoryService from "../../../../services/category/CategoryService";
+import ApiError from "../../../../services/ApiError";
+
+export interface ProductWithCategoryName extends Product {
+ categoryName: string;
+}
+const ProductsTableContainer = () => {
+
+
+ /*
+ Flag for whether products are being fetched
+ (To show loading spinner until the first response come)
+ */
+ const [isFetchingProducts, setIsFetchingProducts] = useState(true);
+
+ /* Key value products object, key is product id and value is the Product */
+ const [products, setProducts] = useState<{
+ [key: string]: ProductWithCategoryName;
+ }>({});
+
+ /* To store category names as object, id is categoryId and value is categoryName */
+ const categoryNames = useRef<{ [key: string]: string }>({});
+
+ /* To know if an error has occurred when fetching products */
+ const [isError, setIsError] = useState(false);
+
+ /* Get category name by categoryId */
+ const getCategoryName = async (categoryId: string): Promise
+
+
+
+
+ );
+};
+
+export default ProductOptionsCell;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/productstable/presentation/ProductsTable.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/productstable/presentation/ProductsTable.tsx
new file mode 100644
index 00000000..929f8f94
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/widgets/productstable/presentation/ProductsTable.tsx
@@ -0,0 +1,194 @@
+import {
+ ColDef,
+ SizeColumnsToContentStrategy,
+ SizeColumnsToFitGridStrategy,
+ SizeColumnsToFitProvidedWidthStrategy,
+} from "ag-grid-community";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BREAKPOINTS, ButtonTypes } from "../../../../constants";
+import useBreakpointCheck from "../../../../hooks/useBreakpointCheck";
+import { Product } from "../../../../services/product/ProductTypes";
+import { useAppSelector } from "../../../../store";
+import Button from "../../../basic/Button";
+import ErrorMessage from "../../../basic/ErrorMessage";
+import Grid from "../../../basic/Grid";
+import { ProductWithCategoryName } from "../container/ProductsTableContainer";
+import ProductOptionsCell from "./ProductOptionsCell";
+import AddEditProductModalContainer from "../../../modals/addeditproductmodal/container/AddEditProductModalContainer";
+import DeleteProductModalContainer from "../../../modals/deleteproductmodal/container/DeleteProductModalContainer";
+
+interface ProductsTableProps {
+ products: ProductWithCategoryName[] | null;
+ isError: boolean;
+ onProductAddedOrUpdated(newProduct: Product): void;
+ onProductDeletedHandler(deletedProduct: Product): void;
+}
+const ProductsTable = (props: ProductsTableProps) => {
+ const {
+ products,
+ onProductAddedOrUpdated,
+ onProductDeletedHandler,
+ isError,
+ } = props;
+
+ const { t } = useTranslation();
+
+ const isRTL = useAppSelector((state) => state.language.isRTL);
+
+
+ /* Is large screen */
+ const isLG = useBreakpointCheck(BREAKPOINTS.lg);
+
+ /* Column Defination for the grid */
+ const PRODUCTS_TABLE_COL_DEFS: ColDef[] = [
+ {
+ field: "name",
+ sortable: false,
+ filter: "agTextColumnFilter",
+ filterParams: {
+ maxNumConditions: 1,
+ filterOptions: ["contains"],
+ },
+ },
+ {
+ field: "categoryName",
+ sortable: true,
+ filter: "agTextColumnFilter",
+ filterParams: {
+ maxNumConditions: 1,
+ filterOptions: ["contains"],
+ },
+ },
+ {
+ field: "description",
+ sortable: false,
+ tooltipField: "description",
+ },
+ {
+ field: "price",
+ sortable: true,
+ },
+ {
+ field: "stock",
+ sortable: true,
+ },
+ {
+ field: "",
+ maxWidth: 100,
+ resizable: false,
+ cellRenderer: ProductOptionsCell,
+ cellRendererParams: {
+ onEditOrDeleteClickHandler: toggleEditOrDeleteProductModal,
+ },
+ pinned: !isLG ? (isRTL ? 'left' : 'right') : false
+ },
+ ];
+
+
+ /* Visibility of AddEdit Product dialog */
+ const [isAddEditProdutModalShown, setIsAddEditProductModalShown] =
+ useState(false);
+
+ /* Visibility of Delete Product dialog */
+ const [isDeleteProductModalShown, setIsDeleteProductModalShown] =
+ useState(false);
+
+ /* Selected product for edit & delete options */
+ const [selectedProduct, setSelectedProduct] = useState
+
+
+
+ )}
+
+ );
+};
+
+export default ProductsTable;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/constants.ts b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/constants.ts
index 1a766d19..db71c71e 100644
--- a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/constants.ts
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/constants.ts
@@ -1,6 +1,8 @@
import React from "react";
import { AddressClass } from "./services/address/AddressTypes";
import { DateRange } from "react-day-picker";
+import { Category } from "./services/category/CategoryTypes";
+import { COUPON_TYPES } from "./services/coupon/CouponTypes";
/* DROPDOWN */
export enum DropdownTypes {
@@ -139,7 +141,17 @@ export enum ROUTE_PATHS {
orderDetail = "/order",
resetForgottenPassword = "/forgot-password/:token",
pageNotFound = "/page-not-found",
- about = "/about"
+ about = "/about",
+ admin = "/admin",
+ adminCategories = "/admin/categories",
+ adminProducts = "/admin/products",
+ adminOrders = "/admin/orders",
+ adminCoupons = "/admin/coupons"
+}
+
+export enum USER_ROLES {
+ admin = "ADMIN",
+ user = "USER"
}
@@ -269,4 +281,57 @@ export interface ProductFilterFields {
export interface OrderListFilterFields {
dateRange: DateRange,
checkedStatus: Array
-
-
-
+ {!isAdminPageLayoutShown && (
+
+
+ )}
+ {location.pathname === ROUTE_PATHS.adminCategories ? (
+
+ );
+};
+
+export default AdminPage;
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/protectedroutes/ForAdminUsers.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/protectedroutes/ForAdminUsers.tsx
new file mode 100644
index 00000000..26e7c11c
--- /dev/null
+++ b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/protectedroutes/ForAdminUsers.tsx
@@ -0,0 +1,27 @@
+import { Outlet } from "react-router-dom";
+import { USER_ROLES } from "../services/auth/AuthTypes";
+import { useAppSelector } from "../store";
+import { useEffect } from "react";
+import useCustomNavigate from "../hooks/useCustomNavigate";
+
+
+const ForAdminUsers = () => {
+ const user = useAppSelector((state) => state.auth.userDetails);
+ const isLogInCheckDone = useAppSelector((state) => state.auth.isLogInCheckDone);
+
+ const navigate = useCustomNavigate();
+
+ useEffect(() => {
+ if(isLogInCheckDone && user?.role !== USER_ROLES.admin){
+ navigate("/", true);
+ }
+ }, [isLogInCheckDone, user?.role, navigate])
+
+ if(isLogInCheckDone && user && user.role == USER_ROLES.admin){
+ return