Enhance subscription checkout process with Stripe integration (#910)

* Enhance subscription checkout process with Stripe integration

- Added support for Stripe payment processing by including the Stripe publishable key in the environment configuration.
- Updated the PricingCards and PlanDialog components to handle checkout sessions using client secrets instead of redirecting to a checkout URL.
- Introduced a new CheckoutModal component for embedded checkout experience.
- Modified the createCheckoutSession API to return a client secret for embedded checkout instead of success and cancel URLs.
- Updated translation keys to reflect changes in checkout session handling across multiple languages.

* Update CheckoutModal to adjust dialog content width for improved layout

* Update CheckoutModal to add vertical padding for improved content layout

* Update CheckoutModal to add horizontal padding for improved content layout

* Enhance CheckoutModal and createCheckoutSession for improved user experience

- Increased the maximum width of the CheckoutModal for better content display.
- Added a night theme appearance option to the createCheckoutSession API for a more visually appealing checkout process.

* Update CheckoutModal to apply background color to EmbeddedCheckout component

* Update CheckoutModal to set background color and remove unnecessary class from EmbeddedCheckout component

* Update CheckoutModal to remove border from dialog content for a cleaner appearance

* Update CheckoutModal to apply dark background class for improved styling consistency

* Update CheckoutModal to reduce maximum width for improved layout consistency

* Update CheckoutModal to further reduce maximum width for enhanced layout consistency

* Update CheckoutModal to further reduce maximum width for improved layout consistency

* Update CheckoutModal to apply consistent border styling for improved visual coherence

* Update CheckoutModal to increase maximum width for improved content display

* Update CheckoutModal to increase maximum width for better content display

* Update translations to replace empty strings with "7-day free trial" across multiple languages

* Update translations to replace "Pricing" with "Start for Free" across multiple languages

* Update translations to replace "Start free trial" with "Start for $0" across multiple languages

* Refactor PricingCards and CheckoutModal components to improve checkout handling and modal behavior

Author: goldflag

client/Dockerfile

@@ -29,10 +29,12 @@ ARG NEXT_PUBLIC_BACKEND_URL
 ARG NEXT_PUBLIC_DISABLE_SIGNUP
 ARG NEXT_PUBLIC_CLOUD
 ARG NEXT_PUBLIC_TURNSTILE_SITE_KEY
+ARG NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
 ENV NEXT_PUBLIC_BACKEND_URL=${NEXT_PUBLIC_BACKEND_URL}
 ENV NEXT_PUBLIC_DISABLE_SIGNUP=${NEXT_PUBLIC_DISABLE_SIGNUP}
 ENV NEXT_PUBLIC_CLOUD=${NEXT_PUBLIC_CLOUD}
 ENV NEXT_PUBLIC_TURNSTILE_SITE_KEY=${NEXT_PUBLIC_TURNSTILE_SITE_KEY}
+ENV NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=${NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY}
 
 WORKDIR /app/client
 RUN npm run build

client/messages/cs.json

@@ -868,7 +868,7 @@
   "cdVnd3": "Pro předplatné prosím vyber organizaci.",
   "Po5b4M": "Vybraný cenový plán nebyl nalezen. Uprav prosím posuvník.",
   "NLmfEq": "Nepodařilo se vytvořit platební relaci.",
-  "lMJ3zA": "URL pro platbu nebylo přijato.",
+  "Xtxl5C": "",
   "+bk3BW": "Předplatné selhalo: {message}",
   "9h0k8z": "Měsíční zobrazení stránek",
   "wYsv4Z": "Měsíční",
@@ -883,7 +883,7 @@
   "fr4eNi": "Testovací předplatné za $1 pro vývoj",
   "CnmIg8": "Předplatit ($1)",
   "5dX7fM": "Pokročilé funkce pro firemní týmy",
-  "5Wwopw": "Ceník",
+  "GnHuiT": "",
   "vYmJVk": "",
   "UHF9uv": "Tvé zkušební využití",
   "blVqkQ": "Aktuální využití",

client/messages/de.json

@@ -868,7 +868,7 @@
   "cdVnd3": "Bitte wählen Sie eine Organisation zum Abonnieren aus.",
   "Po5b4M": "Ausgewählter Preisplan nicht gefunden. Bitte passen Sie den Schieberegler an.",
   "NLmfEq": "Checkout-Sitzung konnte nicht erstellt werden.",
-  "lMJ3zA": "Keine Checkout-URL erhalten.",
+  "Xtxl5C": "",
   "+bk3BW": "Abonnement fehlgeschlagen: {message}",
   "9h0k8z": "Monatliche Seitenaufrufe",
   "wYsv4Z": "Monatlich",
@@ -883,8 +883,8 @@
   "fr4eNi": "1 $ Test-Abonnement für Entwicklung",
   "CnmIg8": "Abonnieren (1 $)",
   "5dX7fM": "Erweiterte Funktionen für Unternehmensteams",
-  "5Wwopw": "Preise",
-  "vYmJVk": "Starten Sie Ihre 7-tägige kostenlose Testversion — keine Kreditkartengebühren bis zum Ende der Testphase.",
+  "GnHuiT": "",
+  "vYmJVk": "",
   "UHF9uv": "Ihre Testnutzung",
   "blVqkQ": "Aktuelle Nutzung",
   "O/w//A": "{count} Events",

client/messages/en.json

@@ -868,7 +868,7 @@
   "cdVnd3": "Please select an organization to subscribe.",
   "Po5b4M": "Selected pricing plan not found. Please adjust the slider.",
   "NLmfEq": "Failed to create checkout session.",
-  "lMJ3zA": "Checkout URL not received.",
+  "Xtxl5C": "Checkout session not received.",
   "+bk3BW": "Subscription failed: {message}",
   "9h0k8z": "Monthly pageviews",
   "wYsv4Z": "Monthly",
@@ -883,7 +883,7 @@
   "fr4eNi": "$1 test subscription for development",
   "CnmIg8": "Subscribe ($1)",
   "5dX7fM": "Advanced features for enterprise teams",
-  "5Wwopw": "Pricing",
+  "GnHuiT": "Start for Free",
   "vYmJVk": "Start your 7-day free trial — no credit card charges until the trial ends.",
   "UHF9uv": "Your Trial Usage",
   "blVqkQ": "Current Usage",

client/messages/es.json

@@ -868,7 +868,7 @@
   "cdVnd3": "Por favor, selecciona una organización para suscribirte.",
   "Po5b4M": "No se encontró el plan de precios seleccionado. Por favor, ajusta el deslizador.",
   "NLmfEq": "Error al crear la sesión de pago.",
-  "lMJ3zA": "URL de pago no recibida.",
+  "Xtxl5C": "",
   "+bk3BW": "Suscripción fallida: {message}",
   "9h0k8z": "Visitas a la página mensuales",
   "wYsv4Z": "Mensual",
@@ -883,8 +883,8 @@
   "fr4eNi": "Suscripción de prueba de $1 para desarrollo",
   "CnmIg8": "Suscribirse ($1)",
   "5dX7fM": "Funciones avanzadas para equipos de la empresa",
-  "5Wwopw": "Precios",
-  "vYmJVk": "Comienza tu prueba gratuita de 7 días: no se realizarán cargos en tu tarjeta de crédito hasta que finalice la prueba.",
+  "GnHuiT": "",
+  "vYmJVk": "",
   "UHF9uv": "Uso de tu prueba",
   "blVqkQ": "Uso actual",
   "O/w//A": "{count} eventos",

client/messages/fr.json

@@ -868,7 +868,7 @@
   "cdVnd3": "Veuillez sélectionner une organisation pour vous abonner.",
   "Po5b4M": "Plan tarifaire sélectionné introuvable. Veuillez ajuster le curseur.",
   "NLmfEq": "Échec de la création de la session de paiement.",
-  "lMJ3zA": "URL de paiement non reçue.",
+  "Xtxl5C": "",
   "+bk3BW": "Échec de l'abonnement : {message}",
   "9h0k8z": "Pages vues mensuelles",
   "wYsv4Z": "Mensuel",
@@ -883,8 +883,8 @@
   "fr4eNi": "Abonnement test à 1 $ pour le développement",
   "CnmIg8": "S'abonner (1 $)",
   "5dX7fM": "Fonctionnalités avancées pour les équipes entreprise",
-  "5Wwopw": "Tarifs",
-  "vYmJVk": "Commencez votre essai gratuit de 7 jours — aucune facturation par carte bancaire avant la fin de l'essai.",
+  "GnHuiT": "",
+  "vYmJVk": "",
   "UHF9uv": "Votre utilisation d'essai",
   "blVqkQ": "Utilisation actuelle",
   "O/w//A": "{count} événements",

client/messages/it.json

@@ -868,7 +868,7 @@
   "cdVnd3": "Seleziona un'organizzazione per abbonarti.",
   "Po5b4M": "Piano tariffario selezionato non trovato. Regola il cursore.",
   "NLmfEq": "Impossibile creare la sessione di checkout.",
-  "lMJ3zA": "URL di checkout non ricevuto.",
+  "Xtxl5C": "",
   "+bk3BW": "Abbonamento fallito: {message}",
   "9h0k8z": "Visualizzazioni di pagina mensili",
   "wYsv4Z": "Mensile",
@@ -883,8 +883,8 @@
   "fr4eNi": "Abbonamento di prova da 1$ per lo sviluppo",
   "CnmIg8": "Abbonati (1$)",
   "5dX7fM": "Funzionalità avanzate per team aziendali",
-  "5Wwopw": "Prezzi",
-  "vYmJVk": "Inizia la tua prova gratuita di 7 giorni — nessun addebito sulla carta di credito fino al termine della prova.",
+  "GnHuiT": "",
+  "vYmJVk": "",
   "UHF9uv": "Utilizzo in Prova",
   "blVqkQ": "Utilizzo Attuale",
   "O/w//A": "{count} eventi",

client/messages/ja.json

@@ -868,7 +868,7 @@
   "cdVnd3": "サブスクリプションする組織を選択してください。",
   "Po5b4M": "選択した料金プランが見つかりません。スライダーを調整してください。",
   "NLmfEq": "チェックアウトセッションの作成に失敗しました。",
-  "lMJ3zA": "チェックアウトURLが受信されませんでした。",
+  "Xtxl5C": "",
   "+bk3BW": "サブスクリプションに失敗しました：{message}",
   "9h0k8z": "月間ページビュー",
   "wYsv4Z": "月額",
@@ -883,8 +883,8 @@
   "fr4eNi": "開発用$1テストサブスクリプション",
   "CnmIg8": "サブスクリプション（$1）",
   "5dX7fM": "エンタープライズチーム向けの高度な機能",
-  "5Wwopw": "料金",
-  "vYmJVk": "7日間の無料トライアルを開始しましょう。トライアル終了まで、クレジットカードには請求されません。",
+  "GnHuiT": "",
+  "vYmJVk": "",
   "UHF9uv": "トライアル使用量",
   "blVqkQ": "現在の使用量",
   "O/w//A": "{count}イベント",

client/messages/ko.json

@@ -868,7 +868,7 @@
   "cdVnd3": "구독하려면 조직을 선택해 주세요.",
   "Po5b4M": "선택한 요금제를 찾을 수 없습니다. 슬라이더를 조정해 주세요.",
   "NLmfEq": "결제 세션 생성에 실패했습니다.",
-  "lMJ3zA": "결제 URL을 받지 못했습니다.",
+  "Xtxl5C": "",
   "+bk3BW": "구독 실패: {message}",
   "9h0k8z": "월별 페이지뷰",
   "wYsv4Z": "월간",
@@ -883,8 +883,8 @@
   "fr4eNi": "개발용 $1 테스트 구독",
   "CnmIg8": "구독 ($1)",
   "5dX7fM": "엔터프라이즈 팀을 위한 고급 기능",
-  "5Wwopw": "요금제",
-  "vYmJVk": "7일 무료 체험을 시작하세요 — 체험 기간이 끝날 때까지 신용카드 요금이 청구되지 않습니다.",
+  "GnHuiT": "",
+  "vYmJVk": "",
   "UHF9uv": "체험판 사용량",
   "blVqkQ": "현재 사용량",
   "O/w//A": "{count}개 이벤트",

client/messages/pl.json

@@ -868,7 +868,7 @@
   "cdVnd3": "Wybierz organizację, aby subskrybować.",
   "Po5b4M": "Nie znaleziono wybranego planu cenowego. Dostosuj suwak.",
   "NLmfEq": "Nie udało się utworzyć sesji płatności.",
-  "lMJ3zA": "Nie otrzymano adresu URL płatności.",
+  "Xtxl5C": "",
   "+bk3BW": "Subskrypcja nie powiodła się: {message}",
   "9h0k8z": "Miesięczne odsłony",
   "wYsv4Z": "Miesięcznie",
@@ -883,8 +883,8 @@
   "fr4eNi": "Subskrypcja testowa za $1 do celów deweloperskich",
   "CnmIg8": "Subskrybuj ($1)",
   "5dX7fM": "Zaawansowane funkcje dla zespołów korporacyjnych",
-  "5Wwopw": "Cennik",
-  "vYmJVk": "Rozpocznij 7-dniowy bezpłatny okres próbny — karta kredytowa nie zostanie obciążona do końca okresu próbnego.",
+  "GnHuiT": "",
+  "vYmJVk": "",
   "UHF9uv": "Twoje wykorzystanie wersji próbnej",
   "blVqkQ": "Bieżące wykorzystanie",
   "O/w//A": "{count} zdarzeń",