@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/marketing/PricingModal.jsx

@@ -0,0 +1,608 @@
+import { c as _c } from "react/compiler-runtime";
+import { Modal, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IconCheck, IconX } from "@tabler/icons-react-native";
+import { APP_ICONS, IconProjectV } from "../brand/AppIcons";
+import { familyApp } from "../brand/familyApps";
+import { Button } from "../Button";
+import { cn } from "../cn";
+import { typeStyle } from "../controlStyles";
+import { palette, withAlpha } from "../palette";
+import { tokens } from "../tokens";
+import { useLargerText } from "../theme";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { useControllableState } from "../primitives/use-controllable-state";
+import { isEmphasised, planAppBenefits, planButton, sortAppBenefits } from "./pricing";
+/**
+ * Upgrade sheet, the native counterpart of the web `PricingModal` multi-plan
+ * layout: a page sheet on iOS (full screen on Android) with a Monthly / Annual
+ * switch and stacked plan cards. The web single-plan layout (logo URLs and a
+ * Michroma wordmark) is not ported: pass one plan instead.
+ */
+export function PricingModal(t0) {
+  const $ = _c(74);
+  const {
+    open,
+    onClose,
+    title,
+    description,
+    plans,
+    apps,
+    currentApp,
+    headline,
+    finePrint,
+    billingPeriod,
+    onBillingPeriodChange,
+    defaultBillingPeriod: t1,
+    onCheckout,
+    renderCheckout,
+    onAppPress,
+    testID
+  } = t0;
+  const defaultBillingPeriod = t1 === undefined ? "month" : t1;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const insets = useSafeAreaInsets();
+  const reduceMotion = useReduceMotion();
+  let t2;
+  if ($[0] !== billingPeriod || $[1] !== defaultBillingPeriod || $[2] !== onBillingPeriodChange) {
+    t2 = {
+      value: billingPeriod,
+      defaultValue: defaultBillingPeriod,
+      onChange: onBillingPeriodChange
+    };
+    $[0] = billingPeriod;
+    $[1] = defaultBillingPeriod;
+    $[2] = onBillingPeriodChange;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const [period, setPeriod] = useControllableState(t2);
+  const fg = tokens.color.foreground[scheme];
+  const muted = tokens.color.muted[scheme];
+  const t3 = reduceMotion ? "none" : "slide";
+  const t4 = tokens.color.background[scheme];
+  let t5;
+  if ($[4] !== insets.bottom || $[5] !== t4) {
+    t5 = {
+      backgroundColor: t4,
+      paddingBottom: insets.bottom
+    };
+    $[4] = insets.bottom;
+    $[5] = t4;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== description || $[8] !== title) {
+    t6 = <View accessible={true} accessibilityRole="header" accessibilityLabel={title} accessibilityHint={description} style={styles.srOnly} />;
+    $[7] = description;
+    $[8] = title;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== apps || $[11] !== fg || $[12] !== onAppPress) {
+    t7 = apps?.map(app => {
+      const Icon = APP_ICONS[app];
+      const {
+        name,
+        url
+      } = familyApp(app);
+      return onAppPress ? <Pressable key={app} accessibilityRole="link" accessibilityLabel={name} hitSlop={8} onPress={() => onAppPress(app, url)} className="active:opacity-70"><Icon size={22} color={fg} /></Pressable> : <Icon key={app} size={22} color={fg} title={name} />;
+    });
+    $[10] = apps;
+    $[11] = fg;
+    $[12] = onAppPress;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  let t8;
+  if ($[14] !== t7) {
+    t8 = <View className="flex-row items-center gap-3">{t7}</View>;
+    $[14] = t7;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  const t9 = palette.surfaceTertiary[scheme];
+  let t10;
+  if ($[16] !== t9) {
+    t10 = {
+      backgroundColor: t9
+    };
+    $[16] = t9;
+    $[17] = t10;
+  } else {
+    t10 = $[17];
+  }
+  let t11;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = ["month", "year"];
+    $[18] = t11;
+  } else {
+    t11 = $[18];
+  }
+  let t12;
+  if ($[19] !== largerText || $[20] !== muted || $[21] !== period || $[22] !== scheme || $[23] !== setPeriod || $[24] !== testID) {
+    t12 = t11.map(value => {
+      const selected = period === value;
+      return <Pressable key={value} testID={testID ? `${testID}-period-${value}` : undefined} accessibilityRole="button" accessibilityState={{
+        selected
+      }} hitSlop={6} onPress={() => setPeriod(value)} className="rounded-full px-3 py-1.5" style={selected ? {
+        backgroundColor: palette.segment[scheme]
+      } : null}><Text className={cn("font-instrument-sans-medium", largerText ? "text-base" : "text-sm")} style={[{
+          color: selected ? palette.segmentForeground[scheme] : muted
+        }, typeStyle("medium")]}>{value === "month" ? "Monthly" : "Annual"}</Text></Pressable>;
+    });
+    $[19] = largerText;
+    $[20] = muted;
+    $[21] = period;
+    $[22] = scheme;
+    $[23] = setPeriod;
+    $[24] = testID;
+    $[25] = t12;
+  } else {
+    t12 = $[25];
+  }
+  let t13;
+  if ($[26] !== t10 || $[27] !== t12) {
+    t13 = <View accessibilityLabel="Billing period" className="flex-row rounded-full p-0.5" style={t10}>{t12}</View>;
+    $[26] = t10;
+    $[27] = t12;
+    $[28] = t13;
+  } else {
+    t13 = $[28];
+  }
+  const t14 = testID ? `${testID}-close` : undefined;
+  let t15;
+  if ($[29] !== muted) {
+    t15 = <IconX size={22} color={muted} />;
+    $[29] = muted;
+    $[30] = t15;
+  } else {
+    t15 = $[30];
+  }
+  let t16;
+  if ($[31] !== onClose || $[32] !== t14 || $[33] !== t15) {
+    t16 = <Pressable testID={t14} accessibilityRole="button" accessibilityLabel="Close" hitSlop={8} onPress={onClose} className="h-10 w-10 items-center justify-center rounded-full active:opacity-70">{t15}</Pressable>;
+    $[31] = onClose;
+    $[32] = t14;
+    $[33] = t15;
+    $[34] = t16;
+  } else {
+    t16 = $[34];
+  }
+  let t17;
+  if ($[35] !== t13 || $[36] !== t16) {
+    t17 = <View className="flex-row items-center gap-2">{t13}{t16}</View>;
+    $[35] = t13;
+    $[36] = t16;
+    $[37] = t17;
+  } else {
+    t17 = $[37];
+  }
+  let t18;
+  if ($[38] !== t17 || $[39] !== t8) {
+    t18 = <View className="flex-row items-center justify-between gap-3 px-4 pb-3 pt-4">{t8}{t17}</View>;
+    $[38] = t17;
+    $[39] = t8;
+    $[40] = t18;
+  } else {
+    t18 = $[40];
+  }
+  let t19;
+  if ($[41] !== fg || $[42] !== headline || $[43] !== largerText) {
+    t19 = headline ? <Text className={cn("pb-2 text-center font-instrument-sans-medium", largerText ? "text-3xl" : "text-2xl")} style={[{
+      color: fg
+    }, typeStyle("medium")]}>{headline}</Text> : null;
+    $[41] = fg;
+    $[42] = headline;
+    $[43] = largerText;
+    $[44] = t19;
+  } else {
+    t19 = $[44];
+  }
+  let t20;
+  if ($[45] !== currentApp || $[46] !== onCheckout || $[47] !== period || $[48] !== plans || $[49] !== renderCheckout) {
+    let t21;
+    if ($[51] !== currentApp || $[52] !== onCheckout || $[53] !== period || $[54] !== renderCheckout) {
+      t21 = plan => <PlanCard key={plan.id} plan={plan} period={period} currentApp={currentApp} onCheckout={onCheckout} renderCheckout={renderCheckout} />;
+      $[51] = currentApp;
+      $[52] = onCheckout;
+      $[53] = period;
+      $[54] = renderCheckout;
+      $[55] = t21;
+    } else {
+      t21 = $[55];
+    }
+    t20 = plans.map(t21);
+    $[45] = currentApp;
+    $[46] = onCheckout;
+    $[47] = period;
+    $[48] = plans;
+    $[49] = renderCheckout;
+    $[50] = t20;
+  } else {
+    t20 = $[50];
+  }
+  let t21;
+  if ($[56] !== finePrint || $[57] !== muted) {
+    t21 = finePrint ? <Text className="px-1 pt-1 font-instrument-sans text-sm" style={{
+      color: muted
+    }}>{finePrint}</Text> : null;
+    $[56] = finePrint;
+    $[57] = muted;
+    $[58] = t21;
+  } else {
+    t21 = $[58];
+  }
+  let t22;
+  if ($[59] !== t19 || $[60] !== t20 || $[61] !== t21) {
+    t22 = <ScrollView className="flex-1" contentContainerClassName="gap-3 px-4 pb-6" showsVerticalScrollIndicator={false}>{t19}{t20}{t21}</ScrollView>;
+    $[59] = t19;
+    $[60] = t20;
+    $[61] = t21;
+    $[62] = t22;
+  } else {
+    t22 = $[62];
+  }
+  let t23;
+  if ($[63] !== t18 || $[64] !== t22 || $[65] !== t5 || $[66] !== t6) {
+    t23 = <View className="flex-1" style={t5}>{t6}{t18}{t22}</View>;
+    $[63] = t18;
+    $[64] = t22;
+    $[65] = t5;
+    $[66] = t6;
+    $[67] = t23;
+  } else {
+    t23 = $[67];
+  }
+  let t24;
+  if ($[68] !== onClose || $[69] !== open || $[70] !== t23 || $[71] !== t3 || $[72] !== testID) {
+    t24 = <Modal visible={open} animationType={t3} presentationStyle="pageSheet" onRequestClose={onClose} testID={testID}>{t23}</Modal>;
+    $[68] = onClose;
+    $[69] = open;
+    $[70] = t23;
+    $[71] = t3;
+    $[72] = testID;
+    $[73] = t24;
+  } else {
+    t24 = $[73];
+  }
+  return t24;
+}
+function PlanCard(t0) {
+  const $ = _c(90);
+  const {
+    plan,
+    period,
+    currentApp,
+    onCheckout,
+    renderCheckout
+  } = t0;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const fg = tokens.color.foreground[scheme];
+  const muted = tokens.color.muted[scheme];
+  const separator = tokens.color.separator[scheme];
+  let t1;
+  if ($[0] !== plan) {
+    t1 = isEmphasised(plan);
+    $[0] = plan;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const emphasised = t1;
+  let t2;
+  if ($[2] !== currentApp || $[3] !== emphasised || $[4] !== fg || $[5] !== largerText || $[6] !== muted || $[7] !== onCheckout || $[8] !== period || $[9] !== plan || $[10] !== renderCheckout || $[11] !== scheme || $[12] !== separator) {
+    const appBenefits = planAppBenefits(plan);
+    let t3;
+    if ($[14] !== plan) {
+      t3 = planButton(plan);
+      $[14] = plan;
+      $[15] = t3;
+    } else {
+      t3 = $[15];
+    }
+    const cta = t3;
+    const bodyText = largerText ? "text-lg" : "text-base";
+    let t4;
+    if ($[16] !== onCheckout || $[17] !== period || $[18] !== plan) {
+      t4 = () => onCheckout?.(plan, period);
+      $[16] = onCheckout;
+      $[17] = period;
+      $[18] = plan;
+      $[19] = t4;
+    } else {
+      t4 = $[19];
+    }
+    let t5;
+    if ($[20] !== cta.disabled || $[21] !== cta.label || $[22] !== cta.variant || $[23] !== t4) {
+      t5 = <Button variant={cta.variant} disabled={cta.disabled} shadowType="flat" onPress={t4}>{cta.label}</Button>;
+      $[20] = cta.disabled;
+      $[21] = cta.label;
+      $[22] = cta.variant;
+      $[23] = t4;
+      $[24] = t5;
+    } else {
+      t5 = $[24];
+    }
+    const button = t5;
+    let t6;
+    if ($[25] !== emphasised || $[26] !== fg || $[27] !== separator) {
+      t6 = emphasised ? withAlpha(fg, 0.25) : separator;
+      $[25] = emphasised;
+      $[26] = fg;
+      $[27] = separator;
+      $[28] = t6;
+    } else {
+      t6 = $[28];
+    }
+    const t7 = tokens.color.surfaceSecondary[scheme];
+    let t8;
+    if ($[29] !== t6 || $[30] !== t7) {
+      t8 = {
+        borderRadius: tokens.radius.card,
+        borderWidth: 1,
+        borderColor: t6,
+        backgroundColor: t7
+      };
+      $[29] = t6;
+      $[30] = t7;
+      $[31] = t8;
+    } else {
+      t8 = $[31];
+    }
+    let t9;
+    if ($[32] !== emphasised || $[33] !== fg) {
+      t9 = emphasised ? <IconProjectV size={16} color={fg} /> : null;
+      $[32] = emphasised;
+      $[33] = fg;
+      $[34] = t9;
+    } else {
+      t9 = $[34];
+    }
+    let t10;
+    if ($[35] !== bodyText) {
+      t10 = cn("font-instrument-sans-medium", bodyText);
+      $[35] = bodyText;
+      $[36] = t10;
+    } else {
+      t10 = $[36];
+    }
+    let t11;
+    if ($[37] !== fg) {
+      t11 = {
+        color: fg
+      };
+      $[37] = fg;
+      $[38] = t11;
+    } else {
+      t11 = $[38];
+    }
+    let t12;
+    if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+      t12 = typeStyle("medium");
+      $[39] = t12;
+    } else {
+      t12 = $[39];
+    }
+    let t13;
+    if ($[40] !== t11) {
+      t13 = [t11, t12];
+      $[40] = t11;
+      $[41] = t13;
+    } else {
+      t13 = $[41];
+    }
+    let t14;
+    if ($[42] !== plan.name || $[43] !== t10 || $[44] !== t13) {
+      t14 = <Text accessibilityRole="header" className={t10} style={t13}>{plan.name}</Text>;
+      $[42] = plan.name;
+      $[43] = t10;
+      $[44] = t13;
+      $[45] = t14;
+    } else {
+      t14 = $[45];
+    }
+    let t15;
+    if ($[46] !== t14 || $[47] !== t9) {
+      t15 = <View className="flex-row items-center gap-2">{t9}{t14}</View>;
+      $[46] = t14;
+      $[47] = t9;
+      $[48] = t15;
+    } else {
+      t15 = $[48];
+    }
+    let t16;
+    if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
+      t16 = ["tabular-nums"];
+      $[49] = t16;
+    } else {
+      t16 = $[49];
+    }
+    let t17;
+    if ($[50] !== fg) {
+      t17 = {
+        color: fg,
+        fontSize: 48,
+        lineHeight: 52,
+        letterSpacing: -0.5,
+        fontVariant: t16
+      };
+      $[50] = fg;
+      $[51] = t17;
+    } else {
+      t17 = $[51];
+    }
+    let t18;
+    if ($[52] === Symbol.for("react.memo_cache_sentinel")) {
+      t18 = typeStyle("medium");
+      $[52] = t18;
+    } else {
+      t18 = $[52];
+    }
+    let t19;
+    if ($[53] !== t17) {
+      t19 = [t17, t18];
+      $[53] = t17;
+      $[54] = t19;
+    } else {
+      t19 = $[54];
+    }
+    const t20 = plan.price[period];
+    let t21;
+    if ($[55] !== t19 || $[56] !== t20) {
+      t21 = <Text className="font-instrument-sans-medium" style={t19}>{t20}</Text>;
+      $[55] = t19;
+      $[56] = t20;
+      $[57] = t21;
+    } else {
+      t21 = $[57];
+    }
+    let t22;
+    if ($[58] !== bodyText) {
+      t22 = cn("font-instrument-sans", bodyText);
+      $[58] = bodyText;
+      $[59] = t22;
+    } else {
+      t22 = $[59];
+    }
+    let t23;
+    if ($[60] !== muted) {
+      t23 = {
+        color: muted
+      };
+      $[60] = muted;
+      $[61] = t23;
+    } else {
+      t23 = $[61];
+    }
+    const t24 = plan.periodSuffix ?? "/month";
+    let t25;
+    if ($[62] !== t22 || $[63] !== t23 || $[64] !== t24) {
+      t25 = <Text className={t22} style={t23}>{t24}</Text>;
+      $[62] = t22;
+      $[63] = t23;
+      $[64] = t24;
+      $[65] = t25;
+    } else {
+      t25 = $[65];
+    }
+    let t26;
+    if ($[66] !== t21 || $[67] !== t25) {
+      t26 = <View className="mt-4 flex-row items-baseline gap-1">{t21}{t25}</View>;
+      $[66] = t21;
+      $[67] = t25;
+      $[68] = t26;
+    } else {
+      t26 = $[68];
+    }
+    let t27;
+    if ($[69] !== button || $[70] !== period || $[71] !== plan || $[72] !== renderCheckout) {
+      t27 = plan.current || !renderCheckout ? button : renderCheckout(button, plan, period);
+      $[69] = button;
+      $[70] = period;
+      $[71] = plan;
+      $[72] = renderCheckout;
+      $[73] = t27;
+    } else {
+      t27 = $[73];
+    }
+    let t28;
+    if ($[74] !== t27) {
+      t28 = <View className="mt-5">{t27}</View>;
+      $[74] = t27;
+      $[75] = t28;
+    } else {
+      t28 = $[75];
+    }
+    let t29;
+    if ($[76] !== bodyText || $[77] !== muted || $[78] !== plan.intro) {
+      t29 = plan.intro ? <Text className={cn("mt-6 font-instrument-sans", bodyText)} style={{
+        color: muted
+      }}>{plan.intro}</Text> : null;
+      $[76] = bodyText;
+      $[77] = muted;
+      $[78] = plan.intro;
+      $[79] = t29;
+    } else {
+      t29 = $[79];
+    }
+    let t30;
+    if ($[80] !== bodyText || $[81] !== fg || $[82] !== plan.highlight) {
+      t30 = plan.highlight ? <View className="mt-3"><Text className="font-instrument-sans-medium text-2xl" style={[{
+          color: fg
+        }, typeStyle("medium")]}>{plan.highlight.title}</Text><Text className={cn("font-instrument-sans", bodyText)} style={{
+          color: fg
+        }}>{plan.highlight.description}</Text></View> : null;
+      $[80] = bodyText;
+      $[81] = fg;
+      $[82] = plan.highlight;
+      $[83] = t30;
+    } else {
+      t30 = $[83];
+    }
+    let t31;
+    if ($[84] !== bodyText || $[85] !== fg || $[86] !== muted || $[87] !== plan.benefits || $[88] !== separator) {
+      t31 = plan.benefits?.length ? <View className="mt-5 gap-2.5 pt-4" style={{
+        borderTopWidth: StyleSheet.hairlineWidth,
+        borderTopColor: separator
+      }}>{plan.benefits.map((benefit, index) => {
+          const BenefitIcon = benefit.icon && benefit.icon !== "check" ? APP_ICONS[benefit.icon] : null;
+          return <View key={index} className="flex-row items-start gap-2.5"><View className="mt-1 h-4 w-5 items-center justify-center">{BenefitIcon ? <BenefitIcon size={14} color={benefit.muted ? muted : fg} /> : <IconCheck size={16} strokeWidth={2} color={benefit.muted ? muted : fg} />}</View><Text className={cn("min-w-0 flex-1 font-instrument-sans", bodyText)} style={{
+              color: benefit.muted ? muted : fg
+            }}>{benefit.label}</Text></View>;
+        })}</View> : null;
+      $[84] = bodyText;
+      $[85] = fg;
+      $[86] = muted;
+      $[87] = plan.benefits;
+      $[88] = separator;
+      $[89] = t31;
+    } else {
+      t31 = $[89];
+    }
+    t2 = <View className="p-5" style={t8}>{t15}{t26}{t28}{t29}{t30}{t31}{appBenefits?.length ? <View className="mt-4 gap-3 pt-3" style={{
+        borderTopWidth: StyleSheet.hairlineWidth,
+        borderTopColor: separator
+      }}>{sortAppBenefits(appBenefits, currentApp).map(group => {
+          const GroupIcon = APP_ICONS[group.app];
+          return <View key={group.app}><View className="flex-row items-center gap-2"><GroupIcon size={14} color={fg} /><Text className="font-instrument-sans-medium text-sm" style={[{
+                color: fg
+              }, typeStyle("medium")]}>{familyApp(group.app).name}</Text></View><View className="mt-1 gap-0.5 pl-[22px]">{group.items.map((item, index_0) => <Text key={index_0} className={cn("font-instrument-sans", bodyText)} style={{
+                color: fg
+              }}>{item}</Text>)}</View></View>;
+        })}</View> : null}</View>;
+    $[2] = currentApp;
+    $[3] = emphasised;
+    $[4] = fg;
+    $[5] = largerText;
+    $[6] = muted;
+    $[7] = onCheckout;
+    $[8] = period;
+    $[9] = plan;
+    $[10] = renderCheckout;
+    $[11] = scheme;
+    $[12] = separator;
+    $[13] = t2;
+  } else {
+    t2 = $[13];
+  }
+  return t2;
+}
+const styles = StyleSheet.create({
+  srOnly: {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    opacity: 0
+  }
+});