Referral Program (RAF)

This document explains the implementation and usage of the ReferralContextProvider and useRaf hook. These components provide a way to manage and utilize referral codes within the application.

ReferralContextProvider

The ReferralContextProvider is a context provider that manages the state of referral codes and URLs.

How it works

Fetching Referral Details

When the user is authenticated, it fetches the primary referral link details using a GraphQL query - PrimaryReferralLinkDocument.

Updating Referral URL

When a valid referral code is received, it updates the referral URL by appending the discount code as a search parameter.

Usage

To use the ReferralContextProvider, wrap it around your component tree. This will allow any nested component to access the referral context. Typically, in a Next.js application, this can be done in the layout file.

import ReferralContextProvider from "core/libs/raf/context/ReferralContextProvider"
 
function Layout({ children }) {
  return <ReferralContextProvider>{children}</ReferralContextProvider>
}

Context Values

The context provides the following values:

• referralCode: The user’s primary referral link object of type PrimaryReferralLink | null, or null if not available.
• referralUrl: The full URL including the referral code as a search parameter, of type string | null, or null if not available.

useRaf

The useRaf hook provides a simplified interface to access the referral context data.

Returned Values

The hook returns an object with two properties:

• referralDiscountCode: The user’s primary referral link object of type PrimaryReferralLink | null.
• referralUrl: The full URL including the referral code as a search parameter, of type string | null.

Usage

To use the useRaf hook, simply call it within a client-side rendered (CSR) component. It returns an object containing the referral data.

import useRaf from "core/libs/raf/hooks/useRaf"
 
function ReferralComponent() {
  const { referralDiscountCode, referralUrl } = useRaf()
 
  return (
    <div>
      {referralDiscountCode && (
        <p>Your referral code: {referralDiscountCode.discountCode.code}</p>
      )}
      {referralUrl && <p>Share this URL: {referralUrl}</p>}
    </div>
  )
}