notesnook/apps/mobile/src/components/Premium/component.js

import React, { useState } from 'react';
import { ScrollView, View } from 'react-native';
import { LAUNCH_ROCKET } from '../../assets/images/assets';
import { useTracked } from '../../provider';
import { useUserStore } from '../../provider/stores';
import { DDS } from '../../services/DeviceDetection';
import { eSendEvent, presentSheet } from '../../services/EventManager';
import { getElevation } from '../../utils';
import { eOpenLoginDialog } from '../../utils/Events';
import { SIZE } from '../../utils/SizeUtils';
import umami from '../../utils/umami';
import { ActionIcon } from '../ActionIcon';
import { Button } from '../Button';
import GeneralSheet from '../GeneralSheet';
import { SvgToPngView } from '../ListPlaceholders';
import Seperator from '../Seperator';
import { Toast } from '../Toast';
import Heading from '../Typography/Heading';
import Paragraph from '../Typography/Paragraph';
import { features } from './features';
import { Group } from './group';
import { PricingPlans } from './pricing-plans';

export const Component = ({ close, promo, getRef }) => {
  const [state, dispatch] = useTracked();
  const colors = state.colors;
  const user = useUserStore(state => state.user);
  const [floatingButton, setFloatingButton] = useState(false);

  const onPress = async () => {
    if (user) {
      umami.pageView('/pro-plans', `/pro-screen`);
      presentSheet({
        context: 'pricing_plans',
        component: <PricingPlans marginTop={1} promo={promo} />
      });
    } else {
      close();
      umami.pageView('/signup', `/pro-screen`);
      setTimeout(() => {
        eSendEvent(eOpenLoginDialog, 1);
      }, 400);
    }
  };

  const onScroll = event => {
    let contentSize = event.nativeEvent.contentSize.height;
    contentSize = contentSize - event.nativeEvent.layoutMeasurement.height;
    let yOffset = event.nativeEvent.contentOffset.y;

    if (yOffset > 600 && yOffset < contentSize - 400) {
      setFloatingButton(true);
    } else {
      setFloatingButton(false);
    }
  };

  return (
    <View
      style={{
        width: '100%',
        backgroundColor: colors.bg,
        justifyContent: 'space-between',
        borderRadius: 10,
        maxHeight: '100%'
      }}
    >
      <GeneralSheet context="pricing_plans" />
      <ActionIcon
        onPress={() => {
          close();
        }}
        customStyle={{
          position: 'absolute',
          right: DDS.isTab ? 30 : 15,
          top: 30,
          zIndex: 10,
          width: 50,
          height: 50
        }}
        color={colors.pri}
        name="close"
      />

      <ScrollView
        style={{
          paddingHorizontal: DDS.isTab ? DDS.width / 5 : 0
        }}
        keyboardDismissMode="none"
        keyboardShouldPersistTaps="always"
        onScroll={onScroll}
      >
        <View
          key="top-banner"
          style={{
            width: '100%',
            alignItems: 'center',
            height: 400,
            justifyContent: 'center'
          }}
        >
          <SvgToPngView width={350} height={350} src={LAUNCH_ROCKET(colors.accent)} />
        </View>

        <Heading
          key="heading"
          size={SIZE.lg}
          style={{
            alignSelf: 'center',
            paddingTop: 20
          }}
        >
          Notesnook{' '}
          <Heading size={SIZE.lg} color={colors.accent}>
            Pro
          </Heading>
        </Heading>
        <Paragraph
          key="description"
          size={SIZE.md}
          style={{
            paddingHorizontal: 12,
            textAlign: 'center',
            alignSelf: 'center',
            paddingBottom: 20,
            width: '90%'
          }}
        >
          Ready to take the next step on your private note taking journey?
        </Paragraph>

        <Button
          key="calltoaction"
          onPress={onPress}
          title={promo ? promo.text : user ? `See all plans` : 'Try free for 14 days'}
          type="accent"
          style={{
            paddingHorizontal: 24,
            marginBottom: 10
          }}
        />

        <Seperator key="seperator" />

        {features.map((item, index) => (
          <Group key={item.title} item={item} index={index} />
        ))}

        <View
          key="plans"
          style={{
            paddingHorizontal: 12
          }}
        >
          <PricingPlans promo={promo} />
        </View>
      </ScrollView>

      {floatingButton ? (
        <Button
          onPress={onPress}
          title={promo ? promo.text : user ? `See all plans` : 'Try free for 14 days'}
          type="accent"
          style={{
            paddingHorizontal: 24,
            position: 'absolute',
            bottom: 30,
            ...getElevation(10)
          }}
        />
      ) : null}

      <Toast context="local" />
      <View
        style={{
          paddingBottom: 10
        }}
      />
    </View>
  );
};