style(subscription): show gcash payment option

src/app/subscription/__tests__/subscription-screen.helpers.test.ts

@@ -36,7 +36,7 @@ describe("subscription screen helpers", () => {
     vi.unstubAllEnvs();
   });
 
-  it("defaults Philippines users to Ezpay and other countries to Stripe", () => {
+  it("defaults Philippines users to GCash and other countries to Stripe", () => {
     expect(getDefaultPayChannelForCountryCode("PH")).toBe("ezpay");
     expect(getDefaultPayChannelForCountryCode("ph")).toBe("ezpay");
     expect(getDefaultPayChannelForCountryCode("HK")).toBe("stripe");

src/app/subscription/components/subscription-checkout-button.tsx

@@ -247,10 +247,10 @@ function EzpayRedirectConfirmDialog({
       <div className={dialogStyles.dialog}>
         <div className={dialogStyles.header}>
           <h2 id="ezpay-redirect-title" className={dialogStyles.title}>
-            Continue to Ezpay?
+            Continue to GCash?
           </h2>
           <p className={dialogStyles.content}>
-            Your order has been created. Continue to Ezpay to finish the
+            Your order has been created. Continue to GCash to finish the
             payment.
           </p>
           <p className={dialogStyles.content}>Order No. {orderId}</p>

src/app/subscription/components/subscription-payment-method.module.css

@@ -78,3 +78,10 @@
   font-weight: 700;
   line-height: 1.1;
 }
+
+.optionLogo {
+  display: block;
+  width: min(100%, 92px);
+  max-height: 34px;
+  object-fit: contain;
+}

src/app/subscription/components/subscription-payment-method.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import Image from "next/image";
+
 import type { PayChannel } from "@/data/dto/payment";
 
 import styles from "./subscription-payment-method.module.css";
@@ -7,6 +9,7 @@ import styles from "./subscription-payment-method.module.css";
 const PAYMENT_METHODS: Array<{
   channel: PayChannel;
   title: string;
+  logoSrc?: string;
 }> = [
   {
     channel: "stripe",
@@ -14,7 +17,8 @@ const PAYMENT_METHODS: Array<{
   },
   {
     channel: "ezpay",
-    title: "Ezpay",
+    title: "GCash",
+    logoSrc: "/images/subscription/gcash-logo.svg",
   },
 ];
 
@@ -56,9 +60,21 @@ export function SubscriptionPaymentMethod({
               className={classes}
               disabled={disabled}
               aria-pressed={selected}
+              aria-label={method.title}
               onClick={() => onChange(method.channel)}
             >
-              <span className={styles.optionTitle}>{method.title}</span>
+              {method.logoSrc ? (
+                <Image
+                  src={method.logoSrc}
+                  alt=""
+                  aria-hidden="true"
+                  width={122}
+                  height={29}
+                  className={styles.optionLogo}
+                />
+              ) : (
+                <span className={styles.optionTitle}>{method.title}</span>
+              )}
             </button>
           );
         })}

src/app/subscription/subscription-screen.tsx

@@ -212,7 +212,7 @@ export function SubscriptionScreen({
             <SubscriptionPaymentMethod
               value={payment.payChannel}
               disabled={isPaymentBusy}
-              caption="Ezpay by default in the Philippines"
+              caption="GCash by default in the Philippines"
               onChange={(payChannel) => {
                 paymentDispatch({
                   type: "PaymentPayChannelChanged",