@evenicanpm/storefront-core 1.0.4 → 1.0.5

package/src/pages-v2/account/account-navigation.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { createContext, Fragment, ReactNode } from "react";
+import { usePathname } from "next/navigation";
+import { useTranslations } from "next-intl";
+// ICON COMPONENTS
+import {
+  MdOutlineShoppingBag as ShoppingBagOutlined,
+  MdFavoriteBorder as FavoriteBorder,
+  MdPerson as Person,
+  MdPlace as Place,
+} from "react-icons/md";
+// GLOBAL CUSTOM COMPONENTS
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+import {
+  Paragraph,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// API
+import getUser from "@/api-manager/services/user/queries/get-user";
+import getUserCounts from "@/api-manager/services/user/queries/get-user-counts";
+// STYLED COMPONENTS
+import {
+  MainContainer,
+  StyledNavLink,
+} from "@evenicanpm/storefront-core/src/pages-v2/account/styles";
+
+/**
+ * 
+ *** Extend menu: 
+<AccountNavigation
+  items={[
+    ...DEFAULT_MENU_ITEMS,
+    {
+      title: "EXTRAS",
+      list: [
+        {
+          href: "/account/rewards",
+          title: "rewards",
+          Icon: RewardsIcon,
+          count: 5,
+        },
+      ],
+    },
+  ]}
+/>;
+
+*** Override completely:
+<AccountNavigation>
+  <AccountNavigation.Section title="Custom Section">
+    <AccountNavigation.Item
+      href="/custom"
+      Icon={CustomIcon}
+      label="Custom Page"
+    />
+  </AccountNavigation.Section>
+</AccountNavigation>;
+ */
+
+export const DEFAULT_MENU_ITEMS = [
+  {
+    title: "DASHBOARD",
+    list: [
+      {
+        href: "/account/orders",
+        title: "orders",
+        Icon: ShoppingBagOutlined,
+        count: 0,
+      },
+      { href: "/account/wish-lists", title: "wishlists", Icon: FavoriteBorder },
+    ],
+  },
+  {
+    title: "ACCOUNT SETTINGS",
+    list: [
+      { href: "/account/profile", title: "profile", Icon: Person },
+      { href: "/account/addresses", title: "addresses", Icon: Place, count: 0 },
+    ],
+  },
+];
+
+interface AccountNavigationContextValue {
+  items: typeof DEFAULT_MENU_ITEMS;
+}
+
+const AccountNavigationContext =
+  createContext<AccountNavigationContextValue | null>(null);
+interface AccountNavigationProps {
+  items?: typeof DEFAULT_MENU_ITEMS;
+  children?: ReactNode;
+}
+
+const AccountNavigation = ({ items, children }: AccountNavigationProps) => {
+  const pathname = usePathname();
+  const t = useTranslations("Account.Menu");
+
+  const { data: user } = getUser.useData();
+  const { data: counts } = getUserCounts.useData(String(user?.RecordId) || "");
+
+  // Merge default items with provided overrides
+  const mergedItems = (items || DEFAULT_MENU_ITEMS).map((section) => ({
+    ...section,
+    list: section.list.map((item) => {
+      if (item.href === "/account/orders") {
+        return { ...item, count: counts?.orderCount ?? item.count };
+      }
+      if (item.href === "/account/addresses") {
+        return { ...item, count: counts?.addressCount ?? item.count };
+      }
+      return item;
+    }),
+  }));
+
+  return (
+    <AccountNavigationContext.Provider value={{ items: mergedItems }}>
+      <MainContainer>
+        {children || (
+          <>
+            {mergedItems.map((section) => (
+              <AccountNavigation.Section
+                key={section.title}
+                title={section.title}
+              >
+                {section.list.map((item) => (
+                  <AccountNavigation.Item
+                    key={item.title}
+                    {...item}
+                    isActive={pathname.includes(item.href)}
+                    label={t(item.title)}
+                  />
+                ))}
+              </AccountNavigation.Section>
+            ))}
+          </>
+        )}
+      </MainContainer>
+    </AccountNavigationContext.Provider>
+  );
+};
+
+interface SectionProps {
+  title: string;
+  children: ReactNode;
+}
+
+AccountNavigation.Section = ({ title, children }: SectionProps) => {
+  return (
+    <Fragment>
+      <Paragraph p="26px 30px 1rem" color="grey.600" fontSize={12}>
+        {title?.toUpperCase()}
+      </Paragraph>
+      {children}
+    </Fragment>
+  );
+};
+
+interface ItemProps {
+  href: string;
+  Icon: React.ComponentType<any>;
+  count?: number;
+  label: string;
+  isActive?: boolean;
+}
+
+AccountNavigation.Item = ({
+  href,
+  Icon,
+  count,
+  label,
+  isActive,
+}: ItemProps) => {
+  return (
+    <StyledNavLink href={href} isCurrentPath={isActive}>
+      <FlexBox alignItems="center" gap={1}>
+        <Icon color="inherit" fontSize="large" className="nav-icon" />
+        <Span>{label}</Span>
+      </FlexBox>
+      {typeof count === "number" && count > 0 && <Span>{count}</Span>}
+    </StyledNavLink>
+  );
+};
+
+export default AccountNavigation;

package/src/pages-v2/account/addresses/address-form.tsx

@@ -1,4 +1,6 @@
-import React from "react";
+"use client";
+
+import React, { createContext, useContext } from "react";
 import {
   Box,
   Button,
@@ -10,6 +12,7 @@ import {
   OutlinedInput,
 } from "@mui/material";
 import Grid from "@mui/material/Grid2";
+import _ from "lodash";
 import { useLocale, useTranslations } from "next-intl";
 import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
 import { useRouter } from "next/navigation";
@@ -24,11 +27,21 @@ import getCountries from "@/api-manager/services/address/queries/get-countries";
 import getStates from "@/api-manager/services/address/queries/get-states";
 import useCreateAddress from "@/api-manager/services/address/mutations/create-address";
 import useUpdateAddress from "@/api-manager/services/address/mutations/update-address";
+interface FormContextValue {
+  formik: ReturnType<typeof useFormik<any>>;
+  countries: CountryRegionInfo[] | undefined;
+  states: { StateId?: string; StateName?: string }[] | undefined;
+  selectedCountry: CountryRegionInfo | null;
+  setSelectedCountry: (c: CountryRegionInfo | null) => void;
+}
 
-// =============================================================
-type Props = { address: Address };
-// =============================================================
-export default function AddressForm({ address }: Props) {
+const FormContext = createContext<FormContextValue | null>(null);
+interface RootProps {
+  address: Address;
+  children: React.ReactNode;
+}
+
+const AddressForm = ({ address, children }: RootProps) => {
   const [tn, t] = ["Account.Addresses", "Address"].map(useTranslations);
   const { setNotification } = useNotification();
   const router = useRouter();
@@ -47,12 +60,6 @@ export default function AddressForm({ address }: Props) {
   const { mutateAsync: createAddress } = useCreateAddress();
   const { mutateAsync: updateAddress } = useUpdateAddress();
 
-  React.useEffect(() => {
-    if (!selectedCountry && defaultCountry) {
-      setSelectedCountry(defaultCountry);
-    }
-  }, [defaultCountry, selectedCountry]);
-
   const FormSchema = z.object({
     Name: z.string().nonempty(t("Validation.required", { field: t("name") })),
     Street: z
@@ -68,8 +75,19 @@ export default function AddressForm({ address }: Props) {
       .nonempty(t("Validation.required", { field: t("country") })),
     Phone: z.string().optional().default(""),
   });
+
   type FormSchemaType = z.infer<typeof FormSchema>;
 
+  const initialValues: FormSchemaType = {
+    Name: address?.Name ?? "",
+    Street: address?.Street ?? "",
+    City: address?.City ?? "",
+    State: address?.State ?? "",
+    ZipCode: address?.ZipCode ?? "",
+    Country: address?.ThreeLetterISORegionName ?? "",
+    Phone: address?.Phone ?? "",
+  };
+
   const handleSubmit = async (values: FormSchemaType) => {
     let newAddress: Address = {
       Name: values.Name,
@@ -102,188 +120,171 @@ export default function AddressForm({ address }: Props) {
     }
   };
 
-  const setValues = (address: Address) => {
-    return {
-      Name: address?.Name || "",
-      Street: address?.Street || "",
-      City: address?.City || "",
-      State: address?.State || "",
-      ZipCode: address?.ZipCode || "",
-      Country: address?.ThreeLetterISORegionName || "",
-      Phone: address?.Phone || "",
-    };
-  };
-
-  const intialValues = setValues(address);
-
   const formik = useFormik<FormSchemaType>({
-    initialValues: intialValues,
+    initialValues,
     onSubmit: handleSubmit,
     validate: withZodSchema(FormSchema),
   });
 
   return (
-    <form onSubmit={formik.handleSubmit}>
-      <Grid container spacing={3}>
-        <Grid size={{ sm: 6, xs: 12 }}>
-          <TextField
-            name="Name"
-            fullWidth
-            autoComplete="off"
-            label={t("name")}
-            value={formik.values.Name}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={formik.touched.Name && Boolean(formik.errors.Name)}
-            helperText={formik.touched.Name && formik.errors.Name}
-            required
-          />
-        </Grid>
-        <Grid size={{ sm: 6, xs: 12 }}>
-          <TextField
-            name="Street"
-            fullWidth
-            autoComplete="off"
-            label={t("street")}
-            value={formik.values.Street}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={formik.touched.Street && Boolean(formik.errors.Street)}
-            helperText={formik.touched.Street && formik.errors.Street}
-            required
-          />
-        </Grid>
-        <Grid size={{ sm: 6, xs: 12 }}>
-          <TextField
-            name="City"
-            fullWidth
-            autoComplete="off"
-            label={t("city")}
-            value={formik.values.City}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={formik.touched.City && Boolean(formik.errors.City)}
-            helperText={formik.touched.City && formik.errors.City}
-            required
-          />
-        </Grid>
-        <Grid size={{ sm: 6, xs: 12 }}>
-          <FormControl
-            fullWidth
-            size="small"
-            error={formik.touched.Country && Boolean(formik.errors.Country)}
-          >
-            <InputLabel required id="Country">
-              {t("country")}
-            </InputLabel>
-            <Select
-              labelId="Country"
-              name="Country"
-              input={<OutlinedInput label={t("country")} />}
-              value={formik.values.Country}
-              onChange={(event) => {
-                const countryId = event.target.value;
+    <FormContext.Provider
+      value={{ formik, countries, states, selectedCountry, setSelectedCountry }}
+    >
+      <form onSubmit={formik.handleSubmit}>{children}</form>
+    </FormContext.Provider>
+  );
+};
 
-                // Update selected country
-                const selected =
-                  countries?.find((c) => c.CountryRegionId === countryId) ||
-                  null;
-                setSelectedCountry(selected);
+// ------------------- Fields -------------------
+interface FieldProps {
+  name: keyof Address;
+  label?: string;
+  required?: boolean;
+}
+
+AddressForm.Fields = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <Grid container spacing={3}>
+      {children}
+    </Grid>
+  );
+};
 
-                formik.setFieldValue("Country", countryId);
-                // Reset state field when country changes
-                formik.setFieldValue("State", "");
-              }}
-              onBlur={formik.handleBlur}
-              required
-            >
-              <MenuItem value="">Select Country</MenuItem>
-              {countries?.map(({ ShortName, CountryRegionId }, index) => (
-                <MenuItem value={CountryRegionId} key={index}>
-                  {ShortName}
-                </MenuItem>
-              ))}
-            </Select>
-            {formik.touched.Country && formik.errors.Country && (
-              <Box
-                component="span"
-                sx={{ color: "error.main", fontSize: "0.75rem", mt: 0.5 }}
-              >
-                {formik.errors.Country}
-              </Box>
-            )}
-          </FormControl>
-        </Grid>
-        <Grid size={{ sm: 6, xs: 12 }}>
-          <FormControl
-            fullWidth
-            size="small"
-            error={formik.touched.State && Boolean(formik.errors.State)}
-          >
-            <InputLabel required id="State">
-              {t("state")}
-            </InputLabel>
-            <Select
-              labelId="State"
-              name="State"
-              input={<OutlinedInput label={t("state")} />}
-              value={formik.values.State}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              required
-            >
-              <MenuItem value="">Select a state</MenuItem>
-              {states?.map(({ StateName, StateId }, index) => (
-                <MenuItem value={StateId} key={index}>
-                  {StateName}
-                </MenuItem>
-              ))}
-            </Select>
-            {formik.touched.State && formik.errors.State && (
-              <Box
-                component="span"
-                sx={{ color: "error.main", fontSize: "0.75rem", mt: 0.5 }}
-              >
-                {formik.errors.State}
-              </Box>
-            )}
-          </FormControl>
-        </Grid>
+AddressForm.Field = ({ name, label, required }: FieldProps) => {
+  const ctx = useContext(FormContext);
+  if (!ctx) return null;
+  const { formik } = ctx;
+  const t = useTranslations("Address");
 
-        <Grid size={{ sm: 6, xs: 12 }}>
-          <TextField
-            name="ZipCode"
-            fullWidth
-            autoComplete="off"
-            label={t("zipCode")}
-            value={formik.values.ZipCode}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={formik.touched.ZipCode && Boolean(formik.errors.ZipCode)}
-            helperText={formik.touched.ZipCode && formik.errors.ZipCode}
-            required
-          />
-        </Grid>
-        <Grid size={{ sm: 6, xs: 12 }}>
-          <TextField
-            name="Phone"
-            fullWidth
-            autoComplete="off"
-            label={t("phone")}
-            value={formik.values.Phone}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={formik.touched.Phone && Boolean(formik.errors.Phone)}
-            helperText={formik.touched.Phone && formik.errors.Phone}
-            required
-          />
-        </Grid>
-      </Grid>
-      <Grid size={{ sm: 6, xs: 12 }} sx={{ mt: 3 }}>
-        <Button type="submit" variant="contained" color="primary">
-          {t("save")}
-        </Button>
-      </Grid>
-    </form>
+  return (
+    <Grid size={{ sm: 6, xs: 12 }}>
+      <TextField
+        name={name}
+        label={label ?? t(_.camelCase(name))}
+        fullWidth
+        required={required}
+        value={formik.values[name] ?? ""}
+        onChange={formik.handleChange}
+        onBlur={formik.handleBlur}
+        error={formik.touched[name] && Boolean(formik.errors[name])}
+        helperText={
+          formik.touched[name] && typeof formik.errors[name] === "string"
+            ? formik.errors[name]
+            : undefined
+        }
+      />
+    </Grid>
   );
-}
+};
+
+AddressForm.Country = () => {
+  const ctx = useContext(FormContext);
+  if (!ctx) return null;
+  const { formik, countries, setSelectedCountry } = ctx;
+  const t = useTranslations("Address");
+
+  return (
+    <Grid size={{ sm: 6, xs: 12 }}>
+      <FormControl
+        fullWidth
+        size="small"
+        error={formik.touched.Country && Boolean(formik.errors.Country)}
+      >
+        <InputLabel required id="Country">
+          {t("country")}
+        </InputLabel>
+        <Select
+          labelId="Country"
+          name="Country"
+          input={<OutlinedInput label={t("country")} />}
+          value={formik.values.Country}
+          onChange={(event) => {
+            const countryId = event.target.value;
+            const selected = countries?.find(
+              (c) => c.CountryRegionId === countryId,
+            );
+            setSelectedCountry(selected ?? null);
+            formik.setFieldValue("Country", countryId);
+            formik.setFieldValue("State", ""); // reset
+          }}
+        >
+          <MenuItem value="">Select Country</MenuItem>
+          {countries?.map(({ ShortName, CountryRegionId }, i) => (
+            <MenuItem key={i} value={CountryRegionId}>
+              {ShortName}
+            </MenuItem>
+          ))}
+        </Select>
+        {formik.touched.Country &&
+          formik.errors.Country &&
+          typeof formik.errors.Country === "string" && (
+            <Box sx={{ color: "error.main", fontSize: "0.75rem", mt: 0.5 }}>
+              {formik.errors.Country}
+            </Box>
+          )}
+      </FormControl>
+    </Grid>
+  );
+};
+
+AddressForm.State = () => {
+  const ctx = useContext(FormContext);
+  if (!ctx) return null;
+  const { formik, states } = ctx;
+  const t = useTranslations("Address");
+
+  return (
+    <Grid size={{ sm: 6, xs: 12 }}>
+      <FormControl
+        fullWidth
+        size="small"
+        error={formik.touched.State && Boolean(formik.errors.State)}
+      >
+        <InputLabel required id="State">
+          {t("state")}
+        </InputLabel>
+        <Select
+          labelId="State"
+          name="State"
+          input={<OutlinedInput label={t("state")} />}
+          value={formik.values.State}
+          onChange={formik.handleChange}
+          onBlur={formik.handleBlur}
+        >
+          <MenuItem value="">Select a state</MenuItem>
+          {states?.map(({ StateId, StateName }, i) => (
+            <MenuItem key={i} value={StateId}>
+              {StateName}
+            </MenuItem>
+          ))}
+        </Select>
+        {formik.touched.State && formik.errors.State && (
+          <Box sx={{ color: "error.main", fontSize: "0.75rem", mt: 0.5 }}>
+            {typeof formik.errors.State === "string"
+              ? formik.errors.State
+              : undefined}
+          </Box>
+        )}
+      </FormControl>
+    </Grid>
+  );
+};
+
+AddressForm.Actions = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <Grid size={{ sm: 6, xs: 12 }} sx={{ mt: 3 }}>
+      {children}
+    </Grid>
+  );
+};
+
+AddressForm.SubmitButton = () => {
+  const t = useTranslations("Address");
+  return (
+    <Button type="submit" variant="contained" color="primary">
+      {t("save")}
+    </Button>
+  );
+};
+
+export default AddressForm;