Mobile Ad Integration

POST https://api.mazeedplus.com/select-placement

// config/mazeed.ts
export const MAZEED_PUBLISHABLE_KEY = "pk_live_...";
export const MAZEED_PLACEMENT_ID = "checkout_success";

// api/mazeed.ts

import { MAZEED_PUBLISHABLE_KEY, MAZEED_PLACEMENT_ID } from "../config/mazeed";

export async function fetchMazeedPlacement(user: {
  userId: string;
  mobile: string;
  country?: string;
  currency?: string;
  firstname?: string;
  lastname?: string;
}) {
  const res = await fetch("https://api.mazeedplus.com/select-placement", {
    method: "POST",
    headers: {
      "x-publishable-api-key": MAZEED_PUBLISHABLE_KEY,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      identifier: MAZEED_PLACEMENT_ID,
      attributes: {
        userId: user.userId,
        mobile: user.mobile,
        country: user.country,
        currency: user.currency,
        firstname: user.firstname,
        lastname: user.lastname
      }
    })
  });

  if (!res.ok) {
    return { html: "", css: "" };
  }

  const data = await res.json();
  return {
    html: data.html as string | undefined,
    css: data.css as string | undefined
  };
}

npm install react-native-webview

// components/MazeedPlacementWebView.tsx

import React, { useMemo } from "react";
import { WebView } from "react-native-webview";

type Props = {
  html: string;  // Full HTML document from API
};

export const MazeedPlacementWebView: React.FC<Props> = ({ html }) => {
  if (!html) return null;

  return (
    <WebView
      originWhitelist={["*"]}
      source={{ html }}
    />
  );
};

// screens/PlacementScreen.tsx

import React, { useEffect, useState } from "react";
import { View, ActivityIndicator } from "react-native";
import { fetchMazeedPlacement } from "../api/mazeed";
import { MazeedPlacementWebView } from "../components/MazeedPlacementWebView";

export const PlacementScreen = () => {
  const [placement, setPlacement] = useState<{ html?: string; css?: string }>();

  useEffect(() => {
    (async () => {
      const result = await fetchMazeedPlacement({
        userId: "user_123",
        mobile: "+966512345678",
        country: "sa",
        currency: "sar"
      });

      setPlacement(result);
    })();
  }, []);

  if (!placement) return <ActivityIndicator />;

  if (!placement.html) return null;

  return (
    <View style={{ flex: 1 }}>
      <MazeedPlacementWebView html={placement.html} />
    </View>
  );
};

// components/MazeedPlacementWebView.tsx (Enhanced)

import React, { useMemo, useState } from "react";
import { WebView } from "react-native-webview";
import { View, ActivityIndicator, StyleSheet } from "react-native";

type Props = {
  html: string;  // Full HTML document from API
};

export const MazeedPlacementWebView: React.FC<Props> = ({ html }) => {
  const [isLoaded, setIsLoaded] = useState(false);

  if (!html) return null;

  return (
    <View style={styles.container}>
      {!isLoaded && (
        <View style={styles.loaderContainer}>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      )}
      <WebView
        originWhitelist={["*"]}
        source={{ html }}
        onLoadEnd={() => setIsLoaded(true)}
        style={[styles.webview, !isLoaded && styles.hidden]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  loaderContainer: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ffffff",
  },
  webview: {
    flex: 1,
  },
  hidden: {
    opacity: 0,
  },
});

mobile: "+966512345678"

mobile: "0512345678"  // Missing country code