diff --git a/public/images/subscription/gcash-logo.svg b/public/images/subscription/gcash-logo.svg new file mode 100644 index 00000000..f15582f8 --- /dev/null +++ b/public/images/subscription/gcash-logo.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/app/subscription/__tests__/subscription-screen.helpers.test.ts b/src/app/subscription/__tests__/subscription-screen.helpers.test.ts index 7cc8749a..46648e3d 100644 --- a/src/app/subscription/__tests__/subscription-screen.helpers.test.ts +++ b/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"); diff --git a/src/app/subscription/components/subscription-checkout-button.tsx b/src/app/subscription/components/subscription-checkout-button.tsx index 4438509b..38b0bc70 100644 --- a/src/app/subscription/components/subscription-checkout-button.tsx +++ b/src/app/subscription/components/subscription-checkout-button.tsx @@ -247,10 +247,10 @@ function EzpayRedirectConfirmDialog({

- Continue to Ezpay? + Continue to GCash?

- Your order has been created. Continue to Ezpay to finish the + Your order has been created. Continue to GCash to finish the payment.

Order No. {orderId}

diff --git a/src/app/subscription/components/subscription-payment-method.module.css b/src/app/subscription/components/subscription-payment-method.module.css index b0a578e1..c3b6ecee 100644 --- a/src/app/subscription/components/subscription-payment-method.module.css +++ b/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; +} diff --git a/src/app/subscription/components/subscription-payment-method.tsx b/src/app/subscription/components/subscription-payment-method.tsx index a714a9e1..caba5efc 100644 --- a/src/app/subscription/components/subscription-payment-method.tsx +++ b/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)} > - {method.title} + {method.logoSrc ? ( + + ) : ( + {method.title} + )} ); })} diff --git a/src/app/subscription/subscription-screen.tsx b/src/app/subscription/subscription-screen.tsx index 94d570b3..8c078a66 100644 --- a/src/app/subscription/subscription-screen.tsx +++ b/src/app/subscription/subscription-screen.tsx @@ -212,7 +212,7 @@ export function SubscriptionScreen({ { paymentDispatch({ type: "PaymentPayChannelChanged",