Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace Ortto External Embedded Webform for Onboarding guide #4384

Merged
merged 3 commits into from
Jul 5, 2024
Merged

Replace Ortto External Embedded Webform for Onboarding guide #4384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ce1f6fd
Replace ortto External Embedded Webform for Onboarding guide
RamRamez Jul 4, 2024
d0cc16a
Merge branch 'refs/heads/develop' into Replace-ortto-External-Embedde…
RamRamez Jul 4, 2024
d6f606a
fix input width
RamRamez Jul 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/apollo/gql/gqlSubscribeOnboarding.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { gql } from '@apollo/client';

export const SUBSCRIBE_ONBOARDING = gql`
query ($email: String!) {
subscribeOnboarding(email: $email)
}
`;
151 changes: 63 additions & 88 deletions src/components/views/landings/onboarding/main/GetStarted.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,99 +5,78 @@ import {
H5,
neutralColors,
} from '@giveth/ui-design-system';
import React from 'react';
import { useForm } from 'react-hook-form';
import { OnboardingHeaderWrapper } from '@/components/views/landings/onboarding/common/common.styled';
import Input from '@/components/styled-components/Input';
import Input, { InputSize } from '@/components/Input';
import { requiredOptions } from '@/lib/constants/regex';
import { client } from '@/apollo/apolloClient';
import { SUBSCRIBE_ONBOARDING } from '@/apollo/gql/gqlSubscribeOnboarding';
import { showToastError } from '@/lib/helpers';
import { gToast, ToastType } from '@/components/toasts';

type Inputs = {
email: string;
};

const GetStarted = () => {
const {
register,
handleSubmit,
formState: { errors },
reset,
} = useForm<Inputs>();

const onSubmit = async (formData: Inputs) => {
try {
const { email } = formData;
const { data } = await client.query({
query: SUBSCRIBE_ONBOARDING,
variables: { email },
});
if (data?.subscribeOnboarding) {
gToast('You have successfully subscribed.', {
type: ToastType.SUCCESS,
title: 'Success',
position: 'top-center',
});
reset();
} else {
await Promise.reject();
}
} catch (e) {
showToastError('Something went wrong, please try again later');
reset();
}
};

return (
<OnboardingHeaderWrapperStyled>
<H5 weight={700}>Get started with our Giveth onboarding guide</H5>
<div id='646b4736a2882bf86587185d'>
<div
id='646b4736a2882bf86587185d-form'
className='646b4736a2882bf86587185d-template'
>
<div
id='selected-_holfg9jol'
className='ap3w-embeddable-form-646b4736a2882bf86587185d ap3w-embeddable-form-646b4736a2882bf86587185d-full ap3w-embeddable-form-646b4736a2882bf86587185d-solid'
data-select='true'
>
<form
id='ap3w-embeddable-form-646b4736a2882bf86587185d'
className='ap3w-embeddable-form-content'
>
<div
id='selected-_18s7trjp5'
className='ap3w-form-input ap3w-form-input-646b4736a2882bf86587185d'
data-select='true'
data-field-id='str::email'
data-merge-strategy='override'
>
<InputStyled
type='email'
id='ap3w-form-input-email-646b4736a2882bf86587185d'
step='1'
name='email'
required
placeholder='Your email address'
/>
</div>
<div
id='selected-_45j87ga41'
className='ap3w-form-button ap3w-form-button-646b4736a2882bf86587185d'
>
<StyledButton
id='ap3w-form-button-646b4736a2882bf86587185d'
type='submit'
data-select='true'
data-button-on-click='thank-you'
>
Discover the Future of Giving
</StyledButton>
</div>
</form>
</div>
</div>
<div
id='646b4736a2882bf86587185d-thank-you'
className='646b4736a2882bf86587185d-template'
style={{
position: 'relative',
display: 'none',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
}}
>
<div
id='selected-_qihyqwtgi'
className='ap3w-embeddable-form-646b4736a2882bf86587185d ap3w-embeddable-form-646b4736a2882bf86587185d-full ap3w-embeddable-form-646b4736a2882bf86587185d-solid'
data-select='true'
>
<form
id='ap3w-embeddable-form-646b4736a2882bf86587185d'
className='ap3w-embeddable-form-content'
>
<div
id='selected-_zlfr6oqkd'
className='ap3w-text ap3w-text-646b4736a2882bf86587185d ap3w-text--first ap3w-text--last'
>
<div data-select='true'>
<p data-size='h2'>
Your journey into the Future of Giving
has just begun! Check your email for our
special onboarding guide.
</p>
</div>
</div>
</form>
</div>
</div>
</div>
<form onSubmit={handleSubmit(onSubmit)}>
<InputWrapper>
<Input
registerName={'email'}
placeholder={'Your email address'}
size={InputSize.MEDIUM}
register={register}
error={errors.email}
registerOptions={requiredOptions.email}
/>
</InputWrapper>
<StyledButton type='submit'>
Discover the Future of Giving
</StyledButton>
</form>
</OnboardingHeaderWrapperStyled>
);
};

const InputWrapper = styled.div`
max-width: 700px;
margin-top: 25px;
`;

const StyledButton = styled.button`
display: flex;
height: 48px;
Expand All @@ -117,15 +96,11 @@ const StyledButton = styled.button`
line-height: 18px;
letter-spacing: 0.48px;
text-transform: uppercase;
margin-top: 15px;
margin-top: 8px;
border: none;
cursor: pointer;
`;

const InputStyled = styled(Input)`
max-width: 685px;
`;

const OnboardingHeaderWrapperStyled = styled(OnboardingHeaderWrapper)`
margin: 64px auto 74px;
@media (max-width: ${deviceSize.tablet}px) {
Expand Down
Loading