strapi-plugin-payone-provider 5.6.13 → 5.6.14

package/admin/src/pages/App/components/GooglePayConfigPanel.jsx

@@ -9,6 +9,7 @@ import {
 } from "@strapi/design-system";
 import { Check } from "@strapi/icons";
 import GooglePayConfig from "./GooglePayConfig";
+import { usePluginTranslations } from "../../hooks/usePluginTranslations";
 
 const GooglePayConfigPanel = ({
   settings,
@@ -17,6 +18,7 @@ const GooglePayConfigPanel = ({
   onSave,
   onBack,
 }) => {
+  const { t } = usePluginTranslations();
   const [googlePayConfig, setGooglePayConfig] = React.useState(
     settings?.googlePayConfig || {}
   );
@@ -42,9 +44,7 @@ const GooglePayConfigPanel = ({
 
       <Flex direction="column" gap={4} alignItems="stretch" paddingTop={4}>
         <Typography variant="sigma" textColor="neutral600">
-          Note: Google Pay configuration is used for Google Pay payment
-          requests. Make sure to configure the correct card networks,
-          authentication methods, and merchant information for your region.
+          {t("googlePayConfigPanel.note", "Note: Google Pay configuration is used for Google Pay payment requests. Make sure to configure the correct card networks, authentication methods, and merchant information for your region.")}
         </Typography>
         <Button
           loading={isSaving}
@@ -54,7 +54,7 @@ const GooglePayConfigPanel = ({
           variant="default"
           maxWidth={"220px"}
         >
-          Save Configuration
+          {t("googlePayConfigPanel.save", "Save Configuration")}
         </Button>
       </Flex>
     </Flex>

package/admin/src/pages/App/components/GooglePaybutton.jsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Box, Flex, Typography } from "@strapi/design-system";
 import { injectGooglePayScript } from "../../utils/injectGooglePayScript";
+import { usePluginTranslations } from "../../hooks/usePluginTranslations";
 
 const GooglePayButton = ({
   amount,
@@ -9,6 +10,7 @@ const GooglePayButton = ({
   onError,
   settings,
 }) => {
+  const { t } = usePluginTranslations();
   const [isReady, setIsReady] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(true);
   const buttonContainerRef = React.useRef(null);
@@ -308,7 +310,7 @@ const GooglePayButton = ({
             textColor="neutral600"
             style={{ textAlign: "left" }}
           >
-            Loading Google Pay...
+            {t("googlePay.loading", "Loading Google Pay...")}
           </Typography>
         )}
         {!isLoading && !isReady && (
@@ -317,7 +319,7 @@ const GooglePayButton = ({
             textColor="neutral600"
             style={{ textAlign: "left" }}
           >
-            Google Pay is not available
+            {t("googlePay.notAvailable", "Google Pay is not available")}
           </Typography>
         )}
         {!isLoading && isReady && (
@@ -328,15 +330,14 @@ const GooglePayButton = ({
               fontWeight="semiBold"
               style={{ textAlign: "left" }}
             >
-              Google Pay Payment
+              {t("googlePay.paymentTitle", "Google Pay Payment")}
             </Typography>
             <Typography
               variant="pi"
               textColor="neutral600"
               style={{ textAlign: "left" }}
             >
-              Click the button below to pay with Google Pay. The token will be
-              automatically sent to Payone.
+              {t("googlePay.paymentHint", "Click the button below to pay with Google Pay. The token will be automatically sent to Payone.")}
             </Typography>
           </>
         )}

package/admin/src/pages/App/components/configuration/ConfigurationFields.jsx

@@ -8,6 +8,7 @@ import {
 } from "@strapi/design-system";
 import { Cog } from "@strapi/icons";
 import RenderInput from "../RenderInput";
+import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
 
 const ConfigurationFields = ({
   settings,
@@ -15,6 +16,7 @@ const ConfigurationFields = ({
   onPaymentMethodToggle,
   onNavigateToConfig,
 }) => {
+  const { t } = usePluginTranslations();
   const handleNavigateToApplePayConfig = () => {
     if (onNavigateToConfig) {
       onNavigateToConfig("apple-pay-config");
@@ -39,82 +41,79 @@ const ConfigurationFields = ({
         <Flex direction="column" alignItems={"stretch"} gap={6}>
           <Flex direction="row" gap={2}>
             <RenderInput
-              label="Account ID (aid)"
+              label={t("config.fields.aid", "Account ID (aid)")}
               name="aid"
               value={settings.aid}
               onChange={(e) => onInputChange("aid", e.target.value)}
               required
               inputType="textInput"
-              tooltipContent={"Your Payone account ID"}
+              tooltipContent={t("config.fields.aidTooltip", "Your Payone account ID")}
             />
-
             <RenderInput
-              label="Portal ID"
+              label={t("config.fields.portalid", "Portal ID")}
               name="portalid"
               value={settings.portalid}
               onChange={(e) => onInputChange("portalid", e.target.value)}
               required
               inputType="textInput"
-              tooltipContent={"Your Payone portal ID"}
+              tooltipContent={t("config.fields.portalidTooltip", "Your Payone portal ID")}
             />
           </Flex>
           <Flex direction="row" gap={2}>
             <RenderInput
-              label="Merchant ID (mid)"
+              label={t("config.fields.mid", "Merchant ID (mid)")}
               name="mid"
               value={settings.mid}
               onChange={(e) => onInputChange("mid", e.target.value)}
               required
               inputType="textInput"
-              tooltipContent={"Your Payone merchant ID"}
+              tooltipContent={t("config.fields.midTooltip", "Your Payone merchant ID")}
             />
-
             <RenderInput
-              label="Portal Key"
+              label={t("config.fields.key", "Portal Key")}
               name="key"
               type="password"
               value={settings.key}
               onChange={(e) => onInputChange("key", e.target.value)}
               required
               inputType="textInput"
-              tooltipContent={"Your Payone portal key (will be encrypted)"}
+              tooltipContent={t("config.fields.keyTooltip", "Your Payone portal key (will be encrypted)")}
             />
           </Flex>
           <Flex direction="row" gap={2}>
             <RenderInput
-              label="Domain Name"
+              label={t("config.fields.domainName", "Domain Name")}
               name="domainName"
               value={settings.domainName}
               onChange={(e) => onInputChange("domainName", e.target.value)}
               inputType="textInput"
-              tooltipContent={"Your Payone domain name"}
+              tooltipContent={t("config.fields.domainNameTooltip", "Your Payone domain name")}
             />
-
             <RenderInput
-              label="Display Name"
+              label={t("config.fields.displayName", "Display Name")}
               name="displayName"
               value={settings.displayName}
               onChange={(e) => onInputChange("displayName", e.target.value)}
               inputType="textInput"
-              tooltipContent={"Display name for payment methods (optional)"}
+              tooltipContent={t("config.fields.displayNameTooltip", "Display name for payment methods (optional)")}
             />
           </Flex>
           <Flex direction="row" gap={2}>
             <RenderInput
-              label="Mode"
+              label={t("config.fields.mode", "Mode")}
               name="mode"
               value={settings.mode || "test"}
               onChange={(e) => onInputChange("mode", e.target.value)}
               required
               inputType="select"
-              tooltipContent={"Select the API mode"}
+              tooltipContent={t("config.fields.modeTooltip", "Select the API mode")}
               options={[
-                { value: "test", label: "Test" },
-                { value: "live", label: "Live" },
+                { value: "test", label: t("config.fields.modeTest", "Test") },
+                { value: "live", label: t("config.fields.modeLive", "Live") },
               ]}
             />
             <RenderInput
-              label="Enable 3D Secure"
+              label={t("config.fields.enable3DSecure", "Enable 3D Secure")}
               name="enable3DSecure"
               value={settings.enable3DSecure ? "yes" : "no"}
               onChange={(e) =>
@@ -122,35 +121,33 @@ const ConfigurationFields = ({
               }
               required
               inputType="select"
-              tooltipContent={
-                "Enable 3D Secure authentication for credit card payments"
-              }
+              tooltipContent={t("config.fields.enable3DSecureTooltip", "Enable 3D Secure authentication for credit card payments")}
               options={[
-                { value: "yes", label: "Enabled" },
-                { value: "no", label: "Disabled" },
+                { value: "yes", label: t("config.fields.enabled", "Enabled") },
+                { value: "no", label: t("config.fields.disabled", "Disabled") },
               ]}
             />
           </Flex>
           <Flex direction="row">
             <RenderInput
-              label="API Version"
+              label={t("config.fields.apiVersion", "API Version")}
               name="api_version"
               value={settings.api_version || "3.10"}
               onChange={(e) => onInputChange("api_version", e.target.value)}
               required
               inputType="textInput"
-              tooltipContent={"Payone API version"}
+              tooltipContent={t("config.fields.apiVersionTooltip", "Payone API version")}
             />
           </Flex>
         </Flex>
 
         <Flex direction="column" alignItems="stretch" gap={4} marginTop={6}>
           <Typography variant="pi" textColor="neutral600" marginBottom={4}>
-            Enable or disable payment methods for your Payone integration
+            {t("config.paymentMethods.title", "Enable or disable payment methods for your Payone integration")}
           </Typography>
 
           <RenderInput
-            label="Credit Card (Visa, Mastercard)"
+            label={t("config.paymentMethods.creditCard", "Credit Card (Visa, Mastercard)")}
             name="enableCreditCard"
             value={settings.enableCreditCard === true}
             onChange={(selected) =>
@@ -159,11 +156,10 @@ const ConfigurationFields = ({
             inputType="switch"
             labelDirection="row"
             labelStyle={{ fontSize: "16px" }}
-            tooltipContent="Enable or disable credit card payments"
+            tooltipContent={t("config.paymentMethods.creditCardTooltip", "Enable or disable credit card payments")}
           />
-
           <RenderInput
-            label="PayPal"
+            label={t("config.paymentMethods.paypal", "PayPal")}
             name="enablePayPal"
             value={settings.enablePayPal === true}
             onChange={(selected) =>
@@ -172,11 +168,10 @@ const ConfigurationFields = ({
             inputType="switch"
             labelDirection="row"
             labelStyle={{ fontSize: "16px" }}
-            tooltipContent="Enable or disable PayPal payments"
+            tooltipContent={t("config.paymentMethods.paypalTooltip", "Enable or disable PayPal payments")}
           />
-
           <RenderInput
-            label="Google Pay"
+            label={t("config.paymentMethods.googlePay", "Google Pay")}
             name="enableGooglePay"
             value={settings.enableGooglePay === true}
             onChange={(selected) =>
@@ -185,11 +180,10 @@ const ConfigurationFields = ({
             inputType="switch"
             labelDirection="row"
             labelStyle={{ fontSize: "16px" }}
-            tooltipContent="Enable or disable Google Pay payments"
+            tooltipContent={t("config.paymentMethods.googlePayTooltip", "Enable or disable Google Pay payments")}
           />
-
           <RenderInput
-            label="Apple Pay"
+            label={t("config.paymentMethods.applePay", "Apple Pay")}
             name="enableApplePay"
             value={settings.enableApplePay === true}
             onChange={(selected) =>
@@ -198,11 +192,10 @@ const ConfigurationFields = ({
             inputType="switch"
             labelDirection="row"
             labelStyle={{ fontSize: "16px" }}
-            tooltipContent="Enable or disable Apple Pay payments"
+            tooltipContent={t("config.paymentMethods.applePayTooltip", "Enable or disable Apple Pay payments")}
           />
-
           <RenderInput
-            label="Sofort Banking"
+            label={t("config.paymentMethods.sofort", "Sofort Banking")}
             name="enableSofort"
             value={settings.enableSofort === true}
             onChange={(selected) =>
@@ -211,11 +204,10 @@ const ConfigurationFields = ({
             inputType="switch"
             labelDirection="row"
             labelStyle={{ fontSize: "16px" }}
-            tooltipContent="Enable or disable Sofort Banking payments"
+            tooltipContent={t("config.paymentMethods.sofortTooltip", "Enable or disable Sofort Banking payments")}
           />
-
           <RenderInput
-            label="SEPA Direct Debit"
+            label={t("config.paymentMethods.sepa", "SEPA Direct Debit")}
             name="enableSepaDirectDebit"
             value={settings.enableSepaDirectDebit === true}
             onChange={(selected) =>
@@ -224,7 +216,7 @@ const ConfigurationFields = ({
             inputType="switch"
             labelDirection="row"
             labelStyle={{ fontSize: "16px" }}
-            tooltipContent="Enable or disable SEPA Direct Debit payments"
+            tooltipContent={t("config.paymentMethods.sepaTooltip", "Enable or disable SEPA Direct Debit payments")}
           />
 
           <Flex direction="row" gap={2} marginTop={10}>
@@ -234,7 +226,7 @@ const ConfigurationFields = ({
               onClick={handleNavigateToApplePayConfig}
               className="payment-button"
             >
-              Apple Pay Config
+              {t("config.buttons.applePayConfig", "Apple Pay Config")}
             </Button>
             <Button
               variant="secondary"
@@ -242,7 +234,7 @@ const ConfigurationFields = ({
               onClick={handleNavigateToGooglePayConfig}
               className="payment-button"
             >
-              Google Pay Config
+              {t("config.buttons.googlePayConfig", "Google Pay Config")}
             </Button>
           </Flex>
         </Flex>

package/admin/src/pages/App/components/configuration/ConfigurationPanel.jsx

@@ -2,8 +2,10 @@ import * as React from "react";
 import { Box, Flex, Typography } from "@strapi/design-system";
 import ConfigurationFields from "./ConfigurationFields";
 import TestConnection from "./TestConnection";
+import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
 
 const ConfigurationPanel = ({ settings, onNavigateToConfig }) => {
+  const { t } = usePluginTranslations();
   return (
     <Flex direction="column" alignItems="stretch" gap={8} paddingTop={8}>
       <Box>
@@ -14,7 +16,7 @@ const ConfigurationPanel = ({ settings, onNavigateToConfig }) => {
           className="payment-title"
           style={{ fontSize: "20px", marginBottom: "4px" }}
         >
-          Payone API Configuration
+          {t("config.title", "Payone API Configuration")}
         </Typography>
         <Typography
           variant="pi"
@@ -23,7 +25,7 @@ const ConfigurationPanel = ({ settings, onNavigateToConfig }) => {
           className="payment-subtitle"
           style={{ fontSize: "14px" }}
         >
-          Configure your Payone payment gateway settings
+          {t("config.subtitle", "Configure your Payone payment gateway settings")}
         </Typography>
       </Box>
 
@@ -43,8 +45,7 @@ const ConfigurationPanel = ({ settings, onNavigateToConfig }) => {
 
       <Box paddingTop={4}>
         <Typography variant="sigma" textColor="neutral600">
-          Note: These settings are used for all Payone API requests. Make sure
-          to use the correct credentials for your selected mode.
+          {t("config.note", "Note: These settings are used for all Payone API requests. Make sure to use the correct credentials for your selected mode.")}
         </Typography>
       </Box>
     </Flex>

package/admin/src/pages/App/components/configuration/TestConnection.jsx

@@ -6,9 +6,9 @@ import {
   CardBody,
   Flex,
   Typography,
-  Alert,
 } from "@strapi/design-system";
 import { Play } from "@strapi/icons";
+import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
 
 const TestConnection = ({
   settings,
@@ -16,6 +16,7 @@ const TestConnection = ({
   testResult,
   onTestConnection,
 }) => {
+  const { t } = usePluginTranslations();
   const mode = (settings?.mode || "test").toLowerCase();
 
   return (
@@ -23,26 +24,16 @@ const TestConnection = ({
       <CardBody>
         <Flex direction="column" alignItems="stretch" gap={6} paddingTop={6}>
           <Box>
-            <Typography
-              variant="delta"
-              as="h3"
-              fontWeight="bold"
-              style={{ marginBottom: "16px" }}
-            >
-              Test Connection
+            <Typography variant="delta" as="h3" fontWeight="bold" style={{ marginBottom: "16px" }}>
+              {t("testConnection.title", "Test Connection")}
             </Typography>
-
             {mode === "test" ? (
               <Typography variant="pi" textColor="neutral600">
-                Verify your Payone configuration by testing the API connection
+                {t("testConnection.description", "Verify your Payone configuration by testing the API connection")}
               </Typography>
             ) : (
-              <Typography
-                variant="pi"
-                textColor="neutral600"
-                style={{ marginTop: "8px" }}
-              >
-                Test Connection is disabled in live mode.
+              <Typography variant="pi" textColor="neutral600" style={{ marginTop: "8px" }}>
+                {t("testConnection.disabledInLive", "Test Connection is disabled in live mode.")}
               </Typography>
             )}
           </Box>
@@ -56,16 +47,12 @@ const TestConnection = ({
             disabled={mode === "live"}
             style={{ maxWidth: "200px" }}
           >
-            {isTesting ? "Testing Connection..." : "Test Connection"}
+            {isTesting ? t("testConnection.testing", "Testing Connection...") : t("testConnection.button", "Test Connection")}
           </Button>
 
           {testResult && (
-            <Flex direction={"column"} alignItems={"stretch"} gap={2}>
-              <Typography
-                variant="pi"
-                fontWeight="medium"
-                style={{ marginBottom: "16px" }}
-              >
+            <Flex direction="column" alignItems="stretch" gap={2}>
+              <Typography variant="pi" fontWeight="medium" style={{ marginBottom: "16px" }}>
                 {testResult.message}
               </Typography>
               {testResult.details && Boolean(testResult.success) ? (
@@ -75,18 +62,17 @@ const TestConnection = ({
                       <Flex direction="column" alignItems="stretch" gap={2}>
                         {testResult.details.mode && (
                           <Typography variant="pi" textColor="neutral600">
-                            <strong>Mode:</strong> {testResult.details.mode}
+                            <strong>{t("testConnection.mode", "Mode")}:</strong> {testResult.details.mode}
                           </Typography>
                         )}
                         {testResult.details.aid && (
                           <Typography variant="pi" textColor="neutral600">
-                            <strong>AID:</strong> {testResult.details.aid}
+                            <strong>{t("testConnection.aid", "AID")}:</strong> {testResult.details.aid}
                           </Typography>
                         )}
                         {testResult.details.portalid && (
                           <Typography variant="pi" textColor="neutral600">
-                            <strong>Portal ID:</strong>{" "}
-                            {testResult.details.portalid}
+                            <strong>{t("testConnection.portalid", "Portal ID")}:</strong> {testResult.details.portalid}
                           </Typography>
                         )}
                       </Flex>
@@ -97,22 +83,19 @@ const TestConnection = ({
                 <Card>
                   <CardBody padding={4}>
                     <Flex direction="column" alignItems="stretch" gap={2}>
-                      {testResult.error && (
+                      {testResult.error?.ErrorCode && (
                         <Typography variant="pi" textColor="neutral600">
-                          <strong>Error Code:</strong>{" "}
-                          {testResult.error.ErrorCode}
+                          <strong>{t("testConnection.errorCode", "Error Code")}:</strong> {testResult.error.ErrorCode}
                         </Typography>
                       )}
-                      {testResult.error.ErrorMessage && (
+                      {testResult.error?.ErrorMessage && (
                         <Typography variant="pi" textColor="neutral600">
-                          <strong>Error Message:</strong>{" "}
-                          {testResult.error.ErrorMessage}
+                          <strong>{t("testConnection.errorMessage", "Error Message")}:</strong> {testResult.error.ErrorMessage}
                         </Typography>
                       )}
-                      {testResult.error.CustomerMessage && (
+                      {testResult.error?.CustomerMessage && (
                         <Typography variant="pi" textColor="neutral600">
-                          <strong>Customer Message:</strong>{" "}
-                          {testResult.error.CustomerMessage}
+                          <strong>{t("testConnection.customerMessage", "Customer Message")}:</strong> {testResult.error.CustomerMessage}
                         </Typography>
                       )}
                     </Flex>

package/admin/src/pages/App/components/payment-actions/ApplePayPanel.jsx

@@ -1,7 +1,8 @@
-import * as React from "@strapi/strapi/admin";
+import * as React from "react";
 import { Box, Typography } from "@strapi/design-system";
 import PaymentMethodSelector from "./PaymentMethodSelector";
 import AuthorizationForm from "./AuthorizationForm";
+import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
 
 const ApplePayOnlyPanel = ({
   onNavigateToConfig,
@@ -9,6 +10,7 @@ const ApplePayOnlyPanel = ({
   paymentActions,
   settings,
 }) => {
+  const { t } = usePluginTranslations();
   return (
     <Box
       style={{
@@ -30,9 +32,7 @@ const ApplePayOnlyPanel = ({
           fontWeight: "bold",
         }}
       >
-        ⚠️ Apple Pay can only be tested on a production domain with HTTPS and
-        Live mode. Testing in Strapi admin panel is not supported. Please test
-        Apple Pay on your production website.
+        ⚠️ {t("applePayPanel.warning", "Apple Pay can only be tested on a production domain with HTTPS and Live mode. Testing in Strapi admin panel is not supported. Please test Apple Pay on your production website.")}
       </Typography>
 
       <PaymentMethodSelector

package/admin/src/pages/App/components/payment-actions/AuthorizationForm.jsx

@@ -11,8 +11,10 @@ import {
   getCurrencyOptions,
   getCountryOptions,
 } from "../../../utils/countryLanguageUtils";
+import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
 
 const AuthorizationForm = ({ paymentActions, settings }) => {
+  const { t } = usePluginTranslations();
   const handleGooglePayToken = (token) => {
     if (!token) {
       return;
@@ -35,7 +37,7 @@ const AuthorizationForm = ({ paymentActions, settings }) => {
     return Promise.resolve({
       success: true,
       message:
-        "Token received successfully. Please click 'Process Authorization' to complete the payment.",
+        `Token received successfully. Please click '${t("auth.submit", "Authorize")}' to complete the payment.`,
     });
   };
 
@@ -59,20 +61,11 @@ const AuthorizationForm = ({ paymentActions, settings }) => {
   return (
     <Flex direction="column" alignItems="stretch" gap={4}>
       <Flex direction="row" gap={2}>
-        <Typography
-          variant="omega"
-          fontWeight="semiBold"
-          textColor="neutral800"
-          className="payment-form-title"
-        >
-          Authorization
+        <Typography variant="omega" fontWeight="semiBold" textColor="neutral800" className="payment-form-title">
+          {t("auth.title", "Authorization")}
         </Typography>
-        <Typography
-          variant="pi"
-          textColor="neutral600"
-          className="payment-form-description"
-        >
-          Authorize and capture an amount immediately.
+        <Typography variant="pi" textColor="neutral600" className="payment-form-description">
+          {t("auth.description", "Authorize a payment with an existing preauthorization.")}
         </Typography>
       </Flex>
 
@@ -85,15 +78,15 @@ const AuthorizationForm = ({ paymentActions, settings }) => {
       >
         <RenderInput
           name="authAmount"
-          label="Amount *"
+          label={t("common.amount", "Amount *")}
           value={paymentActions.paymentState.paymentAmount || ""}
           onChange={(e) =>
             paymentActions.handleFieldChange("paymentAmount", e.target.value)
           }
           inputType="textInput"
-          placeholder="Enter amount (e.g., 1000 for €10.00)"
+          placeholder={t("preauth.amountPlaceholder", "Enter amount (e.g., 1000 for €10.00)")}
           required
-          tooltipContent="Amount in cents (e.g., 1000 = €10.00)"
+          tooltipContent={t("preauth.amountTooltip", "Amount in cents (e.g., 1000 = €10.00)")}
         />
 
         <RenderInput
@@ -307,7 +300,7 @@ const AuthorizationForm = ({ paymentActions, settings }) => {
                   !paymentActions.paymentState.authReference.trim()
                 }
               >
-                Process Authorization
+                {t("auth.submit", "Authorize")}
               </Button>
             </Box>
           )}
@@ -331,7 +324,7 @@ const AuthorizationForm = ({ paymentActions, settings }) => {
               !paymentActions.paymentState.applePayToken)
           }
         >
-          Process Authorization
+          {t("auth.submit", "Authorize")}
         </Button>
       )}
     </Flex>