@open-mercato/checkout 0.6.7 → 0.6.8-develop.6874.1.982d6097d8

package/src/modules/checkout/components/PayPage.tsx

@@ -1,9 +1,9 @@
 "use client"
 
 import * as React from 'react'
+import { extensionPoints } from '@open-mercato/checkout/modules/checkout/extension-points'
 import Link from 'next/link'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'
-import { ComponentReplacementHandles } from '@open-mercato/shared/modules/widgets/component-registry'
 import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
 import { locales, type Locale } from '@open-mercato/shared/lib/i18n/config'
 import type { CustomFieldDisplayEntry } from '@open-mercato/shared/lib/crud/custom-fields'
@@ -270,17 +270,17 @@ export type PayPageFooterProps = {
   themeTokens: PayPageThemeTokens
 }
 
-const PAGE_HANDLE = ComponentReplacementHandles.page('checkout.pay-page')
-const HEADER_HANDLE = ComponentReplacementHandles.section('checkout.pay-page', 'header')
-const DESCRIPTION_HANDLE = ComponentReplacementHandles.section('checkout.pay-page', 'description')
-const SUMMARY_HANDLE = ComponentReplacementHandles.section('checkout.pay-page', 'summary')
-const PRICING_HANDLE = ComponentReplacementHandles.section('checkout.pay-page', 'pricing')
-const PAYMENT_HANDLE = ComponentReplacementHandles.section('checkout.pay-page', 'payment')
-const CUSTOMER_FORM_HANDLE = ComponentReplacementHandles.section('checkout.pay-page', 'customer-form')
-const LEGAL_CONSENT_HANDLE = ComponentReplacementHandles.section('checkout.pay-page', 'legal-consent')
-const GATEWAY_FORM_HANDLE = ComponentReplacementHandles.section('checkout.pay-page', 'gateway-form')
-const HELP_HANDLE = ComponentReplacementHandles.section('checkout.pay-page', 'help')
-const FOOTER_HANDLE = ComponentReplacementHandles.section('checkout.pay-page', 'footer')
+const PAGE_HANDLE = extensionPoints.hosts.payPage.componentId
+const HEADER_HANDLE = extensionPoints.hosts.header.componentId
+const DESCRIPTION_HANDLE = extensionPoints.hosts.description.componentId
+const SUMMARY_HANDLE = extensionPoints.hosts.summary.componentId
+const PRICING_HANDLE = extensionPoints.hosts.pricing.componentId
+const PAYMENT_HANDLE = extensionPoints.hosts.payment.componentId
+const CUSTOMER_FORM_HANDLE = extensionPoints.hosts.customerForm.componentId
+const LEGAL_CONSENT_HANDLE = extensionPoints.hosts.legalConsent.componentId
+const GATEWAY_FORM_HANDLE = extensionPoints.hosts.gatewayForm.componentId
+const HELP_HANDLE = extensionPoints.hosts.help.componentId
+const FOOTER_HANDLE = extensionPoints.hosts.footer.componentId
 
 // Checkout supports merchant branding defaults; keep those theme fallbacks isolated from general UI state colors.
 const CHECKOUT_THEME_FALLBACKS = {
@@ -1222,10 +1222,10 @@ export function PayPagePaymentForm({
         </Alert>
       ) : null}
 
-      <InjectionSpot spotId="checkout.pay-page:gateway-widget:before" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.gatewayWidgetBefore.spotId} context={injectionContext} />
       {embeddedPaymentSession && embeddedRenderer ? (
         <>
-          <InjectionSpot spotId="checkout.pay-page:gateway-widget:renderer:before" context={injectionContext} />
+          <InjectionSpot spotId={extensionPoints.hosts.gatewayRendererBefore.spotId} context={injectionContext} />
           {React.createElement(embeddedRenderer, {
             providerKey: embeddedPaymentSession.providerKey ?? '',
             transactionId: activeTransactionId ?? '',
@@ -1235,11 +1235,11 @@ export function PayPagePaymentForm({
             onComplete,
             onError,
           })}
-          <InjectionSpot spotId="checkout.pay-page:gateway-widget:renderer:after" context={injectionContext} />
+          <InjectionSpot spotId={extensionPoints.hosts.gatewayRendererAfter.spotId} context={injectionContext} />
         </>
       ) : (
         <>
-          <InjectionSpot spotId="checkout.pay-page:gateway-widget:actions:before" context={injectionContext} />
+          <InjectionSpot spotId={extensionPoints.hosts.gatewayActionsBefore.spotId} context={injectionContext} />
           <Button
             type="button"
             className="h-12 w-full rounded-xl text-base"
@@ -1256,10 +1256,10 @@ export function PayPagePaymentForm({
                   : t('checkout.payPage.actions.payNow', 'Pay now')}
             </span>
           </Button>
-          <InjectionSpot spotId="checkout.pay-page:gateway-widget:actions:after" context={injectionContext} />
+          <InjectionSpot spotId={extensionPoints.hosts.gatewayActionsAfter.spotId} context={injectionContext} />
         </>
       )}
-      <InjectionSpot spotId="checkout.pay-page:gateway-widget:after" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.gatewayWidgetAfter.spotId} context={injectionContext} />
 
       {paymentSession ? (
         <Button
@@ -1369,6 +1369,7 @@ export function PayPageFooter({ payload, themeTokens }: PayPageFooterProps) {
     pl: t('common.languages.polish', 'Polski'),
     es: t('common.languages.spanish', 'Español'),
     de: t('common.languages.german', 'Deutsch'),
+    ko: t('common.languages.korean', '한국어'),
   }), [t])
 
   const setLocale = React.useCallback(async (nextLocale: Locale) => {
@@ -2144,11 +2145,11 @@ export function PayPage({
 
   const leftColumn = (
     <div className="space-y-6">
-      <InjectionSpot spotId="checkout.pay-page:header:before" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.headerBefore.spotId} context={injectionContext} />
       <div data-component-handle={HEADER_HANDLE}>
         <HeaderComponent payload={payload} preview={isPreview} themeTokens={themeTokens} />
       </div>
-      <InjectionSpot spotId="checkout.pay-page:header:after" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.headerAfter.spotId} context={injectionContext} />
 
       {(payload.description || publicCustomFields.length > 0) ? (
         <>
@@ -2159,11 +2160,11 @@ export function PayPage({
               themeTokens={themeTokens}
             />
           </div>
-          <InjectionSpot spotId="checkout.pay-page:description:after" context={injectionContext} />
+          <InjectionSpot spotId={extensionPoints.hosts.descriptionAfter.spotId} context={injectionContext} />
         </>
       ) : null}
 
-      <InjectionSpot spotId="checkout.pay-page:customer-fields:before" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.customerFieldsBefore.spotId} context={injectionContext} />
       {shouldCollectCustomerDetails ? (
         <div data-component-handle={CUSTOMER_FORM_HANDLE}>
           <CustomerFormComponent
@@ -2177,13 +2178,13 @@ export function PayPage({
           />
         </div>
       ) : null}
-      <InjectionSpot spotId="checkout.pay-page:customer-fields:after" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.customerFieldsAfter.spotId} context={injectionContext} />
     </div>
   )
 
   const paymentFlow = (
     <>
-      <InjectionSpot spotId="checkout.pay-page:pricing:before" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.pricingBefore.spotId} context={injectionContext} />
       <div data-component-handle={PRICING_HANDLE}>
         <PricingComponent
           payload={payload}
@@ -2215,9 +2216,9 @@ export function PayPage({
           themeTokens={themeTokens}
         />
       </div>
-      <InjectionSpot spotId="checkout.pay-page:pricing:after" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.pricingAfter.spotId} context={injectionContext} />
 
-      <InjectionSpot spotId="checkout.pay-page:summary:before" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.summaryBefore.spotId} context={injectionContext} />
       <div data-component-handle={SUMMARY_HANDLE}>
         <SummaryComponent
           payload={payload}
@@ -2228,9 +2229,9 @@ export function PayPage({
           themeTokens={themeTokens}
         />
       </div>
-      <InjectionSpot spotId="checkout.pay-page:summary:after" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.summaryAfter.spotId} context={injectionContext} />
 
-      <InjectionSpot spotId="checkout.pay-page:legal-consent:before" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.legalConsentBefore.spotId} context={injectionContext} />
       <div data-component-handle={LEGAL_CONSENT_HANDLE}>
         <LegalConsentComponent
           payload={payload}
@@ -2242,9 +2243,9 @@ export function PayPage({
           themeTokens={themeTokens}
         />
       </div>
-      <InjectionSpot spotId="checkout.pay-page:legal-consent:after" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.legalConsentAfter.spotId} context={injectionContext} />
 
-      <InjectionSpot spotId="checkout.pay-page:submit:before" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.submitBefore.spotId} context={injectionContext} />
       <div data-component-handle={GATEWAY_FORM_HANDLE}>
         <PaymentFormComponent
           payload={payload}
@@ -2272,35 +2273,35 @@ export function PayPage({
           themeTokens={themeTokens}
         />
       </div>
-      <InjectionSpot spotId="checkout.pay-page:submit:after" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.submitAfter.spotId} context={injectionContext} />
 
-      <InjectionSpot spotId="checkout.pay-page:help:before" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.helpBefore.spotId} context={injectionContext} />
       <div data-component-handle={HELP_HANDLE}>
         <HelpComponent payload={payload} preview={isPreview} themeTokens={themeTokens} />
       </div>
-      <InjectionSpot spotId="checkout.pay-page:help:after" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.helpAfter.spotId} context={injectionContext} />
     </>
   )
 
   const rightColumn = (
     <>
-      <InjectionSpot spotId="checkout.pay-page:payment:before" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.paymentBefore.spotId} context={injectionContext} />
       <div data-component-handle={PAYMENT_HANDLE}>
         <PaymentSectionComponent payload={payload} preview={isPreview} themeTokens={themeTokens}>
           {paymentFlow}
         </PaymentSectionComponent>
       </div>
-      <InjectionSpot spotId="checkout.pay-page:payment:after" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.paymentAfter.spotId} context={injectionContext} />
     </>
   )
 
   const footer = (
     <>
-      <InjectionSpot spotId="checkout.pay-page:footer:before" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.footerBefore.spotId} context={injectionContext} />
       <div data-component-handle={FOOTER_HANDLE}>
         <FooterComponent payload={payload} themeTokens={themeTokens} />
       </div>
-      <InjectionSpot spotId="checkout.pay-page:footer:after" context={injectionContext} />
+      <InjectionSpot spotId={extensionPoints.hosts.footerAfter.spotId} context={injectionContext} />
     </>
   )
 

package/src/modules/checkout/extension-points.ts

@@ -0,0 +1,67 @@
+import {
+  componentExtensionHost,
+  dataTableExtensionHost,
+  defineModuleExtensionPoints,
+  injectionExtensionHost,
+} from '@open-mercato/shared/modules/widgets/extension-points'
+
+const payPageSpot = (spotId: string) => injectionExtensionHost({
+  family: 'detail',
+  spotId,
+  supported: ['render-widget'],
+  contextContract: 'checkout.pay-page.v1',
+  source: 'components/PayPage.tsx',
+})
+
+const payPageComponent = (componentId: string) => componentExtensionHost({
+  componentId,
+  propsContract: 'checkout.pay-page.v1',
+  source: 'components/PayPage.tsx',
+})
+
+export const extensionPoints = defineModuleExtensionPoints({
+  moduleId: 'checkout',
+  hosts: {
+    linksTable: dataTableExtensionHost({ tableId: 'checkout-links', source: 'backend/checkout/pay-links/page.tsx' }),
+    templatesTable: dataTableExtensionHost({ tableId: 'checkout-templates', source: 'backend/checkout/templates/page.tsx' }),
+    transactionsTable: dataTableExtensionHost({ tableId: 'checkout-transactions', source: 'backend/checkout/transactions/page.tsx' }),
+    gatewayWidgetBefore: payPageSpot('checkout.pay-page:gateway-widget:before'),
+    gatewayRendererBefore: payPageSpot('checkout.pay-page:gateway-widget:renderer:before'),
+    gatewayRendererAfter: payPageSpot('checkout.pay-page:gateway-widget:renderer:after'),
+    gatewayActionsBefore: payPageSpot('checkout.pay-page:gateway-widget:actions:before'),
+    gatewayActionsAfter: payPageSpot('checkout.pay-page:gateway-widget:actions:after'),
+    gatewayWidgetAfter: payPageSpot('checkout.pay-page:gateway-widget:after'),
+    headerBefore: payPageSpot('checkout.pay-page:header:before'),
+    headerAfter: payPageSpot('checkout.pay-page:header:after'),
+    descriptionAfter: payPageSpot('checkout.pay-page:description:after'),
+    customerFieldsBefore: payPageSpot('checkout.pay-page:customer-fields:before'),
+    customerFieldsAfter: payPageSpot('checkout.pay-page:customer-fields:after'),
+    pricingBefore: payPageSpot('checkout.pay-page:pricing:before'),
+    pricingAfter: payPageSpot('checkout.pay-page:pricing:after'),
+    summaryBefore: payPageSpot('checkout.pay-page:summary:before'),
+    summaryAfter: payPageSpot('checkout.pay-page:summary:after'),
+    legalConsentBefore: payPageSpot('checkout.pay-page:legal-consent:before'),
+    legalConsentAfter: payPageSpot('checkout.pay-page:legal-consent:after'),
+    submitBefore: payPageSpot('checkout.pay-page:submit:before'),
+    submitAfter: payPageSpot('checkout.pay-page:submit:after'),
+    helpBefore: payPageSpot('checkout.pay-page:help:before'),
+    helpAfter: payPageSpot('checkout.pay-page:help:after'),
+    paymentBefore: payPageSpot('checkout.pay-page:payment:before'),
+    paymentAfter: payPageSpot('checkout.pay-page:payment:after'),
+    footerBefore: payPageSpot('checkout.pay-page:footer:before'),
+    footerAfter: payPageSpot('checkout.pay-page:footer:after'),
+    payPage: payPageComponent('page:checkout.pay-page'),
+    header: payPageComponent('section:checkout.pay-page.header'),
+    description: payPageComponent('section:checkout.pay-page.description'),
+    summary: payPageComponent('section:checkout.pay-page.summary'),
+    pricing: payPageComponent('section:checkout.pay-page.pricing'),
+    payment: payPageComponent('section:checkout.pay-page.payment'),
+    customerForm: payPageComponent('section:checkout.pay-page.customer-form'),
+    legalConsent: payPageComponent('section:checkout.pay-page.legal-consent'),
+    gatewayForm: payPageComponent('section:checkout.pay-page.gateway-form'),
+    help: payPageComponent('section:checkout.pay-page.help'),
+    footer: payPageComponent('section:checkout.pay-page.footer'),
+  },
+})
+
+export default extensionPoints

package/src/modules/checkout/i18n/de.json

@@ -380,6 +380,7 @@
   "checkout.payPage.validation.priceSelectionRequired": "Bitte eine Zahlungsoption auswaehlen, um fortzufahren.",
   "checkout.payPage.validation.requiredField": "Bitte {field} ausfuellen.",
   "checkout.payPage.validation.thisField": "dieses Feld",
+  "checkout.search.subtitle.linkTemplate": "Link-Vorlage",
   "checkout.statusPage.backToPayment": "Zuruck zur Zahlungsseite",
   "checkout.statusPage.cancel.cancelled": "Zahlung abgebrochen",
   "checkout.statusPage.cancel.failed": "Zahlung fehlgeschlagen",

package/src/modules/checkout/i18n/en.json

@@ -380,6 +380,7 @@
   "checkout.payPage.validation.priceSelectionRequired": "Choose a payment option to continue.",
   "checkout.payPage.validation.requiredField": "Enter {field}.",
   "checkout.payPage.validation.thisField": "this field",
+  "checkout.search.subtitle.linkTemplate": "Link Template",
   "checkout.statusPage.backToPayment": "Back to payment page",
   "checkout.statusPage.cancel.cancelled": "Payment cancelled",
   "checkout.statusPage.cancel.failed": "Payment failed",

package/src/modules/checkout/i18n/es.json

@@ -380,6 +380,7 @@
   "checkout.payPage.validation.priceSelectionRequired": "Elige una opcion de pago para continuar.",
   "checkout.payPage.validation.requiredField": "Completa {field}.",
   "checkout.payPage.validation.thisField": "este campo",
+  "checkout.search.subtitle.linkTemplate": "Plantilla de enlace",
   "checkout.statusPage.backToPayment": "Volver a la pagina de pago",
   "checkout.statusPage.cancel.cancelled": "Pago cancelado",
   "checkout.statusPage.cancel.failed": "Pago fallido",