feat(payment): support Indonesia QRIS checkout

src/app/subscription/subscription-screen.tsx

@@ -16,6 +16,7 @@ import {
   type PaymentAnalyticsContext,
 } from "@/lib/analytics";
 import { getPaymentMethodConfig } from "@/lib/payment/payment_method";
+import { useHasHydrated } from "@/hooks/use-has-hydrated";
 import { useUserState } from "@/stores/user/user-context";
 
 import {
@@ -55,11 +56,15 @@ export function SubscriptionScreen({
   sourceCharacterSlug = DEFAULT_CHARACTER_SLUG,
 }: SubscriptionScreenProps) {
   const userState = useUserState();
+  const hasHydrated = useHasHydrated();
   const countryCode = userState.currentUser?.countryCode;
   const paymentMethodConfig = getPaymentMethodConfig({
     countryCode,
     requestedPayChannel: initialPayChannel,
   });
+  const renderedPaymentMethodConfig = hasHydrated
+    ? paymentMethodConfig
+    : { ...paymentMethodConfig, showPaymentMethodSelector: false };
   const {
     payment,
     paymentDispatch,
@@ -225,10 +230,14 @@ export function SubscriptionScreen({
         </div>
 
         <PaymentMethodSelector
-          config={paymentMethodConfig}
+          config={renderedPaymentMethodConfig}
           value={payment.payChannel}
           disabled={isPaymentBusy}
-          caption="GCash by default in the Philippines"
+          caption={
+            paymentMethodConfig.ezpayDisplayName === "QRIS"
+              ? "QRIS by default in Indonesia"
+              : "GCash by default in the Philippines"
+          }
           className={styles.paymentMethodSlot}
           analyticsKey="subscription.payment_method"
           onChange={handlePaymentMethodChange}