feat(#225): show success screen on registration success (#43)

public/images/greenTick.svg

@@ -0,0 +1,35 @@
+<svg width="488" height="488" viewBox="0 0 488 488" fill="none"
+	xmlns="http://www.w3.org/2000/svg">
+	<g filter="url(#filter0_d)">
+		<circle cx="244" cy="242" r="144" fill="#00832B"/>
+		<circle cx="244" cy="242" r="144" fill="url(#paint0_radial)" fill-opacity="0.8"/>
+	</g>
+	<g filter="url(#filter1_i)">
+		<path fill-rule="evenodd" clip-rule="evenodd" d="M316.74 185.74C315.178 184.178 312.646 184.178 311.084 185.74L220.088 276.736L176.005 232.652C174.442 231.09 171.91 231.09 170.348 232.652L160.367 242.633C158.805 244.195 158.805 246.728 160.367 248.29L207.246 295.168C207.257 295.179 207.268 295.191 207.279 295.202L217.26 305.182C218.431 306.354 220.149 306.647 221.593 306.061C222.075 305.866 222.526 305.573 222.916 305.182C222.916 305.182 222.917 305.182 222.917 305.182L232.897 295.202C232.902 295.197 232.906 295.193 232.911 295.188L326.721 201.378C328.283 199.816 328.283 197.283 326.721 195.721L316.74 185.74Z" fill="white" fill-opacity="0.85"/>
+	</g>
+	<defs>
+		<filter id="filter0_d" x="0" y="0" width="488" height="488" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+			<feOffset dy="2"/>
+			<feGaussianBlur stdDeviation="50"/>
+			<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+			<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+		</filter>
+		<filter id="filter1_i" x="159.196" y="184.569" width="168.697" height="122.785" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+			<feOffset dy="2"/>
+			<feGaussianBlur stdDeviation="0.5"/>
+			<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+			<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.331641 0 0 0 0 0.105688 0 0 0 1 0"/>
+			<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
+		</filter>
+		<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(244 168) rotate(90) scale(218)">
+			<stop stop-color="#00832B" stop-opacity="0"/>
+			<stop offset="1" stop-color="#004E19"/>
+		</radialGradient>
+	</defs>
+</svg>

src/config/lexics/public.tsx

@@ -25,6 +25,7 @@ export const publicLexics = {
   login: 1367,
   next: 12916,
   register: 1305,
+  registration_successful: 12945,
   select_language: 1005,
   step_title_card: 12917,
   step_title_login: 500,

src/features/AuthStore/hooks/useRegister.tsx

@@ -8,8 +8,8 @@ type Args = Parameters<typeof register>[0]
 export const useRegister = () => {
   const history = useHistory()
 
-  const goToLoginPage = () => {
-    history.replace(PAGES.login)
+  const goToRegistrationSuccess = () => {
+    history.replace(`${PAGES.register}/successful`)
   }
 
   const showError = (message: string) => {
@@ -18,6 +18,6 @@ export const useRegister = () => {
   }
 
   return async (args: Args) => (
-    register(args).then(goToLoginPage, showError)
+    register(args).then(goToRegistrationSuccess, showError)
   )
 }

src/features/Register/components/RegistrationSuccessful/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { PAGES } from 'config'
+
+import { T9n } from 'features/T9n'
+import { BlockTitle } from 'features/Login/styled'
+
+import {
+  Container,
+  GreenTick,
+  ButtonLink,
+} from './styled'
+
+export const RegistrationSuccessful = () => (
+  <Container>
+    <BlockTitle>
+      <T9n t='registration_successful' />
+    </BlockTitle>
+    <GreenTick />
+    <ButtonLink to={PAGES.login}>
+      <T9n t='login' />
+    </ButtonLink>
+  </Container>
+)

src/features/Register/components/RegistrationSuccessful/styled.tsx

@@ -0,0 +1,27 @@
+import { Link } from 'react-router-dom'
+import styled from 'styled-components/macro'
+
+import { solidButtonStyles } from 'features/Common'
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 80px;
+`
+
+export const GreenTick = styled.div`
+  width: 288px;
+  height: 288px;
+  margin: 60px 0 156px 0;
+  background-image: url(/images/greenTick.svg);
+  background-position-y: -98px;
+  background-position-x: center;
+`
+
+export const ButtonLink = styled(Link)`
+  ${solidButtonStyles}
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`

src/features/Register/index.tsx

@@ -9,6 +9,7 @@ import { CenterBlock } from 'features/Login/styled'
 import { RegistrationStep } from './components/RegistrationStep'
 import { CardStep } from './components/CardStep'
 import { SubscriptionStep } from './components/SubscriptionsStep'
+import { RegistrationSuccessful } from './components/RegistrationSuccessful'
 
 export const Register = () => (
   <CenterBlock>
@@ -22,5 +23,8 @@ export const Register = () => (
     <Route exact path={`${PAGES.register}/subscriptions`}>
       <SubscriptionStep />
     </Route>
+    <Route exact path={`${PAGES.register}/successful`}>
+      <RegistrationSuccessful />
+    </Route>
   </CenterBlock>
 )