add customer on newsletter

src/App.js

@@ -15,6 +15,7 @@ import { ThemeProvider } from '@mui/material';
 import { fetchCart, createCart } from './redux/slices/cartSlice';
 import { useSelector, useDispatch } from 'react-redux';
 import Collection from './pages/Collection';
+import customerService from './services/CustomerService';
 
 const isEmptyObject = (obj) => Object.keys(obj).length === 0 && obj.constructor === Object;
 

src/components/Footer/Footer.jsx

@@ -1,9 +1,13 @@
-import React from 'react';
+import { useState } from 'react';
 import { Box, Typography, TextField, Button, InputAdornment } from '@mui/material';
 import logoSrc from "../../assets/images/amberlogofooter.png";
 import Grid from '@mui/material/Grid2';
+import customerService from '../../services/CustomerService';
 
 const Footer = () => {
+
+  const [email, setEmail] = useState("")
+
   return (
     <Box
       sx={{
@@ -100,11 +104,46 @@ const Footer = () => {
             <TextField
               variant="outlined"
               placeholder="your email address"
+              value={email}
+              type='email'
+              onChange={(e) => { setEmail(e.target.value) }}
               sx={{ p: 0, mb: 2 }}
               InputProps={{
                 startAdornment: (
                   <InputAdornment position="end">
-                    <Button variant='contained' sx={{position:"absolute", right:0, height:"100%" }}>
+                    <Button 
+                      variant='contained' 
+                      sx={{ position: "absolute", right: 0, height: "100%" }}
+                      onClick={() => {
+
+                        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  
+                        if (!email || email.trim() === "") {
+                          alert("Email is required");
+                          return;
+                        }
+  
+                        if (!emailRegex.test(email)) {
+                          alert("Invalid Email");
+                          return;
+                        }
+  
+                        if(customerService.createCustomer({
+                          "email": email,
+                          "firstName": email,
+                          "lastName": "customer",
+                          "password": "securePassword123"
+                        })){
+  
+                          alert(`SUCCESS ADD: ${email}`)
+                          setEmail('')
+  
+                        }else{
+                          alert("ALREADY ADDED");
+                        }
+  
+                      }}
+                    >
                       Subscribe
                     </Button>
                   </InputAdornment>

src/components/NewsLetter/NewsLetter.jsx

@@ -1,8 +1,12 @@
-import React from 'react';
+import { useState } from 'react';
 import bgImage from "../../assets/images/newsletterwallpaper.jpg"
 import { Box, Button, TextField, InputAdornment, Typography } from '@mui/material';
+import customerService from '../../services/CustomerService';
 
 const NewsLetter = () => {
+
+  const [email, setEmail] = useState("")
+
   return (
     <Box
       sx={{
@@ -11,7 +15,7 @@ const NewsLetter = () => {
         height: 0,
         paddingTop: '600px', // This sets the height based on top padding
         backgroundImage: `url(${bgImage})`,
-        backgroundSize:"cover",
+        backgroundSize: "cover",
         backgroundPosition: 'center center',
         overflow: 'hidden',
         display: "flex",
@@ -52,6 +56,9 @@ const NewsLetter = () => {
             label="Enter your email address"
             variant="outlined"
             fullWidth
+            value={email}
+            type='email'
+            onChange={(e) => { setEmail(e.target.value) }}
             sx={{
               backgroundColor: "white",
               my: 4,
@@ -76,6 +83,35 @@ const NewsLetter = () => {
                       position: "absolute",
                       right: 0
                     }}
+                    onClick={() => {
+
+                      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+                      if (!email || email.trim() === "") {
+                        alert("Email is required");
+                        return;
+                      }
+
+                      if (!emailRegex.test(email)) {
+                        alert("Invalid Email");
+                        return;
+                      }
+
+                      if(customerService.createCustomer({
+                        "email": email,
+                        "firstName": email,
+                        "lastName": "customer",
+                        "password": "securePassword123"
+                      })){
+
+                        alert(`SUCCESS ADD: ${email}`)
+                        setEmail('')
+
+                      }else{
+                        alert("ALREADY ADDED");
+                      }
+
+                    }}
                   >
                     Subscribe
                   </Button>

src/services/CustomerService.js

@@ -0,0 +1,45 @@
+import { createStorefrontApiClient } from '@shopify/storefront-api-client';
+import { REACT_APP_ACCESS_TOKEN, REACT_APP_SHOP_NAME } from '../utils/httpCommon';
+
+const client = createStorefrontApiClient({
+  storeDomain: `https://${REACT_APP_SHOP_NAME}/api/2024-10/graphql.json`,
+  apiVersion: '2024-10',
+  publicAccessToken: REACT_APP_ACCESS_TOKEN,
+});
+
+// Create a cart
+const createCustomer = async (input) => {
+  const query = `
+    mutation CreateCustomer($input: CustomerCreateInput!) {
+      customerCreate(input: $input) {
+        customer {
+          id
+          email
+          firstName
+          lastName
+        }
+        userErrors {
+          field
+          message
+        }
+      }
+    }
+  `;
+
+  const {customerCreate} = await client.request(query,{
+    variables: {
+      input,
+    }
+  });
+
+  if(!customerCreate) return 0
+  if(customerCreate?.userErrors?.length == 0) return 1
+
+};
+
+// Export services
+const customerService = {
+  createCustomer
+};
+
+export default customerService;