From 7efdd724e20209c3f96668f3691af8ae902d1716 Mon Sep 17 00:00:00 2001
From: Aggre <hiroyuki.aggre@gmail.com>
Date: Mon, 15 Jul 2024 11:13:13 +0900
Subject: [PATCH] i18n for the checkout page of Clubs Payments

---
 src/plugins/clubs-payments/Id.astro | 11 ++++++++++-
 src/plugins/clubs-payments/i18n.ts  |  4 ++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/plugins/clubs-payments/Id.astro b/src/plugins/clubs-payments/Id.astro
index fd64c94d5..e3665dcb2 100644
--- a/src/plugins/clubs-payments/Id.astro
+++ b/src/plugins/clubs-payments/Id.astro
@@ -2,6 +2,8 @@
 import type { ComposedItem } from '.'
 import TransactionForm from './TransactionForm.svelte'
 import { Checkout } from '@devprotocol/clubs-core/ui/components'
+import { i18nFactory } from '@devprotocol/clubs-core'
+import { Strings } from './i18n'
 
 const { item, propertyAddress, rpcUrl, chainId, ...other } = Astro.props as {
   item: ComposedItem
@@ -10,6 +12,13 @@ const { item, propertyAddress, rpcUrl, chainId, ...other } = Astro.props as {
   chainId: number
 }
 
+const i18nBase = i18nFactory(Strings)
+const langs = Astro.request.headers
+  .get('accept-language')
+  ?.replace(/;q=[\d\.]+/g, '')
+  .split(',') ?? ['en']
+const i18n = i18nBase(langs)
+
 const { PUBLIC_POP_CLIENT_KEY } = import.meta.env
 ---
 
@@ -22,7 +31,7 @@ const { PUBLIC_POP_CLIENT_KEY } = import.meta.env
 <Checkout
   amount={item.price.yen}
   destination={propertyAddress}
-  fiatCurrency="YEN"
+  fiatCurrency={i18n('JPY')}
   rpcUrl={rpcUrl}
   payload={item.source.payload}
   description={item.source.description}
diff --git a/src/plugins/clubs-payments/i18n.ts b/src/plugins/clubs-payments/i18n.ts
index 13481d623..9007a1200 100644
--- a/src/plugins/clubs-payments/i18n.ts
+++ b/src/plugins/clubs-payments/i18n.ts
@@ -10,4 +10,8 @@ export const Strings = {
     en: 'Pay with a credit card',
     ja: 'クレジットカードで支払う',
   },
+  JPY: {
+    en: 'JPY',
+    ja: '円',
+  },
 } satisfies ClubsI18nParts