Feature: Perk Partners

The perk partners feature handles partner onboarding and payment for US perk partner subscriptions. It uses Finix for payment processing and the legacy v1 API for backend operations.

Directory Structure


src/features/perk-partners/
  actions/
    save-identity-details.ts      # Submit partner identity to Finix
    save-finix-payment-details.ts  # Submit payment token to Finix
    apply-discount.ts              # Apply a discount code
  components/
    perk-partner-form.tsx           # Partner onboarding form
    perk-partner-subscribe-content.tsx  # Subscription selection page
    perk-partner-pricing-card.tsx   # Pricing tier card
    pricing.tsx                     # Pricing section with tier cards
    finix-payment-form.tsx          # Finix payment form integration
    perk-partner-testimonials.tsx
    perk-partner-terms.tsx
    perks-header-laptop.tsx         # Hero image component
  types/
    PerkPartnerTier.type.ts         # Pricing tier type definition
  utils/
    helpers.ts
    constants.ts                    # Pricing tier definitions

Subscription Flow

1. Browse Pricing (`/perks`)

The perks landing page shows pricing tiers defined in utils/constants.ts. Each tier has:


interface PerkPartnerTier {
  id: string;
  planName: string;
  title: string;
  subtitle: string;
  price: string;
  period: string;
  features: string[];
  link: string;
  type: "default" | "highlight";
  annualisedMonthlyPrice?: string;
  minimumTerm?: string;
}

2. Subscribe (`/perks/subscribe`)

The partner fills out an identity/business details form. On submission, saveIdentityDetails() sends the data to the legacy API:


await postFormData(
  "/api/external/saveFinixIdentityDetails.php",
  data,
  true,  // useLegacyApi = true
);

3. Payment (`/perks/payment`)

The Finix payment form collects bank/card details. On submission, saveFinixPaymentDetails() sends the payment token to the legacy API:


await postFormData(
  "/api/external/saveFinixPaymentDetails.php",
  { tokenId, identityId, planName, discountCode },
  true,  // useLegacyApi = true
);

On success, the response includes a magicLink URL that the partner is redirected to.

Discount Codes

Partners can apply discount codes via applyDiscount(discountCode), which calls POST /perk-partners/discount/apply on the v2 API. Returns the number of trial months granted.

Finix Configuration

Finix credentials are configured in src/config/config.ts:


const FINIX_ENVIRONMENT = process.env.NEXT_PUBLIC_FINIX_ENVIRONMENT || "sandbox";
const FINIX_APPLICATION_ID = process.env.NEXT_PUBLIC_FINIX_APPLICATION_ID || "APwXqoRUZFSa7V9Ljs59CYBt";

Route Config


"/perks": {
  title: "Perk Partners",
  rightContent: <PerksHeaderLaptop />,
  cta: "Prices & packages",
  ctaLink: "/perks#pricing",
  allowedRegions: ["us"],
},
"/perks/subscribe": {
  withHeader: false,
  allowedRegions: ["us"],
},
"/perks/payment": {
  withHeader: false,
  allowedRegions: ["us"],
},

The subscribe and payment pages hide the hero header for a focused form experience.

Error Handling

Payment errors include specific handling for Finix card validation failures. If the error response contains _embedded.errors[].authorization, a user-friendly message about invalid bank details is shown. Generic errors fall back to a contact email message.