From 36643d4ede988961106225117c89e13855d9e19f Mon Sep 17 00:00:00 2001
From: Austin Jones <austin@alloy.co>
Date: Mon, 3 Apr 2023 15:49:20 -0400
Subject: [PATCH] Adding toggle option for Prove prefill.

---
 .env.example      |  5 -----
 package-lock.json |  2 +-
 pages/index.tsx   | 37 ++++++++++++++++++++++++-------------
 3 files changed, 25 insertions(+), 19 deletions(-)
 delete mode 100644 .env.example

diff --git a/.env.example b/.env.example
deleted file mode 100644
index 02f35e2..0000000
--- a/.env.example
+++ /dev/null
@@ -1,5 +0,0 @@
-WORKFLOW_TOKEN=Workflow token from Workflow page in Dashboard
-WORKFLOW_SECRET=Workflow secret from Workflow page in Dashboard
-JOURNEY_TOKEN=Journey token from Journey page in Dashboard
-ALLOY_SDK=Alloy SDK key from settings page 
-API_BASE_URL=https://sandbox.alloy.co/
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 7f33f2e..4b91ea3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
         "@types/react-dom": "18.0.9",
         "eslint": "8.28.0",
         "eslint-config-next": "13.0.4",
-        "next": "^13.0.4",
+        "next": "13.0.4",
         "next-themes": "0.2.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
diff --git a/pages/index.tsx b/pages/index.tsx
index dfda200..a642da8 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -43,6 +43,7 @@ function Home() {
   const [email, setEmail] = useState<string>();
   const [loading, setLoading] = useState<boolean>(false);
   const [ssn, setSSN] = useState<string>();
+  const [isPrefill, setIsPrefill] = useState<boolean>(false);
   const { ...context } = useContext(ResponseContext);
 
   const router = useRouter();
@@ -50,17 +51,18 @@ function Home() {
   const submitData = async () => {
     const data = {
       phone_number: phoneNumber,
-      name_first: firstName,
-      name_last: lastName,
-      email_address: email,
       birth_date: birthDate,
-      address_line_1: addressLine1,
-      address_city: addressCity,
-      address_state: addressState,
-      address_postal_code: addressPostalCode,
       address_country_code: "US",
-      income: income,
-      document_ssn: ssn,
+      ...(!isPrefill && { name_first: firstName}),
+      ...(!isPrefill && { name_last: lastName}),
+      ...(!isPrefill && { email_address: email}),
+      ...(!isPrefill && { name_first: firstName}),
+      ...(!isPrefill && { address_line_1: addressLine1}),
+      ...(!isPrefill && { address_city: addressCity}),
+      ...(!isPrefill && { address_state: addressState}),
+      ...(!isPrefill && { address_postal_code: addressPostalCode}),
+      ...(!isPrefill && {income: income}),
+      ...(!isPrefill && {document_ssn: ssn})
     };
 
     setLoading(true);
@@ -126,6 +128,7 @@ function Home() {
         <>
           <Title>Alloy Sample App</Title>
           <Container>
+          {isPrefill != true && <>
             <Box
               css={{
                 gap: "$2",
@@ -165,6 +168,7 @@ function Home() {
                 }}
               />
             </FieldSet>
+            </>}
             <Box
               css={{
                 gap: "$2",
@@ -193,6 +197,7 @@ function Home() {
                 />
               </FieldSet>
             </Box>
+            {isPrefill != true && <>
             <FieldSet>
               <Label htmlFor="address">Address</Label>
               <Input
@@ -258,29 +263,35 @@ function Home() {
               <Input
                 type={"text"}
                 id={"ssn"}
-                value={mask(format(ssn))}
+                value={ssn}
                 onChange={(e) => {
                   setSSN(e.currentTarget.value);
                 }}
               />
             </FieldSet>
+            </>}
             <StyledAnchor>
               <Button onClick={submitData} stretch>
                 Submit
               </Button>
             </StyledAnchor>
-            <button
-              style={{
+            <div style={{
                 position: "absolute",
                 bottom: 12,
                 left: 12,
-              }}
+              }}>
+            <button
+             
               onClick={() => {
                 populateWithSample();
               }}
             >
               Sample Data
             </button>
+            <button style={{
+                marginLeft: 10
+              }} onClick={()=>setIsPrefill(current => !current)}>Prove Prefill</button>
+            </div>
           </Container>
         </>
       )}