strapi-plugin-payone-provider 4.6.9 → 5.6.9

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

@@ -1,5 +1,12 @@
-import React from "react";
-import { Box, Flex, Typography, Select, Option, Checkbox, Stack } from "@strapi/design-system";
+import * as React from "react";
+import {
+  Box,
+  Flex,
+  Typography,
+  Checkbox,
+  Divider,
+} from "@strapi/design-system";
+import RenderInput from "./RenderInput";
 import {
   APPLE_PAY_SUPPORTED_COUNTRIES,
   APPLE_PAY_SUPPORTED_NETWORKS,
@@ -8,14 +15,10 @@ import {
   getSupportedNetworksForCountry,
   APPLE_PAY_BUTTON_STYLES,
   APPLE_PAY_BUTTON_TYPES,
-  DEFAULT_APPLE_PAY_CONFIG
+  DEFAULT_APPLE_PAY_CONFIG,
 } from "../../utils/applePayConstants";
 
-const ApplePayConfig = ({
-  config,
-  onConfigChange,
-  settings
-}) => {
+const ApplePayConfig = ({ config, onConfigChange, settings }) => {
   const {
     countryCode = DEFAULT_APPLE_PAY_CONFIG.countryCode,
     currencyCode = DEFAULT_APPLE_PAY_CONFIG.currencyCode,
@@ -26,16 +29,17 @@ const ApplePayConfig = ({
   } = config || {};
 
   const supportedCurrencies = getSupportedCurrenciesForCountry(countryCode);
-  const supportedNetworksForCountry = getSupportedNetworksForCountry(countryCode);
+  const supportedNetworksForCountry =
+    getSupportedNetworksForCountry(countryCode);
 
   const handleCountryChange = (value) => {
     const newConfig = {
       ...config,
-      countryCode: value
+      countryCode: value,
     };
 
     const newSupportedCurrencies = getSupportedCurrenciesForCountry(value);
-    if (!newSupportedCurrencies.find(c => c.code === currencyCode)) {
+    if (!newSupportedCurrencies.find((c) => c.code === currencyCode)) {
       newConfig.currencyCode = newSupportedCurrencies[0]?.code || "USD";
     }
 
@@ -47,148 +51,166 @@ const ApplePayConfig = ({
   const handleCurrencyChange = (value) => {
     onConfigChange({
       ...config,
-      currencyCode: value
+      currencyCode: value,
     });
   };
 
   const handleNetworkToggle = (networkCode) => {
     const currentNetworks = supportedNetworks || [];
     const newNetworks = currentNetworks.includes(networkCode)
-      ? currentNetworks.filter(n => n !== networkCode)
+      ? currentNetworks.filter((n) => n !== networkCode)
       : [...currentNetworks, networkCode];
 
     onConfigChange({
       ...config,
-      supportedNetworks: newNetworks
+      supportedNetworks: newNetworks,
     });
   };
 
   const handleCapabilityToggle = (capabilityCode) => {
     const currentCapabilities = merchantCapabilities || [];
     const newCapabilities = currentCapabilities.includes(capabilityCode)
-      ? currentCapabilities.filter(c => c !== capabilityCode)
+      ? currentCapabilities.filter((c) => c !== capabilityCode)
       : [...currentCapabilities, capabilityCode];
 
     onConfigChange({
       ...config,
-      merchantCapabilities: newCapabilities
+      merchantCapabilities: newCapabilities,
     });
   };
 
   return (
     <Box>
-      <Stack spacing={6}>
-        <Box>
-          <Typography variant="delta" as="h3" fontWeight="bold" style={{ marginBottom: "6px" }}>
-            Apple Pay Configuration
-          </Typography>
-          <Typography variant="pi" textColor="neutral600">
-            Configure Apple Pay settings for your payment gateway
-          </Typography>
-        </Box>
-
+      <Flex direction="column" gap={6} alignItems="stretch">
         {/* Country and Currency */}
-        <Flex gap={4} wrap="wrap">
-          <Box style={{ flex: 1, minWidth: "300px" }}>
-            <Select
-              label="Country Code"
+        <Box
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(2, 1fr)",
+            gap: "16px",
+            width: "100%",
+          }}
+        >
+          <Box>
+            <RenderInput
               name="countryCode"
-              value={countryCode}
-              onChange={handleCountryChange}
-              hint="Select the country where your business operates"
+              label="Country Code"
+              value={countryCode || ""}
+              onChange={(e) => {
+                const value = e.target?.value || e;
+                handleCountryChange(value);
+              }}
+              inputType="select"
               required
-            >
-              {APPLE_PAY_SUPPORTED_COUNTRIES.map(country => (
-                <Option key={country.code} value={country.code}>
-                  {country.name} ({country.code})
-                </Option>
-              ))}
-            </Select>
+              tooltipContent="Select the country where your business operates"
+              options={APPLE_PAY_SUPPORTED_COUNTRIES.map((country) => ({
+                value: country.code,
+                label: `${country.name} (${country.code})`,
+              }))}
+            />
           </Box>
 
-          <Box style={{ flex: 1, minWidth: "300px" }}>
-            <Select
-              label="Currency Code"
+          <Box>
+            <RenderInput
               name="currencyCode"
-              value={currencyCode}
-              onChange={handleCurrencyChange}
-              hint={`Supported currencies for ${countryCode}`}
+              label="Currency Code"
+              value={currencyCode || ""}
+              onChange={(e) => {
+                const value = e.target?.value || e;
+                handleCurrencyChange(value);
+              }}
+              inputType="select"
               required
-            >
-              {supportedCurrencies.map(currency => (
-                <Option key={currency.code} value={currency.code}>
-                  {currency.name} ({currency.code}) {currency.symbol}
-                </Option>
-              ))}
-            </Select>
+              tooltipContent={`Supported currencies for ${countryCode}`}
+              options={supportedCurrencies.map((currency) => ({
+                value: currency.code,
+                label: `${currency.name} (${currency.code}) ${currency.symbol}`,
+              }))}
+            />
             {supportedCurrencies.length === 0 && (
-              <Typography variant="pi" textColor="danger600" style={{ marginTop: "4px" }}>
-                No supported currencies for this country. Please select a different country.
+              <Typography
+                variant="pi"
+                textColor="danger600"
+                style={{ marginTop: "4px" }}
+              >
+                No supported currencies for this country. Please select a
+                different country.
               </Typography>
             )}
           </Box>
-        </Flex>
-
-        {/* Button Style and Type */}
-        <Flex gap={4} wrap="wrap">
-          <Box style={{ flex: 1, minWidth: "300px" }}>
-            <Select
-              label="Button Style"
+          <Box>
+            <RenderInput
               name="buttonStyle"
-              value={buttonStyle}
-              onChange={(value) => onConfigChange({ ...config, buttonStyle: value })}
-              hint="Visual style of the Apple Pay button"
-            >
-              {APPLE_PAY_BUTTON_STYLES.map(style => (
-                <Option key={style.code} value={style.code}>
-                  {style.name}
-                </Option>
-              ))}
-            </Select>
+              label="Button Style"
+              value={buttonStyle || ""}
+              onChange={(e) => {
+                const value = e.target?.value || e;
+                onConfigChange({ ...config, buttonStyle: value });
+              }}
+              inputType="select"
+              tooltipContent="Visual style of the Apple Pay button"
+              options={APPLE_PAY_BUTTON_STYLES.map((style) => ({
+                value: style.code,
+                label: style.name,
+              }))}
+            />
           </Box>
 
-          <Box style={{ flex: 1, minWidth: "300px" }}>
-            <Select
-              label="Button Type"
+          <Box>
+            <RenderInput
               name="buttonType"
-              value={buttonType}
-              onChange={(value) => onConfigChange({ ...config, buttonType: value })}
-              hint="Type of action the button represents"
-            >
-              {APPLE_PAY_BUTTON_TYPES.map(type => (
-                <Option key={type.code} value={type.code}>
-                  {type.name}
-                </Option>
-              ))}
-            </Select>
+              label="Button Type"
+              value={buttonType || ""}
+              onChange={(e) => {
+                const value = e.target?.value || e;
+                onConfigChange({ ...config, buttonType: value });
+              }}
+              inputType="select"
+              tooltipContent="Type of action the button represents"
+              options={APPLE_PAY_BUTTON_TYPES.map((type) => ({
+                value: type.code,
+                label: type.name,
+              }))}
+            />
           </Box>
-        </Flex>
+        </Box>
 
+        <Divider />
         {/* Supported Networks */}
         <Box>
-          <Typography variant="pi" fontWeight="semiBold" style={{ marginLeft: "2px" }}>
-            Supported Networks
-          </Typography>
-          <Typography variant="pi" textColor="neutral600" style={{ marginLeft: "2px" }}>
-            Select payment networks supported in {countryCode}
-          </Typography>
+          <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+            <Typography variant="pi" fontWeight="semiBold">
+              Supported Networks
+            </Typography>
+            <Typography variant="pi" textColor="neutral600">
+              Select payment networks supported in {countryCode}
+            </Typography>
+          </div>
           <Flex wrap="wrap" gap={4} style={{ marginTop: "12px" }}>
-            {APPLE_PAY_SUPPORTED_NETWORKS.map(network => {
-              const isSupported = supportedNetworksForCountry.includes(network.code);
+            {APPLE_PAY_SUPPORTED_NETWORKS.map((network) => {
+              const isSupported = supportedNetworksForCountry.includes(
+                network.code
+              );
               const isSelected = supportedNetworks?.includes(network.code);
 
               return (
-                <Box key={network.code} style={{ flex: "0 0 calc(50% - 8px)", minWidth: "250px" }}>
+                <Box
+                  key={network.code}
+                  style={{ flex: "0 0 calc(50% - 8px)", minWidth: "250px" }}
+                >
                   <Checkbox
                     name={`network-${network.code}`}
                     checked={isSelected}
-                    onChange={() => handleNetworkToggle(network.code)}
+                    onCheckedChange={() => handleNetworkToggle(network.code)}
                     disabled={!isSupported}
-                    hint={!isSupported ? `Not supported in ${countryCode}` : undefined}
                   >
                     {network.name} ({network.code})
                     {!isSupported && (
-                      <Typography variant="sigma" textColor="neutral500" style={{ marginLeft: "8px" }}>
+                      <Typography
+                        variant="sigma"
+                        textColor="neutral500"
+                        style={{ marginLeft: "8px" }}
+                      >
                         (Not available)
                       </Typography>
                     )}
@@ -198,30 +220,54 @@ const ApplePayConfig = ({
             })}
           </Flex>
           {supportedNetworks?.length === 0 && (
-            <Typography variant="pi" textColor="danger600" style={{ marginTop: "8px" }}>
+            <Typography
+              variant="pi"
+              textColor="danger600"
+              style={{ marginTop: "8px" }}
+            >
               At least one network must be selected
             </Typography>
           )}
         </Box>
 
+        <Divider />
+
         {/* Merchant Capabilities */}
         <Box>
-          <Typography variant="pi" fontWeight="semiBold" style={{ marginLeft: "2px" }}>
-            Merchant Capabilities
-          </Typography>
-          <Typography variant="pi" textColor="neutral600" style={{ marginLeft: "2px" }}>
-            Select payment capabilities. "3D Secure" is required for most payment methods.
-          </Typography>
+          <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+            <Typography
+              variant="pi"
+              fontWeight="semiBold"
+              style={{ marginLeft: "2px" }}
+            >
+              Merchant Capabilities
+            </Typography>
+            <Typography
+              variant="pi"
+              textColor="neutral600"
+              style={{ marginLeft: "2px" }}
+            >
+              Select payment capabilities. "3D Secure" is required for most
+              payment methods.
+            </Typography>
+          </div>
           <Flex wrap="wrap" gap={4} style={{ marginTop: "12px" }}>
-            {APPLE_PAY_MERCHANT_CAPABILITIES.map(capability => {
-              const isSelected = merchantCapabilities?.includes(capability.code);
+            {APPLE_PAY_MERCHANT_CAPABILITIES.map((capability) => {
+              const isSelected = merchantCapabilities?.includes(
+                capability.code
+              );
 
               return (
-                <Box key={capability.code} style={{ flex: "0 0 calc(50% - 8px)", minWidth: "250px" }}>
+                <Box
+                  key={capability.code}
+                  style={{ flex: "0 0 calc(50% - 8px)", minWidth: "250px" }}
+                >
                   <Checkbox
                     name={`capability-${capability.code}`}
                     checked={isSelected}
-                    onChange={() => handleCapabilityToggle(capability.code)}
+                    onCheckedChange={() =>
+                      handleCapabilityToggle(capability.code)
+                    }
                   >
                     {capability.name} - {capability.description}
                   </Checkbox>
@@ -230,69 +276,83 @@ const ApplePayConfig = ({
             })}
           </Flex>
           {merchantCapabilities?.length === 0 && (
-            <Typography variant="pi" textColor="danger600" style={{ marginTop: "8px" }}>
-              At least one capability must be selected. "supports3DS" is recommended.
+            <Typography
+              variant="pi"
+              textColor="danger600"
+              style={{ marginTop: "8px" }}
+            >
+              At least one capability must be selected. "supports3DS" is
+              recommended.
             </Typography>
           )}
         </Box>
 
+        <Divider />
 
-        {/* Merchant Identifier Info */}
-        <Box>
-          <Typography variant="pi" fontWeight="semiBold" style={{ marginLeft: "2px" }}>
-            Merchant Identifier
+        {/* Domain Verification File Alert */}
+        <Flex
+          direction="column"
+          padding={3}
+          background="warning100"
+          borderRadius="4px"
+          borderColor="warning200"
+          borderWidth="1px"
+          borderStyle="solid"
+          alignItems="stretch"
+          gap={4}
+        >
+          <Typography variant="pi" fontWeight="bold" textColor="warning700">
+            ⚠️ Domain Verification File Required
           </Typography>
-          <Typography variant="pi" textColor="neutral600">
-            {settings?.mid || settings?.portalid
-              ? `Using: ${settings.mid || settings.portalid}`
-              : "Merchant identifier will be obtained from Payone after domain verification. See documentation for setup instructions."
-            }
+          <Typography variant="pi" textColor="neutral700">
+            <strong>Download the Apple Pay domain verification file</strong>{" "}
+            from your Payone documentation:
           </Typography>
-        </Box>
-
-        {/* Domain Verification File Alert */}
-        <Box marginTop={4}>
-          <Box padding={3} background="warning100" borderRadius="4px" borderColor="warning200" borderWidth="1px" borderStyle="solid">
-            <Typography variant="pi" fontWeight="bold" textColor="warning700" marginBottom={2}>
-              ⚠️ Domain Verification File Required {' '}
-            </Typography>
-            <Typography variant="pi" textColor="neutral700" marginBottom={2}>
-              <strong>Download the Apple Pay domain verification file</strong> from your Payone merchant portal:
-            </Typography>
-            <Box padding={2} background="neutral0" borderRadius="4px" marginTop={2} marginBottom={2}>
-              <Typography variant="pi" style={{ fontSize: "12px" }}>
-                <strong>Download URL:</strong> Download the domain verification file from Payone documentation:{" "}
-                <a
-                  href="https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  style={{ color: "#0066ff", textDecoration: "underline" }}
-                >
-                  https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev
-                </a>
-              </Typography>
-            </Box>
-            <Typography variant="pi" textColor="neutral700" marginBottom={2}>
-              <strong>Place the file at:</strong>
-            </Typography>
-            <Box padding={2} background="neutral0" borderRadius="4px" marginTop={2} marginBottom={2}>
-              <Typography variant="pi" style={{ fontFamily: "monospace", fontSize: "12px" }}>
-                <strong>Strapi:</strong> <code>public/.well-known/apple-developer-merchantid-domain-association</code><br />
-                <strong>Frontend:</strong> <code>public/.well-known/apple-developer-merchantid-domain-association</code>
-              </Typography>
-            </Box>
-            <Typography variant="pi" textColor="neutral700" marginTop={2}>
-              The file must be accessible at: <code>https://yourdomain.com/.well-known/apple-developer-merchantid-domain-association</code>
+          <Box padding={2} background="neutral0" borderRadius="4px">
+            <Typography variant="pi" style={{ fontSize: "12px" }}>
+              <strong>Download URL:</strong>{" "}
+              <a
+                href="https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev"
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{ color: "#0066ff", textDecoration: "underline" }}
+              >
+                https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev
+              </a>
             </Typography>
-            <br />
-            <Typography variant="pi" fontWeight="bold" textColor="danger600" marginTop={2}>
-              Without this file, Apple Pay will NOT work on your domain!
+          </Box>
+          <Typography variant="pi" textColor="neutral700">
+            <strong>Place the file at:</strong>
+          </Typography>
+          <Box padding={2} background="neutral0" borderRadius="4px">
+            <Typography
+              variant="pi"
+              style={{ fontFamily: "monospace", fontSize: "12px" }}
+            >
+              <strong>Strapi:</strong>{" "}
+              <code>
+                public/.well-known/apple-developer-merchantid-domain-association
+              </code>
+              <br />
+              <strong>Frontend:</strong>{" "}
+              <code>
+                public/.well-known/apple-developer-merchantid-domain-association
+              </code>
             </Typography>
           </Box>
-        </Box>
-      </Stack>
+          <Typography variant="pi" textColor="neutral700" marginTop={2}>
+            The file must be accessible at:{" "}
+            <code>
+              https://yourdomain.com/.well-known/apple-developer-merchantid-domain-association
+            </code>
+          </Typography>
+          <Typography variant="pi" fontWeight="bold" textColor="danger600">
+            Without this file, Apple Pay will NOT work on your domain!
+          </Typography>
+        </Flex>
+      </Flex>
     </Box>
   );
 };
 
-export default ApplePayConfig;
+export default ApplePayConfig;

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import * as React from "react";
 import {
   Box,
   Card,
@@ -11,59 +11,47 @@ import { Check } from "@strapi/icons";
 import ApplePayConfig from "./ApplePayConfig";
 
 const ApplePayConfigPanel = ({ settings, onInputChange, isSaving, onSave }) => {
-  const [applePayConfig, setApplePayConfig] = useState(
+  const [applePayConfig, setApplePayConfig] = React.useState(
     settings?.applePayConfig || {}
   );
 
-  useEffect(() => {
+  React.useEffect(() => {
     setApplePayConfig(settings?.applePayConfig || {});
   }, [settings?.applePayConfig]);
 
   return (
-    <Box
-      className="payment-container"
-      paddingTop={8}
-      paddingBottom={8}
-      paddingLeft={8}
-      paddingRight={8}
-    >
-      <Flex direction="column" alignItems="stretch" gap={8}>
-        <Box>
-          <Card className="payment-card">
-            <CardBody padding={6}>
-              <ApplePayConfig
-                config={applePayConfig}
-                onConfigChange={(newConfig) => {
-                  setApplePayConfig(newConfig);
-                  onInputChange("applePayConfig", newConfig);
-                }}
-                settings={settings}
-              />
-            </CardBody>
-          </Card>
-        </Box>
+    <Flex direction="column" alignItems="stretch" gap={8} padding={8}>
+      <Card>
+        <CardBody padding={6}>
+          <ApplePayConfig
+            config={applePayConfig}
+            onConfigChange={(newConfig) => {
+              setApplePayConfig(newConfig);
+              onInputChange("applePayConfig", newConfig);
+            }}
+            settings={settings}
+          />
+        </CardBody>
+      </Card>
 
-        <Box paddingTop={4}>
-          <Flex direction="row" gap={4} alignItems="center">
-            <Button
-              loading={isSaving}
-              onClick={onSave}
-              startIcon={<Check />}
-              size="L"
-              variant="default"
-              className="payment-button payment-button-success"
-            >
-              Save Apple Pay Configuration
-            </Button>
-            <Typography variant="sigma" textColor="neutral600">
-              Note: Apple Pay configuration is used for Apple Pay payment
-              requests. Make sure to configure the correct merchant identifier,
-              supported networks, and capabilities for your region.
-            </Typography>
-          </Flex>
-        </Box>
+      <Flex direction="column" gap={4} alignItems="stretch" paddingTop={4}>
+        <Typography variant="sigma" textColor="neutral600">
+          Note: Apple Pay configuration is used for Apple Pay payment requests.
+          Make sure to configure the correct merchant identifier, supported
+          networks, and capabilities for your region.
+        </Typography>
+        <Button
+          loading={isSaving}
+          onClick={onSave}
+          startIcon={<Check />}
+          size="L"
+          variant="default"
+          maxWidth={"220px"}
+        >
+          Save Configuration
+        </Button>
       </Flex>
-    </Box>
+    </Flex>
   );
 };