VIP Tiers

Use Case: Displaying Tiers with Progress

This use case demonstrates how to integrate and display the available VIP Tiers and customer progress in your app or website. The goal is to provide a clear, engaging, and motivating way for customers to track their progress and the benefits they can unlock as they advance through the VIP tiers.

1️⃣ Step 1: Fetch All Available Tiers

To start, you need to call the Tiers Configurations API to fetch the available tiers and their associated benefits. This endpoint will return the details of each tier, including the name, icon, minimum progress required, and benefits for each tier.

Sample Response:

[
    {
        "name": "Basic",
        "minProgress": 0,
        "order": 1,
        "icon": "https://cdn.gameball.co/uploads/gb-library/levels-icons/level-a1.webp",
        "benefits": [
            {
                "type": "Entry Reward",
                "rankReward": 0,
                "walletReward": 0
            }
        ]
    },
    {
        "name": "Bronze",
        "minProgress": 30,
        "order": 2,
        "icon": "level-a2",
        "benefits": [
            {
                "type": "Entry Reward",
                "rankReward": 0,
                "walletReward": 12,
                "couponReward": {
                    "couponType": "0",
                    "discountValue": null,
                    "minOrderValue": null,
                    "product": null,
                    "collections": [],
                    "options": {
                        "expiryAfter": null,
                        "usageLimit": 1,
                        "usedCount": 0,
                        "capping": null,
                        "minReward": null,
                        "minOrderValue": null,
                        "isCashback": null,
                        "applyToFees": null,
                        "combinesWith": {
                            "orderDiscounts": false,
                            "productDiscounts": false,
                            "shippingDiscounts": false
                        },
                        "productId": null,
                        "productName": null,
                        "variantId": null,
                        "variantName": null,
                        "productDisplayName": null,
                        "couponPrefix": null,
                        "collections": [],
                        "productDisplayNames": [],
                        "hasCollections": false,
                        "platforms": [],
                        "redeemInstructions": [],
                        "instructions": null,
                        "source": null,
                        "couponName": null
                    }
                }
            },
            {
                "type": "Loyalty Points Earning Custom Configuration",
                "rewardWalletFactor": 70.0
            }
        ]
    },
    {
        "name": "Silver",
        "minProgress": 700,
        "order": 3,
        "icon": "level-a1",
        "benefits": []
    },
    {
        "name": "Gold",
        "minProgress": 6001,
        "order": 4,
        "icon": "level-a1",
        "benefits": []
    }
]

Visual Suggestion:

For a more engaging display, you can use icons for each tier to help customers visually distinguish between them.

Icons: Use small, recognizable images or symbols to represent each tier (e.g., a gold medal for the "Gold" tier).

---

2️⃣ Step 2: Fetch Customer Progress for VIP Tiers

Once the tiers are fetched, the next step is to call the Customer Tier Progress API to get the current progress of the logged-in customer.

Sample Response:

[
  {
    "tierName": "Gold",
    "tierId": 1234,
    "completionPercentage": 50.0,
    "achievedPoints": 95,
    "nextTierProgress": 190
  },
  {
    "tierName": "Platinum",
    "tierId": 5678,
    "completionPercentage": 0.0,
    "achievedPoints": 0,
    "nextTierProgress": 500
  }
]

Visual Suggestion:

The progress for each tier can be displayed in various ways:

1. Progress Bar: For each tier, you can use a progress bar to show how much progress the user has made. For example, if the user is halfway to the "Gold" tier (50%), the progress bar would be filled up to 50% to visually represent this.

2. Completion Percentage: Show the completion percentage next to each tier. For instance, "50% complete" for a user who has made halfway progress to the "Gold" tier.

3. Locked Tiers: For tiers that the customer has not unlocked yet (e.g., "Platinum"), you could gray out the tier and add a small text overlay like "Locked" or "Progress: 0/500 points".

3️⃣ Step 3: Combine Tiers and Progress for UI Display

After fetching both the tier configuration and the customer progress, you can combine the data to create an interactive and motivating display. Here’s how the combined data can be shown:

Completed Tiers:

For completed tiers (100% progress), show the tier icon and tier name with the progress bar fully filled. The benefits for completed tiers should also be clearly displayed, and you can highlight the rewards that the user has unlocked.

• Visual: Use a green progress bar to indicate a completed tier and show the "Claim Benefits" button for the customer to redeem rewards.

In-Progress Tiers:

For in-progress tiers (e.g., 50% progress), show the tier name, tier icon, and a progress bar showing how far the customer has progressed. Add a motivating call-to-action like "Complete 50 more points to unlock Gold!" and display the available benefits for when the customer reaches this tier.

• Visual: Use an orange progress bar for in-progress tiers, and show a button like "Level Up" or "Keep Going!" to encourage the customer to continue earning points.

Locked Tiers:

For locked tiers, simply show the tier name, tier icon, and a progress bar that is empty (0%). Additionally, you could display a text overlay like "This tier is locked" or "Earn more points to unlock".

• Visual: Use a gray progress bar and show the message "Locked" in a faded style to indicate that the tier has not been reached.

---

4️⃣ Key Visuals for VIP Tiers:

1. Progress Bars:

   • Use colored progress bars: green for completed, orange for in-progress, and gray for locked.

2. Tier Icons:

   • Use tier-specific icons (golden badge, platinum badge) for easy recognition.

3. Benefits List:

   • Show a list of benefits for each tier, with any specific rewards and links to redeem or learn more about them.