fix up signup, change auth routes, add svg button, tweak buttons glob…

…ally, tweak theme, add types
1instinct · Aug 10, 2024 · 7f0e5a4 · 7f0e5a4
1 parent 649304b
commit 7f0e5a4
Show file tree

Hide file tree

Showing 27 changed files with 375 additions and 134 deletions.
diff --git a/components/CartSidebar/CartSidebar.styles.tsx b/components/CartSidebar/CartSidebar.styles.tsx
@@ -86,3 +86,9 @@ export const EmptyCartMessage = styled.p`
   text-align: center;
   padding: 20px;
 `;
+
+export const Actions = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+`;
diff --git a/components/CartSidebar/CartSidebar.tsx b/components/CartSidebar/CartSidebar.tsx
@@ -19,7 +19,8 @@ import {
   QuantitySelector,
   QuantityAdjuster,
   TotalLine,
-  EmptyCartMessage
+  EmptyCartMessage,
+  Actions
 } from "./CartSidebar.styles";
 import {
   IProduct,
@@ -216,8 +217,10 @@ export const CartSidebar = ({ isVisible, toggle }: Props) => {
           <TotalLine>Subtotal: {display_item_total}</TotalLine>
           <TotalLine>Tax: {included_tax_total}</TotalLine>
           <TotalLine>Total: {display_total}</TotalLine>
-          <Button onClick={() => router.push("/cart")}>View Cart</Button>
-          <Button onClick={() => router.push("/checkout")}>Checkout</Button>
+          <Actions>
+            <Button variant="outline" onClick={() => router.push("/cart")}>View Cart</Button>
+            <Button onClick={() => router.push("/checkout")}>Checkout</Button>
+          </Actions>
         </BurgerMenu>
         <style jsx>{`
           .cart-modal {

diff --git a/components/FormikWrappers/FormikDateOfBirth.tsx b/components/FormikWrappers/FormikDateOfBirth.tsx
@@ -14,6 +14,7 @@ export const FormikDateOfBirth = ({
       id="dateOfBirth"
       mask="99/99/9999"
       maskChar=" "
+      width={"100%"}
       // variant="outlined"
       // selectedTheme="dark"
       {...props}

diff --git a/components/FormikWrappers/FormikIncome.tsx b/components/FormikWrappers/FormikIncome.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { TextField } from "@material-ui/core";
+import MaskedInput from "react-text-mask";
 
-import { Error } from "./FormikInput.styles";
+import { BasicField, Error } from "./FormikInput.styles";
 
 export const FormikIncome = ({
   field,
@@ -10,15 +11,24 @@ export const FormikIncome = ({
   ...props
 }: any) => (
   <>
-    {/* <Input id="income" variant="income" input="number" selectedTheme="dark" {...props} {...fields} invalid={Boolean(touched[fields.name] && errors[fields.name])} /> */}
-    <TextField
-      id="income"
-      variant="outlined"
-      input="number"
-      selectedTheme="dark"
-      {...props}
-      {...fields}
-      invalid={touched[fields.name] && errors[fields.name] ? 1 : 0}
+    <MaskedInput
+      placeholder="Yearly Income"
+      mask={[/\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/]}
+      id="yearly-income"
+      render={(ref: any, props: any) => (
+        <BasicField
+          {...props}
+          innerRef={ref}
+          id="income"
+          variant="outlined"
+          input="number"
+          selectedTheme="dark"
+          placeholder="Yearly Income"
+          {...props}
+          {...fields}
+          invalid={touched[fields.name] && errors[fields.name] ? 1 : 0}
+        />
+      )}
     />
     {touched[fields.name] && errors[fields.name] ? (
       <Error>{errors[fields.name]}</Error>

diff --git a/components/Header/Header.styles.tsx b/components/Header/Header.styles.tsx
@@ -3,6 +3,7 @@ import { Popover } from "@material-ui/core";
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";
 import { pxIphone } from "../../utilities/device-sizes";
+import Link from "next/link";
 
 export const TopHeader = styled.div`
   padding: 10px 0 12px 0;
@@ -30,9 +31,10 @@ export const HeaderDiv = styled.header`
 
 export interface LinkDivProps {
   isActive: boolean;
+  props?: any;
 }
 
-export const LinkDiv = styled.a<LinkDivProps>`
+export const LinkDiv = styled(Link)<LinkDivProps>`
   font-size: 14px;
   text-decoration: none;
   ${(p) =>
@@ -63,7 +65,7 @@ export const BottomHeader = styled.div`
   }
 `;
 
-export const Category = styled.a`
+export const Category = styled(Link)`
   padding: 15px;
 `;
 

diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState, useRef } from "react";
 import { useMediaQuery } from "react-responsive";
 import { useRouter } from "next/router";
-import Link from "next/link";
 import { Badge } from "@material-ui/core";
 import Sticky from "react-sticky-el";
 import { HeaderProps } from "./types";
@@ -21,10 +20,10 @@ import {
   LogoDiv,
   HeaderDiv,
   LinkDiv,
-  BottomHeader,
-  Category,
-  UserIconMo,
-  CartMo,
+  // BottomHeader,
+  // Category,
+  // UserIconMo,
+  // CartMo,
   CartToggle,
   HeaderAccount,
   HeaderOptions,
@@ -98,9 +97,7 @@ export const Header: React.FC<HeaderProps> = ({ darkMode }) => {
         <LogoDiv>
           <LinkDiv
             isActive
-            onClick={() => {
-              router.push("/");
-            }}
+            href="/"
           >
             {logoPath ? (
               // <MyLogo imageFile={logoPath} darkMode={darkMode} />
@@ -156,7 +153,7 @@ export const Header: React.FC<HeaderProps> = ({ darkMode }) => {
                 LOGIN
               </LinkDiv>
               <LinkDiv
-                href="/authenticate/signup"
+                href="/signup"
                 isActive={pathname !== "/authenticate/signup"}
               >
                 SIGN UP

diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
@@ -4,16 +4,17 @@ import { ClassNames } from "@emotion/react";
 import { LayoutProps } from "./types";
 import { Footer } from "../Footer/Footer";
 import columns from "../Footer/footer.json";
+import { Logo } from "@components/shared/Logo";
 
-import { Container, Content, Logo } from "./Layout.styles";
+import { Container, Content } from "./Layout.styles";
 
 type LogoTypeFC = {
   imageFile: string;
   darkMode?: boolean;
 };
 
 export const MyLogo = ({ imageFile, darkMode }: LogoTypeFC) => (
-  <Logo src={imageFile} darkMode={darkMode || false} />
+  <Logo />
 );
 
 export const Layout: React.FC<LayoutProps> = ({
@@ -29,7 +30,7 @@ export const Layout: React.FC<LayoutProps> = ({
           {({ css, cx }) => (
             <Footer
               footerData={{
-                logo: <MyLogo imageFile="/pol-logo.png" darkMode={true} />,
+                logo: <MyLogo />,
                 columns
               }}
             />

diff --git a/components/SignupForm/SignupForm.styles.tsx b/components/SignupForm/SignupForm.styles.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@material-ui/core";
+import { Button } from "@components/shared/Button";
 import styled from "@emotion/styled";
 import { Form } from "formik";
 

diff --git a/components/SignupForm/SignupForm.tsx b/components/SignupForm/SignupForm.tsx
@@ -294,8 +294,7 @@ export const SignupForm = () => {
               </InputGroupWrapper>
               <SignupActions>
                 <NextButton
-                  variant="contained"
-                  color="primary"
+                  variant="solid"
                   type="submit"
                   onClick={() => {
                     console.log("SUBMITTING FORM");

diff --git a/components/SignupWizard/Questions/Questions.styles.tsx b/components/SignupWizard/Questions/Questions.styles.tsx
@@ -4,11 +4,12 @@ import { Modal } from "@material-ui/core";
 export const QuestionWrapper = styled.div`
   color: ${(props) => props.theme.colors.brand.primary};
   ${"" /* width: 100%; */}
-  margin: 15px 0 15px 0;
+  margin: -20px 0 15px 0;
 `;
 
 interface GenericThemeType {
   theme?: any;
+  isIntro?: boolean | true;
 }
 
 export const InputGroupWrapper = styled.div<GenericThemeType>`
@@ -21,12 +22,9 @@ export const InputGroupWrapper = styled.div<GenericThemeType>`
   border-top-left-radius: 8px;
   border-top-right-radius: 8px; */
   }
-  margin: -50px 15px 15px 15px;
+  margin: -120px 15px 15px 15px;
   text-align: center;
-  @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
-    margin: 0 auto;
-    padding: 30px 0px 0px 0px;
-  }
+  
   & [data-qa="title"] {
     color: ${(props) => props.theme.colors.brand.primary};
     font-size: 1.6rem;
@@ -54,6 +52,11 @@ export const InputGroupWrapper = styled.div<GenericThemeType>`
     background: ${(props) => props.theme.colors.white.primary};
     box-shadow: 0 0 0 7px ${(props) => props.theme.colors.brand.primary};
   }
+
+  @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
+    margin: ${(p) => p.isIntro ? '-80px' : '125px'} auto 0;
+    padding: 10px 0px 0px 0px;
+  }
 `;
 
 export const InputWrapper = styled.div<GenericThemeType>`
@@ -69,6 +72,9 @@ export const InputWrapper = styled.div<GenericThemeType>`
 
 export const Title = styled.h1<GenericThemeType>`
   margin: 5px 15px;
+  font-family: ${(props) => props.theme.typography.titleSM.fontFamily};
+  font-size: ${(props) => props.theme.typography.titleMD.fontSize};
+  line-height: ${(props) => props.theme.typography.titleSM.lineHeight};
   color: ${(props) => props.theme.colors.brand.primary};
 `;
 

diff --git a/components/SignupWizard/Questions/Questions.tsx b/components/SignupWizard/Questions/Questions.tsx
@@ -8,7 +8,7 @@ import { ref, addMethod, mixed, object, string, bool, date } from "yup";
 import Static from "../../../utilities/staticData";
 import constants from "../../../utilities/constants";
 import { Alert } from "../../Alerts";
-import { GetPreQualified } from "./GetPreQualified";
+import { Welcome } from "./Welcome";
 import { PersonalInfo } from "./PersonalInfo";
 import { DateOfBirth } from "./DateOfBirth";
 import { HomeAddress } from "./HomeAddress";
@@ -76,7 +76,7 @@ interface QuestionsType {
 export const Questions: QuestionsType[] = [
   {
     id: "get-prequalified",
-    component: GetPreQualified,
+    component: Welcome,
     actionLabel: "Get Started"
   },
   {

diff --git a/...ignupWizard/Questions/GetPreQualified.tsx → ...onents/SignupWizard/Questions/Welcome.tsx b/...ignupWizard/Questions/GetPreQualified.tsx → ...onents/SignupWizard/Questions/Welcome.tsx
@@ -4,6 +4,10 @@ import styled from "@emotion/styled";
 // import { Field, useFormikContext } from 'formik';
 // import { useMediaQuery } from 'react-responsive';
 import { Carousel } from "react-responsive-carousel";
+import Lottie from "react-lottie";
+import streamAnimation from "@data/stream.json";
+import shippingAnimation from "@data/shipping.json";
+import rewardAnimation from "@data/reward.json";
 
 // Local
 import TipBot from "../../TipBot";
@@ -63,20 +67,48 @@ export const ColorizedCart = styled.i<GenericThemeType>`
 `;
 
 const partnerName = process.env.NEXT_PUBLIC_SITE_TITLE;
+const shortName = process.env.NEXT_PUBLIC_SHORT_TITLE;
 
-export const GetPreQualified = () => {
+export const Welcome = () => {
   // const { errors, touched } = useFormikContext();
 
+  const streamAnimationOptions = {
+    loop: true,
+    autoplay: true,
+    animationData: streamAnimation,
+    rendererSettings: {
+      preserveAspectRatio: "xMidYMid slice"
+    }
+  };
+
+  const shippingAnimationOptions = {
+    loop: true,
+    autoplay: true,
+    animationData: shippingAnimation,
+    rendererSettings: {
+      preserveAspectRatio: "xMidYMid slice"
+    }
+  };
+
+  const rewardAnimationOptions = {
+    loop: true,
+    autoplay: true,
+    animationData: rewardAnimation,
+    rendererSettings: {
+      preserveAspectRatio: "xMidYMid slice"
+    }
+  };
+
   const speechMarkup = useCallback(() => {
     return {
-      __html: `Welcome from <strong>${partnerName}</strong>!<br /> Create your account, and you'll be surfing the latest trends in no-time.`
+      __html: `Welcome to <strong>${partnerName}</strong>!<br /> Create your account so you can start browsing, saving, and getting deals!`
     };
   }, []);
 
   return (
     <QuestionWrapper>
       <TipBot speech={speechMarkup()} />
-      <InputGroupWrapper>
+      <InputGroupWrapper isIntro>
         <Carousel
           autoPlay
           swipeable
@@ -86,19 +118,37 @@ export const GetPreQualified = () => {
           showThumbs={false}
         >
           <div>
-            <ColorizedCalendar className="bts bt-calendar" />
+            {/* <ColorizedCalendar className="bts bt-calendar" /> */}
+            <Lottie
+              options={shippingAnimationOptions}
+              width={180}
+              height={200}
+              style={{ pointerEvents: "none" }}
+            />
             <Title>Free Shipping</Title>
             <Description>(On your first order)</Description>
           </div>
           <div>
-            <ColorizedLoan className="bts bt-folder" />
-            <Title>Keep Items Organized</Title>
-            <Description>Save favorites!</Description>
+            {/* <ColorizedLoan className="bts bt-folder" /> */}
+            <Lottie
+              options={rewardAnimationOptions}
+              width={200}
+              height={200}
+              style={{ pointerEvents: "none" }}
+            />
+            <Title>Rewards</Title>
+            <Description>Cash back on purchases</Description>
           </div>
           <div>
-            <ColorizedCart className="bts bt-shopping-cart" />
-            <Title>Easy Checkout</Title>
-            <Description>We accept all payment methods.</Description>
+            {/* <ColorizedCart className="bts bt-shopping-cart" /> */}
+            <Lottie
+              options={streamAnimationOptions}
+              width={240}
+              height={200}
+              style={{ pointerEvents: "none" }}
+            />
+            <Title>Live-Stream Shopping</Title>
+            <Description>Chat with sellers and buy in real-time</Description>
           </div>
         </Carousel>
       </InputGroupWrapper>

diff --git a/components/SignupWizard/Questions/index.ts b/components/SignupWizard/Questions/index.ts
@@ -1,5 +1,5 @@
 export * from "./Questions";
-export * from "./GetPreQualified";
+export * from "./Welcome";
 export * from "./PersonalInfo";
 export * from "./DateOfBirth";
 export * from "./HomeAddress";