umwd-components 0.1.413 → 0.1.415

package/dist/types/components/page-elements/HeroSectionV2.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { StrapiImageProps } from "../../types/StrapiImageProps";
+import { MaxWidth } from "../../types/MaxWidth";
+import { SxProps, Theme } from "@mui/material/styles";
+interface LinkProps {
+    id: number;
+    url: string;
+    text: string;
+}
+interface HeroSectionProps {
+    data: {
+        id: number;
+        __component: string;
+        heading: string;
+        subHeading: string;
+        bgImage?: StrapiImageProps;
+        logoImage?: StrapiImageProps;
+        link: LinkProps;
+        maxWidth?: MaxWidth;
+        sx?: SxProps<Theme>;
+        glass?: boolean;
+    };
+}
+export declare function HeroSection({ data }: Readonly<HeroSectionProps>): React.JSX.Element;
+export {};

package/package.json

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

package/src/components/e-commerce/checkout/CheckoutForm.tsx

@@ -72,6 +72,8 @@ function CheckoutForm({ shopUrl = "/shop" }: CheckoutFormProps) {
       const orderUuid = searchParams.get("order");
       if (orderUuid) {
         setActiveStep(4);
+        // important, on production the cookies are not properly handled by the context
+        localStorage.removeItem("cart");
         dispatch({ type: "SET_ITEMS", payload: [] });
       }
     }

package/src/components/page-elements/HeroSection.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+// INFO Don't delete this hero section, it's used by AeroMedicalHolland
+
 import React from "react";
 import Link from "next/link";
 

package/src/components/page-elements/HeroSectionV2.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+
+import Box from "@mui/material/Box";
+import Container from "@mui/material/Container";
+import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import Stack from "@mui/material/Stack";
+
+import { StrapiImage } from "../StrapiImage";
+import { StrapiImageProps } from "../../types/StrapiImageProps";
+import { MaxWidth } from "../../types/MaxWidth";
+import { setOpacity } from "../../lib/utils";
+import { SxProps, Theme, useTheme } from "@mui/material/styles";
+
+interface LinkProps {
+  id: number;
+  url: string;
+  text: string;
+}
+
+interface HeroSectionProps {
+  data: {
+    id: number;
+    __component: string;
+    heading: string;
+    subHeading: string;
+    bgImage?: StrapiImageProps;
+    logoImage?: StrapiImageProps;
+    link: LinkProps;
+    maxWidth?: MaxWidth;
+    sx?: SxProps<Theme>;
+    glass?: boolean;
+  };
+}
+
+export function HeroSection({ data }: Readonly<HeroSectionProps>) {
+  const {
+    heading,
+    subHeading,
+    bgImage,
+    logoImage,
+    link,
+    maxWidth,
+    sx = {},
+    glass = false,
+  } = data;
+
+  const theme = useTheme();
+
+  // const glassColor = setOpacity(theme.palette.background.paper, 0.1);
+
+  return (
+    <Container maxWidth={maxWidth || "lg"} sx={{ zIndex: 1 }}>
+      <Paper
+        sx={[
+          { padding: 5 },
+          bgImage?.url !== undefined && {
+            backgroundImage: `url(${process.env.NEXT_PUBLIC_STRAPI_URL}${bgImage.url})`,
+            backgroundSize: "cover",
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "center",
+          },
+        ]}
+      >
+        <Stack spacing={3} alignItems="center" justifyContent="center">
+          {logoImage && logoImage.url !== null && (
+            <StrapiImage
+              id={logoImage.id?.toString()}
+              alternativeText={logoImage.alternativeText || "logoImage"}
+              height={logoImage.height || 100}
+              url={logoImage.url}
+              width={logoImage.width || 100}
+              style={{
+                objectFit: "contain",
+                filter: "invert(1)",
+              }}
+            />
+          )}
+
+          <Typography variant="h2" align="center" component={"h1"}>
+            {heading}
+          </Typography>
+          <Typography variant="h4" align="center" component={"h2"}>
+            {subHeading}
+          </Typography>
+          {link && link.url && (
+            <Link href={link.url}>
+              <Button
+                variant="contained"
+                sx={{ width: "100%", fontSize: "1.5rem" }}
+              >
+                {link.text}
+              </Button>
+            </Link>
+          )}
+        </Stack>
+      </Paper>
+    </Container>
+  );
+}

package/src/components/page-elements/Page.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { TextImageSection } from "./TextImageSection";
-import { HeroSection } from "./HeroSection";
+//import { HeroSection } from "./HeroSection";
+import { HeroSection } from "./HeroSectionV2";
 import { FeatureSection } from "./FeaturesSection";
 import { FleetSection } from "./FleetSection";
 import { IconSection } from "./IconSection";

package/dist/src/components/page-elements/HeroSection.js

@@ -1,7 +0,0 @@
-"use client";
-/*
- * UMWD-Components
- * @copyright Jelle Paulus
- * @license MIT
- */
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import i from"next/link";import r from"@mui/material/Box";import a from"@mui/material/Container";import n from"@mui/material/Paper";import o from"@mui/material/Typography";import l from"@mui/material/Button";import m from"@mui/material/Stack";import{StrapiImage as s}from"../StrapiImage.js";import{setOpacity as c}from"../../lib/utils.js";import{useTheme as d}from"@mui/material/styles";function p(p){var g,u,h=p.data,x=h.heading,f=h.subHeading,v=h.bgImage,b=h.logoImage,y=h.link,E=h.maxWidth,w=h.sx,j=void 0===w?{}:w,I=h.glass,k=void 0!==I&&I,C=d();return t.createElement("header",{style:{position:"relative",padding:0,margin:0}},t.createElement(r,{sx:e({display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",width:"100%",overflow:"hidden",minHeight:"600px",py:6},j)},v&&v.url&&t.createElement(s,{id:null===(g=v.id)||void 0===g?void 0:g.toString(),alternativeText:"Background",style:{position:"absolute",inset:0,objectFit:"cover",width:"100%",height:"100%"},height:v.height||1080,url:v.url,width:v.width||1920}),t.createElement(a,{maxWidth:E||"lg",sx:{my:1,zIndex:1}},t.createElement(n,{sx:{px:2,py:7,backdropFilter:"blur(3px)",backgroundColor:c(C.palette.background.paper,k?.1:1),border:k?"1px solid rgba(255, 255, 255, 0.15)":"none"}},t.createElement(m,{spacing:5,alignItems:"center",justifyContent:"center"},b&&null!==b.url&&t.createElement(r,{className:"manipulator",sx:{position:"relative",mt:"-100px",width:"100%",zIndex:-1,display:"flex",justifyContent:"center",alignItems:"center",img:{objectFit:"contain",width:"100%",height:"100%"}}},t.createElement(s,{id:null===(u=b.id)||void 0===u?void 0:u.toString(),alternativeText:b.alternativeText||"logoImage",height:b.height||100,url:b.url,width:b.width||100,style:{objectFit:"contain"}})),t.createElement(o,{variant:"h2",align:"center",component:"h1"},x),t.createElement(r,{className:"spacer",sx:{display:"none"}}),t.createElement(o,{variant:"h4",align:"center",component:"h2"},f),y&&y.url&&t.createElement(i,{href:y.url},t.createElement(l,{variant:"contained",sx:{width:"100%",fontSize:"1.5rem"}},y.text)))))))}export{p as HeroSection};