Widget Preview Points

Test 1: Points Alert Widget (Programmatic Initialization)

This widget is initialized programmatically using PointsWidget.init()
Note: Clicking on points-alert will hide it (no modal opens).

Widget will appear here...

PointsWidget.init({
    type: 'points-alert',
    lang: 'ar',
    points: 150,
    container: '#widget-1'
});
            

Test 2: Points Card Widget - Parent Modal Test ⭐

Click the widget card to test the parent modal functionality!
This widget opens a modal in the parent page (outside iframe), just like Tabby widgets.

Widget will appear here... Click it to open parent modal!

PointsWidget.init({
    type: 'points-card',
    lang: 'ar',
    points: 250,
    container: '#widget-2',
    widgetUrl: 'https://sandbox.papp.sa'
});
            

Test 3: Installments Widget (Programmatic Initialization)

This widget is initialized programmatically with callback URL

Widget will appear here...

PointsWidget.init({
    type: 'installments',
    lang: 'ar',
    container: '#widget-3',
    callbackUrl: 'https://example.com/callback'
});
            

Test 4: Auto-Initialization with Data Attributes

This widget is auto-initialized using data attributes on the script tag

Widget will appear here...

<script 
    src="https://sandbox.papp.sa/widget-loader.js"
    data-type="points-alert"
    data-lang="ar"
    data-points="300"
    data-container="#widget-4">
</script>
            

Test 5: Multiple Widgets on Same Page

Testing multiple widget instances on the same page

Widget A (Points Alert)

Widget B (Points Card)

Test 6: Dynamic Points Update

Initialize widget and then update points dynamically

Widget will appear here...

Test 7: Points Alert Close Functionality ✨

Test the close button functionality for points-alert!
Click the close button (X) on the widget to test the removal functionality.
The widget should be removed from both the iframe and parent container.
Important: Clicking anywhere on points-alert should also hide it (no modal opens).

Widget will appear here... Click the X button or anywhere on the alert to close it!

PointsWidget.init({
    type: 'points-alert',
    lang: 'ar',
    points: 150,
    container: '#widget-7'
});

// When close button is clicked:
// 1. Widget removes itself from iframe
// 2. Sends postMessage: { action: "hide-alert-widget", type: "points-alert" }
// 3. Parent removes the alert widget (no modal opens)

// When clicking anywhere on points-alert:
// 1. Sends postMessage: { action: "hide-alert-widget", type: "points-alert" }
// 2. Parent removes the alert widget (no modal opens)
            

Test 8: CORS Headers Testing 🔒

Test CORS headers for widget resources
This verifies that the widget modal endpoint and assets return proper CORS headers.

Click buttons below to test CORS...

// Test CORS with fetch()
fetch('https://sandbox.papp.sa/widget/modal?type=points-card&lang=ar')
    .then(response => {
        console.log('CORS Headers:', response.headers.get('Access-Control-Allow-Origin'));
    });

// Test CORS with image
const img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'https://sandbox.papp.sa/tool/assets/images/coin.svg';
            