@umituz/react-native-subscription 2.12.2 → 2.12.3

package/src/presentation/components/paywall/accordion/AccordionPlanCardTypes.ts

@@ -1,39 +0,0 @@
-/**
- * Accordion Plan Card Types
- * Type definitions for accordion-style subscription cards
- */
-
-import type { PurchasesPackage } from "react-native-purchases";
-
-export interface AccordionPlanCardProps {
-  package: PurchasesPackage;
-  isSelected: boolean;
-  isExpanded: boolean;
-  onSelect: () => void;
-  onToggleExpand: () => void;
-  isBestValue?: boolean;
-  creditAmount?: number;
-  billingPeriodLabel?: string;
-  totalPriceLabel?: string;
-  perMonthLabel?: string;
-}
-
-export interface PlanCardHeaderProps {
-  title: string;
-  price: string;
-  creditAmount?: number;
-  isSelected: boolean;
-  isExpanded: boolean;
-  isBestValue?: boolean;
-  onToggle: () => void;
-}
-
-export interface PlanCardDetailsProps {
-  fullPrice: string;
-  monthlyEquivalent: string | null;
-  periodLabel: string;
-  isYearly: boolean;
-  billingPeriodLabel?: string;
-  totalPriceLabel?: string;
-  perMonthLabel?: string;
-}

package/src/presentation/components/paywall/accordion/PlanCardDetails.tsx

@@ -1,107 +0,0 @@
-/**
- * Plan Card Details
- * Expanded state of accordion subscription card
- */
-
-import React, { useMemo } from "react";
-import { View, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-  useResponsive,
-} from "@umituz/react-native-design-system";
-import type { PlanCardDetailsProps } from "./AccordionPlanCardTypes";
-
-export const PlanCardDetails: React.FC<PlanCardDetailsProps> = ({
-  fullPrice,
-  monthlyEquivalent,
-  periodLabel,
-  isYearly,
-  billingPeriodLabel = "Billing Period",
-  totalPriceLabel = "Total Price",
-  perMonthLabel = "Per Month",
-}) => {
-  const tokens = useAppDesignTokens();
-  const { spacingMultiplier } = useResponsive();
-
-  const styles = useMemo(() => createStyles(spacingMultiplier), [spacingMultiplier]);
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          backgroundColor: tokens.colors.surfaceSecondary,
-          borderTopColor: tokens.colors.border,
-        },
-      ]}
-    >
-      <View style={styles.row}>
-        <AtomicText
-          type="bodyMedium"
-          style={{ color: tokens.colors.textSecondary }}
-        >
-          {billingPeriodLabel}
-        </AtomicText>
-        <AtomicText
-          type="bodyMedium"
-          style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
-        >
-          {periodLabel}
-        </AtomicText>
-      </View>
-
-      {isYearly && (
-        <View style={styles.row}>
-          <AtomicText
-            type="bodyMedium"
-            style={{ color: tokens.colors.textSecondary }}
-          >
-            {totalPriceLabel}
-          </AtomicText>
-          <AtomicText
-            type="bodyMedium"
-            style={{
-              color: tokens.colors.primary,
-              fontWeight: "700",
-            }}
-          >
-            {fullPrice}
-          </AtomicText>
-        </View>
-      )}
-
-      {monthlyEquivalent && (
-        <View style={styles.row}>
-          <AtomicText
-            type="bodyMedium"
-            style={{ color: tokens.colors.textSecondary }}
-          >
-            {perMonthLabel}
-          </AtomicText>
-          <AtomicText
-            type="bodyMedium"
-            style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
-          >
-            {monthlyEquivalent}
-          </AtomicText>
-        </View>
-      )}
-    </View>
-  );
-};
-
-const createStyles = (spacingMult: number) =>
-  StyleSheet.create({
-    container: {
-      paddingHorizontal: 16 * spacingMult,
-      paddingVertical: 12 * spacingMult,
-      borderTopWidth: 1,
-      gap: 10 * spacingMult,
-    },
-    row: {
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "center",
-    },
-  });

package/src/presentation/components/paywall/accordion/PlanCardHeader.tsx

@@ -1,155 +0,0 @@
-/**
- * Plan Card Header
- * Header for accordion subscription card
- */
-
-import React, { useMemo } from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  useAppDesignTokens,
-  withAlpha,
-  useResponsive,
-} from "@umituz/react-native-design-system";
-import { BestValueBadge } from "../BestValueBadge";
-import { useLocalization } from "@umituz/react-native-localization";
-import type { PlanCardHeaderProps } from "./AccordionPlanCardTypes";
-
-export const PlanCardHeader: React.FC<PlanCardHeaderProps> = ({
-  title,
-  price,
-  creditAmount,
-  isSelected,
-  isBestValue,
-  onToggle,
-}) => {
-  const tokens = useAppDesignTokens();
-  const { t } = useLocalization();
-  const { spacingMultiplier, getFontSize, minTouchTarget } = useResponsive();
-
-  const styles = useMemo(
-    () => createStyles(spacingMultiplier, minTouchTarget),
-    [spacingMultiplier, minTouchTarget]
-  );
-  const creditFontSize = getFontSize(11);
-
-  return (
-    <TouchableOpacity
-      onPress={onToggle}
-      activeOpacity={0.7}
-      style={styles.container}
-    >
-      <BestValueBadge text={t("paywall.bestValue")} visible={isBestValue} />
-
-      <View style={styles.content}>
-        <View style={styles.leftSection}>
-          <View
-            style={[
-              styles.radio,
-              {
-                borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
-                backgroundColor: isSelected ? tokens.colors.primary : "transparent",
-              },
-            ]}
-          >
-            {isSelected && (
-              <AtomicIcon name="checkmark" customSize={14} customColor={tokens.colors.onPrimary} />
-            )}
-          </View>
-
-          <View style={styles.textContainer}>
-            <AtomicText
-              type="titleSmall"
-              style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
-            >
-              {title}
-            </AtomicText>
-            {creditAmount && (
-              <View
-                style={[
-                  styles.creditBadge,
-                  {
-                    backgroundColor: withAlpha(tokens.colors.primary, 0.15),
-                    borderColor: withAlpha(tokens.colors.primary, 0.3),
-                  },
-                ]}
-              >
-                <AtomicIcon name="flash" customSize={creditFontSize} customColor={tokens.colors.primary} />
-                <AtomicText
-                  type="labelSmall"
-                  style={{
-                    color: tokens.colors.primary,
-                    fontWeight: "700",
-                    fontSize: creditFontSize,
-                    marginLeft: 4,
-                  }}
-                >
-                  {creditAmount} {t("paywall.credits")}
-                </AtomicText>
-              </View>
-            )}
-          </View>
-        </View>
-
-        <View style={styles.rightSection}>
-          <AtomicText
-            type="titleMedium"
-            style={{ color: tokens.colors.textPrimary, fontWeight: "700" }}
-          >
-            {price}
-          </AtomicText>
-        </View>
-      </View>
-    </TouchableOpacity>
-  );
-};
-
-const createStyles = (spacingMult: number, touchTarget: number) => {
-  const radioSize = Math.max(touchTarget * 0.4, 22);
-
-  return StyleSheet.create({
-    container: {
-      width: "100%",
-    },
-    content: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      paddingVertical: 16 * spacingMult,
-      paddingHorizontal: 16 * spacingMult,
-    },
-    leftSection: {
-      flexDirection: "row",
-      alignItems: "center",
-      flex: 1,
-    },
-    radio: {
-      width: radioSize,
-      height: radioSize,
-      borderRadius: radioSize / 2,
-      borderWidth: 2,
-      alignItems: "center",
-      justifyContent: "center",
-      marginRight: 12 * spacingMult,
-    },
-    textContainer: {
-      flex: 1,
-      gap: 6 * spacingMult,
-    },
-    creditBadge: {
-      flexDirection: "row",
-      alignItems: "center",
-      paddingHorizontal: 8 * spacingMult,
-      paddingVertical: 4 * spacingMult,
-      borderRadius: 12 * spacingMult,
-      borderWidth: 1,
-      alignSelf: "flex-start",
-    },
-    rightSection: {
-      flexDirection: "row",
-      alignItems: "center",
-      gap: 12 * spacingMult,
-    },
-  });
-};

package/src/presentation/components/paywall/accordion/index.ts

@@ -1,12 +0,0 @@
-/**
- * Accordion Components Barrel Export
- */
-
-export { AccordionPlanCard } from "./AccordionPlanCard";
-export { PlanCardHeader } from "./PlanCardHeader";
-export { PlanCardDetails } from "./PlanCardDetails";
-export type {
-  AccordionPlanCardProps,
-  PlanCardHeaderProps,
-  PlanCardDetailsProps,
-} from "./AccordionPlanCardTypes";