learna.tsx

import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { StatusBar } from 'expo-status-bar';
import { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Svg, { Circle, Line } from 'react-native-svg';

import type { PaywallProps } from './types';
import { createActionPress } from './shared/actions';
import { ReplicaPressable } from './shared/pressable';
import { ReferenceCanvas } from './shared/reference-canvas';

type LearnaVariant = 'personalized' | 'trial';

const ACCENT = '#3AA0FF';
const INK = '#0C4883';
const PANEL = '#F3F4F4';
const heroSource = require('../../assets/paywalls/learna/hero.png');

function normalizeVariant(value?: string): LearnaVariant {
  switch (value) {
    case 'trial':
    case 'trial-timeline':
    case 'timeline':
      return 'trial';
    case 'personalized':
    case 'personalized-plan':
    case 'profile':
    default:
      return 'personalized';
  }
}

function CloseIcon() {
  return (
    <Svg height={16} viewBox="0 0 16 16" width={16}>
      <Line stroke="#9F9F9F" strokeLinecap="round" strokeWidth={2.1} x1={3.4} x2={12.6} y1={3.4} y2={12.6} />
      <Line stroke="#9F9F9F" strokeLinecap="round" strokeWidth={2.1} x1={12.6} x2={3.4} y1={3.4} y2={12.6} />
    </Svg>
  );
}

type ProfileCardProps = {
  label: string;
  left: number;
  top: number;
  value: string;
  width?: number;
};

function ProfileCard({ label, left, top, value, width = 169.7 }: ProfileCardProps) {
  return (
    <View style={[styles.profileCard, { left, top, width }]}>
      <Text style={styles.profileLabel}>{label}</Text>
      <Text numberOfLines={1} style={styles.profileValue}>
        {value}
      </Text>
    </View>
  );
}

function TrialSummary({ renewalSuffix, top }: { renewalSuffix: string; top: number }) {
  return (
    <>
      <View style={[styles.trialCard, { top }]}>
        <Text style={styles.trialCardText}>Free Trial Enabled</Text>
      </View>

      <View style={[styles.priceTimeline, { top: top + 70.5 }]}>
        <Svg height={39} pointerEvents="none" style={styles.priceConnector} viewBox="0 0 6 39" width={6}>
          <Line stroke="#AABFD4" strokeWidth={1.15} x1={3} x2={3} y1={7} y2={32} />
          <Circle cx={3} cy={7} fill="#AABFD4" r={3} />
          <Circle cx={3} cy={32} fill="#AABFD4" r={3} />
        </Svg>

        <Text style={[styles.priceCopy, styles.priceFirstLabel]}>Due today</Text>
        <Text style={[styles.priceCopy, styles.priceFirstValue]}>
          <Text style={styles.freeCopy}>7 days free</Text>
          {'  '}$0.00
        </Text>
        <Text style={[styles.priceCopy, styles.priceSecondLabel]}>Due June 2, 2026</Text>
        <Text style={[styles.priceCopy, styles.priceSecondValue]}>{renewalSuffix}</Text>
      </View>
    </>
  );
}

function PersonalizedVariant() {
  return (
    <>
      <View style={styles.personalizedHeading}>
        <Text style={styles.eyebrow}>Learna Pro</Text>
        <Text numberOfLines={1} style={styles.title}>Get Unlimited Access</Text>
        <Text numberOfLines={1} style={styles.subtitle}>Access your personalized learning plan.</Text>
      </View>

      <ProfileCard label="COURSE" left={21} top={380.7} value="🇫🇷  French" />
      <ProfileCard label="YOUR LEVEL" left={199.3} top={380.7} value="📊  Beginner" />
      <ProfileCard label="FOCUS AREA" left={21} top={442} value="💼  Career & job, 👩‍❤️‍💋‍👩" />
      <ProfileCard label="DURATION" left={199.3} top={442} value="⏱️  15 min / day" />
      <ProfileCard
        label="INTERESTS"
        left={21}
        top={503.3}
        value="🥑  Food, 🧳  Traveling, 🍳  Cooking, 🎤  Pop Culture"
        width={348}
      />

      <TrialSummary renewalSuffix="$14.99/week" top={575} />
    </>
  );
}

type TrialStepProps = {
  body?: string;
  emoji: string;
  selected?: boolean;
  title: string;
  top: number;
};

function TrialStep({ body, emoji, selected = false, title, top }: TrialStepProps) {
  return (
    <View style={[styles.step, { top }]}>
      <View style={[styles.stepNode, selected && styles.stepNodeSelected]}>
        <View style={[styles.stepNodeCore, selected && styles.stepNodeCoreSelected]}>
          <Text style={styles.stepEmoji}>{emoji}</Text>
        </View>
      </View>
      <Text style={[styles.stepTitle, selected && styles.stepTitleSelected]}>{title}</Text>
      {body ? <Text numberOfLines={1} style={styles.stepBody}>{body}</Text> : null}
    </View>
  );
}

function TrialVariant() {
  return (
    <>
      <View style={styles.timelineHeading}>
        <Text style={styles.eyebrow}>Learna Pro</Text>
        <Text numberOfLines={1} style={styles.title}>Get Unlimited Access</Text>
        <Text style={styles.timelineSubtitle}>
          Accessible anytime, anywhere for{`\n`}flexible learning.
        </Text>
      </View>

      <View pointerEvents="none" style={styles.stepsConnector}>
        <View style={styles.stepsConnectorBlue} />
        <View style={styles.stepsConnectorGray} />
      </View>
      <TrialStep emoji="🔒" selected title="Start your free trial" top={362} />
      <TrialStep
        body="We will remind you when your trial will end"
        emoji="🔔"
        title="Get a reminder"
        top={434}
      />
      <TrialStep
        body="$14.99 per week starting Jun 2"
        emoji="⭐"
        title="Start your subscription"
        top={506.3}
      />

      <TrialSummary renewalSuffix="$14.99" top={579} />
    </>
  );
}

export function LearnaPaywall({
  initialVariant,
  onActionPress,
  onClosePress,
  onPurchasePress,
  onRestorePress,
  replayKey,
}: PaywallProps) {
  const [variant, setVariant] = useState<LearnaVariant>(() => normalizeVariant(initialVariant));

  useEffect(() => {
    const frame = requestAnimationFrame(() => {
      setVariant(normalizeVariant(initialVariant));
    });
    return () => cancelAnimationFrame(frame);
  }, [initialVariant, replayKey]);

  const close = createActionPress({
    actionId: 'learna.close',
    fallback: onClosePress,
    haptic: 'light',
    onActionPress,
  });
  const restore = createActionPress({
    actionId: 'learna.restore',
    fallback: onRestorePress,
    onActionPress,
  });
  const purchase = createActionPress({
    actionId: 'learna.try-free',
    fallback: onPurchasePress,
    haptic: 'light',
    onActionPress,
  });

  return (
    <ReferenceCanvas backgroundColor="#FFFFFF" testID={`paywall-learna-${variant}`}>
      <StatusBar style="dark" />
      <LinearGradient
        colors={['#B9DCFF', '#B4D9FB', '#D6ECFF', '#FFFFFF']}
        locations={[0, 0.095, 0.58, 1]}
        pointerEvents="none"
        style={styles.heroBackdrop}
      />
      <Image contentFit="cover" pointerEvents="none" source={heroSource} style={styles.hero} />
      <LinearGradient
        colors={[
          'rgba(180,217,251,1)',
          'rgba(255,255,255,0.29)',
          'rgba(255,255,255,0.26)',
          'rgba(255,255,255,1)',
        ]}
        locations={[0, 0.08, 0.48, 1]}
        pointerEvents="none"
        style={styles.heroWash}
      />

      <ReplicaPressable accessibilityLabel="Close Learna Pro" onPress={close} style={styles.closeButton}>
        <CloseIcon />
      </ReplicaPressable>
      <ReplicaPressable accessibilityLabel="Restore Learna purchases" onPress={restore} style={styles.restoreButton}>
        <Text style={styles.restoreText}>Restore</Text>
      </ReplicaPressable>

      {variant === 'personalized' ? <PersonalizedVariant /> : <TrialVariant />}

      <ReplicaPressable accessibilityLabel="Try Learna Pro free" onPress={purchase} style={styles.tryButton}>
        <View pointerEvents="none" style={styles.tryButtonFace} />
        <Text style={styles.tryButtonText}>Try Free</Text>
      </ReplicaPressable>

      <View style={styles.footer}>
        <View style={styles.legalLinks}>
          <ReplicaPressable
            accessibilityLabel="Learna privacy policy"
            accessibilityRole="link"
            onPress={createActionPress({ actionId: 'learna.privacy', onActionPress })}
          >
            <Text style={styles.legalLink}>Privacy</Text>
          </ReplicaPressable>
          <Text style={styles.legalDivider}> | </Text>
          <ReplicaPressable
            accessibilityLabel="Learna terms"
            accessibilityRole="link"
            onPress={createActionPress({ actionId: 'learna.terms', onActionPress })}
          >
            <Text style={styles.legalLink}>Terms</Text>
          </ReplicaPressable>
        </View>
        <Text style={styles.cancelAnytime}>Cancel Anytime</Text>
      </View>
    </ReferenceCanvas>
  );
}

const styles = StyleSheet.create({
  hero: {
    height: 256,
    left: 0,
    position: 'absolute',
    top: 27,
    width: 390,
  },
  heroBackdrop: {
    height: 283,
    left: 0,
    position: 'absolute',
    top: 0,
    width: 390,
  },
  heroWash: {
    height: 256,
    left: 0,
    position: 'absolute',
    top: 27,
    width: 390,
  },
  closeButton: {
    alignItems: 'center',
    backgroundColor: PANEL,
    borderRadius: 15.5,
    height: 31,
    justifyContent: 'center',
    left: 16.7,
    position: 'absolute',
    top: 63.7,
    width: 31,
  },
  restoreButton: {
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    borderRadius: 15.5,
    height: 31,
    justifyContent: 'center',
    left: 305,
    position: 'absolute',
    top: 63.7,
    width: 68.3,
  },
  restoreText: {
    color: '#A6A6A6',
    fontFamily: 'Nunito_400Regular',
    fontSize: 12.2,
    lineHeight: 16,
  },
  personalizedHeading: {
    alignItems: 'center',
    height: 105,
    left: 20,
    position: 'absolute',
    top: 265.5,
    width: 350,
  },
  timelineHeading: {
    alignItems: 'center',
    height: 122,
    left: 20,
    position: 'absolute',
    top: 212.5,
    width: 350,
  },
  eyebrow: {
    color: ACCENT,
    fontFamily: 'Nunito_800ExtraBold',
    fontSize: 19.2,
    lineHeight: 24,
    textAlign: 'center',
  },
  title: {
    color: INK,
    fontFamily: 'Nunito_900Black',
    fontSize: 34,
    letterSpacing: -0.8,
    lineHeight: 42,
    marginTop: 5,
    textAlign: 'center',
  },
  subtitle: {
    color: INK,
    fontFamily: 'Nunito_400Regular',
    fontSize: 17.1,
    letterSpacing: -0.2,
    lineHeight: 22,
    marginTop: 1.5,
    textAlign: 'center',
  },
  timelineSubtitle: {
    color: INK,
    fontFamily: 'Nunito_400Regular',
    fontSize: 17,
    letterSpacing: -0.25,
    lineHeight: 23.5,
    marginTop: 1.5,
    textAlign: 'center',
  },
  profileCard: {
    backgroundColor: '#F6F7F9',
    borderRadius: 16,
    height: 55,
    overflow: 'hidden',
    paddingLeft: 17.5,
    position: 'absolute',
    paddingRight: 9,
    paddingTop: 9.5,
  },
  profileLabel: {
    color: '#A6A6A6',
    fontFamily: 'Nunito_700Bold',
    fontSize: 10.8,
    lineHeight: 14,
  },
  profileValue: {
    color: INK,
    fontFamily: 'Nunito_700Bold',
    fontSize: 15.2,
    letterSpacing: -0.15,
    lineHeight: 21,
    marginTop: 1.2,
  },
  trialCard: {
    backgroundColor: PANEL,
    borderRadius: 21,
    height: 62.3,
    justifyContent: 'center',
    left: 21,
    paddingLeft: 20.5,
    position: 'absolute',
    width: 348,
  },
  trialCardText: {
    color: INK,
    fontFamily: 'Nunito_700Bold',
    fontSize: 16.7,
    letterSpacing: -0.2,
    lineHeight: 22,
  },
  priceTimeline: {
    height: 70,
    left: 21,
    position: 'absolute',
    width: 348,
  },
  priceConnector: {
    left: 0,
    position: 'absolute',
    top: 0,
  },
  priceCopy: {
    color: INK,
    fontFamily: 'Nunito_400Regular',
    fontSize: 16.2,
    letterSpacing: -0.25,
    lineHeight: 22,
    position: 'absolute',
  },
  priceFirstLabel: {
    left: 16,
    top: 0,
  },
  priceFirstValue: {
    right: 0,
    top: 0,
  },
  priceSecondLabel: {
    fontFamily: 'Nunito_700Bold',
    left: 16,
    top: 29,
  },
  priceSecondValue: {
    fontFamily: 'Nunito_700Bold',
    right: 0,
    top: 29,
  },
  freeCopy: {
    color: '#36C868',
    fontFamily: 'Nunito_700Bold',
  },
  stepsConnector: {
    height: 153,
    left: 43.8,
    position: 'absolute',
    top: 407,
    width: 2,
  },
  stepsConnectorBlue: {
    backgroundColor: '#9ED1FF',
    height: 32,
    width: 2,
  },
  stepsConnectorGray: {
    backgroundColor: '#F1F2F2',
    flex: 1,
    width: 2,
  },
  step: {
    height: 58,
    left: 21,
    position: 'absolute',
    width: 358,
  },
  stepNode: {
    alignItems: 'center',
    backgroundColor: PANEL,
    borderRadius: 18.5,
    height: 37,
    justifyContent: 'center',
    left: 5,
    position: 'absolute',
    top: 0,
    width: 37,
  },
  stepNodeSelected: {
    backgroundColor: ACCENT,
    borderRadius: 23.7,
    height: 47.4,
    left: 0,
    top: 0,
    width: 47.4,
  },
  stepNodeCore: {
    alignItems: 'center',
    height: 30,
    justifyContent: 'center',
    width: 30,
  },
  stepNodeCoreSelected: {
    backgroundColor: '#FFFFFF',
    borderRadius: 17,
    height: 34,
    width: 34,
  },
  stepEmoji: {
    fontSize: 16.5,
    lineHeight: 22,
    textAlign: 'center',
  },
  stepTitle: {
    color: INK,
    fontFamily: 'Nunito_800ExtraBold',
    fontSize: 16.7,
    left: 62,
    letterSpacing: -0.15,
    lineHeight: 22,
    position: 'absolute',
    top: 3,
  },
  stepTitleSelected: {
    color: ACCENT,
    top: 14.5,
  },
  stepBody: {
    color: '#909090',
    fontFamily: 'Nunito_400Regular',
    fontSize: 14.5,
    left: 62,
    letterSpacing: -0.2,
    lineHeight: 20,
    position: 'absolute',
    top: 25,
    width: 295,
  },
  tryButton: {
    backgroundColor: '#2F80CC',
    borderRadius: 16,
    height: 62,
    left: 21,
    overflow: 'hidden',
    position: 'absolute',
    top: 720.7,
    width: 348,
  },
  tryButtonFace: {
    backgroundColor: ACCENT,
    borderRadius: 16,
    height: 56.7,
    left: 0,
    position: 'absolute',
    top: 0,
    width: 348,
  },
  tryButtonText: {
    color: '#FFFFFF',
    fontFamily: 'Nunito_700Bold',
    fontSize: 17.3,
    lineHeight: 23,
    marginTop: 16,
    textAlign: 'center',
  },
  footer: {
    alignItems: 'center',
    flexDirection: 'row',
    height: 20,
    justifyContent: 'space-between',
    left: 21,
    position: 'absolute',
    top: 792.5,
    width: 348,
  },
  legalLinks: {
    alignItems: 'center',
    flexDirection: 'row',
  },
  legalLink: {
    color: INK,
    fontFamily: 'Nunito_400Regular',
    fontSize: 11.3,
    lineHeight: 15,
    textDecorationLine: 'underline',
  },
  legalDivider: {
    color: INK,
    fontFamily: 'Nunito_400Regular',
    fontSize: 11.3,
    lineHeight: 15,
  },
  cancelAnytime: {
    color: '#84A3C1',
    fontFamily: 'Nunito_400Regular',
    fontSize: 11.3,
    lineHeight: 15,
  },
});