Model for Card / Bundles

[jamesgorrie]

In the three tier setup - we're looking at creating a model that product first, but can still be easily used to create the UI we need to entice and inform people about our products.

@rBangay and @paul-daniel-dempsey have already made good headway on this (link missing as I think the branch isn't pushed).

After a discussion and some thought on the model I was bringing from Zuora and the model used in the UI - and idea sprung to mind about how we might combine the two is a nice way.

Some features that might be useful in the data:

• Product first
• Only varies data that changes when being in a different CountryGroup
• Uses easy to use keys over arrays on plans and charges to make it more accessible in the code e.g. product.plans.monthly.GBPCountries vs product.plans.find(p => p.id === 'monthly')?.charges.find(c => c.id === 'GBPCountries')
• Has strong analogies to the Zuora data, creating less dissonance there

type Plan = "monthly" | "annual";

type CountryGroupId =
  | "GBPCountries"
  | "UnitedStates"
  | "AUDCountries"
  | "EURCountries"
  | "NZDCountries"
  | "Canada"
  | "International";

// Zuora: product
type Card = {
  // Managed via CMS / hardcoded
  label: string; // Zuora uses name, but it seems we use `label` and `title` throughout the codebase
  description: string;
  benefits: string[];

  // @rBangay - I can't remember the other UI elements here, please feel free to add!

  // transformed from Zuora
  // Zuora: productRatePlans
  plans: Record<
    Plan,
    {
      label: string;
      // Zuora: productRatePlanCharges
      charges: Record<
        CountryGroupId,
        {
          label: string;
          price: number;
          discount?: {
            percentage: number;
            price: number;
          };
        }
      >;
    }
  >;
};

// Example
const digitalAndPrint: Card = {
  // Managed via CMS / hardcoded
  label: "Digital + print",
  description: "All features of All access digital",
  benefits: ["All features of All access digital"],

  // transformed from Zuora
  plans: {
    monthly: {
      label: "Monthly",
      charges: {
        GBPCountries: {
          label: "£10/month",
          price: 25,
          discount: {
            percentage: 64,
            price: 16,
          },
        },
        // ... Rest of the country groups
      },
    },
    annual: {
      label: "Annual",
      charges: {
        GBPCountries: {
          label: "£10/month",
          price: 2500,
          discount: {
            percentage: 64,
            price: 1600,
          },
        },
        // ... Rest of the country groups
      },
    },
  },
};

What about including two products in the model I hear you say?

This is true, we should be trying to accommodate multiple products e.g. "Supporter+ & Weekly" but as we are testing bundles, this is something we can look at extending the model with post-test.

For now we will just force Weekly onto the "Digital + print" Supporter+ product at checkout.

[rBangay]

update after discussions around consolidating the product and client models we now have the following model:

import type { RegularContributionType } from 'helpers/contributions';
import type { CountryGroupId } from 'helpers/internationalisation/countryGroup';

export interface TierBenefits {
  description?: Array<string | { copy: string; strong: boolean }>;
  list: Array<{ copy: string; tooltip?: string }>;
}

export interface PlanCosts {
	price: number;
	discount?: {
		percentage: number;
		price: number;
		duration: { value: number; period: RegularContributionType };
	};
}

interface FrequencyPlans {
	label: string;
	charges: Record<CountryGroupId, PlanCosts>;
}

interface TierPlans {
	monthly: FrequencyPlans;
	annual: FrequencyPlans;
}

interface TierCard {
	title: string;
	isRecommended?: true;
	benefits: TierBenefits;
	plans: TierPlans;
}

interface TierCards {
	tier1: TierCard;
	tier2: TierCard;
	tier3: TierCard;
}

const tier1: TierCard = {
	title: 'Support',
	benefits: {
		list: [
			{ copy: 'Regular supporter newsletter from inside our newsroom' },
			{ copy: 'See far fewer asks for support' },
		],
	},
	plans: {
		monthly: {
			label: 'Monthly',
			charges: {
				GBPCountries: {
					price: 4,
				},
				UnitedStates: { price: 4 },
				AUDCountries: { price: 4 },
				EURCountries: { price: 4 },
				NZDCountries: { price: 4 },
				Canada: { price: 4 },
				International: { price: 4 },
			},
		},
		annual: {
			label: 'Annual',
			charges: {
				GBPCountries: {
					price: 400,
				},
				UnitedStates: { price: 400 },
				AUDCountries: { price: 400 },
				EURCountries: { price: 400 },
				NZDCountries: { price: 400 },
				Canada: { price: 400 },
				International: { price: 400 },
			},
		},
	},
};

const tier2: TierCard = {
	title: 'All access digital',
	isRecommended: true,
	benefits: {
		list: [
			{
				copy: 'Guardian news app with personalised recommendations and offline reading',
				tooltip: 'TODO: copy',
			},
			{ copy: 'Ad-free reading on all your digital devices' },
			{
				copy: 'Regular supporter newsletter from inside our newsroom',
			},
			{ copy: 'See far fewer asks for support' },
		],
	},
	plans: {
		monthly: {
			label: 'Monthly',
			charges: {
				GBPCountries: {
					price: 10,
				},
				UnitedStates: { price: 10 },
				AUDCountries: { price: 10 },
				EURCountries: { price: 10 },
				NZDCountries: { price: 10 },
				Canada: { price: 10 },
				International: { price: 10 },
			},
		},
		annual: {
			label: 'Annual',
			charges: {
				GBPCountries: {
					price: 1000,
				},
				UnitedStates: { price: 1000 },
				AUDCountries: { price: 1000 },
				EURCountries: { price: 1000 },
				NZDCountries: { price: 1000 },
				Canada: { price: 1000 },
				International: { price: 1000 },
			},
		},
	},
};

const tier3: TierCard = {
	title: 'Digital + print',
	benefits: {
		description: [
			'All features of ',
			{ strong: true, copy: 'All access digital' },
		],
		list: [
			{
				copy: 'Guardian Weekly magazine delivered to your door, offering a digestible view of world news.',
				tooltip: 'tooltip text',
			},
		],
	},
	plans: {
		monthly: {
			label: 'Monthly',
			charges: {
				GBPCountries: {
					price: 25,
					discount: {
						percentage: 64,
						price: 16,
						duration: {
							value: 6,
							period: 'MONTHLY',
						},
					},
				},
				UnitedStates: {
					price: 25,
					discount: {
						percentage: 64,
						price: 16,
						duration: { value: 6, period: 'MONTHLY' },
					},
				},
				AUDCountries: {
					price: 25,
					discount: {
						percentage: 64,
						price: 16,
						duration: { value: 6, period: 'MONTHLY' },
					},
				},
				EURCountries: {
					price: 25,
					discount: {
						percentage: 64,
						price: 16,
						duration: { value: 6, period: 'MONTHLY' },
					},
				},
				NZDCountries: {
					price: 25,
					discount: {
						percentage: 64,
						price: 16,
						duration: { value: 6, period: 'MONTHLY' },
					},
				},
				Canada: {
					price: 25,
					discount: {
						percentage: 64,
						price: 16,
						duration: { value: 6, period: 'MONTHLY' },
					},
				},
				International: {
					price: 25,
					discount: {
						percentage: 64,
						price: 16,
						duration: { value: 6, period: 'MONTHLY' },
					},
				},
			},
		},
		annual: {
			label: 'Annual',
			charges: {
				GBPCountries: {
					price: 2500,
					discount: {
						percentage: 64,
						price: 1600,
						duration: {
							value: 1,
							period: 'ANNUAL',
						},
					},
				},
				UnitedStates: {
					price: 2500,
					discount: {
						percentage: 64,
						price: 1600,
						duration: { value: 1, period: 'ANNUAL' },
					},
				},
				AUDCountries: {
					price: 2500,
					discount: {
						percentage: 64,
						price: 1600,
						duration: { value: 1, period: 'ANNUAL' },
					},
				},
				EURCountries: {
					price: 2500,
					discount: {
						percentage: 64,
						price: 1600,
						duration: { value: 1, period: 'ANNUAL' },
					},
				},
				NZDCountries: {
					price: 2500,
					discount: {
						percentage: 64,
						price: 1600,
						duration: { value: 1, period: 'ANNUAL' },
					},
				},
				Canada: {
					price: 2500,
					discount: {
						percentage: 64,
						price: 1600,
						duration: { value: 1, period: 'ANNUAL' },
					},
				},
				International: {
					price: 2500,
					discount: {
						percentage: 64,
						price: 1600,
						duration: { value: 1, period: 'ANNUAL' },
					},
				},
			},
		},
	},
};

[jamesgorrie]

This was modelled in the Three Tier test and we can use this to further think about the bundling work we are going to be looking at.