From 17f716c6cef0b75fc61932eabdbc1f761ff605c5 Mon Sep 17 00:00:00 2001 From: jongomez Date: Thu, 26 Oct 2023 14:40:46 +0100 Subject: [PATCH] feat: call odoo api and update styles --- src/components/NavBar/NavBar.tsx | 2 +- .../SubscribeButton/SubscribeButton.tsx | 10 -- .../SubscribeDialogue/SubscribeDialogue.tsx | 164 ++++++++++++------ 3 files changed, 111 insertions(+), 65 deletions(-) diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx index 60da92e..cc6fed9 100644 --- a/src/components/NavBar/NavBar.tsx +++ b/src/components/NavBar/NavBar.tsx @@ -113,7 +113,7 @@ export default function NavBar({ defaultState }: NavBarProps) { ) } -export const PressLogoType = styled(Typography)<{ display: boolean }>` +const PressLogoType = styled(Typography)<{ display: boolean }>` text-transform: uppercase; ${(props) => !props.display && diff --git a/src/components/SubscribeButton/SubscribeButton.tsx b/src/components/SubscribeButton/SubscribeButton.tsx index 8ff2553..1572977 100644 --- a/src/components/SubscribeButton/SubscribeButton.tsx +++ b/src/components/SubscribeButton/SubscribeButton.tsx @@ -3,15 +3,6 @@ import styled from '@emotion/styled' import { useState } from 'react' import { SubscribeDialogue } from '../SubscribeDialogue' -const mockOnSubmit = (data: any) => { - return new Promise((resolve, reject) => { - setTimeout(() => { - console.log('Form data submitted:', data) - resolve(true) - }, 3000) - }) -} - export default function SubscribeButton() { const [showDialogue, setShowDialogue] = useState(false) @@ -27,7 +18,6 @@ export default function SubscribeButton() { setShowDialogue(false)} /> diff --git a/src/components/SubscribeDialogue/SubscribeDialogue.tsx b/src/components/SubscribeDialogue/SubscribeDialogue.tsx index 5893410..6c72e1c 100644 --- a/src/components/SubscribeDialogue/SubscribeDialogue.tsx +++ b/src/components/SubscribeDialogue/SubscribeDialogue.tsx @@ -1,44 +1,60 @@ import { copyConfigs } from '@/configs/copy.configs' -import { Button, CloseIcon, IconButton, Typography } from '@acid-info/lsd-react' +import { api } from '@/services/api.service' +import { lsdUtils } from '@/utils/lsd.utils' +import { + Button, + CheckIcon, + CloseIcon, + ErrorIcon, + IconButton, + Typography, +} from '@acid-info/lsd-react' import styled from '@emotion/styled' +import Link from 'next/link' import { useEffect, useState } from 'react' import { LogosIcon } from '../Icons/LogosIcon' -import { PressLogoType } from '../NavBar/NavBar' + +const mockOnSubmit = (data: any) => { + return new Promise((resolve, reject) => { + setTimeout(() => { + console.log('Form data submitted:', data) + resolve(true) + }, 3000) + }) +} type EmailSubscribeProps = React.HTMLAttributes & { - onSubmit: (formData: SubscribeFormData) => void isOpen: boolean onClose: () => void } -type SubscribeFormData = { +export type SubscribeFormData = { email: string firstName: string lastName: string } export default function SubscribeDialogue({ - onSubmit, isOpen, onClose, ...props }: EmailSubscribeProps) { const [isSubmitting, setIsSubmitting] = useState(false) - const [isSuccess, setIsSuccess] = useState(false) + const [successMessage, setSuccessMessage] = useState('') const [errorMessage, setErrorMessage] = useState('') // Reset states when the dialog is closed. useEffect(() => { if (!isOpen) { - if (isSuccess) { - setIsSuccess(false) + if (successMessage) { + setSuccessMessage('') } if (errorMessage) { setErrorMessage('') } } - }, [isOpen, isSuccess, errorMessage]) + }, [isOpen, successMessage, errorMessage]) if (!isOpen) { return null @@ -47,18 +63,20 @@ export default function SubscribeDialogue({ const handleFormSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) + setErrorMessage('') + setSuccessMessage('') try { - await onSubmit({ - email: e.currentTarget.email.value, - firstName: e.currentTarget.firstName.value, - lastName: e.currentTarget.lastName.value, - }) + const firstName = e.currentTarget.firstName.value || '' + const lastName = e.currentTarget.lastName.value || '' - setErrorMessage('') - setIsSuccess(true) + const apiResponse = await api.subscribeToMailingList( + e.currentTarget.email.value, + e.currentTarget.firstName.value + ' ' + e.currentTarget.lastName.value, + ) + + setSuccessMessage(apiResponse.message) } catch (error) { - setIsSuccess(false) setErrorMessage( 'There was an error submitting the form. Please try again.', ) @@ -79,27 +97,46 @@ export default function SubscribeDialogue({ - - + + {copyConfigs.navbar.title} - Subscribe for updates + + {errorMessage && ( + + + + {errorMessage} + + + )} + + {successMessage && ( + <> + + + + {successMessage} + + + + To home page + + + )} + + - Subscribe for updates - - @@ -123,34 +159,51 @@ export default function SubscribeDialogue({ - Subscribe + {isSubmitting ? 'Subscribing...' : 'Subscribe'} - - {isSubmitting && ( - - Submitting... - - )} - {isSuccess && ( - - Submitted successfully! - - )} - {errorMessage && ( - - {errorMessage} - - )} ) } +const PressLogoType = styled(Typography)` + text-transform: uppercase; + font-size: 30px; + line-height: 36px; + + ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} { + font-size: 20px; + line-height: 26px; + } +` + +const ToHomePageButton = styled(Button)` + margin-top: 46px; + height: 40px; + width: 162px; + color: rgb(var(--lsd-text-secondary)); +` + +const MessageContainer = styled.div` + display: flex; + align-items: center; + + border: 1px solid rgb(var(--lsd-border-primary)); + padding: 14px; + + margin-bottom: -6px; + margin-top: 40px; + + width: 430px; + max-width: 93%; +` + const SubmitionInfoMessage = styled(Typography)` - margin: 16px 0px; + padding-left: 14px; ` const LogosIconAndTitleContainer = styled.div` @@ -166,13 +219,13 @@ const MainContentContainer = styled.div` align-items: center; padding: 24px 0; - width: 518px; + width: 430px; max-width: 90%; .subscribe-dialogue__close-button { position: absolute; - top: 16px; - right: 32px; + top: 8px; + right: 30px; } ` @@ -190,8 +243,10 @@ const SubscribeDialogueContainer = styled.div` justify-content: center; ` -const EmailSubscribeForm = styled.form` - display: flex; +const EmailSubscribeForm = styled.form<{ + hideForm: boolean +}>` + display: ${({ hideForm }) => (hideForm ? 'none' : 'flex')}; justify-content: center; align-items: center; flex-direction: column; @@ -215,11 +270,12 @@ const StyledInput = styled.input` &:focus { outline: none; } + + background-color: rgb(var(--lsd-surface-primary)); ` const SubscribeButton = styled(Button)` margin-top: 30px; height: 40px; width: 162px; - flex-shrink: 0; `