33 / Pay annual subscription by PayPal (#68)

* Refactors paypal-buttons -> paypal-product-buttons WebComponent

* Pulls out address to data file

* Defines annual subscription prices data hash

* Styles paypal-product-buttons

* Styles <address>

* Details have cursor:pointer on the summary

* Moves Jyne section to separate page

* Rewrites payment options using details components

* Reworks translation typing

* Defines MembershipType enum

* Adds translations for MembershipType enum

* Can pay annual subs by PayPal

* Styles tables better

5 files changed, 246 insertions, 89 deletions

diff --git a/src/i18n/translate.ts b/src/i18n/translate.ts
index 8f27e4b..0366798 100644
--- a/src/i18n/translate.ts
+++ b/src/i18n/translate.ts
@@ -1,23 +1,23 @@
-import type CommitteeRole from '$enums/CommitteeRole';
 import type Locale from '$types/Locale';
-import type { TranslationsDictionary, Translation } from '$types/TranslationsDictionary';
+import type {
+  TranslationsDictionary,
+  Translation,
+  LocalesTranslationHash,
+} from '$types/TranslationsDictionary';
 import { defaultLocale } from './locales';
 
 type TranslationsDictionaryWith<
-  Key extends string | CommitteeRole,
-  Params,
+  Key extends string | number,
+  ParamsHash extends object,
 > = TranslationsDictionary<{
-  [key in Key]: { [locale in typeof defaultLocale]: Translation<Params> } & {
-    [locale in Locale]?: Translation<Params>;
-  };
+  [key in Key]: LocalesTranslationHash<ParamsHash>;
 }>;
 
 export default function (locale: Locale) {
-  return function <
-    Key extends string,
-    Params,
-    Dict extends TranslationsDictionaryWith<Key, Params>,
-  >(dict: Dict, params: { key: Key } & { [Param in keyof Params]: string }) {
+  return function <Key extends string | number, ParamsHash extends object>(
+    dict: TranslationsDictionaryWith<Key, ParamsHash>,
+    params: { key: Key } & ParamsHash
+  ) {
     if (!(params.key in dict)) {
       throw new Error(`
         Could not find translation for key '${params.key}'. Available keys were:
@@ -26,7 +26,9 @@ export default function (locale: Locale) {
           .join(', ')}
       `);
     }
-    const translation = dict[params.key][locale] ?? dict[params.key][defaultLocale];
+    const localesTranslationHash: LocalesTranslationHash<ParamsHash> = dict[params.key];
+    const translation: Translation<ParamsHash> =
+      localesTranslationHash[locale] ?? localesTranslationHash[defaultLocale];
     return translation(params);
   };
 }
diff --git a/src/i18n/translations/components/breadcrumbs.ts b/src/i18n/translations/components/breadcrumbs.ts
index 5aeff0e..8e3d027 100644
--- a/src/i18n/translations/components/breadcrumbs.ts
+++ b/src/i18n/translations/components/breadcrumbs.ts
@@ -22,6 +22,26 @@ const tBreadcrumbs = {
     sco: () => 'Scotsoun',
     'en-GB': () => 'Scotsoun',
   },
+  '/jyne/': {
+    sco: () => 'Jyne',
+    'en-GB': () => 'Join',
+  },
+  '/jyne/paypal/': {
+    sco: () => 'PayPal',
+    'en-GB': () => 'PayPal',
+  },
+  '/jyne/paypal/individual-uk/': {
+    sco: () => 'Individual (UK)',
+    'en-GB': () => 'Individual (UK)',
+  },
+  '/jyne/paypal/individual-non-uk/': {
+    sco: () => 'Individual (non-UK)',
+    'en-GB': () => 'Individual (non-UK)',
+  },
+  '/jyne/paypal/institution-uk/': {
+    sco: () => 'Institutional (UK)',
+    'en-GB': () => 'Institutional (UK)',
+  },
   '/news/': {
     sco: () => 'News',
     'en-GB': () => 'News',
diff --git a/src/i18n/translations/enums/membershipType.ts b/src/i18n/translations/enums/membershipType.ts
new file mode 100644
index 0000000..0e1db06
--- /dev/null
+++ b/src/i18n/translations/enums/membershipType.ts
@@ -0,0 +1,21 @@
+import type { TranslationsDictionary, LocalesTranslationHash } from '$types/TranslationsDictionary';
+
+import MembershipType from '$enums/MembershipType';
+
+const tEnum: { [key in MembershipType]: LocalesTranslationHash<object> } = {
+  [MembershipType.IndividualUk]: {
+    sco: () => 'Individual (UK)',
+    'en-GB': () => 'Individual (UK)',
+  },
+  [MembershipType.IndividualNonUk]: {
+    sco: () => 'Individual (non-UK)',
+    'en-GB': () => 'Individual (non-UK)',
+  },
+  [MembershipType.InstitutionUk]: {
+    sco: () => 'Institutional (UK)',
+    'en-GB': () => 'Institutional (UK)',
+  },
+};
+
+type Raw = typeof tEnum;
+export default tEnum as TranslationsDictionary<Raw>;
diff --git a/src/i18n/translations/pages/home.ts b/src/i18n/translations/pages/home.ts
index b577a46..6628682 100644
--- a/src/i18n/translations/pages/home.ts
+++ b/src/i18n/translations/pages/home.ts
@@ -119,82 +119,6 @@ const tPage = {
     sco: () => 'Aw furthsettins',
     'en-GB': () => 'All publications',
   },
-  jyne: {
-    sco: () => 'Jyne',
-    'en-GB': () => 'Join',
-  },
-  'why-jyne': {
-    sco: () => 'Why jyne the Scots Leid Associe?',
-    'en-GB': () => 'Why join the Scots Language Society?',
-  },
-  'why-jyne-para-1': {
-    sco: () => `
-      Bi jynin us, ye ar helpin us tae heize up the Scots leid, maistly bi giein
-      Scots scrievers a place tae lairn frae anither an finnd their ain Scots vyce.
-    `,
-    'en-GB': () => `
-      By joining us, you are helping us to champion the Scots language,
-      especially by giving Scots writers a place to learn from one
-      another and to find their own Scots voice.
-    `,
-  },
-  'why-jyne-para-2': {
-    sco: () => `
-      Forby, memmers get biannual issues o our aesome <i>Lallans</i> magazine gratis,
-      an hae the richt tae atten our Annual Collogues, whaur we haud our AGM an
-      enjoy talks frae kenspeckle spikkers on thochtie maiters effeirin til Scots
-      leid an leiteratur.
-    `,
-    'en-GB': () => `
-      In addition, members get biannual issues of our unique <i>Lallans</i>
-      magazine gratis, and have the right to attend our Annual Conferences, where
-      we hold our AGM and enjoy talks from highly regarded speakers on
-      thought-provoking subjects relating to Scots language and literature.
-    `,
-  },
-  'why-jyne-para-3': {
-    sco: () => `
-      Gin whit ye ar seekin is a community o prose-scrievers, makars, pleywreichts
-      an owersetters, aw wi muckle care fur the Scots leid, the ar nae peer wi hus,
-      the auldest Scots-leid activist organisation that’s about eenou an the anely
-      fully dedicatit til the forderance o new Scots leiteratur.
-    `,
-    'en-GB': () => `
-      If what you’re looking for is a community of prose-writers, poets,
-      playwrights and translators with a passion for the Scots language, we have
-      no equal. We are the oldest extant Scots-language activist organisation and
-      the only one solely dedicated to the development of new Scots literature.
-    `,
-  },
-  'hou-jyne': {
-    sco: () => 'Hou can A jyne?',
-    'en-GB': () => 'How can I join?',
-  },
-  'hou-jyne-para-1': {
-    sco: () => `
-      Fur individuals, memmership costs £20 per annum. Fur institutions, the stent is £25 per annum.
-    `,
-    'en-GB': () => `
-      For individuals, membership costs £20 per annum. For institutions, the fee is £25 per annum.
-    `,
-  },
-  'hou-jyne-para-2': {
-    sco: ({ membershipEmail }: { membershipEmail: string }) => `
-      Fur tae become a memmer, simply get in titch wi us at
-      <a href="mailto:${membershipEmail}">${membershipEmail}</a>
-      an we’ll provide ye wi our bank details; or ye can jyne bi sendin us a cheque
-      made peyable til <b>The Scots Language Society</b>. See
-      <a href="#contact">Contact us</a>
-      fur our address.
-    `,
-    'en-GB': ({ membershipEmail }: { membershipEmail: string }) => `
-      To become a member, simply get in touch with us at
-      <a href="mailto:${membershipEmail}">${membershipEmail}</a>
-      and we’ll provide you with our bank details; or you can join by sending us
-      a cheque made payable to <b>The Scots Language Society</b>. See
-      <a href="#contact">Contact us</a> for our address.
-    `,
-  },
   contact: {
     sco: () => 'Contact',
     'en-GB': () => 'Contact',
diff --git a/src/i18n/translations/pages/jyne.ts b/src/i18n/translations/pages/jyne.ts
new file mode 100644
index 0000000..bbcc67c
--- /dev/null
+++ b/src/i18n/translations/pages/jyne.ts
@@ -0,0 +1,190 @@
+import type { TranslationsDictionary } from '$types/TranslationsDictionary';
+
+import MembershipType from '$enums/MembershipType';
+import { annualSubscriptionPrice } from '$data/subscriptionPrices';
+import tMembershipType from '$i18n/translations/enums/membershipType';
+import translate from '$i18n/translate';
+
+const tPage = {
+  title: {
+    sco: () => 'Jyne',
+    'en-GB': () => 'Join',
+  },
+  'why-jyne': {
+    sco: () => 'Why jyne the Scots Leid Associe?',
+    'en-GB': () => 'Why join the Scots Language Society?',
+  },
+  'why-jyne-para-1': {
+    sco: () => `
+      Bi jynin us, ye ar helpin us tae heize up the Scots leid, maistly bi giein
+      Scots scrievers a place tae lairn frae anither an finnd their ain Scots vyce.
+    `,
+    'en-GB': () => `
+      By joining us, you are helping us to champion the Scots language,
+      especially by giving Scots writers a place to learn from one
+      another and to find their own Scots voice.
+    `,
+  },
+  'why-jyne-para-2': {
+    sco: () => `
+      Forby, memmers get biannual issues o our aesome <i>Lallans</i> magazine gratis,
+      an hae the richt tae atten our Annual Collogues, whaur we haud our AGM an
+      enjoy talks frae kenspeckle spikkers on thochtie maiters effeirin til Scots
+      leid an leiteratur.
+    `,
+    'en-GB': () => `
+      In addition, members get biannual issues of our unique <i>Lallans</i>
+      magazine gratis, and have the right to attend our Annual Conferences, where
+      we hold our AGM and enjoy talks from highly regarded speakers on
+      thought-provoking subjects relating to Scots language and literature.
+    `,
+  },
+  'why-jyne-para-3': {
+    sco: () => `
+      Gin whit ye ar seekin is a community o prose-scrievers, makars, pleywreichts
+      an owersetters, aw wi muckle care fur the Scots leid, the ar nae peer wi hus,
+      the auldest Scots-leid activist organisation that’s about eenou an the anely
+      fully dedicatit til the forderance o new Scots leiteratur.
+    `,
+    'en-GB': () => `
+      If what you’re looking for is a community of prose-writers, poets,
+      playwrights and translators with a passion for the Scots language, we have
+      no equal. We are the oldest extant Scots-language activist organisation and
+      the only one solely dedicated to the development of new Scots literature.
+    `,
+  },
+  'hou-jyne': {
+    sco: () => 'Hou can A jyne?',
+    'en-GB': () => 'How can I join?',
+  },
+  'hou-jyne-intro': {
+    sco: () => `
+      For tae jyne, ye can pey by PayPal, bank transfer or cheque. The fee is
+      as ablo.
+    `,
+    'en-GB': () => `
+      To join, you can pay by PayPal, bank transfer or cheque. The fee is as below.
+    `,
+  },
+  'subscription-price-table-caption': {
+    sco: () => 'Annual subscription price per membership type',
+    'en-GB': () => 'Annual subscription price per membership type',
+  },
+  'hou-pey-by-paypal-title': {
+    sco: () => 'PayPal',
+    'en-GB': () => 'PayPal',
+  },
+  'hou-pey-by-paypal-para': {
+    sco: () => 'Select a membership type',
+    'en-GB': () => 'Select a membership type',
+  },
+  'membership-type-individual-uk': {
+    sco: () => 'Ane year individual UK membership',
+    'en-GB': () => 'One year individual UK membership',
+  },
+  'membership-type-individual-uk-para': {
+    sco: () => `
+      Here, ye can pey for ane year’s annual subscription til the Scots Leid Associe
+      gin ye ar an individual and ye want yer copies o <i>Lallans</i> sent til
+      a UK address. This will cost
+      £${annualSubscriptionPrice[MembershipType.IndividualUk]}. Gin ye want
+      some ither kind o membership,
+      <a href="/sco/jyne/paypal">see the ither options</a>.
+    `,
+    'en-GB': () => `
+      Here, you can pay for one year’s annual subscription to the Scots Language
+      Society if you are an individual and you want your copies of <i>Lallans</i>
+      sent to a UK address. This will cost
+      £${annualSubscriptionPrice[MembershipType.IndividualNonUk]}. If you want
+      some other kind of membership,
+      <a href="/en-GB/jyne/paypal">see the other options</a>.
+    `,
+  },
+  'membership-type-individual-non-uk': {
+    sco: () => 'Ane year individual non-UK membership',
+    'en-GB': () => 'One year individual non-UK membership',
+  },
+  'membership-type-individual-non-uk-para': {
+    sco: () => `
+      Here, ye can pey for ane year’s annual subscription til the Scots Leid Associe
+      gin ye ar an individual an ye want yer copies o <i>Lallans</i> sent til
+      a non-UK address. This will cost
+      £${annualSubscriptionPrice[MembershipType.IndividualNonUk]}. Gin ye want
+      some ither kind o membership,
+      <a href="/sco/jyne/paypal">see the ither options</a>.
+    `,
+    'en-GB': () => `
+      Here, you can pay for one year’s annual subscription to the Scots Language
+      Society if you are an individual and you want your copies of <i>Lallans</i>
+      sent to a non-UK address. This will cost
+      £${annualSubscriptionPrice[MembershipType.IndividualNonUk]}. If you want
+      some other kind of membership,
+      <a href="/en-GB/jyne/paypal">see the other options</a>.
+    `,
+  },
+  'membership-type-institution-uk': {
+    sco: () => 'Ane year UK institutional membership',
+    'en-GB': () => 'One year UK institutional membership',
+  },
+  'membership-type-institution-uk-para': {
+    sco: () => `
+      Here, ye can pey for ane year’s annual subscription til the Scots Leid Associe
+      gin ye ar an institution. This will cost
+      £${annualSubscriptionPrice[MembershipType.InstitutionUk]}. Gin ye want
+      some ither kind o membership,
+      <a href="/sco/jyne/paypal">see the ither options</a>.
+    `,
+    'en-GB': () => `
+      Here, you can pay for one year’s annual subscription to the Scots
+      Language Society if you are an institution based in the UK. This will
+      cost £${annualSubscriptionPrice[MembershipType.InstitutionUk]}. If you
+      want some other kind of membership,
+      <a href="/en-GB/jyne/paypal">see the other options</a>.
+    `,
+  },
+  'hou-pey-by-bank-transfer-title': {
+    sco: () => 'Bank transfer',
+    'en-GB': () => 'Bank transfer',
+  },
+  'hou-pey-by-bank-transfer-para': {
+    sco: ({ emailAddress }: { emailAddress: string }) => `
+      Send us an email at <a href="mailto:${emailAddress}">${emailAddress}</a> an we’ll send ye oor bank details.
+    `,
+    'en-GB': ({ emailAddress }: { emailAddress: string }) => `
+      Send us an email at <a href="mailto:${emailAddress}">${emailAddress}</a> and we’ll send you our bank details.
+    `,
+  },
+  'hou-pey-by-cheque-title': {
+    sco: () => 'Cheque',
+    'en-GB': () => 'Cheque',
+  },
+  'hou-pey-by-cheque-para': {
+    sco: ({ address }: { address: string[] }) => `
+      Mak out a cheque til <b>The Scots Language Society</b>, syne send it til us at the follaein address:
+      <address>${address.join('<br />')}</address>
+    `,
+    'en-GB': ({ address }: { address: string[] }) => `
+      Make out a cheque to <b>The Scots Language Society</b>, then send it to us at the following address:
+      <address>${address.join('<br />')}</address>
+    `,
+  },
+  success: {
+    sco: () => 'Successfullie bocht membership',
+    'en-GB': () => 'Successfully bought membership',
+  },
+  'success-para': {
+    sco: ({ membershipType }: { membershipType: MembershipType }) => `
+      Ye hae successfullie bocht ane year’s
+      ${translate('sco')(tMembershipType, { key: membershipType })}
+      membership. We shuid be in contact wi ye some time shuin.
+    `,
+    'en-GB': ({ membershipType }: { membershipType: MembershipType }) => `
+      You have successfully bought one year’s
+      ${translate('en-GB')(tMembershipType, { key: membershipType })}
+      membership. We should be in contact with you some time soon.
+    `,
+  },
+};
+
+type Raw = typeof tPage;
+export default tPage as TranslationsDictionary<Raw>;