@evenicanpm/storefront-core 1.0.0-alpha

package/src/components/_components/mini-cart/__tests__/test-cart-with-item.json

@@ -0,0 +1,244 @@
+{
+  "AffiliationLines": [],
+  "IsRequiredAmountPaid": false,
+  "IsDiscountFullyCalculated": true,
+  "IgnoreDiscountCalculation": false,
+  "AmountDue": 410,
+  "AmountPaid": 0,
+  "AttributeValues": [],
+  "IsTaxIncludedInPrice": false,
+  "BeginDateTime": "2025-03-06T19:42:33.915Z",
+  "CartLines": [
+    {
+      "LineId": "cd2e64b1c445434eb38c24eb40ee1d90",
+      "ItemId": "92040",
+      "Barcode": "",
+      "EntryMethodTypeValue": 0,
+      "Description": "",
+      "InventoryDimensionId": "#0000001000006DC7",
+      "Comment": "",
+      "ProductId": 68719492920,
+      "WarehouseId": "DC-CENTRAL",
+      "Quantity": 1,
+      "Price": 410,
+      "ExtendedPrice": 410,
+      "TaxAmount": 0,
+      "ItemTaxGroupId": "RP",
+      "TotalAmount": 410,
+      "NetAmountWithoutTax": 410,
+      "NetPrice": 410,
+      "DiscountAmountWithoutTax": 0,
+      "DiscountAmount": 0,
+      "LineDiscount": 0,
+      "LinePercentageDiscount": 0,
+      "LineManualDiscountPercentage": 0,
+      "LineManualDiscountAmount": 0,
+      "UnitOfMeasureSymbol": "ea",
+      "DeliveryMode": "",
+      "IsWarrantyLine": false,
+      "WarrantableTransactionId": "",
+      "WarrantableSalesId": "",
+      "WarrantableLineNumber": 0,
+      "WarrantableSerialNumber": "",
+      "ReturnTransactionId": "",
+      "ReturnLineNumber": 0,
+      "ReturnInventTransId": "",
+      "ReturnStore": "",
+      "ReturnTerminalId": "",
+      "IsVoided": false,
+      "IsTaxOverideCodeTaxExempt": false,
+      "IsGiftCardLine": false,
+      "IsPriceKeyedIn": false,
+      "GiftCardId": "",
+      "GiftCardCurrencyCode": "",
+      "GiftCardOperationValue": 0,
+      "GiftCardTypeValue": 0,
+      "SalesStatusValue": 1,
+      "QuantityCanceled": 0,
+      "FulfillmentStoreId": "",
+      "SerialNumber": "",
+      "ElectronicDeliveryEmail": "",
+      "ElectronicDeliveryEmailContent": "",
+      "IsPriceOverridden": false,
+      "IsInvoiceLine": false,
+      "InvoiceId": "",
+      "InvoiceAmount": 0,
+      "GiftCardBalance": 0,
+      "LineVersion": 0,
+      "PromotionLines": [],
+      "PriceLines": [
+        {
+          "RecordId": 68719489596,
+          "Value": 410,
+          "PriceMethod": "Fixed",
+          "OriginId": "92040",
+          "PriceChangedByExtensions": false,
+          "ExtensionProperties": [],
+          "@odata.type": "#Microsoft.Dynamics.Commerce.Runtime.DataModel.BasePriceLine"
+        }
+      ],
+      "DiscountLines": [],
+      "RelatedDiscountedLineIds": [],
+      "ReasonCodeLines": [],
+      "ChargeLines": [],
+      "TaxLines": [],
+      "ReturnTaxLines": [],
+      "TaxRatePercent": 0,
+      "IsCustomerAccountDeposit": false,
+      "ExtensionProperties": [],
+      "LineNumber": 1,
+      "CommissionSalesGroup": "",
+      "StaffId": "",
+      "CatalogId": 0,
+      "AttributeValues": [],
+      "ThirdPartyGiftCardInfo": {
+        "Amount": 0,
+        "Authorization": "",
+        "ExtensionProperties": []
+      },
+      "BarcodeEmbeddedPrice": 0,
+      "PriceInBarcode": false,
+      "InvoiceTypeValue": 0,
+      "DetailedLineStatusValue": 0,
+      "SalesAgreementLineRecordId": 0,
+      "Product": {
+        "RecordId": 68719492920,
+        "ItemId": "92040",
+        "Name": "Leather Dress Coat",
+        "Description": "Black leather dress coat completed with a collar for a classy look.",
+        "ProductTypeValue": 5,
+        "DefaultUnitOfMeasure": "ea",
+        "BasePrice": 410,
+        "Price": 410,
+        "AdjustedPrice": 410,
+        "MasterProductId": 68719492919,
+        "Components": [],
+        "IsGiftCard": false,
+        "ProductNumber": "92040 :  : M :  :",
+        "Dimensions": [
+          {
+            "DimensionTypeValue": 3,
+            "DimensionValue": {
+              "RecordId": 22565421233,
+              "Value": "M",
+              "DimensionId": "M",
+              "ExtensionProperties": []
+            },
+            "ExtensionProperties": []
+          }
+        ],
+        "Behavior": {
+          "HasSerialNumber": false,
+          "IsDiscountAllowed": true,
+          "IsManualDiscountAllowed": true,
+          "IsKitDisassemblyAllowed": false,
+          "IsNegativeQuantityAllowed": false,
+          "IsReturnAllowed": true,
+          "IsSaleAtPhysicalStoresAllowed": true,
+          "IsZeroSalePriceAllowed": false,
+          "KeyInPriceValue": 4,
+          "KeyInQuantityValue": 0,
+          "MustKeyInComment": false,
+          "MustPrintIndividualShelfLabelsForVariants": false,
+          "MustPromptForSerialNumberOnlyAtSale": false,
+          "MustWeighProductAtSale": false,
+          "ValidFromDateForSaleAtPhysicalStores": "1900-01-01T00:00:00.000Z",
+          "ValidToDateForSaleAtPhysicalStores": "2154-12-31T00:00:00.000Z",
+          "IsStorageDimensionGroupLocationActive": true,
+          "IsStorageDimensionGroupLocationAllowBlankReceiptEnabled": false,
+          "AllowNegativePhysicalInventory": true,
+          "IsStockedProduct": true,
+          "IsBlankSerialNumberAllowed": false,
+          "IsBlankSerialNumberReceiptAllowed": false,
+          "IsSerialNumberControlEnabled": false,
+          "IsStorageDimensionGroupLocationBlankIssueAllowed": false,
+          "IsSerialNumberRequired": false,
+          "DefaultQuantity": 0,
+          "MaximumQuantity": 0,
+          "MinimumQuantity": 0,
+          "MultipleOfQuantity": 0,
+          "InventoryLocationId": "",
+          "IsSaleAtSelfCheckoutRegistersAllowed": true,
+          "ExtensionProperties": []
+        },
+        "LinkedProducts": [],
+        "PrimaryImageUrl": "https://images-us-prod.cms.commerce.dynamics.com/cms/api/lmrndcmtsl/imageFileData/search?fileName=/Products/92040 ^  ^ M ^  ^_000_001.png",
+        "ItemTypeValue": 0,
+        "ItemServiceTypeValue": 0,
+        "ExtensionProperties": []
+      }
+    }
+  ],
+  "CartTypeValue": 2,
+  "ChannelId": 68719478279,
+  "ChargeAmount": 0,
+  "CustomerOrderRemainingBalance": 0,
+  "ChargeLines": [],
+  "TaxViewLines": [],
+  "Comment": "",
+  "InvoiceComment": "",
+  "Coupons": [],
+  "CustomerOrderModeValue": 0,
+  "DeliveryMode": "",
+  "DiscountAmount": 0,
+  "DiscountAmountWithoutTax": 0,
+  "DiscountCodes": [],
+  "Id": "8o-erTuzbvZDYi20UBbuhT4tnuBzWI7i",
+  "TransactionTypeValue": -1,
+  "CustomerAccountDepositLines": [],
+  "IncomeExpenseLines": [],
+  "IncomeExpenseTotalAmount": 0,
+  "IsReturnByReceipt": false,
+  "ReturnTransactionHasLoyaltyPayment": false,
+  "IsFavorite": false,
+  "IsRecurring": false,
+  "IsSuspended": false,
+  "LoyaltyCardId": "",
+  "ModifiedDateTime": "2025-03-06T19:42:49.043Z",
+  "AvailableDepositAmount": 0,
+  "PrepaymentAmountPaid": 0,
+  "PrepaymentRoundingDifference": 0,
+  "PrepaymentAppliedOnPickup": 0,
+  "PrepaymentAmountInvoiced": 0,
+  "PromotionLines": [],
+  "ReasonCodeLines": [],
+  "RequiredDepositAmount": 0,
+  "RequiredDepositWithoutCarryoutAmount": 0,
+  "StaffId": "",
+  "SubtotalAmount": 410,
+  "SubtotalAmountWithoutTax": 410,
+  "NetPrice": 410,
+  "SubtotalSalesAmount": 410,
+  "TaxAmount": 0,
+  "TaxOnCancellationCharge": 0,
+  "TaxOnShippingCharge": 0,
+  "TaxOnNonShippingCharges": 0,
+  "TenderLines": [],
+  "RefundableTenderLines": [],
+  "TerminalId": "",
+  "TotalAmount": 410,
+  "TotalSalesAmount": 410,
+  "TotalReturnAmount": 0,
+  "TotalCarryoutSalesAmount": 0,
+  "TotalCustomerOrderSalesAmount": 0,
+  "TotalManualDiscountAmount": 0,
+  "TotalManualDiscountPercentage": 0,
+  "WarehouseId": "DC-CENTRAL",
+  "IsCreatedOffline": false,
+  "CartStatusValue": 1,
+  "ReceiptTransactionTypeValue": 0,
+  "CommissionSalesGroup": "",
+  "Version": 71314473,
+  "TotalItems": 1,
+  "HasTaxCalculationTriggered": true,
+  "MerchantProperties": [],
+  "HasChargeCalculationTriggered": true,
+  "FiscalTransactions": [],
+  "ShippingChargeAmount": 0,
+  "OtherChargeAmount": 0,
+  "PeriodicDiscountsCalculateScopeValue": 0,
+  "TaxCalculationTypeValue": 0,
+  "Notes": [],
+  "CustomerRequisition": "",
+  "ExtensionProperties": []
+}

package/src/components/_components/mini-cart/components/bottom-actions.tsx

@@ -0,0 +1,27 @@
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import { useTranslations } from "next-intl";
+
+// ==============================================================
+interface Props {
+  total: string;
+  handleNavigate: (path: string) => () => void;
+}
+// ==============================================================
+
+export default function BottomActions({ total, handleNavigate }: Props) {
+  const t = useTranslations("Cart");
+  return (
+    <Box p={2.5}>
+      <Button
+        fullWidth
+        color="primary"
+        variant="outlined"
+        sx={{ height: 40 }}
+        onClick={handleNavigate("/cart")}
+      >
+        {t("viewCartBtn", { total })}
+      </Button>
+    </Box>
+  );
+}

package/src/components/_components/mini-cart/components/cart-item.tsx

@@ -0,0 +1,144 @@
+"use client";
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Avatar from "@mui/material/Avatar";
+import IconButton from "@mui/material/IconButton";
+// MUI ICON COMPONENTS
+import Add from "@mui/icons-material/Add";
+import Close from "@mui/icons-material/Close";
+import Remove from "@mui/icons-material/Remove";
+// GLOBAL CUSTOM COMPONENTS
+import { FlexBox } from "@/components/_components/flex-box/index";
+import { H6, Tiny } from "@/components/_components/Typography";
+import { CartLine } from "@/schemas/cart.schema";
+import { useFormatter, useTranslations } from "next-intl";
+import { CircularProgress } from "@mui/material";
+import { getProductDetailUrl } from "@/lib/build-product-detail-url";
+
+// ==============================================================
+interface Props {
+  item: CartLine;
+  handleCartAmountChange: (cartLine: CartLine) => void;
+  isLineUpdating: boolean;
+  closeDrawer: () => void;
+}
+// ==============================================================
+
+const MiniCartItem: React.FC<Props> = ({
+  closeDrawer,
+  handleCartAmountChange,
+  isLineUpdating,
+  item,
+}) => {
+  const { number } = useFormatter();
+  const t = useTranslations("Cart.CartLine");
+  const currency = (value: number) =>
+    number(value, { style: "currency", currency: "USD" });
+  const quantity = item.Quantity || 0;
+  const onIncreaseClick = () => {
+    const qty = item.Quantity || 0;
+    handleCartAmountChange({ ...item, Quantity: qty + 1 });
+  };
+  return (
+    <FlexBox
+      py={2}
+      px={2.5}
+      key={item.LineId}
+      alignItems="center"
+      borderBottom="1px solid"
+      borderColor="divider"
+    >
+      <FlexBox
+        minWidth={30}
+        minHeight={85}
+        alignItems="center"
+        justifyContent="center"
+      >
+        {!isLineUpdating ? (
+          <FlexBox alignItems="center" flexDirection="column">
+            <Button
+              size="small"
+              color="primary"
+              variant="outlined"
+              onClick={onIncreaseClick}
+              title={t("increaseQuantity")}
+              sx={{ height: 28, width: 28, borderRadius: 50 }}
+            >
+              <Add fontSize="small" />
+            </Button>
+
+            <H6 my="3px">{item.Quantity}</H6>
+
+            <Button
+              data-testid={"decreaseQuantity"}
+              size="small"
+              color="primary"
+              variant="outlined"
+              title={t("decreaseQuantity")}
+              disabled={item.Quantity === 1}
+              onClick={() =>
+                handleCartAmountChange({ ...item, Quantity: quantity - 1 })
+              }
+              sx={{ height: 28, width: 28, borderRadius: 50 }}
+            >
+              <Remove fontSize="small" />
+            </Button>
+          </FlexBox>
+        ) : (
+          <CircularProgress size={"10px"} color={"primary"} />
+        )}
+      </FlexBox>
+
+      <Link
+        href={item.Product ? getProductDetailUrl(item.Product) : ""}
+        onClick={() => closeDrawer()}
+      >
+        <Avatar
+          alt={item.Product?.Name}
+          src={item.Product?.PrimaryImageUrl}
+          sx={{ mx: 1, width: 75, height: 75 }}
+        />
+      </Link>
+
+      <Box
+        flex="1"
+        textOverflow="ellipsis"
+        whiteSpace="nowrap"
+        overflow="hidden"
+      >
+        <Link
+          href={item.Product ? getProductDetailUrl(item.Product) : ""}
+          onClick={() => closeDrawer()}
+        >
+          <H6 ellipsis className="title">
+            {item.Product?.Name}
+          </H6>
+        </Link>
+        <H6 color="grey.600" mt={0.5}>
+          {item?.Product?.Dimensions?.map((d, i) => (
+            <span key={i}>{d?.DimensionValue?.Value + " "}</span>
+          ))}
+        </H6>
+        <Tiny color="grey.600">
+          {currency(item.Price || 0)} x {quantity}
+        </Tiny>
+
+        <H6 color="primary.main" mt={0.5}>
+          {currency(item.TotalAmount || 0)}
+        </H6>
+      </Box>
+
+      <IconButton
+        size="small"
+        onClick={() => handleCartAmountChange({ ...item, Quantity: 0 })}
+        sx={{ marginLeft: 2.5 }}
+        title={t("removeItem")}
+      >
+        <Close fontSize="small" />
+      </IconButton>
+    </FlexBox>
+  );
+};
+
+export default MiniCartItem;

package/src/components/_components/mini-cart/components/empty-view.tsx

@@ -0,0 +1,29 @@
+// GLOBAL CUSTOM COMPONENTS
+import { FlexBox } from "@/components/_components/flex-box/index";
+import { Paragraph } from "@/components/_components/Typography";
+import { useTranslations } from "next-intl";
+
+import { MdShoppingBag as ShoppingBag } from "react-icons/md";
+
+export default function EmptyCartView() {
+  const t = useTranslations("Cart");
+  return (
+    <FlexBox
+      alignItems="center"
+      flexDirection="column"
+      justifyContent="center"
+      height="calc(100% - 74px)"
+    >
+      <ShoppingBag />
+      <Paragraph
+        fontSize={15}
+        mt={2}
+        color="grey.600"
+        textAlign="center"
+        maxWidth={200}
+      >
+        {t("emptyCartMsg")}
+      </Paragraph>
+    </FlexBox>
+  );
+}

package/src/components/_components/mini-cart/components/top-header.tsx

@@ -0,0 +1,34 @@
+import IconButton from "@mui/material/IconButton";
+import Clear from "@mui/icons-material/Clear";
+// LOCAL CUSTOM COMPONENTS
+import { Paragraph } from "@/components/_components/Typography";
+import { FlexBetween, FlexBox } from "@/components/_components/flex-box/index";
+// CUSTOM ICON COMPONENT
+import { MdOutlineShoppingBag as CartBag } from "react-icons/md";
+import { useTranslations } from "next-intl";
+
+// ==============================================================
+interface Props {
+  total: number;
+  toggle: () => void;
+}
+// ==============================================================
+
+export default function TopHeader({ toggle, total }: Props) {
+  const t = useTranslations("Cart");
+  return (
+    <FlexBetween mx={3} height={74}>
+      <FlexBox gap={1} alignItems="center" color="secondary.main">
+        <CartBag color="inherit" />
+
+        <Paragraph lineHeight={0} fontWeight={600}>
+          {t("count", { count: total })}
+        </Paragraph>
+      </FlexBox>
+
+      <IconButton onClick={toggle} title={t("closeMiniCart")}>
+        <Clear />
+      </IconButton>
+    </FlexBetween>
+  );
+}

package/src/components/_components/mini-cart/index.ts

@@ -0,0 +1 @@
+export { default as MiniCart } from "./mini-cart";

package/src/components/_components/mini-cart/mini-cart.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
+
+// LOCAL CUSTOM COMPONENTS
+import TopHeader from "./components/top-header";
+import MiniCartItem from "./components/cart-item";
+import EmptyCartView from "./components/empty-view";
+import BottomActions from "./components/bottom-actions";
+// GLOBAL CUSTOM COMPONENT
+import Scrollbar from "@/components/_components/scrollbar/index";
+// CUSTOM UTILS LIBRARY FUNCTION
+// CUSTOM DATA MODEL
+import { Cart, CartLine } from "@/schemas/cart.schema";
+import { useFormatter } from "next-intl";
+import useUpdateCartLines from "@/services/cart/mutations/update-cart-lines";
+import useDeleteCartLine from "@/services/cart/mutations/delete-cart-line";
+
+// =========================================================
+export interface MiniCartProps {
+  cart: Cart;
+  closeDrawer: () => void;
+}
+// =========================================================
+
+export default function MiniCart({ cart, closeDrawer }: MiniCartProps) {
+  const { push } = useRouter();
+  const { number } = useFormatter();
+  const currency = (value: number) =>
+    number(value, { style: "currency", currency: "USD" });
+  const {
+    mutate: updateLine,
+    isPending: isUpdatePending,
+    variables: updateVariables,
+  } = useUpdateCartLines();
+  const {
+    mutate: deleteLine,
+    isPending: isDeletePending,
+    variables: deleteVariables,
+  } = useDeleteCartLine();
+
+  const shouldShowLoadingSpinner = (lineId: string) =>
+    (isUpdatePending || isDeletePending) &&
+    (updateVariables?.cartLine[0].LineId === lineId ||
+      deleteVariables?.cartLine[0].LineId === lineId);
+
+  const handleCartAmountChange = (cartLine: CartLine) => {
+    if (cartLine.Quantity === 0) {
+      deleteLine({
+        cartLine: [cartLine],
+        cartId: cart.Id,
+        version: cart.Version,
+      });
+      return;
+    }
+    updateLine({
+      cartLine: [cartLine],
+      cartId: cart.Id,
+      version: cart.Version,
+    });
+  };
+
+  const handleNavigate = (path: string) => () => {
+    // toggleSidenav();
+    push(path);
+  };
+
+  return (
+    <Box width="100%" minWidth={380}>
+      {/* HEADING SECTION */}
+      <TopHeader toggle={closeDrawer} total={cart?.CartLines.length || 0} />
+
+      <Divider />
+
+      <Box
+        height={`calc(100vh - ${cart?.CartLines.length ? "207px" : "75px"})`}
+      >
+        {/* CART ITEM LIST */}
+        {cart.CartLines.length > 0 ? (
+          <Scrollbar>
+            {cart?.CartLines?.map((item) => (
+              <MiniCartItem
+                item={item}
+                key={item.LineId}
+                handleCartAmountChange={handleCartAmountChange}
+                isLineUpdating={shouldShowLoadingSpinner(item.LineId || "")}
+                closeDrawer={closeDrawer}
+              />
+            ))}
+          </Scrollbar>
+        ) : (
+          <EmptyCartView />
+        )}
+      </Box>
+
+      {/* CART BOTTOM ACTION BUTTONS */}
+      {cart?.CartLines.length > 0 ? (
+        <BottomActions
+          total={currency(cart?.TotalAmount || 0)}
+          handleNavigate={handleNavigate}
+        />
+      ) : null}
+    </Box>
+  );
+}

package/src/components/_components/mobile-navigation/index.ts

@@ -0,0 +1,3 @@
+import MobileNavigationBar from "./mobile-navigation-bar";
+
+export { MobileNavigationBar };

package/src/components/_components/mobile-navigation/mobile-navigation-bar.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { Fragment, useContext } from "react";
+import Box from "@mui/material/Box";
+import Badge from "@mui/material/Badge";
+import { Theme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTranslations } from "next-intl";
+// CUSTOM ICON COMPONENTS
+import Home from "@/components/_components/icons/home";
+import User2 from "@/components/_components/icons/user2";
+import CategoryOutlined from "@/components/_components/icons/category-outline";
+import ShoppingBagOutlined from "@/components/_components/icons/shopping-bag-outlined";
+// STYLED COMPONENTS
+import { iconStyle, StyledBox, StyledNavLink, Wrapper } from "./styles/index";
+import getCart from "@/services/cart/queries/get-cart";
+import { NavContext } from "@/components/NavProvider/index";
+
+const MENU_LIST = [
+  { title: "home", Icon: Home, href: "/" },
+  { title: "category", Icon: CategoryOutlined },
+  { title: "cart", Icon: ShoppingBagOutlined, href: "/cart" },
+  { title: "account", Icon: User2, href: "/account/profile" },
+];
+
+export default function MobileNavigationBar2() {
+  const DOWN_900 = useMediaQuery((theme: Theme) => theme.breakpoints.down(900));
+
+  const t = useTranslations("Navigation.Mobile");
+
+  const { toggleMobileSideNav } = useContext(NavContext);
+
+  const { data: cart } = getCart.useData();
+
+  if (DOWN_900) {
+    return (
+      <Box position="relative" display="flex" flexDirection="column">
+        <Wrapper>
+          {MENU_LIST.map(({ Icon, title, href }) => {
+            // Link inner content
+            const ICON = <Icon sx={iconStyle} fontSize="small" />;
+
+            const CONTENT = (
+              <Fragment>
+                {title === "cart" ? (
+                  <Badge badgeContent={cart?.TotalItems || 0} color="primary">
+                    {ICON}
+                  </Badge>
+                ) : (
+                  ICON
+                )}
+
+                {t(title)}
+              </Fragment>
+            );
+
+            return href ? (
+              <StyledNavLink key={title} href={href}>
+                {CONTENT}
+              </StyledNavLink>
+            ) : (
+              <StyledBox key={title} onClick={toggleMobileSideNav}>
+                {CONTENT}
+              </StyledBox>
+            );
+          })}
+        </Wrapper>
+      </Box>
+    );
+  }
+
+  return null;
+}