related-ui-components 1.7.6 → 1.7.7

package/lib/typescript/module/components/RedeemedVoucher/RedeemedVoucherSheet.d.ts

@@ -0,0 +1,58 @@
+import React from "react";
+import { ImageSourcePropType, StyleProp, ViewStyle } from "react-native";
+import { BottomSheetProps } from "@gorhom/bottom-sheet";
+type Props = {
+    visible: boolean;
+    onClose: () => void;
+    code: string;
+    amount?: number;
+    expiry?: string;
+    image?: ImageSourcePropType;
+    title?: string;
+    currency?: string;
+    codeReadyText?: string;
+    qrCodeLabel?: string;
+    barCodeLabel?: string;
+    myVouchersButtonText?: string;
+    onMyVouchersButtonPress?: () => void;
+    onCopyCode?: (copiedCode: string) => void;
+    showAppleWalletButton?: boolean;
+    appleWalletButtonText?: string;
+    onAppleWalletButtonPress?: () => void;
+    appleWalletIconSource?: ImageSourcePropType;
+    qrCodeSize?: number;
+    activeTabColors?: string[];
+    inactiveTabBackgroundColor?: string;
+    inactiveTabBorderColor?: string;
+    inactiveTabTextColor?: string;
+    primaryButtonColors?: string[];
+    allowBarcodeSwitch?: boolean;
+    renderBarcodeComponent?: (code: string) => React.ReactNode;
+    renderCopyIcon?: () => React.ReactNode;
+    amountIconComponent?: React.ReactNode;
+    expiryIconComponent?: React.ReactNode;
+    snapPoints?: string[];
+    sheetBackgroundStyle?: StyleProp<ViewStyle>;
+    sheetHandleStyle?: StyleProp<ViewStyle>;
+    backdropPressBehavior?: "close" | "none" | number;
+    bottomSheetOverrideProps?: Partial<Omit<BottomSheetProps, "children" | "snapPoints" | "index" | "onClose" | "enablePanDownToClose" | "backgroundStyle" | "handleIndicatorStyle" | "backdropComponent">>;
+    tabGradientStart?: {
+        x: number;
+        y: number;
+    };
+    tabGradientEnd?: {
+        x: number;
+        y: number;
+    };
+    primaryButtonGradientStart?: {
+        x: number;
+        y: number;
+    };
+    primaryButtonGradientEnd?: {
+        x: number;
+        y: number;
+    };
+};
+declare const RedeemedVoucherSheet: React.FC<Props>;
+export default RedeemedVoucherSheet;
+//# sourceMappingURL=RedeemedVoucherSheet.d.ts.map

package/lib/typescript/module/components/RedeemedVoucher/RedeemedVoucherSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RedeemedVoucherSheet.d.ts","sourceRoot":"","sources":["../../../../../src/components/RedeemedVoucher/RedeemedVoucherSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAOL,mBAAmB,EACnB,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAoB,EAElB,gBAAgB,EAGjB,MAAM,sBAAsB,CAAC;AAO9B,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAE5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,qBAAqB,CAAC,EAAE,mBAAmB,CAAC;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACvC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,qBAAqB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAClD,wBAAwB,CAAC,EAAE,OAAO,CAChC,IAAI,CACF,gBAAgB,EACd,UAAU,GACV,YAAY,GACZ,OAAO,GACP,SAAS,GACT,sBAAsB,GACtB,iBAAiB,GACjB,sBAAsB,GACtB,mBAAmB,CACtB,CACF,CAAC;IACF,gBAAgB,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,cAAc,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,0BAA0B,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtD,wBAAwB,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACrD,CAAC;AAEF,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8RzC,CAAC;AAsLF,eAAe,oBAAoB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "related-ui-components",
   "main": "./src/index.ts",
-  "version": "1.7.6",
+  "version": "1.7.7",
   "scripts": {
     "start": "expo start",
     "reset-project": "node ./scripts/reset-project.js",
@@ -42,12 +42,14 @@
     "react-native-calendars": "^1.1310.0",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-modal": "^14.0.0-rc.1",
+    "react-native-qrcode-svg": "^6.3.15",
     "react-native-reanimated": "^3.16.1",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",
     "react-native-svg": "15.8.0",
     "react-native-web": "~0.19.13",
-    "react-native-webview": "13.12.5"
+    "react-native-webview": "13.12.5",
+    "expo-clipboard": "~7.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

package/src/app.tsx

@@ -4,6 +4,8 @@ import { FilterResult, Filters, Popup, UnlockRewards } from "./components";
 import BRANDS from "./constants/BRANDS";
 import { Ionicons } from "@expo/vector-icons";
 import { useTheme } from "./theme";
+import RedeemedVoucherSheet from "./components/RedeemedVoucher/RedeemedVoucherSheet";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 
 const MyScreen = () => {
   const [isFilterVisible, setIsFilterVisible] = useState(false);
@@ -83,25 +85,23 @@ const MyScreen = () => {
 
   return (
     <>
-      <Popup
-        visible={isFilterVisible}
-        onClose={() => setIsFilterVisible(false)}
-        showCloseIcon={true}
-        title="ترقية إلى النسخة المميزة"
-        subtitle="استمتع بمزايا حصرية"
-        content="احصل على جميع الميزات المتقدمة والمحتوى الحصري بدون إعلانات. اشترك الآن واستمتع بتجربة كاملة مع تحديثات مجانية لمدة عام كامل."
-        primaryButtonText="ترقية الآن"
-        secondaryButtonText="ليس الآن"
-        // onPrimaryButtonPress={handleUpgrade}
-        // onSecondaryButtonPress={handleDismiss}
-        isRTL={true}
-      >
-
-        <UnlockRewards rewards={rewardsData}></UnlockRewards>
-      </Popup>
-      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-        <Button title="Show Filters" onPress={() => setIsFilterVisible(true)} />
-      </View>
+    <GestureHandlerRootView>
+      <RedeemedVoucherSheet
+        visible={true}
+        onClose={() => {}}
+        code="0000P78SHV50KK"
+        // amount={100}
+        expiry="22/01/2025"
+        currency="USD"
+        title="Voucher Activated!"
+        // primaryButtonColors={["red", "blue"]}
+        onMyVouchersButtonPress={() => console.log("My Vouchers pressed")}
+        onCopyCode={(code) => console.log("Copied:", code)}
+        // To use custom icons:
+        // amountIconComponent={<Image source={YourCustomAmountIcon} style={{width: 20, height: 20, marginRight: 5}} />}
+        // renderCopyIcon={() => <Text style={{fontSize: 22, color: 'blue'}}>COPY</Text>}
+      />
+      </GestureHandlerRootView>
     </>
   );
 };

package/src/components/RedeemedVoucher/RedeemedVoucherSheet.tsx

@@ -0,0 +1,547 @@
+import React, { useCallback, useMemo, useRef } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  Pressable,
+  ImageSourcePropType,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import BottomSheet, {
+  BottomSheetView,
+  BottomSheetProps,
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+} from "@gorhom/bottom-sheet";
+import QRCode from "react-native-qrcode-svg";
+import { LinearGradient } from "expo-linear-gradient";
+import * as Clipboard from "expo-clipboard";
+import { ThemeType, useTheme } from "@/theme"; 
+import { Ionicons } from "@expo/vector-icons";
+
+type Props = {
+  visible: boolean;
+  onClose: () => void;
+  code: string;
+  amount?: number;
+  expiry?: string;
+  image?: ImageSourcePropType; 
+
+  title?: string;
+  currency?: string;
+  codeReadyText?: string;
+  qrCodeLabel?: string;
+  barCodeLabel?: string;
+  myVouchersButtonText?: string;
+  onMyVouchersButtonPress?: () => void;
+  onCopyCode?: (copiedCode: string) => void;
+  showAppleWalletButton?: boolean;
+  appleWalletButtonText?: string;
+  onAppleWalletButtonPress?: () => void;
+  appleWalletIconSource?: ImageSourcePropType; 
+  qrCodeSize?: number;
+  activeTabColors?: string[];
+  inactiveTabBackgroundColor?: string;
+  inactiveTabBorderColor?: string;
+  inactiveTabTextColor?: string;
+  primaryButtonColors?: string[];
+  allowBarcodeSwitch?: boolean;
+  renderBarcodeComponent?: (code: string) => React.ReactNode;
+  renderCopyIcon?: () => React.ReactNode;
+  amountIconComponent?: React.ReactNode;
+  expiryIconComponent?: React.ReactNode;
+  snapPoints?: string[];
+  sheetBackgroundStyle?: StyleProp<ViewStyle>;
+  sheetHandleStyle?: StyleProp<ViewStyle>;
+  backdropPressBehavior?: "close" | "none" | number; 
+  bottomSheetOverrideProps?: Partial<
+    Omit<
+      BottomSheetProps,
+      | "children"
+      | "snapPoints"
+      | "index"
+      | "onClose"
+      | "enablePanDownToClose"
+      | "backgroundStyle"
+      | "handleIndicatorStyle"
+      | "backdropComponent"
+    >
+  >;
+  tabGradientStart?: { x: number; y: number };
+  tabGradientEnd?: { x: number; y: number };
+  primaryButtonGradientStart?: { x: number; y: number };
+  primaryButtonGradientEnd?: { x: number; y: number };
+};
+
+const RedeemedVoucherSheet: React.FC<Props> = (props) => {
+  const { theme } = useTheme(); 
+  const styles = useMemo(() => getStyles(theme), [theme]);
+
+  const defaultActiveTabColors = useMemo(
+    () =>
+      theme.primary
+        ? [theme.primary, theme.primaryVariant || theme.primary]
+        : ["#F97794", "#623AA2"],
+    [theme],
+  );
+
+  const defaultPrimaryButtonColors = useMemo(
+    () =>
+      defaultActiveTabColors,
+    [theme, defaultActiveTabColors],
+  );
+
+  const defaultInactiveTabBorderColor = useMemo(
+    () =>  theme.primary || defaultActiveTabColors[1] || "#623AA2",
+    [theme, defaultActiveTabColors],
+  );
+
+  const defaultInactiveTabTextColor = useMemo(
+    () => theme.primary || defaultActiveTabColors[1] || "#623AA2",
+    [theme, defaultActiveTabColors],
+  );
+
+
+  const {
+    visible,
+    onClose,
+    code,
+    amount,
+    expiry,
+    image, // Now directly from props
+    title = "Successfully Redeemed!",
+    currency = "SAR",
+    codeReadyText = "Your Code Is Ready!",
+    qrCodeLabel = "QR Code",
+    barCodeLabel = "Bar Code",
+    myVouchersButtonText = "My Vouchers",
+    onMyVouchersButtonPress,
+    onCopyCode,
+    showAppleWalletButton = true,
+    appleWalletButtonText = "Add to Apple Wallet",
+    onAppleWalletButtonPress,
+    appleWalletIconSource, // Now directly from props
+    qrCodeSize = 120,
+    activeTabColors = defaultActiveTabColors,
+    inactiveTabBackgroundColor = theme.surface || "#FFFFFF",
+    inactiveTabBorderColor: propInactiveTabBorderColor,
+    inactiveTabTextColor: propInactiveTabTextColor,
+    primaryButtonColors = defaultPrimaryButtonColors,
+    allowBarcodeSwitch = true,
+    renderBarcodeComponent,
+    renderCopyIcon,
+    amountIconComponent,
+    expiryIconComponent,
+    snapPoints: propSnapPoints,
+    sheetBackgroundStyle,
+    sheetHandleStyle,
+    backdropPressBehavior = "close",
+    bottomSheetOverrideProps,
+    tabGradientStart = { x: 0, y: 0.5 },
+    tabGradientEnd = { x: 1, y: 0.5 },
+    primaryButtonGradientStart = { x: 0, y: 0.5 },
+    primaryButtonGradientEnd = { x: 1, y: 0.5 },
+  } = props;
+
+
+  const finalInactiveTabBorderColor = propInactiveTabBorderColor || defaultInactiveTabBorderColor;
+  const finalInactiveTabTextColor = propInactiveTabTextColor || defaultInactiveTabTextColor;
+
+
+  const bottomSheetRef = useRef<BottomSheet>(null);
+  const finalSnapPoints = useMemo(
+    () => propSnapPoints || ["75%"],
+    [propSnapPoints],
+  );
+
+  const [tab, setTab] = React.useState<"qr" | "bar">("qr");
+
+  const handleCopyCode = async () => {
+    await Clipboard.setStringAsync(code);
+    if (onCopyCode) {
+      onCopyCode(code);
+    }
+  };
+
+  // Custom backdrop component
+  const renderBackdrop = useCallback(
+    (backdropProps: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...backdropProps}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+        pressBehavior={backdropPressBehavior}
+        opacity={0.5} 
+        style={[
+          backdropProps.style,
+          { backgroundColor: "rgba(0,0,0,0.5)" },
+        ]}
+      />
+    ),
+    [backdropPressBehavior, theme],
+  );
+  const iconSize = 24;
+  const defaultAmountIcon = (
+    <Ionicons style={styles.defaultIconStyle} name="cash-outline" size={iconSize} color={theme.onSurface} />
+  );
+  
+  const defaultExpiryIcon = (
+    <Ionicons style={styles.defaultIconStyle} name="time-outline" size={iconSize} color={theme.onSurface} />
+  );
+  
+  const defaultCopyIcon = (
+    <Ionicons
+      name="copy-outline"
+      size={iconSize}
+      color={finalInactiveTabTextColor}
+      style={styles.copyIconText}
+    />
+  );
+
+
+  return (
+    <BottomSheet
+      ref={bottomSheetRef}
+      index={visible ? 0 : -1}
+      snapPoints={finalSnapPoints}
+      enablePanDownToClose
+      onClose={onClose}
+      backgroundStyle={[styles.sheetBackgroundBase, sheetBackgroundStyle]}
+      handleIndicatorStyle={[styles.handleBase, sheetHandleStyle]}
+      backdropComponent={renderBackdrop}
+      {...bottomSheetOverrideProps}
+    >
+      <BottomSheetView style={styles.container}>
+        {image && (
+          <Image source={image} style={styles.giftImage} />
+        )}
+        <Text style={styles.title}>{title}</Text>
+
+        <View style={styles.infoRow}>
+          {amount && (
+            <View style={styles.infoItem}>
+              {amountIconComponent || defaultAmountIcon}
+              <Text style={styles.amountText}>
+                {amount} {currency}
+              </Text>
+            </View>
+          )}
+          {expiry && (
+            <View style={styles.infoItem}>
+              {expiryIconComponent || defaultExpiryIcon}
+              <Text style={styles.expiryText}>{expiry}</Text>
+            </View>
+          )}
+        </View>
+
+        <View style={styles.codeBox}>
+          <Text style={styles.codeReadyText}>{codeReadyText}</Text>
+          <View style={styles.qrContainer}>
+            {tab === "qr" ? (
+              <QRCode value={code} size={qrCodeSize} />
+            ) : renderBarcodeComponent ? (
+              renderBarcodeComponent(code)
+            ) : (
+              <View style={styles.barcodePlaceholder}>
+                <Text style={styles.barcodePlaceholderText}>Bar Code</Text>
+              </View>
+            )}
+          </View>
+
+          {allowBarcodeSwitch && (
+            <View style={styles.tabRow}>
+              <TouchableOpacity
+                style={[
+                  styles.tabButton,
+                  tab !== "qr" && {
+                    borderColor: finalInactiveTabBorderColor,
+                    borderWidth: 1.5,
+                  },
+                ]}
+                onPress={() => setTab("qr")}
+              >
+                <LinearGradient
+                  colors={
+                    tab === "qr"
+                      ? (activeTabColors as any)
+                      : [inactiveTabBackgroundColor, inactiveTabBackgroundColor]
+                  }
+                  start={tabGradientStart}
+                  end={tabGradientEnd}
+                  style={styles.tabGradient}
+                >
+                  <Text
+                    style={[
+                      styles.tabTextBase,
+                      tab === "qr"
+                        ? styles.tabTextActive
+                        : { color: finalInactiveTabTextColor },
+                    ]}
+                  >
+                    {qrCodeLabel}
+                  </Text>
+                </LinearGradient>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={[
+                  styles.tabButton,
+                  tab !== "bar" && {
+                    borderColor: finalInactiveTabBorderColor,
+                    borderWidth: 1.5,
+                  },
+                ]}
+                onPress={() => setTab("bar")}
+              >
+                <LinearGradient
+                  colors={
+                    tab === "bar"
+                      ? (activeTabColors as any)
+                      : [inactiveTabBackgroundColor, inactiveTabBackgroundColor]
+                  }
+                  start={{ x: 0, y: 0.5 }}
+                  end={{ x: 1, y: 0.5 }}
+                  style={styles.tabGradient}
+                >
+                  <Text
+                    style={[
+                      styles.tabTextBase,
+                      tab === "bar"
+                        ? styles.tabTextActive
+                        : { color: finalInactiveTabTextColor },
+                    ]}
+                  >
+                    {barCodeLabel}
+                  </Text>
+                </LinearGradient>
+              </TouchableOpacity>
+            </View>
+          )}
+
+          <View style={styles.codeDisplayRow}>
+            <Text style={styles.actualCodeText}>{code}</Text>
+            {onCopyCode && (
+              <TouchableOpacity
+                onPress={handleCopyCode}
+                style={styles.copyButton}
+              >
+                {renderCopyIcon ? renderCopyIcon() : defaultCopyIcon}
+              </TouchableOpacity>
+            )}
+          </View>
+
+          {showAppleWalletButton && appleWalletIconSource && (
+            <Pressable
+              style={styles.walletButton}
+              onPress={onAppleWalletButtonPress}
+            >
+              <Image source={appleWalletIconSource} style={styles.walletIcon} />
+              <Text style={styles.walletText}>{appleWalletButtonText}</Text>
+            </Pressable>
+          )}
+        </View>
+
+        {onMyVouchersButtonPress && (
+          <TouchableOpacity
+            style={styles.vouchersButton}
+            onPress={onMyVouchersButtonPress}
+          >
+            <LinearGradient
+              colors={primaryButtonColors as any}
+              start={primaryButtonGradientStart}
+              end={primaryButtonGradientEnd}
+              style={styles.vouchersGradient}
+            >
+              <Text style={styles.vouchersText}>{myVouchersButtonText}</Text>
+            </LinearGradient>
+          </TouchableOpacity>
+        )}
+      </BottomSheetView>
+    </BottomSheet>
+  );
+};
+
+const getStyles = (theme: ThemeType) =>
+  StyleSheet.create({
+    sheetBackgroundBase: {
+      backgroundColor: theme.surface || "#fff",
+      borderTopLeftRadius: 24,
+      borderTopRightRadius: 24,
+    },
+    handleBase: {
+      backgroundColor: theme.border || "#e0e0e0",
+      width: 40,
+      height: 5,
+      borderRadius: 2.5,
+      alignSelf: "center",
+      marginTop: 8,
+    },
+    container: {
+      flex: 1,
+      alignItems: "center",
+      paddingHorizontal: 20,
+      paddingTop: 8,
+      paddingBottom: 20,
+    },
+    giftImage: {
+      width: 64,
+      height: 64,
+      marginBottom: 10,
+      resizeMode: "contain",
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: "600",
+      marginBottom: 16,
+      color: theme.onSurface || "#333333",
+    },
+    infoRow: {
+      flexDirection: "row",
+      justifyContent: "space-around",
+      width: "100%",
+      marginBottom: 20,
+    },
+    infoItem: {
+      flexDirection: "row",
+      alignItems: "center",
+    },
+    defaultIconStyle: {
+      marginRight: 8,
+    },
+    amountText: {
+      fontSize: 16,
+      color: theme.onSurface || "#333333",
+      fontWeight: "500",
+    },
+    expiryText: {
+      fontSize: 16,
+      color: theme.onSurface || "#333333",
+      fontWeight: "500",
+    },
+    codeBox: {
+      backgroundColor: theme.surface || "#f8f8f8",
+      borderRadius: 18,
+      padding: 20,
+      width: "100%",
+      alignItems: "center",
+      marginBottom: 20,
+      shadowColor: "#000",
+      shadowOpacity: 0.08,
+      shadowRadius: 12,
+      shadowOffset: { width: 0, height: 4 },
+      elevation: 3,
+    },
+    codeReadyText: {
+      fontSize: 15,
+      color: theme.onSurface || "#666666",
+      marginBottom: 12,
+    },
+    qrContainer: {
+      marginBottom: 18,
+      alignItems: "center",
+      justifyContent: "center",
+      height: 130,
+    },
+    barcodePlaceholder: {
+      width: 150,
+      height: 70,
+      backgroundColor: theme.disabled || "#eeeeee",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: 8,
+    },
+    barcodePlaceholderText: {
+      color: theme.disabled || "#aaaaaa",
+      fontSize: 14,
+    },
+    tabRow: {
+      flexDirection: "row",
+      marginBottom: 16,
+      width: "100%",
+      justifyContent: "center",
+    },
+    tabButton: {
+      flex: 1,
+      marginHorizontal: 5,
+      borderRadius: 10,
+      overflow: "hidden",
+    },
+    tabGradient: {
+      paddingVertical: 10,
+      alignItems: "center",
+      borderRadius: 10,
+    },
+    tabTextBase: {
+      fontSize: 15,
+      fontWeight: "600",
+    },
+    tabTextActive: {
+      color: theme.onPrimary || "#fff", // Color for text on active tab gradient
+      fontWeight: "700",
+    },
+    codeDisplayRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      marginVertical: 12,
+      paddingHorizontal: 10,
+      paddingVertical: 6,
+      backgroundColor: theme.background || "#f0f0f0", // Subtle background
+      borderRadius: 8,
+    },
+    actualCodeText: {
+      fontSize: 16,
+      letterSpacing: 1.5,
+      color: theme.onBackground || "#444444",
+      fontWeight: "500",
+      marginRight: 10,
+    },
+    copyButton: {
+      padding: 6,
+    },
+    copyIconText: { // Base style for copy icon, color applied dynamically
+      fontSize: 20,
+    },
+    walletButton: {
+      flexDirection: "row",
+      alignItems: "center",
+      backgroundColor: "#000", // Apple Wallet button is typically black
+      borderRadius: 10,
+      paddingVertical: 10,
+      paddingHorizontal: 20,
+      marginTop: 10,
+    },
+    walletIcon: {
+      width: 30,
+      height: 20,
+      marginRight: 10,
+      resizeMode: "contain",
+    },
+    walletText: {
+      color: "#fff", // Text on black button
+      fontWeight: "600",
+      fontSize: 15,
+    },
+    vouchersButton: {
+      width: "100%",
+      // marginTop: "auto",
+      marginTop: 20,
+      borderRadius: 12,
+      overflow: "hidden",
+    },
+    vouchersGradient: {
+      paddingVertical: 16,
+      alignItems: "center",
+      borderRadius: 12,
+    },
+    vouchersText: {
+      color: theme.onPrimary || "#fff", // Text on primary button gradient
+      fontWeight: "700",
+      fontSize: 17,
+    },
+  });
+
+export default RedeemedVoucherSheet;