react-native-seel-widget 0.1.0 → 0.1.1

package/src/dto/IQuotesResponse.ts

@@ -0,0 +1,111 @@
+import type { IShippingOrigin, IShippingAddress } from './IQuotes';
+
+/**
+ * Quote status type
+ */
+export type QuoteStatus = 'accepted' | 'rejected';
+
+/**
+ * Customer information for quotes response
+ */
+export interface IQuotesResponseCustomer {
+  customer_id: string;
+  email: string;
+  first_name: string;
+  last_name: string;
+}
+
+export interface II18N {
+  lang: string;
+  texts: Map<string, string>[];
+}
+
+/**
+ * Extra information for quotes response
+ */
+export interface IQuotesResponseExtraInfo {
+  coverage_details_text?: string[];
+  display_widget_text?: string[];
+  opt_out_warning_text?: string;
+  privacy_policy_url?: string;
+  shipping_fee?: number;
+  terms_url?: string;
+  widget_title?: string;
+  i18n?: II18N;
+}
+
+/**
+ * Line item extra info (for nested structure)
+ */
+export interface IQuotesResponseLineItemExtraInfo {
+  [key: string]: unknown;
+}
+
+/**
+ * Line item information for quotes response
+ */
+export interface IQuotesResponseLineItem {
+  allocated_discounts?: number;
+  brand_name?: string;
+  category_1?: string;
+  category_2?: string;
+  category_3?: string;
+  category_4?: string;
+  condition?: string;
+  currency?: string;
+  extra_info?: IQuotesResponseLineItemExtraInfo;
+  final_price?: string;
+  image_url?: string;
+  is_final_sale?: boolean;
+  line_item_id?: string;
+  price?: number;
+  product_attributes?: string;
+  product_description?: string;
+  product_id?: string;
+  product_title?: string;
+  product_url?: string;
+  quantity?: number;
+  requires_shipping?: boolean;
+  retail_price?: number;
+  sales_tax?: number;
+  seller_id?: string;
+  seller_name?: string;
+  shipping_fee?: number;
+  shipping_origin?: IShippingOrigin;
+  sku?: string;
+  variant_id?: string;
+  variant_title?: string;
+}
+
+/**
+ * Quotes Response interface
+ * Fields are ordered logically: identifiers, metadata, configuration, data, status
+ */
+export default interface IQuotesResponse {
+  // Identifiers
+  quote_id: string;
+  cart_id: string;
+  merchant_id: string;
+  device_id: string;
+  session_id: string;
+
+  // Metadata
+  created_ts: string;
+  status: string;
+
+  // Configuration
+  type: string;
+  device_category: string;
+  device_platform: string;
+  is_default_on: boolean;
+
+  // Financial data
+  currency: string;
+  price: number;
+
+  // Data
+  line_items?: IQuotesResponseLineItem[];
+  customer?: IQuotesResponseCustomer;
+  shipping_address?: IShippingAddress;
+  extra_info?: IQuotesResponseExtraInfo;
+}

package/src/network/request.ts

@@ -0,0 +1,214 @@
+import { SeelWidgetSDK } from '../core/SeelWidgetSDK';
+
+export interface RequestHeaders {
+  'X-Seel-API-Key': string;
+  'X-Seel-API-Version': string;
+  [key: string]: string;
+}
+
+export interface RequestOptions {
+  headers?: RequestHeaders;
+  timeout?: number;
+}
+
+export interface GetRequestParams {
+  [key: string]: any;
+}
+
+const defaultXSeelApiKey: string = SeelWidgetSDK.shared.apiKey || '';
+const defaultXSeelApiVersion: string = SeelWidgetSDK.shared.apiVersion || '';
+const defaultRequestTimeout: number = SeelWidgetSDK.shared.requestTimeout;
+
+class Request {
+  private defaultHeaders: RequestHeaders = {
+    'Accept': 'application/json',
+    'Content-Type': 'application/json',
+    'X-Seel-API-Key': defaultXSeelApiKey,
+    'X-Seel-API-Version': defaultXSeelApiVersion,
+  };
+
+  private defaultTimeout: number = defaultRequestTimeout;
+
+  /**
+   * Set default request headers
+   */
+  setDefaultHeaders(headers: RequestHeaders): void {
+    this.defaultHeaders = { ...this.defaultHeaders, ...headers };
+  }
+
+  /**
+   * Set default timeout
+   */
+  setDefaultTimeout(timeout: number): void {
+    this.defaultTimeout = timeout;
+  }
+
+  /**
+   * Build query string
+   */
+  private buildQueryString(params: GetRequestParams): string {
+    const queryParams = new URLSearchParams();
+    Object.keys(params).forEach((key) => {
+      const value = params[key];
+      if (value !== undefined && value !== null && value !== '') {
+        queryParams.append(key, String(value));
+      }
+    });
+
+    return queryParams.toString();
+  }
+
+  /**
+   * Handle request timeout
+   */
+  private createTimeoutPromise(timeout: number): Promise<never> {
+    return new Promise((_, reject) => {
+      setTimeout(() => {
+        reject(new Error(`Request timeout after ${timeout}ms`));
+      }, timeout);
+    });
+  }
+
+  /**
+   * GET request
+   * @param url Request URL
+   * @param params Request parameters
+   * @param options Request options (headers, timeout, etc.)
+   * @returns Promise<any>
+   */
+  async get<T = any>(
+    url: string,
+    params?: GetRequestParams,
+    options?: RequestOptions
+  ): Promise<T> {
+    try {
+      // Build full URL (including query parameters)
+      let fullUrl = url;
+      if (params && Object.keys(params).length > 0) {
+        const queryString = this.buildQueryString(params);
+        fullUrl = `${url}${url.includes('?') ? '&' : '?'}${queryString}`;
+      }
+
+      // Merge request headers
+      const headers = {
+        ...this.defaultHeaders,
+        ...options?.headers,
+      };
+
+      // Create request configuration
+      const requestOptions: RequestInit = {
+        method: 'GET',
+        headers,
+      };
+
+      // Handle timeout
+      const timeout = options?.timeout || this.defaultTimeout;
+      const timeoutPromise = this.createTimeoutPromise(timeout);
+
+      // Send request
+      const fetchPromise = fetch(fullUrl, requestOptions);
+
+      // Use Promise.race to handle timeout
+      const response = await Promise.race([fetchPromise, timeoutPromise]);
+
+      // Check response status
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      // Parse response data
+      const data = await response.json();
+      return data as T;
+    } catch (error) {
+      // Unified error handling
+      if (error instanceof Error) {
+        throw new Error(`GET request failed: ${error.message}`);
+      }
+      throw new Error('GET request failed: Unknown error');
+    }
+  }
+
+  /**
+   * POST request
+   * @param url Request URL
+   * @param data Request body data
+   * @param options Request options (headers, timeout, etc.)
+   * @returns Promise<any>
+   */
+  async post<T = any>(
+    url: string,
+    data?: any,
+    options?: RequestOptions
+  ): Promise<T> {
+    try {
+      // Merge request headers
+      const headers = {
+        ...this.defaultHeaders,
+        ...options?.headers,
+      };
+
+      // Build request body
+      let body: string | undefined;
+      if (data !== undefined && data !== null) {
+        // If data is already a string, use it directly
+        if (typeof data === 'string') {
+          body = data;
+        } else {
+          // Otherwise, serialize to JSON
+          body = JSON.stringify(data);
+        }
+      }
+
+      // Create request configuration
+      const requestOptions: RequestInit = {
+        method: 'POST',
+        headers,
+        ...(body && { body }),
+      };
+
+      // Handle timeout
+      const timeout = options?.timeout || this.defaultTimeout;
+      const timeoutPromise = this.createTimeoutPromise(timeout);
+
+      // Send request
+      const fetchPromise = fetch(url, requestOptions);
+
+      // Use Promise.race to handle timeout
+      const response = await Promise.race([fetchPromise, timeoutPromise]);
+      // Check response status
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      // Parse response data
+      const responseData = await response.json();
+      return responseData as T;
+    } catch (error) {
+      // Unified error handling
+      if (error instanceof Error) {
+        throw new Error(`POST request failed: ${error.message}`);
+      }
+      throw new Error('POST request failed: Unknown error');
+    }
+  }
+}
+
+// Export singleton instance
+export const instance = new Request();
+
+// Export convenience methods
+export const get = <T = any>(
+  url: string,
+  params?: GetRequestParams,
+  options?: RequestOptions
+): Promise<T> => {
+  return instance.get<T>(url, params, options);
+};
+
+export const post = <T = any>(
+  url: string,
+  data?: any,
+  options?: RequestOptions
+): Promise<T> => {
+  return instance.post<T>(url, data, options);
+};

package/src/ui/coverage-info-footer.tsx

@@ -0,0 +1,186 @@
+import {
+  Image,
+  Linking,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  useColorScheme,
+  View,
+} from 'react-native';
+import KeyValue from '../constants/key_value';
+
+interface CoverageInfoFooterProps {
+  termsUrl: string;
+  privacyPolicyUrl: string;
+  dictionary: any;
+  onChangeOptedInValue: (value: boolean) => void;
+}
+
+export default function CoverageInfoFooter({
+  termsUrl = '',
+  privacyPolicyUrl = '',
+  dictionary = {},
+  onChangeOptedInValue = (_: boolean) => {},
+}: CoverageInfoFooterProps) {
+  const colorScheme = useColorScheme();
+  const isDark = false && colorScheme === 'dark';
+
+  const _poweredByText = [
+    defaultStyles.poweredByText,
+    isDark ? defaultStyles.dartPoweredByText : defaultStyles.lightPoweredByText,
+  ];
+  return (
+    <View style={[defaultStyles.container]}>
+      <TouchableOpacity
+        style={defaultStyles.optedInButton}
+        onPress={() => {
+          onChangeOptedInValue(true);
+        }}
+      >
+        <Text style={defaultStyles.optedInButtonTitle}>
+          {dictionary[KeyValue.cta_secure_purchase] ??
+            'Secure Your Purchase Now'}
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={defaultStyles.noNeedButton}
+        hitSlop={{ top: 8, bottom: 8 }}
+        onPress={() => {
+          onChangeOptedInValue(false);
+        }}
+      >
+        <Text style={defaultStyles.noNeedButtonTitle}>
+          {dictionary[KeyValue.cta_continue_without] ??
+            'Continue Without Protection'}
+        </Text>
+      </TouchableOpacity>
+      <View style={defaultStyles.horizontalStackView}>
+        <TouchableOpacity
+          style={defaultStyles.privacyPolicyButton}
+          hitSlop={{ top: 14 }}
+          onPress={() => {
+            Linking.openURL(privacyPolicyUrl);
+          }}
+        >
+          <Text style={defaultStyles.privacyPolicyButtonTitle}>
+            {dictionary[KeyValue.privacy_policy] ?? 'Privacy Policy'}
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={defaultStyles.termsButton}
+          hitSlop={{ top: 14 }}
+          onPress={() => {
+            Linking.openURL(termsUrl);
+          }}
+        >
+          <Text style={defaultStyles.termsButtonTitle}>
+            {dictionary[KeyValue.terms_of_service] ?? 'Terms of Service'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <View style={defaultStyles.poweredByContainer}>
+        <Text style={_poweredByText}>
+          {dictionary[KeyValue.powered_by] ?? 'Powered by'}
+        </Text>
+        <Image
+          style={defaultStyles.seelWordIcon}
+          source={require('../assets/images/seel_word.png')}
+        />
+      </View>
+    </View>
+  );
+}
+
+const defaultStyles = StyleSheet.create({
+  container: {
+    paddingTop: 12,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  optedInButton: {
+    paddingLeft: 16,
+    paddingRight: 16,
+    width: '100%',
+    height: 52,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#333333',
+  },
+  optedInButtonTitle: {
+    color: '#ffffff',
+    fontSize: 14,
+    fontFamily: Platform.select({
+      ios: 'Inter',
+    }),
+    textAlign: 'center',
+    fontWeight: 600,
+  },
+  noNeedButton: {
+    marginTop: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  noNeedButtonTitle: {
+    color: '#808692',
+    fontSize: 14,
+    fontFamily: Platform.select({
+      ios: 'Inter',
+    }),
+    textAlign: 'center',
+    fontWeight: 600,
+  },
+  horizontalStackView: {
+    width: '100%',
+    marginTop: 12,
+    padding: 14,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+  privacyPolicyButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  privacyPolicyButtonTitle: {
+    color: '#5C5F62',
+    fontSize: 10,
+    fontWeight: 400,
+    lineHeight: 16,
+    textDecorationLine: 'underline',
+  },
+  termsButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  termsButtonTitle: {
+    color: '#5C5F62',
+    fontSize: 10,
+    fontWeight: 400,
+    lineHeight: 16,
+    textDecorationLine: 'underline',
+  },
+  poweredByContainer: {
+    marginTop: 'auto',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  poweredByText: {
+    color: '#000000',
+    fontSize: 10,
+    fontWeight: 400,
+    lineHeight: 16,
+  },
+  lightPoweredByText: {
+    color: '#565656',
+  },
+  dartPoweredByText: {
+    color: 'white',
+  },
+  seelWordIcon: {
+    width: 32,
+    height: 16,
+  },
+});

package/src/ui/gradient-animation-text.tsx

@@ -0,0 +1,185 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import { Animated, StyleSheet, Text, View } from 'react-native';
+import type { TextStyle, ViewStyle } from 'react-native';
+
+export interface GradientAnimationTextProps {
+  /**
+   * Text content to display
+   */
+  text?: string;
+  /**
+   * Custom text style
+   */
+  textStyle?: TextStyle;
+  /**
+   * Custom container style
+   */
+  containerStyle?: ViewStyle;
+  /**
+   * Whether to start animation automatically (default: true)
+   */
+  autoStart?: boolean;
+  /**
+   * Animation duration in milliseconds for one cycle (default: 1500)
+   */
+  animationDuration?: number;
+  /**
+   * Gradient colors for loading effect (default: ['rgba(255,255,255,0)', 'rgba(255,255,255,0.3)', 'rgba(255,255,255,0)'])
+   */
+  gradientColors?: string[];
+}
+
+export interface GradientAnimationTextRef {
+  /**
+   * Start the loading animation
+   */
+  start: () => void;
+  /**
+   * Stop the loading animation
+   */
+  stop: () => void;
+}
+
+const GradientAnimationText = forwardRef<
+  GradientAnimationTextRef,
+  GradientAnimationTextProps
+>(
+  (
+    {
+      text = '',
+      textStyle,
+      containerStyle,
+      autoStart = true,
+      animationDuration = 1500,
+      gradientColors = [
+        'rgba(255, 255, 255, 0.3)',
+        'rgba(255, 255, 255, 0.6)',
+        'rgba(255, 255, 255, 0.3)',
+      ],
+    },
+    ref
+  ) => {
+    // Use a larger range for smoother animation across the container
+    const translateX = useRef(new Animated.Value(-300)).current;
+    const animationRef = useRef<any>(null);
+
+    const startAnimation = useCallback(() => {
+      // Stop existing animation if any
+      if (animationRef.current) {
+        animationRef.current.stop();
+      }
+      // Reset position to start (off-screen left)
+      translateX.setValue(-300);
+      // Create loop animation (move from left to right)
+      animationRef.current = Animated.loop(
+        Animated.timing(translateX, {
+          toValue: 300,
+          duration: animationDuration,
+          useNativeDriver: true,
+        })
+      );
+      animationRef.current.start();
+    }, [animationDuration, translateX]);
+
+    const stopAnimation = useCallback(() => {
+      if (animationRef.current) {
+        animationRef.current.stop();
+        animationRef.current = null;
+      }
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+      start: startAnimation,
+      stop: stopAnimation,
+    }));
+
+    useEffect(() => {
+      if (autoStart) {
+        startAnimation();
+      }
+      return () => {
+        stopAnimation();
+      };
+    }, [autoStart, startAnimation, stopAnimation]);
+
+    return (
+      <View style={[styles.container, containerStyle]}>
+        <View style={styles.textContainer}>
+          <Text style={[styles.text, textStyle]}>{text}</Text>
+          {/* Gradient loading effect - moving from left to right */}
+          <Animated.View
+            style={[
+              styles.gradientMask,
+              {
+                transform: [{ translateX }],
+              },
+            ]}
+            pointerEvents="none"
+          >
+            {/* Create gradient effect with three colors */}
+            <View style={styles.gradientOverlay}>
+              <View
+                style={[
+                  styles.gradientSection,
+                  { backgroundColor: gradientColors[0] },
+                ]}
+              />
+              <View
+                style={[
+                  styles.gradientSection,
+                  { backgroundColor: gradientColors[1] },
+                ]}
+              />
+              <View
+                style={[
+                  styles.gradientSection,
+                  { backgroundColor: gradientColors[2] },
+                ]}
+              />
+            </View>
+          </Animated.View>
+        </View>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+  textContainer: {
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  text: {
+    fontSize: 16,
+    color: '#333333',
+  },
+  gradientMask: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    width: 300,
+    height: '100%',
+    overflow: 'hidden',
+  },
+  gradientOverlay: {
+    flex: 1,
+    flexDirection: 'row',
+    width: 300,
+    height: '100%',
+  },
+  gradientSection: {
+    flex: 1,
+  },
+});
+
+export default GradientAnimationText;