umwd-components 0.1.310 → 0.1.312

package/dist/types/components/common/Address.d.ts

@@ -1,10 +1,6 @@
 import { AddressProps } from "@/types/AddressProps";
 import React from "react";
-export interface AddressFieldsProps {
-    data?: AddressProps;
-    componentName: string;
-    componentReference: string;
-}
+import { AddressFieldsProps } from "@/types/AddressProps";
 export default function Address({ data }: {
     readonly data: AddressProps;
 }): React.JSX.Element;

package/dist/types/components/e-commerce/customer/BusinessCredentials.d.ts

@@ -1,12 +1,7 @@
 import { BusinessCredentialsProps } from "../../../types/e-commerce/BusinessCredentialsProps";
+import { BusinessCredentialsFieldsProps } from "../../../types/e-commerce/BusinessCredentialsProps";
 import React from "react";
 export default function BusinessCredentials({ data, }: {
     readonly data: BusinessCredentialsProps;
 }): React.JSX.Element;
-interface BusinessCredentialsFieldsProps {
-    data: BusinessCredentialsProps;
-    componentName: string;
-    componentReference: string;
-}
 export declare function BusinessCredentialsFields({ data, componentName, componentReference, }: BusinessCredentialsFieldsProps): React.JSX.Element;
-export {};

package/dist/types/components/public-information/PublicInformationForm.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { PublicInformation } from "../../types/public-information/types";
+export declare function PublicInformationForm({ publicInformation, }: {
+    readonly publicInformation: PublicInformation;
+}): React.JSX.Element;

package/dist/types/data/actions/pagebuilder-actions.d.ts

@@ -36,11 +36,11 @@ declare const schemaUpdate: z.ZodObject<{
     }, "strip", z.ZodTypeAny, {
         id: string;
         __component: string;
-        title?: string | undefined;
         link?: {
             text?: string | undefined;
             url?: string | undefined;
         } | undefined;
+        title?: string | undefined;
         heading?: string | undefined;
         subHeading?: string | undefined;
         subtitle?: string | undefined;
@@ -52,11 +52,11 @@ declare const schemaUpdate: z.ZodObject<{
     }, {
         id: string;
         __component: string;
-        title?: string | undefined;
         link?: {
             text?: string | undefined;
             url?: string | undefined;
         } | undefined;
+        title?: string | undefined;
         heading?: string | undefined;
         subHeading?: string | undefined;
         subtitle?: string | undefined;
@@ -67,17 +67,17 @@ declare const schemaUpdate: z.ZodObject<{
         } | undefined;
     }>, "many">>;
 }, "strip", z.ZodTypeAny, {
-    title: string;
     id: string;
+    title: string;
     description: string;
     blocks?: {
         id: string;
         __component: string;
-        title?: string | undefined;
         link?: {
             text?: string | undefined;
             url?: string | undefined;
         } | undefined;
+        title?: string | undefined;
         heading?: string | undefined;
         subHeading?: string | undefined;
         subtitle?: string | undefined;
@@ -88,17 +88,17 @@ declare const schemaUpdate: z.ZodObject<{
         } | undefined;
     }[] | undefined;
 }, {
-    title: string;
     id: string;
+    title: string;
     description: string;
     blocks?: {
         id: string;
         __component: string;
-        title?: string | undefined;
         link?: {
             text?: string | undefined;
             url?: string | undefined;
         } | undefined;
+        title?: string | undefined;
         heading?: string | undefined;
         subHeading?: string | undefined;
         subtitle?: string | undefined;

package/dist/types/data/actions/public-information/updatePublicInformationAction.d.ts

@@ -0,0 +1 @@
+export declare function updatePublicInformationAction(prevState: any, formData: FormData): Promise<any>;

package/dist/types/data/loaders/public-information/getPublicInformation.d.ts

@@ -0,0 +1 @@
+export declare function getPublicInformation(): Promise<any>;

package/dist/types/types/AddressProps.d.ts

@@ -1,5 +1,9 @@
+export interface AddressFieldsProps {
+    data?: AddressProps;
+    componentName: string;
+    componentReference: string;
+}
 export interface AddressProps {
-    title: string;
     id: string | null;
     street: string;
     street_number: number;

package/dist/types/types/e-commerce/BusinessCredentialsProps.d.ts

@@ -5,3 +5,8 @@ export interface BusinessCredentialsProps {
     coc_number: string;
     vat_number: string;
 }
+export interface BusinessCredentialsFieldsProps {
+    data: BusinessCredentialsProps;
+    componentName: string;
+    componentReference: string;
+}

package/dist/types/types/public-information/types.d.ts

@@ -0,0 +1,20 @@
+import { AddressProps } from "@/types/AddressProps";
+import { BusinessCredentialsProps } from "@/types/e-commerce/BusinessCredentialsProps";
+export interface PublicInformationFormProps {
+    publicInformation: PublicInformation;
+}
+export type PublicInformation = {
+    id: string;
+    title: string;
+    description: string;
+    disclaimer_link: string;
+    privacypolicy_link: string;
+    maxWidth: string;
+    email: string;
+    phone_number: string;
+    business_credentials: BusinessCredentialsProps;
+    address: AddressProps;
+    socials: string;
+    header_logo: string;
+    footer_logo: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.310",
+  "version": "0.1.312",
   "description": "UMWD Component library",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",

package/src/components/common/Address.tsx

@@ -4,16 +4,14 @@ import Typography from "@mui/material/Typography";
 import HomeIcon from "@mui/icons-material/Home";
 import { AddressProps } from "@/types/AddressProps";
 import React from "react";
+import { AddressFieldsProps } from "@/types/AddressProps";
 
-export interface AddressFieldsProps {
-  data?: AddressProps;
-  componentName: string;
-  componentReference: string;
-}
-
+// TODO: This is not the place for title, first of all it should be optional,
+// second it's not on the address entity
+// third it should be outside of the address display component inside of the actual form
 export default function Address({ data }: { readonly data: AddressProps }) {
   const {
-    title,
+    /* title, */
     id,
     street,
     street_number,
@@ -27,7 +25,7 @@ export default function Address({ data }: { readonly data: AddressProps }) {
       <Stack spacing={2} direction="row">
         <HomeIcon />
         <Stack>
-          <Typography variant="h6">{title}</Typography>
+          {/* <Typography variant="h6">{title}</Typography> */}
           <Typography variant="body1" component="p">
             {street} {street_number} {street_number_addition}
           </Typography>

package/src/components/e-commerce/customer/BusinessCredentials.tsx

@@ -5,8 +5,11 @@ import TextField from "@mui/material/TextField";
 
 import BusinessCenterIcon from "@mui/icons-material/BusinessCenter";
 import { BusinessCredentialsProps } from "../../../types/e-commerce/BusinessCredentialsProps";
+import { BusinessCredentialsFieldsProps } from "../../../types/e-commerce/BusinessCredentialsProps";
 import React from "react";
 
+// TODO Move this to common
+
 export default function BusinessCredentials({
   data,
 }: {
@@ -35,12 +38,6 @@ export default function BusinessCredentials({
   );
 }
 
-interface BusinessCredentialsFieldsProps {
-  data: BusinessCredentialsProps;
-  componentName: string;
-  componentReference: string;
-}
-
 export function BusinessCredentialsFields({
   data,
   componentName,

package/src/components/e-commerce/customer/CustomerProfileDisplay.tsx

@@ -90,18 +90,16 @@ export default function CustomerProfileDisplay({
         <Grid container>
           {company_address ? (
             <Grid item xs={12} md={4}>
-              <Address
-                data={{ ...company_address, title: "Company Address" }}
-              />
+              <Typography variant="h6">Company Address</Typography>
+              <Address data={{ ...company_address }} />
             </Grid>
           ) : (
             <Typography>Company address not available</Typography>
           )}
           {delivery_address ? (
             <Grid item xs={12} md={4}>
-              <Address
-                data={{ ...delivery_address, title: "Delivery Address" }}
-              />
+              <Typography variant="h6">Delivery Address</Typography>
+              <Address data={{ ...delivery_address }} />
             </Grid>
           ) : (
             <Grid item xs={12} md={4}>
@@ -110,9 +108,8 @@ export default function CustomerProfileDisplay({
           )}
           {billing_address ? (
             <Grid item xs={12} md={4}>
-              <Address
-                data={{ ...billing_address, title: "Billing Address" }}
-              />
+              <Typography variant="h6">Billing Address</Typography>
+              <Address data={{ ...billing_address }} />
             </Grid>
           ) : (
             <Grid item xs={12} md={4}>

package/src/components/e-commerce/customer/DenseCustomerProfileDisplay.tsx

@@ -66,16 +66,16 @@ export default function CustomerProfileDisplay({
       <Grid container>
         {company_address ? (
           <Grid item xs={12} md={4}>
-            <Address data={{ ...company_address, title: "Company Address" }} />
+            <Typography variant="h6">Company Address</Typography>
+            <Address data={{ ...company_address }} />
           </Grid>
         ) : (
           <Typography>Company address not available</Typography>
         )}
         {delivery_address ? (
           <Grid item xs={12} md={4}>
-            <Address
-              data={{ ...delivery_address, title: "Delivery Address" }}
-            />
+            <Typography variant="h6">Delivery Address</Typography>
+            <Address data={{ ...delivery_address }} />
           </Grid>
         ) : (
           <Grid item xs={12} md={4}>
@@ -84,7 +84,8 @@ export default function CustomerProfileDisplay({
         )}
         {billing_address ? (
           <Grid item xs={12} md={4}>
-            <Address data={{ ...billing_address, title: "Billing Address" }} />
+            <Typography variant="h6">Billing Address</Typography>
+            <Address data={{ ...billing_address }} />
           </Grid>
         ) : (
           <Grid item xs={12} md={4}>

package/src/components/layout/SideNav.tsx

@@ -125,7 +125,7 @@ function SideNav({
     },
   };
 
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = React.useState(true);
 
   const handleDrawerOpen = () => {
     setOpen(true);

package/src/components/public-information/PublicInformationForm.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import Divider from "@mui/material/Divider";
+import Paper from "@mui/material/Paper";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Alert from "@mui/material/Alert";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { SubmitButton } from "../SubmitButton";
+import { useFormState } from "react-dom";
+import { StrapiErrors } from "../StrapiErrors"; //"@/components/StrapiErrors";
+import { BusinessCredentialsFields } from "../e-commerce/customer/BusinessCredentials";
+import { useSession } from "../../context/auth/SessionContext";
+import React, { useEffect } from "react";
+import { AddressFields } from "../common/Address";
+import {
+  PublicInformation,
+  PublicInformationFormProps,
+} from "../../types/public-information/types";
+import { updatePublicInformationAction } from "../../data/actions/public-information/updatePublicInformationAction";
+
+const INITIAL_STATE = {
+  zodErrors: null,
+  strapiErrors: null,
+  data: null,
+  message: null,
+};
+
+export function PublicInformationForm({
+  publicInformation,
+}: {
+  readonly publicInformation: PublicInformation;
+}) {
+  console.log(publicInformation);
+
+  const {
+    id,
+    title,
+    description,
+    disclaimer_link,
+    privacypolicy_link,
+    maxWidth,
+    email,
+    phone_number,
+    business_credentials,
+    address,
+    socials,
+    header_logo,
+    footer_logo,
+  } = publicInformation;
+
+  const [formState, formAction] = useFormState(
+    updatePublicInformationAction,
+    INITIAL_STATE
+  );
+
+  // TODO useSession doesn't work, this should most definetively be implemented!!
+  //   const { refreshSession } = useSession();
+  //
+  //   useEffect(() => {
+  //     if (!formState.strapiErrors && formState.message) {
+  //       refreshSession();
+  //     }
+  //   }, [formState]);
+
+  return (
+    <Box
+      /* sx={[
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            ...(Array.isArray(sx) ? sx : [sx]),
+          ]} */
+      component={Paper}
+      sx={{ p: 2 }}
+    >
+      <form action={formAction}>
+        <Stack spacing={2}>
+          <Stack
+            direction="row-reverse"
+            spacing={2}
+            alignItems={"center"}
+            sx={{
+              backgroundColor: "secondary.dark",
+              px: 2,
+              py: 1,
+            }}
+          >
+            <SubmitButton
+              text="save changes"
+              loadingText="loading"
+              sx={{ color: "secondary.contrastText" }}
+            />
+            <StrapiErrors error={formState?.strapiErrors} />
+
+            {formState?.message && (
+              <Alert severity="error">{formState?.message}</Alert>
+            )}
+          </Stack>
+          <TextField
+            id="title"
+            name="title"
+            label="Title"
+            defaultValue={title}
+            // error={}
+            // helperText={}
+          ></TextField>
+          <TextField
+            id="description"
+            name="description"
+            label="Description"
+            defaultValue={description}
+            // error={}
+            // helperText={}
+          ></TextField>
+          <TextField
+            id="email"
+            name="email"
+            label="email"
+            defaultValue={email}
+            // error={}
+            // helperText={}
+          ></TextField>
+          <TextField
+            id="phone_number"
+            name="phone_number"
+            label="phone_number"
+            defaultValue={phone_number}
+            // error={}
+            // helperText={}
+          ></TextField>
+          {/* 
+          TODO Create public_documents / links component
+          <TextField
+            id="disclaimer_link"
+            name="disclaimer_link"
+            label="disclaimer_link"
+            defaultValue={disclaimer_link}
+            // error={}
+            // helperText={}
+          ></TextField>
+          <TextField
+            id="privacypolicy_link"
+            name="privacypolicy_link"
+            label="privacypolicy_link"
+            defaultValue={privacypolicy_link}
+            // error={}
+            // helperText={}
+          ></TextField> */}
+          <Typography variant="h6">Company Address</Typography>
+          <Divider />
+          <AddressFields
+            componentName="address"
+            componentReference="common.address"
+            data={address}
+          />
+          <Divider />
+          <Typography variant="h6">Business Credentials</Typography>
+          <BusinessCredentialsFields
+            componentName="business_credentials"
+            componentReference="business.credentials"
+            data={business_credentials}
+          />
+          {/*links component field <p>{publicInformation.socials}</p> */}
+        </Stack>
+      </form>
+    </Box>
+  );
+}
+
+/* 
+TODO, move to site-settings 
+<p>{publicInformation.maxWidth}</p>
+          <p>{publicInformation.header_logo}</p>
+          <p>{publicInformation.footer_logo}</p>
+          */

package/src/data/actions/profile-actions.ts

@@ -1,4 +1,4 @@
-"use client"; // this should be use server but while developing it's easier to use client to do console.log
+"use server"; //  "use client"; this should be use server but while developing it's easier to use client to do console.log
 
 import { mutateData } from "../services/mutate-data";
 import { flattenAttributes } from "../../lib/utils";

package/src/data/actions/public-information/updatePublicInformationAction.ts

@@ -0,0 +1,51 @@
+"use client"; // TODO: this should be use server but while developing it's easier to use client to do console.log
+
+import { mutateData } from "../../services/mutate-data";
+import { flattenAttributes } from "../../../lib/utils";
+import { parseFormData } from "../../../lib/parseFormData";
+
+// TODO Not tested or finished
+
+export async function updatePublicInformationAction(
+  prevState: any,
+  formData: FormData
+) {
+  const rawFormData = Object.fromEntries(formData);
+  console.log("rawFormData", rawFormData);
+
+  const parsedFormData = parseFormData(formData); // ?? can i still use this or is it only for the pagebuilder form?
+  console.log("parsedFormData", parsedFormData);
+
+  const id = rawFormData.id;
+
+  const responseData = await mutateData(
+    "PUT",
+    `/api/public-information`,
+    parsedFormData
+  );
+
+  if (!responseData) {
+    return {
+      ...prevState,
+      strapiErrors: null,
+      message: "Ops! Something went wrong. Please try again.",
+    };
+  }
+
+  if (responseData.error) {
+    return {
+      ...prevState,
+      strapiErrors: responseData.error,
+      message: "Failed to Register.",
+    };
+  }
+
+  const flattenedData = flattenAttributes(responseData);
+
+  return {
+    ...prevState,
+    message: "Public Information Updated",
+    data: flattenedData,
+    strapiErrors: null,
+  };
+}

package/src/data/loaders/public-information/getPublicInformation.ts

@@ -0,0 +1,23 @@
+"use server";
+
+import qs from "qs";
+import { fetchData } from "../../loaders";
+import { flattenAttributes, getStrapiURL } from "../../../lib/utils";
+import { unstable_noStore as noStore } from "next/cache";
+
+const baseUrl = getStrapiURL();
+
+export async function getPublicInformation() {
+  noStore();
+
+  const url = new URL(`/api/public-information`, baseUrl);
+
+  url.search = qs.stringify({
+    populate: {
+      address: true,
+      business_credentials: true,
+    },
+  });
+
+  return flattenAttributes(await fetchData(url.href));
+}

package/src/data/loaders.ts

@@ -1,3 +1,5 @@
+"use server";
+
 import qs from "qs";
 import { flattenAttributes, getStrapiURL } from "../lib/utils";
 import { unstable_noStore as noStore } from "next/cache";
@@ -54,10 +56,9 @@ async function getHomePageData() {
 async function getPagedata(slug: string) {
   noStore();
 
-  const url = new URL(
-    `/api/slugify/slugs/page/${slug}?populate[blocks][populate]=%2A`,
-    baseUrl
-  );
+  console.log(slug);
+
+  const url = new URL(`/api/slugify/slugs/page/${slug}`, baseUrl);
 
   url.search = qs.stringify({
     populate: {
@@ -111,7 +112,8 @@ async function getPagedata(slug: string) {
     },
   });
 
-  return await fetchData(url.href);
+  // return await fetchData(url.href); //!!
+  return flattenAttributes(await fetchData(url.href));
 }
 
 async function getDisclaimerData() {
@@ -196,7 +198,7 @@ async function getPageNames() {
   noStore();
   const url = new URL("/api/pages", baseUrl);
   url.search = qs.stringify({
-    fields: ["slug"],
+    fields: ["slug", "title"],
   });
 
   return await fetchData(url.href);

package/src/data/services/pagebuilder-service.ts

@@ -4,7 +4,7 @@ import { type PageData } from "../../data/actions/pagebuilder-actions";
 const baseUrl = getStrapiURL();
 
 export async function updatePageService(pageData: PageData) {
-  // console.log("pageData", pageData);
+  console.log("pageData", pageData);
 
   const url = new URL(`/api/pages/${pageData.id}`, baseUrl);
 

package/src/types/AddressProps.tsx

@@ -1,5 +1,11 @@
+export interface AddressFieldsProps {
+  data?: AddressProps;
+  componentName: string;
+  componentReference: string;
+}
+
 export interface AddressProps {
-  title: string;
+  // title: string; // why does an address need a title, shouldn't an address need a type?
   id: string | null;
   street: string;
   street_number: number;

package/src/types/e-commerce/BusinessCredentialsProps.tsx

@@ -5,3 +5,9 @@ export interface BusinessCredentialsProps {
   coc_number: string;
   vat_number: string;
 }
+
+export interface BusinessCredentialsFieldsProps {
+  data: BusinessCredentialsProps;
+  componentName: string;
+  componentReference: string;
+}

package/src/types/public-information/types.tsx

@@ -0,0 +1,22 @@
+import { AddressProps } from "@/types/AddressProps";
+import { BusinessCredentialsProps } from "@/types/e-commerce/BusinessCredentialsProps";
+
+export interface PublicInformationFormProps {
+  publicInformation: PublicInformation;
+}
+
+export type PublicInformation = {
+  id: string;
+  title: string;
+  description: string;
+  disclaimer_link: string;
+  privacypolicy_link: string;
+  maxWidth: string;
+  email: string;
+  phone_number: string;
+  business_credentials: BusinessCredentialsProps;
+  address: AddressProps;
+  socials: string;
+  header_logo: string;
+  footer_logo: string;
+};