Merge pull request #228 from dagstuan/subscribeView

Subscribe view

Author: dagstuan

SkredvarselGarminWeb/SkredvarselGarminWeb/Frontend/src/Components/Buttons/GoogleButton.tsx

@@ -11,6 +11,7 @@ export const GoogleButton = ({ link }: GoogleButtonProps) => {
       as="a"
       href={link}
       rounded={"full"}
+      borderColor="black"
       borderRadius={4}
       colorScheme="gray"
       variant="outline"

SkredvarselGarminWeb/SkredvarselGarminWeb/Frontend/src/Components/Buttons/VippsButton.tsx

@@ -8,8 +8,7 @@ type VippsButtonProps = {
 } & Pick<ButtonProps, "size">;
 
 export const VippsButton = (props: VippsButtonProps) => {
-  const { text = "Kjøp abonnement med", link = "/createVippsAgreement" } =
-    props;
+  const { text = "Fortsett med", link = "/createVippsAgreement" } = props;
 
   return (
     <Button

SkredvarselGarminWeb/SkredvarselGarminWeb/Frontend/src/Components/BuySubscriptionModal.tsx

@@ -8,20 +8,24 @@ import {
   Text,
   VStack,
   Box,
-  AbsoluteCenter,
-  Divider,
   Icon,
-  HStack,
+  Button,
+  FormControl,
+  FormErrorMessage,
+  Input,
+  Center,
+  Heading,
 } from "@chakra-ui/react";
 import { VippsButton } from "./Buttons/VippsButton";
 import { FacebookButton } from "./Buttons/FacebookButton";
 import { GoogleButton } from "./Buttons/GoogleButton";
-import { VippsIcon } from "./Icons/VippsIcon";
-import { FaApplePay, FaCreditCard, FaGooglePay } from "react-icons/fa";
+import { FaPaperPlane } from "react-icons/fa";
 import { useNavigateOnClose } from "../hooks/useNavigateOnClose";
 import { useUser } from "../hooks/useUser";
 import { useNavigateToAccountIfLoggedIn } from "../hooks/useNavigateToAccountIfLoggedIn";
 import { OrDivider } from "./OrDivider";
+import { useEmailLogin } from "../hooks/useEmailLogin";
+import { EmailLoginForm } from "./EmailLoginForm/EmailLoginForm";
 
 export const BuySubscriptionModal = () => {
   const { data: user, isLoading: isLoadingUser } = useUser();
@@ -30,35 +34,83 @@ export const BuySubscriptionModal = () => {
 
   const { isClosing, onClose } = useNavigateOnClose("/");
 
+  const {
+    email,
+    showSentEmail,
+    error,
+    handleEmailInputChange,
+    handleSubmit,
+    isLoading,
+  } = useEmailLogin();
+
   return (
     <Modal isOpen={!isLoadingUser && !isClosing} onClose={onClose} isCentered>
       <ModalOverlay />
-      <ModalContent alignItems="center">
+      <ModalContent alignItems="center" overflow="hidden">
         <ModalHeader>Kjøp abonnement</ModalHeader>
         <ModalCloseButton />
-        <ModalBody w="100%" pb={9}>
-          <VStack gap={2} w="100%">
-            <Text fontSize="md" align="center">
-              Du må være logget inn for å kjøpe abonnement.
-            </Text>
+        <ModalBody w="100%" p={0}>
+          {!showSentEmail && (
+            <VStack gap={8} w="100%" alignItems="center">
+              <VStack gap={5} w="80%" alignItems="center">
+                <Text fontSize="md" align="center">
+                  Abonnement kan kjøpes direkte med Vipps,
+                  <br />
+                  eller logg inn for andre alternativer.
+                </Text>
 
-            <VStack gap={2} mb={7}>
-              <Text>Du kan betale med:</Text>
-              <HStack alignItems="center">
-                <VippsIcon title="Vipps" w={14} h="100%" />
-                <Icon title="Kort" as={FaCreditCard} w={6} h="100%" />
-                <Icon title="Apple Pay" as={FaApplePay} w={9} h="100%" />
-                <Icon title="Google Pay" as={FaGooglePay} w={9} h="100%" />
-              </HStack>
-            </VStack>
+                <VStack w="100%" alignItems="stretch">
+                  <VippsButton />
+                </VStack>
+              </VStack>
 
-            <VStack w="100%" maxW="sm" gap={5} alignItems="stretch">
-              <VippsButton />
-              <OrDivider text="Eller logg inn for alternativer" />
-              <GoogleButton link="/google-login?returnUrl=/account" />
-              <FacebookButton link="/facebook-login?returnUrl=/account" />
+              <Center w="100%" bg="gray.100" pt={4} pb={6}>
+                <VStack w="80%" maxW="sm" gap={5} alignItems="stretch">
+                  <Heading
+                    textAlign="center"
+                    as="header"
+                    size="sm"
+                    fontWeight="normal"
+                  >
+                    Logg inn / registrer deg
+                  </Heading>
+                  <VStack gap={5} w="100%" alignItems="stretch">
+                    <VStack gap={2} w="100%" alignItems="stretch">
+                      <GoogleButton link="/google-login?returnUrl=/account" />
+                      <FacebookButton link="/facebook-login?returnUrl=/account" />
+                    </VStack>
+
+                    <OrDivider text="Eller" />
+                    <VStack w="100%" alignItems="stretch">
+                      <EmailLoginForm
+                        email={email}
+                        handleEmailInputChange={handleEmailInputChange}
+                        handleSubmit={handleSubmit}
+                        error={error}
+                        isLoading={isLoading}
+                      />
+                    </VStack>
+                  </VStack>
+                </VStack>
+              </Center>
+            </VStack>
+          )}
+          {showSentEmail && (
+            <VStack gap={6} pb={6}>
+              <Box
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+                bg="green.500"
+                color="white"
+                borderRadius="50%"
+                boxSize={28}
+              >
+                <Icon w={16} h={16} as={FaPaperPlane} />
+              </Box>
+              <Text>Sjekk innboksen din for en innloggingslenke.</Text>
             </VStack>
-          </VStack>
+          )}
         </ModalBody>
       </ModalContent>
     </Modal>

SkredvarselGarminWeb/SkredvarselGarminWeb/Frontend/src/Components/EmailLoginForm/EmailLoginForm.tsx

@@ -0,0 +1,38 @@
+import { FormControl, Input, FormErrorMessage, Button } from "@chakra-ui/react";
+
+type EmailLoginFormProps = {
+  email: string | undefined;
+  handleEmailInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  error: string | undefined;
+  isLoading: boolean;
+};
+
+export const EmailLoginForm = (props: EmailLoginFormProps) => {
+  const { email, handleEmailInputChange, handleSubmit, error, isLoading } =
+    props;
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <FormControl isInvalid={!!error}>
+        <Input
+          type="email"
+          bg="white"
+          placeholder="E-post"
+          value={email}
+          onChange={handleEmailInputChange}
+        />
+        <FormErrorMessage>{error}</FormErrorMessage>
+      </FormControl>
+      <Button
+        mt={4}
+        w="100%"
+        colorScheme="green"
+        isLoading={isLoading}
+        type="submit"
+      >
+        Send innloggingslenke
+      </Button>
+    </form>
+  );
+};

SkredvarselGarminWeb/SkredvarselGarminWeb/Frontend/src/Components/LoginModal/LoginContent.tsx

@@ -1,53 +1,28 @@
-import {
-  VStack,
-  FormControl,
-  Input,
-  FormErrorMessage,
-  Button,
-  Text,
-  Center,
-  Link,
-} from "@chakra-ui/react";
+import { VStack, Text, Center, Link } from "@chakra-ui/react";
 import { FacebookButton } from "../Buttons/FacebookButton";
 import { GoogleButton } from "../Buttons/GoogleButton";
 import { OrDivider } from "../OrDivider";
-import { useState } from "react";
-import { useMutation } from "react-query";
-import { sendLoginEmail } from "../../hooks/useEmailLogin";
 import { Link as RouterLink } from "react-router-dom";
+import { EmailLoginForm } from "../EmailLoginForm/EmailLoginForm";
 
 type LoginContentProps = {
   loginText?: string;
-  onSentEmail: () => void;
+  email: string | undefined;
+  handleEmailInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  error: string | undefined;
+  isLoading: boolean;
 };
 
 export const LoginContent = (props: LoginContentProps) => {
-  const { loginText, onSentEmail } = props;
-
-  const [email, setEmail] = useState<string | undefined>(undefined);
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    if (value !== undefined && value !== null) {
-      setEmail(value);
-    }
-  };
-  const [error, setError] = useState<string | undefined>();
-
-  const { mutate, isLoading } = useMutation(sendLoginEmail, {
-    onSuccess: () => {
-      onSentEmail();
-    },
-  });
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    if (!email) {
-      setError("Du må skrive en e-postadresse.");
-    } else {
-      mutate(email);
-    }
-  };
+  const {
+    loginText,
+    email,
+    handleEmailInputChange,
+    handleSubmit,
+    error,
+    isLoading,
+  } = props;
 
   return (
     <VStack gap={7} alignItems="stretch">
@@ -62,27 +37,13 @@ export const LoginContent = (props: LoginContentProps) => {
         <FacebookButton link="/facebook-login?returnUrl=/account" />
       </VStack>
       <OrDivider text="Eller logg inn med e-post" />
-      <form onSubmit={handleSubmit}>
-        <FormControl isInvalid={!!error}>
-          <Input
-            type="email"
-            bg="white"
-            placeholder="E-post"
-            value={email}
-            onChange={handleInputChange}
-          />
-          <FormErrorMessage>{error}</FormErrorMessage>
-        </FormControl>
-        <Button
-          mt={4}
-          w="100%"
-          colorScheme="green"
-          isLoading={isLoading}
-          type="submit"
-        >
-          Send innloggingslenke
-        </Button>
-      </form>
+      <EmailLoginForm
+        email={email}
+        handleEmailInputChange={handleEmailInputChange}
+        handleSubmit={handleSubmit}
+        error={error}
+        isLoading={isLoading}
+      />
       <Center>
         <Link as={RouterLink} to="/faq#vippslogin">
           Hvorfor kan jeg ikke logge inn med Vipps?

SkredvarselGarminWeb/SkredvarselGarminWeb/Frontend/src/Components/LoginModal/LoginModal.tsx

@@ -16,6 +16,7 @@ import { useState } from "react";
 import { LoginContent } from "./LoginContent";
 
 import { FaPaperPlane } from "react-icons/fa";
+import { useEmailLogin } from "../../hooks/useEmailLogin";
 
 type LoginModalProps = {
   loginText?: string;
@@ -26,7 +27,14 @@ export const LoginModal = (props: LoginModalProps) => {
 
   const { isClosing, onClose } = useNavigateOnClose("/");
 
-  const [showSentEmail, setShowSentEmail] = useState(false);
+  const {
+    email,
+    showSentEmail,
+    error,
+    handleEmailInputChange,
+    handleSubmit,
+    isLoading,
+  } = useEmailLogin();
 
   return (
     <Modal isOpen={!isClosing} onClose={onClose} isCentered>
@@ -40,7 +48,11 @@ export const LoginModal = (props: LoginModalProps) => {
           {!showSentEmail && (
             <LoginContent
               loginText={loginText}
-              onSentEmail={() => setShowSentEmail(true)}
+              email={email}
+              handleEmailInputChange={handleEmailInputChange}
+              handleSubmit={handleSubmit}
+              error={error}
+              isLoading={isLoading}
             />
           )}
           {showSentEmail && (

SkredvarselGarminWeb/SkredvarselGarminWeb/Frontend/src/Components/OrDivider.tsx

@@ -1,4 +1,4 @@
-import { AbsoluteCenter, Box, Divider } from "@chakra-ui/react";
+import { AbsoluteCenter, Box, Divider, Text } from "@chakra-ui/react";
 
 type OrDividerProps = {
   text?: string;
@@ -8,7 +8,7 @@ export const OrDivider = ({ text = "Eller" }: OrDividerProps) => {
   return (
     <Box mb={2} mt={2} position="relative" whiteSpace="nowrap">
       <Divider />
-      <AbsoluteCenter bg="white" px="4">
+      <AbsoluteCenter bg="transparent" px="4">
         {text}
       </AbsoluteCenter>
     </Box>

SkredvarselGarminWeb/SkredvarselGarminWeb/Frontend/src/hooks/useEmailLogin.ts

@@ -1,4 +1,44 @@
+import { useState } from "react";
 import { api } from "../api";
+import { useMutation } from "react-query";
 
 export const sendLoginEmail = async (email: string) =>
   api.post(`/email-login-send?email=${email}&returnUrl=/account`);
+
+export const useEmailLogin = () => {
+  const [showSentEmail, setShowSentEmail] = useState(false);
+
+  const [email, setEmail] = useState<string | undefined>(undefined);
+  const handleEmailInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    if (value !== undefined && value !== null) {
+      setEmail(value);
+    }
+  };
+  const [error, setError] = useState<string | undefined>();
+
+  const { mutate, isLoading } = useMutation(sendLoginEmail, {
+    onSuccess: () => {
+      setShowSentEmail(true);
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!email) {
+      setError("Du må skrive en e-postadresse.");
+    } else {
+      mutate(email);
+    }
+  };
+
+  return {
+    email,
+    handleEmailInputChange,
+    error,
+    isLoading,
+    handleSubmit,
+    showSentEmail,
+  };
+};