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

1 files changed, 0 insertions, 150 deletions

diff --git a/src/components/PayPalButtons.astro b/src/components/PayPalButtons.astro
deleted file mode 100644
index cdea5cb..0000000
--- a/src/components/PayPalButtons.astro
+++ /dev/null
@@ -1,150 +0,0 @@
----
-import env from '$lib/env';
-import type Price from '$types/Price';
-
-interface Props {
-  successPageUrl: string;
-  productDescription: string;
-  shortDescription: string;
-  totalPrice: Price;
-}
-
-const { successPageUrl, productDescription, shortDescription, totalPrice } = Astro.props;
-
-const PAYPAL_CLIENT_ID =
-  env.ENVIRONMENT === 'prod' ? env.PAYPAL_LIVE_CLIENT_ID : env.PAYPAL_SANDBOX_CLIENT_ID;
----
-
-<paypal-buttons
-  data-paypal-client-id={PAYPAL_CLIENT_ID}
-  data-success-page-url={successPageUrl}
-  data-product-description={productDescription}
-  data-short-description={shortDescription}
-  data-total-price={totalPrice}
->
-  <div id="paypal-button-container"></div>
-</paypal-buttons>
-
-<script>
-  import { PayPalNamespace, loadScript } from '@paypal/paypal-js';
-
-  const backendUrl = '/api';
-
-  class PayPalButtons extends HTMLElement {
-    constructor() {
-      super();
-
-      const paypalClientId = this.getStringDataAttribute('paypalClientId');
-
-      const paypalOptions = {
-        clientId: paypalClientId,
-        locale: 'en_GB',
-        commit: false,
-        currency: 'GBP',
-        intent: 'capture',
-      };
-
-      loadScript(paypalOptions)
-        .catch((err) => {
-          throw new Error('Failed to load the PayPal JS SDK script. ', err);
-        })
-        .then((paypal) => {
-          const constructButtons = paypal?.Buttons;
-          if (paypal && constructButtons) {
-            const successPageUrl = this.dataset['successPageUrl'] ?? '.';
-            this.makePaypalButtons(constructButtons, successPageUrl).render(
-              '#paypal-button-container'
-            );
-          }
-        });
-    }
-
-    makePaypalButtons(
-      constructButtons: Required<PayPalNamespace>['Buttons'],
-      successPageUrl: string
-    ) {
-      const productDescription = this.getStringDataAttribute('productDescription');
-      const shortDescription = this.getStringDataAttribute('shortDescription');
-      const totalPrice = this.getStringDataAttribute('totalPrice');
-
-      return constructButtons({
-        // This function is called to set up the transaction details without actually carrying it out
-        async createOrder() {
-          const body = JSON.stringify({
-            productDescription,
-            shortDescription,
-            totalPrice,
-          });
-          const headers = {
-            'Content-Type': 'application/json',
-          };
-
-          let response;
-          try {
-            response = await fetch(`${backendUrl}/order`, { method: 'POST', body, headers });
-          } catch (err) {
-            throw new Error(`Failed to create order. ${err}`);
-          }
-
-          if (!response.ok) {
-            throw new Error(`
-              Failed to create order. Backend response was
-              ${response.status} ${response.statusText}. ${await response.text()}
-            `);
-          }
-
-          const { orderId, approvalLink } = await response.json();
-          console.info(`
-            Successfully created order with ID
-            ${orderId}. Approval link: ${approvalLink}
-          `);
-          return orderId;
-        },
-
-        // This function is called after payment is confirmed
-        async onApprove(data) {
-          const body = JSON.stringify({
-            id: data.orderID,
-            isApproved: true,
-          });
-          const headers = {
-            'Content-Type': 'application/json',
-          };
-
-          let response;
-          try {
-            response = await fetch(`${backendUrl}/order`, { method: 'PATCH', body, headers });
-          } catch (err) {
-            throw new Error(`Failed to capture order. ${err}`);
-          }
-
-          if (!response.ok) {
-            throw new Error(`
-              Failed to capture order. Backend response was ${response.status}
-              ${response.statusText}. ${await response.text()}
-            `);
-          }
-
-          const { orderId, requestStatus } = await response.json();
-          console.info(`
-            Successfully captured order with ID ${orderId},
-            request status is ${requestStatus}.
-          `);
-
-          console.info('Redirecting to confirmation page...');
-          window.location.href = successPageUrl;
-        },
-      });
-    }
-
-    getStringDataAttribute(key: string): string {
-      const value = this.dataset[key];
-      if (!value || typeof value !== 'string') {
-        throw new Error(`data-${key} attribute not provided to PayPalButtons component.`);
-      }
-      return value;
-    }
-  }
-
-  customElements.define('paypal-buttons', PayPalButtons);
-</script>