bigcommerce · golcinho · Feb 23, 2024 · Feb 23, 2024
@@ -54,7 +54,7 @@ const StyledError = styled.div`
   padding: 0.5rem 0;
 `;
 
-const StyledContainer = styled.div`
+export const StyledContainer = styled.div`
   margin-bottom: 4rem;
   padding-top: 1rem;
   position: relative;

@@ -109,4 +109,9 @@ export const translations: Record<string, Record<string, string>> = {
     'uk-UA': '* ви можете відмовитись від підписки в будь який момент, натиснувши',
   },
   'click here': { 'uk-UA': 'СЮДИ' },
+  '1 time donation': { 'uk-UA': 'Разовий донат' },
+  Custom: { 'uk-UA': 'Інша сума' },
+  'per month': { 'uk-UA': '/ місяць' },
+  'Enter donation amount': { 'uk-UA': 'Введіть бажану суму' },
+  'Enter subscription amount': { 'uk-UA': 'Введіть бажану суму' },
 };
@@ -64,27 +64,12 @@ async function render(pageContext: PageContextServer) {
     ${dangerouslySkipEscape(`<style>${SwiperCss}${SwiperPaginationCss}</style>`)}
     ${dangerouslySkipEscape(`<style>${SwiperCss}${SwiperNavigationCss}</style>`)}
     <link rel="preload" href="${HomeImageSrc}" as="image">
-    <link rel="preload" href="https://standwithukraineapp.com/widget/style.css" as="style" />
     <title>${title}</title>
     ${dangerouslySkipEscape(metaTags)}
   </head>
 
   <body>
     <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>
-    <script>
-      window.SWU_CONFIG = {
-        "style": "blue",
-        "placement": "bottom-right",
-        "charity_selections": [
-          "razom",
-          "unicef",
-          "mira-action"
-        ],
-        "modal_title": "Help the people of Ukraine!",
-        "modal_body": "With each day, the war in Ukraine worsens at an alarming pace. Millions of civilians have lost their homes and many more are without basic necessities like food, water, and health care. Consider donating to one of the charities below and join us in showing support for Ukraine. All charities are trusted, non-profit organizations dedicated to Ukrainian relief efforts. It takes less than a minute."
-      };
-    </script>
-    <script defer src="https://standwithukraineapp.com/widget/index.js"></script>
   </body>
 </html>
     `;

@@ -4,6 +4,7 @@ import ENVideo from '../../public/assets/subscription/videos/EN.mp4';
 import VideoThumbnail from '../../public/assets/subscription/videos/thumb.png';
 import UAVideo from '../../public/assets/subscription/videos/UA.mp4';
 import { Container, H2, Item, Paragraph, Section, Video } from '../components';
+import { breakpoints } from '../helpers';
 import { defaultLocale } from '../locales';
 import { LocaleText } from '../renderer/LocaleText';
 import { usePageContext } from '../renderer/usePageContext';
@@ -16,6 +17,14 @@ const StyledItem = styled(Item)`
 
 const StyledContainer = styled(Container)`
   gap: 7.6rem;
+
+  ${Item} {
+    width: 100%;
+
+    ${breakpoints.desktop} {
+      width: auto;
+    }
+  }
 `;
 
 const StyledParagraph = styled(Paragraph)`

@@ -61,7 +61,15 @@ const Wrapper = styled.div<{ isFixed: boolean }>`
   z-index: 10;
   flex-direction: column;
   width: 100%;
-  position: ${({ isFixed }) => (isFixed ? 'fixed' : 'relative')};
+  position: relative;
+
+  ${({ isFixed }) =>
+    isFixed &&
+    css`
+      ${breakpoints.desktop} {
+        position: fixed;
+      }
+    `}
 `;
 
 const LangNav = styled.div`

@@ -1,45 +1,26 @@
 import { ButtonLink, H3, Paragraph } from 'landing/src/components';
 import { breakpoints } from 'landing/src/helpers';
-import { useState } from 'react';
+import { ChangeEvent, MouseEventHandler, useState } from 'react';
 import styled, { css } from 'styled-components';
 
-import { Container, H2, Item, Section } from '../components';
-import { locales } from '../locales';
+import { Container, H2, Input, Item, Section, StyledContainer } from '../components';
+import { locales, translate } from '../locales';
 import { LocaleText } from '../renderer/LocaleText';
 import { usePageContext } from '../renderer/usePageContext';
 
+type Currency = 'usd' | 'eur' | 'uah';
+
 interface SubscriptionItem {
-  title: string;
-  url: string;
-  description?: string;
+  type: 'common' | 'oneTime' | 'custom';
+  amount: SubscriptionItem['type'] extends 'common' ? number : null | number;
+  currency: Currency;
 }
 
-const usdItems: SubscriptionItem[] = [
-  { title: '25 USD', description: 'per month', url: '#' },
-  { title: '50 USD', description: 'per month', url: '#' },
-  { title: '75 USD', description: 'per month', url: '#' },
-  { title: '100 USD', description: 'per month', url: '#' },
-  { title: 'Custom', description: 'per month', url: '#' },
-  { title: '1 time donation', url: '#' },
-];
-
-const eurItems: SubscriptionItem[] = [
-  { title: '25 EUR', description: 'per month', url: '#' },
-  { title: '50 EUR', description: 'per month', url: '#' },
-  { title: '75 EUR', description: 'per month', url: '#' },
-  { title: '100 EUR', description: 'per month', url: '#' },
-  { title: 'Custom', description: 'per month', url: '#' },
-  { title: '1 time donation', url: '#' },
-];
-
-const uahItems: SubscriptionItem[] = [
-  { title: '2000 грн', description: '/ місяць', url: '#' },
-  { title: '3000 грн', description: '/ місяць', url: '#' },
-  { title: '4000 грн', description: '/ місяць', url: '#' },
-  { title: '5000 грн', description: '/ місяць', url: '#' },
-  { title: 'Інша сума', description: '/ місяць', url: '#' },
-  { title: 'Разовий донат', url: '#' },
-];
+const amountItems: Record<Currency, number[]> = {
+  usd: [25, 50, 75, 100],
+  eur: [25, 50, 75, 100],
+  uah: [2000, 3000, 4000, 5000],
+};
 
 const StyledParagraph = styled(Paragraph)`
   margin-bottom: 3rem;
@@ -104,10 +85,6 @@ const StyledItem = styled.div<{ hasDescription: boolean }>`
   padding: 3rem 1.5rem;
   text-align: center;
 
-  ${H3} {
-    margin-bottom: ${({ hasDescription }) => (hasDescription ? '0' : '5rem')};
-  }
-
   ${Paragraph} {
     margin-bottom: 3rem;
   }
@@ -121,6 +98,21 @@ const StyledItem = styled.div<{ hasDescription: boolean }>`
   ${breakpoints.desktop} {
     padding: 5rem 4rem;
   }
+
+  label {
+    color: #fff;
+  }
+
+  ${StyledContainer} {
+    margin-bottom: 2rem;
+    margin-top: -1rem;
+  }
+
+  input {
+    color: #fff;
+    background-color: transparent;
+    border-bottom-color: #fff;
+  }
 `;
 
 const Note = styled(Paragraph)`
@@ -132,11 +124,110 @@ const Note = styled(Paragraph)`
   }
 `;
 
+const StyledButtonLink = styled(ButtonLink)<{ isDisabled: boolean }>`
+  ${({ isDisabled }) =>
+    isDisabled &&
+    css`
+      pointer-events: none;
+      opacity: 0.5;
+    `}
+`;
+
+const SubscriptionItem = ({ type, amount, currency }: SubscriptionItem) => {
+  const { locale } = usePageContext();
+  const [customAmount, setCustomAmount] = useState<string | undefined>(undefined);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const description = type === 'oneTime' ? null : 'per month';
+
+  const isDisabled = isExpanded && type !== 'common' && !customAmount;
+
+  const label = type === 'oneTime' ? 'Enter donation amount' : 'Enter subscription amount';
+
+  const getHref = () => {
+    const language = currency === 'uah' ? 'ua' : 'en';
+
+    if (type === 'common') {
+      return `/pay?language=${language}&currency=${currency.toUpperCase()}&amount=${amount}&action=subscribe`;
+    }
+
+    if (type === 'oneTime' && !!customAmount) {
+      return `/pay?language=${language}&currency=${currency.toUpperCase()}&amount=${customAmount}&action=paydonation`;
+    }
+
+    if (type === 'custom' && !!customAmount) {
+      return `/pay?language=${language}&currency=${currency.toUpperCase()}&amount=${customAmount}&action=subscribe`;
+    }
+
+    return '#';
+  };
+
+  const getTitle = () => {
+    if (type === 'common') {
+      const postFix = currency === 'uah' ? 'грн' : currency;
+
+      return `${amount} ${postFix}`.toUpperCase();
+    }
+
+    if (type === 'oneTime') {
+      return '1 time donation';
+    }
+
+    return 'Custom';
+  };
+
+  const handleClick: MouseEventHandler<HTMLAnchorElement> = (e) => {
+    if (!isExpanded) {
+      e.preventDefault();
+
+      setIsExpanded(true);
+    }
+  };
+
+  return (
+    <StyledItem hasDescription={true}>
+      <H3 color="light" margin={description ? '0' : '0 0 5rem'}>
+        <LocaleText>{getTitle()}</LocaleText>
+      </H3>
+      {!!description && (
+        <Paragraph color="light">
+          <LocaleText>{description}</LocaleText>
+        </Paragraph>
+      )}
+      {isExpanded && type !== 'common' && (
+        <Input
+          label={translate(label, locale)}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setCustomAmount(e.target.value)}
+          type="number"
+          value={customAmount}
+        />
+      )}
+      <StyledButtonLink
+        href={getHref()}
+        isDisabled={isDisabled}
+        onClick={handleClick}
+        rel="noreferrer"
+        target="_blank"
+        variant="light"
+      >
+        <LocaleText>Support</LocaleText>
+      </StyledButtonLink>
+    </StyledItem>
+  );
+};
+
 export const Subscriptions = () => {
   const { locale } = usePageContext();
   const [activeTab, setActiveTab] = useState<'usd' | 'eur'>('usd');
 
-  const items = locale === locales.en ? (activeTab === 'usd' ? usdItems : eurItems) : uahItems;
+  const items =
+    locale === locales.en
+      ? activeTab === 'usd'
+        ? amountItems.usd
+        : amountItems.eur
+      : amountItems.uah;
+
+  const currency = locale === locales.en ? activeTab : 'uah';
 
   return (
     <Section background="blue" id="subscriptions">
@@ -162,17 +253,17 @@ export const Subscriptions = () => {
         </Container>
       )}
       <Container flexWrap="wrap">
-        {items.map(({ title, description, url }, i) => (
+        {items.map((amount, i) => (
           <Item flexBasis="31%" key={i}>
-            <StyledItem hasDescription={!!description}>
-              <H3 color="light">{title}</H3>
-              {!!description && <Paragraph color="light">{description}</Paragraph>}
-              <ButtonLink href={url} rel="noreferrer" target="_blank" variant="light">
-                <LocaleText>Support</LocaleText>
-              </ButtonLink>
-            </StyledItem>
+            <SubscriptionItem amount={amount} currency={currency} type="common" />
           </Item>
         ))}
+        <Item flexBasis="31%">
+          <SubscriptionItem amount={null} currency={currency} type="custom" />
+        </Item>
+        <Item flexBasis="31%">
+          <SubscriptionItem amount={null} currency={currency} type="oneTime" />
+        </Item>
       </Container>
       <Container>
         <Note color="light">