@neko-os/rc-subscription 0.1.0

package/dist/locales/ru.js

@@ -0,0 +1,30 @@
+export var subscriptionRU = {
+  settings: {
+    linkLabel: 'Подписка'
+  },
+  paywall: {
+    title: 'Стать Premium',
+    subtitle: 'Разблокируйте все функции',
+    cta: 'Продолжить',
+    ctaTrial: 'Начать бесплатный пробный период',
+    restore: 'Восстановить покупки',
+    monthly: 'Ежемесячно',
+    yearly: 'Ежегодно',
+    lifetime: 'Навсегда',
+    perMonth: '{{price}}/мес.',
+    save: 'Скидка {{percent}}%',
+    freeTrial: '{{count}} дней бесплатно',
+    free: 'Бесплатно',
+    pro: 'Pro'
+  },
+  cta: {
+    unlock: 'Разблокировать полный доступ'
+  },
+  active: {
+    title: 'Подписка',
+    plan: 'План',
+    expires: 'Истекает',
+    lifetime: 'Пожизненный доступ',
+    manage: 'Управление подпиской'
+  }
+};

package/dist/locales/sv.js

@@ -0,0 +1,30 @@
+export var subscriptionSV = {
+  settings: {
+    linkLabel: 'Prenumeration'
+  },
+  paywall: {
+    title: 'Bli Premium',
+    subtitle: 'Lås upp alla funktioner',
+    cta: 'Fortsätt',
+    ctaTrial: 'Starta gratis provperiod',
+    restore: 'Återställ köp',
+    monthly: 'Månadsvis',
+    yearly: 'Årsvis',
+    lifetime: 'Livstid',
+    perMonth: '{{price}}/mån',
+    save: 'Spara {{percent}}%',
+    freeTrial: '{{count}} dagar gratis',
+    free: 'Gratis',
+    pro: 'Pro'
+  },
+  cta: {
+    unlock: 'Lås upp full åtkomst'
+  },
+  active: {
+    title: 'Prenumeration',
+    plan: 'Plan',
+    expires: 'Löper ut',
+    lifetime: 'Livstidsåtkomst',
+    manage: 'Hantera prenumeration'
+  }
+};

package/dist/locales/th.js

@@ -0,0 +1,30 @@
+export var subscriptionTH = {
+  settings: {
+    linkLabel: 'การสมัครสมาชิก'
+  },
+  paywall: {
+    title: 'อัปเกรดเป็น Premium',
+    subtitle: 'ปลดล็อกฟีเจอร์ทั้งหมด',
+    cta: 'ดำเนินการต่อ',
+    ctaTrial: 'เริ่มทดลองใช้ฟรี',
+    restore: 'กู้คืนการซื้อ',
+    monthly: 'รายเดือน',
+    yearly: 'รายปี',
+    lifetime: 'ตลอดชีพ',
+    perMonth: '{{price}}/เดือน',
+    save: 'ประหยัด {{percent}}%',
+    freeTrial: 'ฟรี {{count}} วัน',
+    free: 'ฟรี',
+    pro: 'Pro'
+  },
+  cta: {
+    unlock: 'ปลดล็อกการเข้าถึงเต็มรูปแบบ'
+  },
+  active: {
+    title: 'การสมัครสมาชิก',
+    plan: 'แผน',
+    expires: 'หมดอายุ',
+    lifetime: 'เข้าถึงตลอดชีพ',
+    manage: 'จัดการการสมัครสมาชิก'
+  }
+};

package/dist/locales/tr.js

@@ -0,0 +1,30 @@
+export var subscriptionTR = {
+  settings: {
+    linkLabel: 'Abonelik'
+  },
+  paywall: {
+    title: 'Premium\'a Geç',
+    subtitle: 'Tüm özelliklerin kilidini aç',
+    cta: 'Devam et',
+    ctaTrial: 'Ücretsiz denemeyi başlat',
+    restore: 'Satın alımları geri yükle',
+    monthly: 'Aylık',
+    yearly: 'Yıllık',
+    lifetime: 'Ömür boyu',
+    perMonth: '{{price}}/ay',
+    save: '%{{percent}} tasarruf',
+    freeTrial: '{{count}} gün ücretsiz',
+    free: 'Ücretsiz',
+    pro: 'Pro'
+  },
+  cta: {
+    unlock: 'Tam erişimin kilidini aç'
+  },
+  active: {
+    title: 'Abonelik',
+    plan: 'Plan',
+    expires: 'Sona erme',
+    lifetime: 'Ömür boyu erişim',
+    manage: 'Aboneliği yönet'
+  }
+};

package/dist/locales/uk.js

@@ -0,0 +1,30 @@
+export var subscriptionUK = {
+  settings: {
+    linkLabel: 'Підписка'
+  },
+  paywall: {
+    title: 'Стати Premium',
+    subtitle: 'Розблокуйте всі функції',
+    cta: 'Продовжити',
+    ctaTrial: 'Почати безкоштовний пробний період',
+    restore: 'Відновити покупки',
+    monthly: 'Щомісячно',
+    yearly: 'Щорічно',
+    lifetime: 'Назавжди',
+    perMonth: '{{price}}/міс.',
+    save: 'Знижка {{percent}}%',
+    freeTrial: '{{count}} днів безкоштовно',
+    free: 'Безкоштовно',
+    pro: 'Pro'
+  },
+  cta: {
+    unlock: 'Розблокувати повний доступ'
+  },
+  active: {
+    title: 'Підписка',
+    plan: 'План',
+    expires: 'Закінчується',
+    lifetime: 'Довічний доступ',
+    manage: 'Керувати підпискою'
+  }
+};

package/dist/locales/vi.js

@@ -0,0 +1,30 @@
+export var subscriptionVI = {
+  settings: {
+    linkLabel: 'Gói đăng ký'
+  },
+  paywall: {
+    title: 'Nâng cấp Premium',
+    subtitle: 'Mở khóa tất cả tính năng',
+    cta: 'Tiếp tục',
+    ctaTrial: 'Bắt đầu dùng thử miễn phí',
+    restore: 'Khôi phục giao dịch',
+    monthly: 'Hàng tháng',
+    yearly: 'Hàng năm',
+    lifetime: 'Trọn đời',
+    perMonth: '{{price}}/tháng',
+    save: 'Tiết kiệm {{percent}}%',
+    freeTrial: 'Miễn phí {{count}} ngày',
+    free: 'Miễn phí',
+    pro: 'Pro'
+  },
+  cta: {
+    unlock: 'Mở khóa toàn bộ quyền truy cập'
+  },
+  active: {
+    title: 'Gói đăng ký',
+    plan: 'Gói',
+    expires: 'Hết hạn',
+    lifetime: 'Truy cập trọn đời',
+    manage: 'Quản lý gói đăng ký'
+  }
+};

package/dist/locales/zh.js

@@ -0,0 +1,30 @@
+export var subscriptionZH = {
+  settings: {
+    linkLabel: '订阅'
+  },
+  paywall: {
+    title: '升级高级版',
+    subtitle: '解锁所有功能',
+    cta: '继续',
+    ctaTrial: '开始免费试用',
+    restore: '恢复购买',
+    monthly: '月付',
+    yearly: '年付',
+    lifetime: '终身',
+    perMonth: '{{price}}/月',
+    save: '节省 {{percent}}%',
+    freeTrial: '免费 {{count}} 天',
+    free: '免费',
+    pro: 'Pro'
+  },
+  cta: {
+    unlock: '解锁完整访问权限'
+  },
+  active: {
+    title: '订阅',
+    plan: '方案',
+    expires: '到期时间',
+    lifetime: '终身访问',
+    manage: '管理订阅'
+  }
+};

package/dist/views/active/ActiveSubscriptionView.js

@@ -0,0 +1,51 @@
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-rc-subscription/src/views/active/ActiveSubscriptionView.js";function asyncGeneratorStep(n, t, e, r, o, a, c) {try {var i = n[a](c),u = i.value;} catch (n) {return void e(n);}i.done ? t(u) : Promise.resolve(u).then(r, o);}function _asyncToGenerator(n) {return function () {var t = this,e = arguments;return new Promise(function (r, o) {var a = n.apply(t, e);function _next(n) {asyncGeneratorStep(a, r, o, _next, _throw, "next", n);}function _throw(n) {asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);}_next(void 0);});};}import { Button, Section, SectionItem, TopBar, View, useTranslation } from '@neko-os/ui';
+import { Linking } from "react-native-web";
+import { useNavigation } from '@react-navigation/native';
+import dayjs from 'dayjs';
+
+import { RC_ENTITLEMENT_ID } from "../../config";
+import SubscriptionRequired from "../../containers/SubscriptionRequired";
+import { useSubscription } from "../../containers/SubscriptionHandler";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+function ActiveSubscriptionContent() {var _customerInfo$entitle, _customerInfo$entitle2;
+  var _useTranslation = useTranslation('subscription'),t = _useTranslation.t;
+  var _useSubscription = useSubscription(),customerInfo = _useSubscription.customerInfo;
+
+  var entitlement = customerInfo == null ? void 0 : (_customerInfo$entitle = customerInfo.entitlements) == null ? void 0 : (_customerInfo$entitle2 = _customerInfo$entitle.active) == null ? void 0 : _customerInfo$entitle2[RC_ENTITLEMENT_ID];function
+
+  handleManage() {return _handleManage.apply(this, arguments);}function _handleManage() {_handleManage = _asyncToGenerator(function* () {
+      if (customerInfo != null && customerInfo.managementURL) yield Linking.openURL(customerInfo.managementURL);
+    });return _handleManage.apply(this, arguments);}
+
+  return (
+    _jsxs(View, { flex: true, padding: "md", gap: "md", children: [
+      _jsxs(Section, { children: [
+        _jsx(SectionItem, { label: t('active.plan'), value: (entitlement == null ? void 0 : entitlement.identifier) || '-' }),
+        entitlement != null && entitlement.expirationDate ?
+        _jsx(SectionItem, { label: t('active.expires'), value: dayjs(entitlement.expirationDate).format('LL') }) :
+
+        _jsx(SectionItem, { label: t('active.expires'), value: t('active.lifetime') })] }
+
+      ),
+      (customerInfo == null ? void 0 : customerInfo.managementURL) && _jsx(Button, { label: t('active.manage'), onPress: handleManage })] }
+    ));
+
+}
+
+export default function ActiveSubscriptionView() {
+  var _useTranslation2 = useTranslation('subscription'),t = _useTranslation2.t;
+  var _useNavigation = useNavigation(),goBack = _useNavigation.goBack;
+
+  return (
+    _jsx(View, { flex: true, bg: "mainBG", children:
+      _jsxs(SubscriptionRequired, { showReturn: true, children: [
+        _jsx(TopBar, {
+          title: t('active.title'),
+          left: _jsx(Button, { icon: "arrow-left-s-line", ratio: 1, mainBG: true, onPress: goBack }) }
+        ),
+
+        _jsx(ActiveSubscriptionContent, {})] }
+      ) }
+    ));
+
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@neko-os/rc-subscription",
+  "version": "0.1.0",
+  "license": "MIT",
+  "author": "Christian Storch <ccstorch@gmail.com>",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "react-native": "src/index.js",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && babel src --out-dir dist --extensions \".js,.jsx\" --copy-files",
+    "watch": "babel src --out-dir dist --extensions \".js,.jsx\" --copy-files --watch",
+    "dev": "yarn build && yarn watch",
+    "prepublishOnly": "yarn build",
+    "publish": "npm publish --access public"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@neko-os/ui": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-purchases": "*",
+    "react-native-reanimated": "*",
+    "react-native-safe-area-context": "*",
+    "@react-navigation/native": "*",
+    "dayjs": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-native-reanimated": {
+      "optional": true
+    },
+    "react-native-safe-area-context": {
+      "optional": true
+    },
+    "@react-navigation/native": {
+      "optional": true
+    },
+    "dayjs": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@babel/cli": "^7",
+    "@babel/core": "^7",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "metro-react-native-babel-preset": "^0.77.0"
+  }
+}

package/src/config.js

@@ -0,0 +1,5 @@
+import { Platform } from 'react-native'
+
+export const RC_API_KEY =
+  Platform.OS === 'ios' ? process.env.EXPO_PUBLIC_RC_API_KEY_IOS : process.env.EXPO_PUBLIC_RC_API_KEY_ANDROID
+export const RC_ENTITLEMENT_ID = process.env.EXPO_PUBLIC_RC_ENTITLEMENT_ID || 'premium'

package/src/containers/SubscriptionHandler.js

@@ -0,0 +1,75 @@
+import React, { createContext, useContext, useEffect, useState } from 'react'
+import Purchases from 'react-native-purchases'
+
+import { RC_API_KEY, RC_ENTITLEMENT_ID } from '../config'
+
+const SubscriptionContext = createContext({
+  isSubscribed: false,
+  isLoading: true,
+  customerInfo: null,
+  offerings: null,
+  paywallConfig: null,
+  refresh: async () => {},
+})
+
+export function useSubscription() {
+  return useContext(SubscriptionContext)
+}
+
+export function useIsSubscribed() {
+  return useContext(SubscriptionContext).isSubscribed
+}
+
+export default function SubscriptionHandler({ children, paywallConfig }) {
+  const [isSubscribed, setIsSubscribed] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+  const [customerInfo, setCustomerInfo] = useState(null)
+  const [offerings, setOfferings] = useState(null)
+
+  async function refresh() {
+    try {
+      const info = await Purchases.getCustomerInfo()
+      setCustomerInfo(info)
+      setIsSubscribed(!!info?.entitlements?.active?.[RC_ENTITLEMENT_ID])
+    } catch (_) {}
+  }
+
+  useEffect(() => {
+    if (!RC_API_KEY) {
+      setIsLoading(false)
+      return
+    }
+
+    function handleCustomerInfo(info) {
+      setCustomerInfo(info)
+      setIsSubscribed(!!info?.entitlements?.active?.[RC_ENTITLEMENT_ID])
+    }
+
+    Purchases.configure({ apiKey: RC_API_KEY })
+
+    ;(async () => {
+      try {
+        const [info, offeringsResult] = await Promise.all([
+          Purchases.getCustomerInfo(),
+          Purchases.getOfferings(),
+        ])
+        handleCustomerInfo(info)
+        setOfferings(offeringsResult)
+      } catch (_) {
+      } finally {
+        setIsLoading(false)
+      }
+    })()
+
+    Purchases.addCustomerInfoUpdateListener(handleCustomerInfo)
+    return () => Purchases.removeCustomerInfoUpdateListener(handleCustomerInfo)
+  }, [])
+
+  return (
+    <SubscriptionContext.Provider
+      value={{ isSubscribed, isLoading, customerInfo, offerings, paywallConfig, refresh }}
+    >
+      {children}
+    </SubscriptionContext.Provider>
+  )
+}

package/src/containers/SubscriptionRequired.js

@@ -0,0 +1,11 @@
+import { Loading } from '@neko-os/ui'
+
+import Paywall from './paywall/Paywall'
+import { useSubscription } from './SubscriptionHandler'
+
+export default function SubscriptionRequired({ children, disabled = false, modal, showReturn, footerPaddingB }) {
+  const { isSubscribed, isLoading } = useSubscription()
+  if (disabled || isSubscribed) return children
+  if (isLoading) return <Loading />
+  return <Paywall modal={modal} showReturn={showReturn} footerPaddingB={footerPaddingB} />
+}

package/src/containers/SubscriptionRequiredCTA.js

@@ -0,0 +1,37 @@
+import { BlurView, Button, View, useTranslation } from '@neko-os/ui'
+import { useNavigation } from '@react-navigation/native'
+
+import { useIsSubscribed } from './SubscriptionHandler'
+
+export default function SubscriptionRequiredCTA({
+  children,
+  disabled = false,
+  hideButton = false,
+  size,
+  buttonProps,
+  ...props
+}) {
+  const { t } = useTranslation('subscription')
+  const { navigate } = useNavigation()
+  const isSubscribed = useIsSubscribed()
+
+  if (disabled || isSubscribed) return children
+
+  return (
+    <View relative hiddenOverflow {...props}>
+      {children}
+      <BlurView absoluteFill center zIndex={10} intensity={18} onPress={() => navigate('subscription/active')}>
+        {!hideButton && (
+          <Button
+            label={t('cta.unlock')}
+            icon="trophy-fill"
+            yellow
+            size={size || 'xs'}
+            {...buttonProps}
+            onPress={() => navigate('subscription/active')}
+          />
+        )}
+      </BlurView>
+    </View>
+  )
+}

package/src/containers/paywall/Paywall.js

@@ -0,0 +1,130 @@
+import {
+  AnimatedTopBar,
+  BlurView,
+  ReanimatedScrollHandler,
+  ScrollView,
+  View,
+  useReanimatedScroll,
+  useTranslation,
+} from '@neko-os/ui'
+import { Platform } from 'react-native'
+import { useState } from 'react'
+import Animated from 'react-native-reanimated'
+
+import { useSubscription } from '../SubscriptionHandler'
+import PaywallFeatures from './PaywallFeatures'
+import PaywallFooter from './PaywallFooter'
+import PaywallHero from './PaywallHero'
+import PaywallPlanCard from './PaywallPlanCard'
+import PaywallReturnIcon from './PaywallReturnIcon'
+import usePaywallActions from './_request/usePaywallActions'
+
+const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView)
+
+function getAvailablePackages(offerings) {
+  if (!offerings?.current) return []
+  const { annual, monthly, lifetime } = offerings.current
+  return [annual, monthly, lifetime].filter(Boolean)
+}
+
+function getTrialDays(pkg) {
+  const intro = pkg?.product?.introPrice
+  if (!intro || intro.price > 0) return null
+  const units = intro.periodNumberOfUnits || 0
+  const unit = intro.periodUnit?.toUpperCase()
+  if (unit === 'DAY') return units
+  if (unit === 'WEEK') return units * 7
+  if (unit === 'MONTH') return units * 30
+  return units
+}
+
+function PaywallScrollContent({
+  image,
+  title,
+  subtitle,
+  features,
+  packages,
+  selectedPkg,
+  onSelect,
+  monthlyPrice,
+  showReturnIcon,
+  modal,
+}) {
+  const { scrollHandler } = useReanimatedScroll()
+
+  return (
+    <AnimatedScrollView onScroll={scrollHandler}>
+      <PaywallHero image={image} title={title} subtitle={subtitle} showReturnIcon={showReturnIcon} modal={modal} />
+      <PaywallFeatures features={features} />
+
+      <View gap="xs" paddingH="md" paddingT="sm">
+        {packages.map((pkg) => (
+          <PaywallPlanCard
+            key={pkg.identifier}
+            pkg={pkg}
+            selected={selectedPkg?.identifier === pkg.identifier}
+            onSelect={onSelect}
+            monthlyPrice={monthlyPrice}
+          />
+        ))}
+      </View>
+      <View height={200} />
+    </AnimatedScrollView>
+  )
+}
+
+export default function Paywall({ modal, showReturn, footerPaddingB }) {
+  const { t } = useTranslation('subscription')
+  const { offerings, paywallConfig } = useSubscription()
+  const { handlePurchase, handleRestore, loading } = usePaywallActions()
+
+  const packages = getAvailablePackages(offerings)
+  const [selectedPkg, setSelectedPkg] = useState(() => packages[0] || null)
+
+  const monthlyPrice = packages.find((p) => p.packageType === 'MONTHLY')?.product?.price
+  const trialDays = getTrialDays(selectedPkg)
+
+  const title = paywallConfig?.title || t('paywall.title')
+  const subtitle = paywallConfig?.subtitle || t('paywall.subtitle')
+  const image = paywallConfig?.image
+  const features = paywallConfig?.features
+  const showReturnIcon = modal || showReturn
+
+  return (
+    <View flex bg="mainBG">
+      <ReanimatedScrollHandler>
+        <AnimatedTopBar
+          WrapperView={BlurView}
+          title={title}
+          subtitle={subtitle}
+          slide
+          shadow
+          showAfter={230}
+          useSafeArea={!(modal && Platform.OS === 'ios')}
+          left={showReturnIcon && <PaywallReturnIcon modal={modal} />}
+        />
+
+        <PaywallScrollContent
+          image={image}
+          title={title}
+          subtitle={subtitle}
+          features={features}
+          packages={packages}
+          selectedPkg={selectedPkg}
+          onSelect={setSelectedPkg}
+          monthlyPrice={monthlyPrice}
+          showReturnIcon={showReturnIcon}
+          modal={modal}
+        />
+      </ReanimatedScrollHandler>
+
+      <PaywallFooter
+        onPurchase={() => handlePurchase(selectedPkg)}
+        onRestore={handleRestore}
+        loading={loading}
+        trialDays={trialDays}
+        footerPaddingB={footerPaddingB}
+      />
+    </View>
+  )
+}

package/src/containers/paywall/PaywallFeatures.js

@@ -0,0 +1,42 @@
+import { Icon, Text, View, useTranslation } from '@neko-os/ui'
+
+export default function PaywallFeatures({ features }) {
+  const { t } = useTranslation('subscription')
+
+  if (!features?.length) return null
+
+  return (
+    <View paddingH="xl" paddingB="md">
+      <View row paddingB="xs">
+        <View flex />
+        <Text xs text3 center width={40}>
+          {t('paywall.free')}
+        </Text>
+        <Text xs strong center width={40} color="primary">
+          {t('paywall.pro')}
+        </Text>
+      </View>
+
+      {features.map((feature, i) => (
+        <View key={i} row centerV paddingV="sm">
+          <View flex row gap="sm" centerV>
+            <Icon name={feature.icon || 'check-line'} size="sm" />
+            <Text sm flex>
+              {t(feature.label)}
+            </Text>
+          </View>
+          <View width={40} center>
+            {feature.free ? (
+              <Icon name="checkbox-circle-fill" primary size="sm" />
+            ) : (
+              <Icon name="close-circle-fill" color="text4_op40" size="sm" />
+            )}
+          </View>
+          <View width={40} center>
+            <Icon name="checkbox-circle-fill" primary size="sm" />
+          </View>
+        </View>
+      ))}
+    </View>
+  )
+}

package/src/containers/paywall/PaywallFooter.js

@@ -0,0 +1,16 @@
+import { Button, Link, View, useTranslation } from '@neko-os/ui'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+export default function PaywallFooter({ onPurchase, onRestore, loading, trialDays, footerPaddingB }) {
+  const { t } = useTranslation('subscription')
+  const { bottom } = useSafeAreaInsets()
+
+  const ctaLabel = trialDays ? t('paywall.ctaTrial') : t('paywall.cta')
+
+  return (
+    <View gap="sm" padding="md" paddingB={footerPaddingB || Math.max(bottom / 2, 16)} borderT shadow={!footerPaddingB}>
+      <Button label={ctaLabel} onPress={onPurchase} disabled={loading} loading={loading} />
+      <Link label={t('paywall.restore')} onPress={onRestore} disabled={loading} xs text3 center underline />
+    </View>
+  )
+}

package/src/containers/paywall/PaywallHero.js

@@ -0,0 +1,33 @@
+import { Image, ParallaxHeader, SafeAreaView, Text, View } from '@neko-os/ui'
+
+import PaywallReturnIcon from './PaywallReturnIcon'
+
+export default function PaywallHero({ image, title, subtitle, showReturnIcon, modal }) {
+  const IMAGE_HEIGHT = modal ? 180 : 280
+  return (
+    <>
+      {image && (
+        <ParallaxHeader height={IMAGE_HEIGHT} disableResistence>
+          <Image source={image} height={IMAGE_HEIGHT} fullW br={0} />
+        </ParallaxHeader>
+      )}
+
+      {showReturnIcon && (
+        <SafeAreaView absolute top="sm" left="md" zIndex={100}>
+          <PaywallReturnIcon modal={modal} />
+        </SafeAreaView>
+      )}
+
+      <View brT="xxxl" bg="mainBG" marginT={-25} paddingH="md" gap="xs" paddingV="xl">
+        <Text h2 strong center>
+          {title}
+        </Text>
+        {subtitle && (
+          <Text sm text3 center>
+            {subtitle}
+          </Text>
+        )}
+      </View>
+    </>
+  )
+}