@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/components/payment/paymentStyles.js

@@ -0,0 +1,399 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPaymentStyles = void 0;
+const react_native_1 = require("react-native");
+const styles_1 = require("../../styles");
+const createPaymentStyles = (colors) => react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        flex: 1,
+        padding: 16,
+    },
+    stepContainer: {
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        width: '100%',
+    },
+    section: {
+        marginBottom: 24,
+        width: '100%',
+    },
+    sectionTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: colors.text,
+        marginBottom: 12,
+        fontFamily: styles_1.fontFamilies.interSemiBold,
+    },
+    errorContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 32,
+    },
+    errorText: {
+        fontSize: 18,
+        color: 'red',
+        marginBottom: 24,
+    },
+    // Summary card styles
+    summaryCard: {
+        backgroundColor: '#fff',
+        borderRadius: 16,
+        padding: 24,
+        marginBottom: 24,
+        alignItems: 'center',
+        width: '100%',
+    },
+    summaryCardContent: {
+        alignItems: 'center',
+        width: '100%',
+    },
+    summaryCardIcon: {
+        marginBottom: 8,
+    },
+    summaryCardMainTitle: {
+        fontFamily: styles_1.fontFamilies.interBold,
+        fontWeight: 'bold',
+        fontSize: 28,
+        color: colors.text,
+        marginBottom: 2,
+        textAlign: 'center',
+        letterSpacing: 0.5,
+    },
+    summaryCardSubtitle: {
+        fontSize: 16,
+        color: colors.secondaryText,
+        textAlign: 'center',
+        marginBottom: 24,
+        width: '100%',
+    },
+    summaryCardItems: {
+        width: '100%',
+        marginBottom: 16,
+    },
+    summaryItemPrice: {
+        color: colors.text,
+        fontWeight: '600',
+        fontSize: 16,
+    },
+    summaryCardAmount: {
+        alignItems: 'center',
+        width: '100%',
+        marginBottom: 16,
+    },
+    summaryCardAmountLabel: {
+        fontSize: 16,
+        color: colors.secondaryText,
+        textAlign: 'center',
+        marginBottom: 8,
+    },
+    summaryCardAmountValue: {
+        fontSize: 32,
+        fontWeight: 'bold',
+        color: colors.text,
+        textAlign: 'center',
+        marginBottom: 8,
+        fontFamily: styles_1.fontFamilies.interBold,
+    },
+    summaryCardAmountDescription: {
+        fontSize: 14,
+        color: colors.secondaryText,
+        textAlign: 'center',
+        lineHeight: 20,
+    },
+    summaryCardDivider: {
+        height: 1,
+        backgroundColor: colors.border,
+        marginVertical: 16,
+        width: '100%',
+    },
+    summaryCardTotalSection: {
+        width: '100%',
+        marginBottom: 8,
+    },
+    summaryCardTotalRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingVertical: 4,
+    },
+    summaryCardTotalLabel: {
+        fontSize: 16,
+        color: colors.secondaryText,
+        fontWeight: '500',
+    },
+    summaryCardTotalValue: {
+        fontSize: 16,
+        color: colors.text,
+        fontWeight: '600',
+    },
+    // Card payment styles
+    cardPaymentCard: {
+        backgroundColor: '#fff',
+        borderRadius: 16,
+        padding: 24,
+        marginBottom: 24,
+        alignItems: 'center',
+        width: '100%',
+    },
+    cardPaymentContent: {
+        alignItems: 'center',
+        width: '100%',
+    },
+    cardPaymentIcon: {
+        marginBottom: 8,
+    },
+    cardPaymentMainTitle: {
+        fontFamily: styles_1.fontFamilies.interBold,
+        fontWeight: 'bold',
+        fontSize: 28,
+        color: colors.text,
+        marginBottom: 2,
+        textAlign: 'center',
+        letterSpacing: 0.5,
+    },
+    cardPaymentSubtitle: {
+        fontSize: 16,
+        color: colors.secondaryText,
+        textAlign: 'center',
+        marginBottom: 24,
+        width: '100%',
+    },
+    cardPaymentFields: {
+        width: '100%',
+        marginBottom: 16,
+    },
+    cardPaymentWaiting: {
+        fontSize: 14,
+        color: colors.secondaryText,
+        textAlign: 'center',
+        marginBottom: 8,
+    },
+    cardRowInfo: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 16,
+    },
+    cardRowIcon: {
+        marginRight: 8,
+    },
+    cardRowText: {
+        fontSize: 15,
+        color: colors.secondaryText,
+    },
+    cardFieldContainer: {
+        marginBottom: 16,
+    },
+    cardFieldRow: {
+        flexDirection: 'row',
+        gap: 12,
+    },
+    cardFieldHalfLeft: {
+        flex: 1,
+        marginRight: 6,
+    },
+    cardFieldHalfRight: {
+        flex: 1,
+        marginLeft: 6,
+    },
+    // Oxy Pay styles
+    oxyPayCard: {
+        backgroundColor: '#fff',
+        borderRadius: 16,
+        padding: 24,
+        marginBottom: 24,
+        alignItems: 'center',
+        width: '100%',
+    },
+    oxyPayContent: {
+        alignItems: 'center',
+        width: '100%',
+    },
+    oxyPayIcon: {
+        marginBottom: 8,
+    },
+    oxyPayMainTitle: {
+        fontFamily: styles_1.fontFamilies.interBold,
+        fontWeight: 'bold',
+        fontSize: 28,
+        color: colors.text,
+        marginBottom: 2,
+        textAlign: 'center',
+        letterSpacing: 0.5,
+    },
+    oxyPaySubtitle: {
+        fontSize: 16,
+        color: colors.secondaryText,
+        textAlign: 'center',
+        marginBottom: 8,
+    },
+    oxyPayBalanceBox: {
+        backgroundColor: `${colors.primary}22`,
+        borderRadius: 12,
+        padding: 8,
+        marginTop: 8,
+    },
+    oxyPayBalanceText: {
+        color: colors.primary,
+        fontWeight: '600',
+    },
+    oxyPayWaiting: {
+        fontSize: 14,
+        color: colors.secondaryText,
+        textAlign: 'center',
+        marginBottom: 8,
+    },
+    // FairCoin styles
+    faircoinCard: {
+        backgroundColor: '#fff',
+        borderRadius: 16,
+        padding: 24,
+        marginBottom: 24,
+        alignItems: 'center',
+        width: '100%',
+    },
+    faircoinContent: {
+        alignItems: 'center',
+        width: '100%',
+    },
+    faircoinIcon: {
+        marginBottom: 8,
+    },
+    faircoinMainTitle: {
+        fontFamily: styles_1.fontFamilies.interBold,
+        fontWeight: 'bold',
+        fontSize: 28,
+        color: '#1b1f0a',
+        marginBottom: 2,
+        textAlign: 'center',
+        letterSpacing: 0.5,
+    },
+    faircoinSubtitle: {
+        color: '#1b1f0a',
+        fontWeight: '700',
+        fontSize: 17,
+        marginBottom: 18,
+        textAlign: 'center',
+        letterSpacing: 0.2,
+    },
+    faircoinScanText: {
+        color: '#1b1f0a',
+        fontWeight: '600',
+        fontSize: 15,
+        marginBottom: 8,
+    },
+    faircoinQRCard: {
+        width: 200,
+        height: 200,
+        backgroundColor: '#fff',
+        borderRadius: 32,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 16,
+        padding: 16,
+        borderWidth: 3,
+        borderColor: '#9ffb50',
+        shadowColor: '#9ffb50',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.25,
+        shadowRadius: 12,
+        elevation: 8,
+        position: 'relative',
+    },
+    faircoinQRBadge: {
+        position: 'absolute',
+        bottom: 12,
+        right: 12,
+        backgroundColor: '#fff',
+        borderRadius: 16,
+        padding: 4,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 2,
+    },
+    faircoinTitle: {
+        fontSize: 16,
+        marginBottom: 8,
+        color: colors.text,
+        fontWeight: '600',
+        textAlign: 'center',
+    },
+    faircoinAddress: {
+        color: colors.secondaryText,
+        fontSize: 13,
+        textAlign: 'center',
+        marginTop: 6,
+        marginBottom: 2,
+    },
+    faircoinButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'center',
+        backgroundColor: `${colors.primary}11`,
+        borderRadius: 16,
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        marginTop: 6,
+        marginBottom: 2,
+    },
+    faircoinButtonText: {
+        color: colors.primary,
+        fontWeight: '600',
+        fontSize: 15,
+    },
+    faircoinWaiting: {
+        fontSize: 14,
+        color: colors.secondaryText,
+        textAlign: 'center',
+        marginBottom: 8,
+    },
+    faircoinPlaceholder: {
+        fontSize: 13,
+        color: colors.secondaryText,
+        textAlign: 'center',
+    },
+    // Success styles
+    successCard: {
+        backgroundColor: '#fff',
+        borderRadius: 16,
+        padding: 24,
+        marginBottom: 24,
+        alignItems: 'center',
+        width: '100%',
+    },
+    successContent: {
+        alignItems: 'center',
+        width: '100%',
+    },
+    successIcon: {
+        marginBottom: 8,
+    },
+    successMainTitle: {
+        fontFamily: styles_1.fontFamilies.interBold,
+        fontWeight: 'bold',
+        fontSize: 28,
+        color: colors.success || '#4BB543',
+        marginBottom: 2,
+        textAlign: 'center',
+        letterSpacing: 0.5,
+    },
+    successSubtitle: {
+        fontSize: 16,
+        color: colors.text,
+        textAlign: 'center',
+        marginBottom: 8,
+        width: '100%',
+    },
+    successMessage: {
+        fontSize: 14,
+        color: colors.secondaryText,
+        textAlign: 'center',
+        marginBottom: 8,
+    },
+});
+exports.createPaymentStyles = createPaymentStyles;

package/src/ui/components/payment/types.d.ts

@@ -0,0 +1,39 @@
+import type { Animated } from 'react-native';
+export type PaymentItem = {
+    type: 'product' | 'subscription' | 'service' | 'fee' | string;
+    name: string;
+    description?: string;
+    quantity?: number;
+    period?: string;
+    price: number;
+    currency?: string;
+};
+export interface PaymentGatewayResult {
+    success: boolean;
+    details?: Record<string, string | number | boolean | null>;
+    error?: string;
+}
+export interface CardDetails {
+    number: string;
+    expiry: string;
+    cvv: string;
+}
+export interface PaymentMethod {
+    key: string;
+    label: string;
+    icon: string;
+    description: string;
+}
+export interface PaymentStepAnimations {
+    fadeAnim: Animated.Value;
+    slideAnim: Animated.Value;
+    scaleAnim: Animated.Value;
+}
+export interface PaymentColors {
+    primary: string;
+    text: string;
+    secondaryText: string;
+    border: string;
+    success?: string;
+    background?: string;
+}

package/src/ui/components/payment/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/ui/components/photogrid/JustifiedPhotoGrid.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { FileMetadata } from '@oxyhq/core';
+export interface JustifiedPhotoGridProps {
+    photos: FileMetadata[];
+    photoDimensions: {
+        [key: string]: {
+            width: number;
+            height: number;
+        };
+    };
+    loadPhotoDimensions: (photos: FileMetadata[]) => Promise<void>;
+    createJustifiedRows: (photos: FileMetadata[], containerWidth: number) => FileMetadata[][];
+    renderJustifiedPhotoItem: (photo: FileMetadata, width: number, height: number, isLast: boolean) => React.ReactElement;
+    renderSimplePhotoItem: (photo: FileMetadata, index: number) => React.ReactElement;
+    textColor: string;
+    /**
+     * Full available width from parent. If omitted, component will measure itself and adapt responsively.
+     */
+    containerWidth?: number;
+    gap?: number;
+    minRowHeight?: number;
+    maxRowHeight?: number;
+    dateFormatLocale?: string;
+}
+declare const _default: React.NamedExoticComponent<JustifiedPhotoGridProps>;
+export default _default;

package/src/ui/components/photogrid/JustifiedPhotoGrid.js

@@ -0,0 +1,122 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+/**
+ * Responsive justified photo grid that stretches to the provided containerWidth.
+ * Uses flex rows with proportional children widths instead of absolute pixel widths so it always fills.
+ */
+const JustifiedPhotoGrid = ({ photos, photoDimensions, loadPhotoDimensions, createJustifiedRows, renderJustifiedPhotoItem, textColor, containerWidth: explicitWidth, gap = 4, minRowHeight = 100, maxRowHeight = 300, dateFormatLocale = 'en-US', }) => {
+    // Responsive width measurement if not explicitly provided
+    const [measuredWidth, setMeasuredWidth] = (0, react_1.useState)(null);
+    const effectiveWidth = explicitWidth ?? measuredWidth ?? 0; // 0 until measured
+    const onLayoutContainer = (0, react_1.useCallback)((e) => {
+        if (explicitWidth)
+            return; // ignore if controlled
+        const w = e.nativeEvent.layout.width;
+        setMeasuredWidth(prev => (prev === w ? prev : w));
+    }, [explicitWidth]);
+    // Ensure dimensions are loaded for displayed photos
+    (0, react_1.useEffect)(() => {
+        loadPhotoDimensions(photos);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [photos.map(p => p.id).join(',')]);
+    // Group photos by date first
+    const photosByDate = (0, react_1.useMemo)(() => {
+        return photos.reduce((groups, photo) => {
+            const date = new Date(photo.uploadDate).toDateString();
+            if (!groups[date])
+                groups[date] = [];
+            groups[date].push(photo);
+            return groups;
+        }, {});
+    }, [photos]);
+    const sortedDates = (0, react_1.useMemo)(() => Object.keys(photosByDate).sort((a, b) => new Date(b).getTime() - new Date(a).getTime()), [photosByDate]);
+    // Track measured width of each date section (may differ if parent applies horizontal padding/margins)
+    const [dateWidths, setDateWidths] = (0, react_1.useState)({});
+    const onLayoutDate = (0, react_1.useCallback)((date, width) => {
+        setDateWidths(prev => (prev[date] === width ? prev : { ...prev, [date]: width }));
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: '100%' }, onLayout: onLayoutContainer, children: effectiveWidth === 0 && !explicitWidth ? null : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: sortedDates.map((date) => {
+                const dayPhotos = photosByDate[date];
+                // createJustifiedRows should build rows such that the "ideal" height (availableWidth / totalAspect) stays within min/max.
+                // We pass the effective container width.
+                const dateWidth = dateWidths[date] ?? effectiveWidth; // fallback to overall width until measured
+                const rows = dateWidth > 0 ? createJustifiedRows(dayPhotos, dateWidth) : [];
+                return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { marginBottom: 24, width: '100%' }, onLayout: e => onLayoutDate(date, e.nativeEvent.layout.width), children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { fontSize: 14, fontWeight: '600', marginBottom: 12, color: textColor }, children: new Date(date).toLocaleDateString(dateFormatLocale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: '100%' }, children: rows.map((row, rowIndex) => {
+                                // Compute total aspect ratios using loaded dimensions (fallback 4/3)
+                                const aspects = row.map(p => {
+                                    const dims = photoDimensions[p.id];
+                                    return dims ? dims.width / dims.height : 4 / 3;
+                                });
+                                const totalAspect = aspects.reduce((a, b) => a + b, 0);
+                                const gapsTotal = gap * (row.length - 1);
+                                const availableWidth = dateWidth - gapsTotal;
+                                // Ideal height that perfectly fills width when preserving aspect ratios
+                                const idealHeight = availableWidth / totalAspect;
+                                // We rely on row construction keeping idealHeight within min/max bounds; if not, clamp but then distribute leftover/overflow.
+                                let rowHeight = idealHeight;
+                                let widthAdjustment = 0; // difference to distribute if clamped
+                                if (idealHeight < minRowHeight) {
+                                    rowHeight = minRowHeight;
+                                    widthAdjustment = availableWidth - rowHeight * totalAspect; // negative means overflow
+                                }
+                                else if (idealHeight > maxRowHeight) {
+                                    rowHeight = maxRowHeight;
+                                    widthAdjustment = availableWidth - rowHeight * totalAspect;
+                                }
+                                // Pre-compute widths maintaining aspect ratios
+                                let widths = aspects.map(ar => ar * rowHeight);
+                                // If we have widthAdjustment (due to clamping) distribute proportionally so row still fills exactly
+                                if (widthAdjustment !== 0) {
+                                    const widthSum = widths.reduce((a, b) => a + b, 0);
+                                    widths = widths.map(w => w + (w / widthSum) * widthAdjustment);
+                                }
+                                // To combat rounding issues, adjust last item width to fill precisely
+                                const widthSumRounded = widths.reduce((a, b) => a + b, 0);
+                                const roundingDiff = availableWidth - widthSumRounded;
+                                if (Math.abs(roundingDiff) > 0.5) {
+                                    widths[widths.length - 1] += roundingDiff; // minimal correction
+                                }
+                                return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flexDirection: 'row', width: '100%', marginBottom: 4 }, children: row.map((p, i) => {
+                                        const photoWidth = widths[i];
+                                        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: photoWidth, height: rowHeight, marginRight: i === row.length - 1 ? 0 : gap }, children: renderJustifiedPhotoItem(p, photoWidth, rowHeight, i === row.length - 1) }, p.id));
+                                    }) }, rowIndex));
+                            }) })] }, date));
+            }) })) }));
+};
+exports.default = react_1.default.memo(JustifiedPhotoGrid);

package/src/ui/components/styles/overlay.d.ts

@@ -0,0 +1,3 @@
+import { Animated } from 'react-native';
+export declare const isAnimatedValue: (it: number | string | Animated.AnimatedInterpolation<number | string>) => it is Animated.Value;
+export default function overlay<T extends Animated.Value | number>(elevation: T, surfaceColor?: string): T extends number ? string : Animated.AnimatedInterpolation<number | string>;

package/src/ui/components/styles/overlay.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isAnimatedValue = void 0;
+exports.default = overlay;
+const react_native_1 = require("react-native");
+// Simple hex color manipulation without color package
+const hexToRgb = (hex) => {
+    const r = Number.parseInt(hex.slice(1, 3), 16);
+    const g = Number.parseInt(hex.slice(3, 5), 16);
+    const b = Number.parseInt(hex.slice(5, 7), 16);
+    return [r, g, b];
+};
+const rgbToHex = (r, g, b) => {
+    return `#${[r, g, b].map(x => {
+        const hex = Math.round(x).toString(16);
+        return hex.length === 1 ? `0${hex}` : hex;
+    }).join('')}`;
+};
+const mixColors = (color1, color2, ratio) => {
+    const [r1, g1, b1] = hexToRgb(color1);
+    const [r2, g2, b2] = hexToRgb(color2);
+    const r = r1 + (r2 - r1) * ratio;
+    const g = g1 + (g2 - g1) * ratio;
+    const b = b1 + (b2 - b1) * ratio;
+    return rgbToHex(r, g, b);
+};
+const isAnimatedValue = (it) => it instanceof react_native_1.Animated.Value;
+exports.isAnimatedValue = isAnimatedValue;
+function overlay(elevation, surfaceColor = '#121212') {
+    if ((0, exports.isAnimatedValue)(elevation)) {
+        const inputRange = [0, 1, 2, 3, 8, 24];
+        // @ts-expect-error: TS doesn't seem to refine the type correctly
+        return elevation.interpolate({
+            inputRange,
+            outputRange: inputRange.map((elevation) => {
+                return calculateColor(surfaceColor, elevation);
+            }),
+        });
+    }
+    // @ts-expect-error: TS doesn't seem to refine the type correctly
+    return calculateColor(surfaceColor, elevation);
+}
+function calculateColor(surfaceColor, elevation = 1) {
+    let overlayTransparency;
+    if (elevation >= 1 && elevation <= 24) {
+        overlayTransparency = elevationOverlayTransparency[elevation];
+    }
+    else if (elevation > 24) {
+        overlayTransparency = elevationOverlayTransparency[24];
+    }
+    else {
+        overlayTransparency = elevationOverlayTransparency[1];
+    }
+    return mixColors(surfaceColor, '#FFFFFF', overlayTransparency * 0.01);
+}
+const elevationOverlayTransparency = {
+    1: 5,
+    2: 7,
+    3: 8,
+    4: 9,
+    5: 10,
+    6: 11,
+    7: 11.5,
+    8: 12,
+    9: 12.5,
+    10: 13,
+    11: 13.5,
+    12: 14,
+    13: 14.25,
+    14: 14.5,
+    15: 14.75,
+    16: 15,
+    17: 15.12,
+    18: 15.24,
+    19: 15.36,
+    20: 15.48,
+    21: 15.6,
+    22: 15.72,
+    23: 15.84,
+    24: 16,
+};

package/src/ui/components/styles/shadow.d.ts

@@ -0,0 +1,2 @@
+import { Animated, type ShadowStyleIOS, type ViewStyle } from 'react-native';
+export default function shadow(elevation?: number | Animated.Value, isV3?: boolean): ViewStyle | ShadowStyleIOS;