Tw 716 baner subscrition

public/_locales/en/messages.json

@@ -3032,5 +3032,11 @@
   },
   "creditCard": {
     "message": "credit card"
+  },
+  "subscribeToNewsletter": {
+    "message": "Subscribe to our Newsletter"
+  },
+  "keepLatestNews": {
+    "message": "Keep up with the latest news from Madfish"
   }
 }

public/_locales/en_GB/messages.json

@@ -1773,5 +1773,11 @@
   },
   "swapCashbackDescription": {
     "message": "Swap more than 10$ and receive 0.175% from the swapped amount in the TKEY token as a cashback"
+  },
+  "subscribeToNewsletter": {
+    "message": "Subscribe to our Newsletter"
+  },
+  "keepLatestNews": {
+    "message": "Keep up with the latest news from Madfish"
   }
 }

src/app/layouts/PageLayout.tsx

@@ -21,6 +21,7 @@ import { PageLayoutSelectors } from './PageLayout.selectors';
 import { ChangelogOverlay } from './PageLayout/ChangelogOverlay/ChangelogOverlay';
 import ConfirmationOverlay from './PageLayout/ConfirmationOverlay';
 import Header from './PageLayout/Header';
+import { NewsletterOverlay } from './PageLayout/NewsletterOverlay/NewsletterOverlay';
 import { OnRampOverlay } from './PageLayout/OnRampOverlay/OnRampOverlay';
 
 interface PageLayoutProps extends PropsWithChildren, ToolbarProps {
@@ -52,6 +53,7 @@ const PageLayout: FC<PageLayoutProps> = ({ children, contentContainerStyle, ...t
       <ConfirmationOverlay />
       <ChangelogOverlay />
       <OnRampOverlay />
+      <NewsletterOverlay />
     </>
   );
 };

src/app/layouts/PageLayout/NewsletterOverlay/NewsletterOverlay.tsx

@@ -0,0 +1,140 @@
+import React, { FC, useMemo, useState } from 'react';
+
+import classNames from 'clsx';
+import { useForm } from 'react-hook-form';
+import { useDispatch } from 'react-redux';
+import { object, string } from 'yup';
+
+import { Button } from 'app/atoms';
+import Spinner from 'app/atoms/Spinner/Spinner';
+import { useAppEnv } from 'app/env';
+import { ReactComponent as CloseIcon } from 'app/icons/close.svg';
+import ContentContainer from 'app/layouts/ContentContainer';
+import { shouldShowNewsletterModalAction } from 'app/store/newsletter/newsletter-actions';
+import { useShouldShowNewsletterModalSelector } from 'app/store/newsletter/newsletter-selectors';
+import { useOnRampPossibilitySelector } from 'app/store/settings/selectors';
+import { newsletterApi } from 'lib/apis/newsletter';
+import { useYupValidationResolver } from 'lib/form/use-yup-validation-resolver';
+import { T, t } from 'lib/i18n/react';
+
+import NewsletterImage from './NewsletterImage.png';
+
+interface FormValues {
+  email: string;
+}
+
+const validationSchema = object().shape({
+  email: string().required('Required field').email('Must be a valid email')
+});
+
+export const NewsletterOverlay: FC = () => {
+  const dispatch = useDispatch();
+  const { popup } = useAppEnv();
+  const shouldShowNewsletterModal = useShouldShowNewsletterModalSelector();
+  const isOnRampPossibility = useOnRampPossibilitySelector();
+
+  const validationResolver = useYupValidationResolver<FormValues>(validationSchema);
+
+  const { errors, handleSubmit, watch, register } = useForm<FormValues>({
+    defaultValues: { email: '' },
+    validationResolver
+  });
+  const email = watch('email');
+  const isValid = Object.keys(errors).length === 0;
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [successSubscribing, setSuccessSubscribing] = useState(false);
+
+  const popupClassName = useMemo(
+    () => (popup ? 'inset-0 p-4' : 'top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2'),
+    [popup]
+  );
+  const close = () => void dispatch(shouldShowNewsletterModalAction(false));
+
+  const onSubmit = () => {
+    setIsLoading(true);
+    newsletterApi
+      .post('/', {
+        NAME: email,
+        EMAIL: email
+      })
+      .then(() => {
+        setSuccessSubscribing(true);
+        dispatch(shouldShowNewsletterModalAction(false));
+      })
+      .finally(() => setIsLoading(false));
+  };
+
+  const buttonContent = useMemo(() => {
+    if (successSubscribing) {
+      return 'Thanks for your subscribing!';
+    }
+
+    if (isLoading) {
+      return <Spinner theme="white" className="w-8" />;
+    }
+
+    return 'Subscribe';
+  }, [successSubscribing, isLoading]);
+
+  if (!shouldShowNewsletterModal || isOnRampPossibility) return null;
+
+  return (
+    <>
+      <div className="fixed left-0 right-0 top-0 bottom-0 opacity-20 bg-gray-700 z-40"></div>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <ContentContainer
+          className={classNames('fixed z-40 overflow-y-auto', popupClassName)}
+          style={{ maxWidth: '37.5rem' }}
+          padding={false}
+        >
+          <div
+            className={classNames(
+              'flex flex-col text-center bg-orange-100 shadow-lg bg-no-repeat rounded-md p-6',
+              popup && 'h-full'
+            )}
+          >
+            <Button
+              className={classNames(
+                'w-24 h-9 uppercase bg-blue-500',
+                'font-inter text-white',
+                'text-sm font-medium rounded',
+                'flex flex-row justify-center items-center self-end',
+                'hover:opacity-90 relative'
+              )}
+              style={{ top: '-0.75rem', right: '-0.75rem' }}
+              onClick={close}
+            >
+              <T id="close" />
+              <CloseIcon className="ml-2 h-4 w-auto stroke-current stroke-2" />
+            </Button>
+            <img src={NewsletterImage} className="mb-4" alt="Newsletter" />
+            <div className="flex flex-col w-full max-w-sm mx-auto">
+              <h1 className="mb-1 font-inter text-base text-gray-910 text-left">{t('subscribeToNewsletter')}</h1>
+              <span className="mb-1 text-xs text-left text-gray-600">{t('keepLatestNews')}</span>
+              <div className="w-full mb-4">
+                <input
+                  ref={register()}
+                  name="email"
+                  className="w-full p-4 rounded-md border text-sm text-gray-910"
+                  placeholder="example@mail.com"
+                />
+                {!isValid && <div className="mt-1 text-xs text-left text-red-700">{errors.email?.message}</div>}
+              </div>
+              <button
+                disabled={!isValid}
+                type="submit"
+                className={classNames(
+                  'w-full h-12 flex items-center justify-center font-semibold rounded-md text-base px-16 py-3 text-white',
+                  isValid ? 'bg-orange-500' : 'bg-blue-100'
+                )}
+              >
+                {buttonContent}
+              </button>
+            </div>
+          </div>
+        </ContentContainer>
+      </form>
+    </>
+  );
+};

src/app/pages/NewWallet/setWalletPassword/SetWalletPassword.tsx

@@ -12,6 +12,7 @@ import {
   specialCharacterRegx,
   uppercaseLowercaseMixtureRegx
 } from 'app/defaults';
+import { shouldShowNewsletterModalAction } from 'app/store/newsletter/newsletter-actions';
 import { setIsAnalyticsEnabledAction, setOnRampPossibilityAction } from 'app/store/settings/actions';
 import { AnalyticsEventCategory, TestIDProps, useAnalytics } from 'lib/analytics';
 import { T, t } from 'lib/i18n';
@@ -118,6 +119,7 @@ export const SetWalletPassword: FC<SetWalletPasswordProps> = ({
         );
         navigate('/loading');
         !ownMnemonic && dispatch(setOnRampPossibilityAction(true));
+        dispatch(shouldShowNewsletterModalAction(true));
       } catch (err: any) {
         console.error(err);
 

src/app/store/index.ts

@@ -18,6 +18,7 @@ import { currencyEpics } from './currency/epics';
 import { currencyReducer } from './currency/reducers';
 import { dAppsEpics } from './d-apps/epics';
 import { dAppsReducer } from './d-apps/reducers';
+import { newsletterReducers } from './newsletter/newsletter-reducers';
 import { partnersPromotionEpics } from './partners-promotion/epics';
 import { partnersPromotionRucer } from './partners-promotion/reducers';
 import { settingsReducer } from './settings/reducers';
@@ -37,7 +38,8 @@ const baseReducer = rootStateReducer({
   balances: balancesReducer,
   tokensMetadata: tokensMetadataReducer,
   abTesting: abTestingReducer,
-  buyWithCreditCard: buyWithCreditCardReducer
+  buyWithCreditCard: buyWithCreditCardReducer,
+  newsletter: newsletterReducers
 });
 
 export type RootState = GetStateType<typeof baseReducer>;

src/app/store/newsletter/newsletter-actions.ts

@@ -0,0 +1,3 @@
+import { createAction } from '@reduxjs/toolkit';
+
+export const shouldShowNewsletterModalAction = createAction<boolean>('newsletter/SHOULD_SHOW_NEWSLETTER_MODAL');

src/app/store/newsletter/newsletter-reducers.ts

@@ -0,0 +1,10 @@
+import { createReducer } from '@reduxjs/toolkit';
+
+import { shouldShowNewsletterModalAction } from './newsletter-actions';
+import { NewsletterState, newsletterInitialState } from './newsletter-state';
+
+export const newsletterReducers = createReducer<NewsletterState>(newsletterInitialState, builer => {
+  builer.addCase(shouldShowNewsletterModalAction, (_, { payload }) => ({
+    shouldShowNewsletterModal: payload
+  }));
+});

src/app/store/newsletter/newsletter-selectors.ts

@@ -0,0 +1,4 @@
+import { useSelector } from '../index';
+
+export const useShouldShowNewsletterModalSelector = () =>
+  useSelector(({ newsletter }) => newsletter.shouldShowNewsletterModal);

src/app/store/newsletter/newsletter-state.mock.ts

@@ -0,0 +1,5 @@
+import { NewsletterState } from './newsletter-state';
+
+export const mockNewsletterState: NewsletterState = {
+  shouldShowNewsletterModal: true
+};

src/app/store/newsletter/newsletter-state.ts

@@ -0,0 +1,11 @@
+export interface NewsletterState {
+  shouldShowNewsletterModal: boolean;
+}
+
+export const newsletterInitialState: NewsletterState = {
+  shouldShowNewsletterModal: false
+};
+
+export interface NewsletterRootState {
+  newsletter: NewsletterState;
+}

src/lib/apis/newsletter.ts

@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+export const newsletterApi = axios.create({
+  baseURL: 'https://jellyfish-app-deove.ondigitalocean.app/'
+});