fix: attach branding template attrs to payment page

packages/webapp/src/containers/PaymentPortal/PaymentPortalPage.tsx

@@ -6,6 +6,8 @@ import { PaymentPortalBoot, usePaymentPortalBoot } from './PaymentPortalBoot';
 import { PaymentInvoicePreviewDrawer } from './drawers/PaymentInvoicePreviewDrawer/PaymentInvoicePreviewDrawer';
 import { DRAWERS } from '@/constants/drawers';
 import styles from './PaymentPortal.module.scss';
+import { useEffect } from 'react';
+import { hsl, lighten, parseToHsl } from 'polished';
 
 export default function PaymentPortalPage() {
   const { linkId } = useParams<{ linkId: string }>();
@@ -14,6 +16,7 @@ export default function PaymentPortalPage() {
     <BodyClassName className={styles.rootBodyPage}>
       <PaymentPortalBoot linkId={linkId}>
         <PaymentPortalHelmet />
+        <PaymentPortalCssVariables />
         <PaymentPortal />
         <PaymentInvoicePreviewDrawer name={DRAWERS.PAYMENT_INVOICE_PREVIEW} />
       </PaymentPortalBoot>
@@ -36,3 +39,33 @@ function PaymentPortalHelmet() {
     </Helmet>
   );
 }
+
+/**
+ * Renders the dynamic CSS variables for the current payment page.
+ * @returns {React.ReactNode}
+ */
+function PaymentPortalCssVariables() {
+  const { sharableLinkMeta } = usePaymentPortalBoot();
+
+  useEffect(() => {
+    if (sharableLinkMeta?.brandingTemplate?.primaryColor) {
+      const primaryColorHsl = parseToHsl(
+        sharableLinkMeta?.brandingTemplate?.primaryColor,
+      );
+      document.body.style.setProperty(
+        '--payment-page-background-color',
+        hsl(primaryColorHsl.hue, 0.19, 0.14),
+      );
+      document.body.style.setProperty(
+        '--payment-page-primary-button',
+        sharableLinkMeta?.brandingTemplate?.primaryColor,
+      );
+      document.body.style.setProperty(
+        '--payment-page-primary-button-hover',
+        lighten(0.05, sharableLinkMeta?.brandingTemplate?.primaryColor),
+      );
+    }
+  }, [sharableLinkMeta?.brandingTemplate?.primaryColor]);
+
+  return null;
+}