strapi-plugin-payone-provider 1.5.8 → 1.6.0

package/admin/src/pages/App/components/{ApplePayConfig.js → ApplePayConfig.jsx}

@@ -2,7 +2,6 @@ import React from "react";
 import { Box, Flex, Typography, Select, Option, Checkbox, Stack } from "@strapi/design-system";
 import {
   APPLE_PAY_SUPPORTED_COUNTRIES,
-  APPLE_PAY_SUPPORTED_CURRENCIES,
   APPLE_PAY_SUPPORTED_NETWORKS,
   APPLE_PAY_MERCHANT_CAPABILITIES,
   getSupportedCurrenciesForCountry,
@@ -24,15 +23,8 @@ const ApplePayConfig = ({
     supportedNetworks = DEFAULT_APPLE_PAY_CONFIG.supportedNetworks,
     buttonStyle = DEFAULT_APPLE_PAY_CONFIG.buttonStyle,
     buttonType = DEFAULT_APPLE_PAY_CONFIG.buttonType,
-    requestPayerName = DEFAULT_APPLE_PAY_CONFIG.requestPayerName,
-    requestBillingAddress = DEFAULT_APPLE_PAY_CONFIG.requestBillingAddress,
-    requestPayerEmail = DEFAULT_APPLE_PAY_CONFIG.requestPayerEmail,
-    requestPayerPhone = DEFAULT_APPLE_PAY_CONFIG.requestPayerPhone,
-    requestShipping = DEFAULT_APPLE_PAY_CONFIG.requestShipping,
-    shippingType = DEFAULT_APPLE_PAY_CONFIG.shippingType
   } = config || {};
 
-  // Get supported currencies and networks based on selected country
   const supportedCurrencies = getSupportedCurrenciesForCountry(countryCode);
   const supportedNetworksForCountry = getSupportedNetworksForCountry(countryCode);
 
@@ -41,16 +33,14 @@ const ApplePayConfig = ({
       ...config,
       countryCode: value
     };
-    
-    // Auto-update currency if current currency is not supported in new country
+
     const newSupportedCurrencies = getSupportedCurrenciesForCountry(value);
     if (!newSupportedCurrencies.find(c => c.code === currencyCode)) {
       newConfig.currencyCode = newSupportedCurrencies[0]?.code || "USD";
     }
-    
-    // Auto-update networks based on country
+
     newConfig.supportedNetworks = getSupportedNetworksForCountry(value);
-    
+
     onConfigChange(newConfig);
   };
 
@@ -66,7 +56,7 @@ const ApplePayConfig = ({
     const newNetworks = currentNetworks.includes(networkCode)
       ? currentNetworks.filter(n => n !== networkCode)
       : [...currentNetworks, networkCode];
-    
+
     onConfigChange({
       ...config,
       supportedNetworks: newNetworks
@@ -78,7 +68,7 @@ const ApplePayConfig = ({
     const newCapabilities = currentCapabilities.includes(capabilityCode)
       ? currentCapabilities.filter(c => c !== capabilityCode)
       : [...currentCapabilities, capabilityCode];
-    
+
     onConfigChange({
       ...config,
       merchantCapabilities: newCapabilities
@@ -100,43 +90,43 @@ const ApplePayConfig = ({
         {/* Country and Currency */}
         <Flex gap={4} wrap="wrap">
           <Box style={{ flex: 1, minWidth: "300px" }}>
-          <Select
+            <Select
               label="Country Code"
-            name="countryCode"
-            value={countryCode}
-            onChange={handleCountryChange}
-            hint="Select the country where your business operates"
-            required
-          >
-            {APPLE_PAY_SUPPORTED_COUNTRIES.map(country => (
-              <Option key={country.code} value={country.code}>
-                {country.name} ({country.code})
-              </Option>
-            ))}
-          </Select>
-        </Box>
+              name="countryCode"
+              value={countryCode}
+              onChange={handleCountryChange}
+              hint="Select the country where your business operates"
+              required
+            >
+              {APPLE_PAY_SUPPORTED_COUNTRIES.map(country => (
+                <Option key={country.code} value={country.code}>
+                  {country.name} ({country.code})
+                </Option>
+              ))}
+            </Select>
+          </Box>
 
           <Box style={{ flex: 1, minWidth: "300px" }}>
-          <Select
+            <Select
               label="Currency Code"
-            name="currencyCode"
-            value={currencyCode}
-            onChange={handleCurrencyChange}
+              name="currencyCode"
+              value={currencyCode}
+              onChange={handleCurrencyChange}
               hint={`Supported currencies for ${countryCode}`}
-            required
-          >
-            {supportedCurrencies.map(currency => (
-              <Option key={currency.code} value={currency.code}>
-                {currency.name} ({currency.code}) {currency.symbol}
-              </Option>
-            ))}
-          </Select>
-          {supportedCurrencies.length === 0 && (
-            <Typography variant="pi" textColor="danger600" style={{ marginTop: "4px" }}>
-              No supported currencies for this country. Please select a different country.
-            </Typography>
-          )}
-        </Box>
+              required
+            >
+              {supportedCurrencies.map(currency => (
+                <Option key={currency.code} value={currency.code}>
+                  {currency.name} ({currency.code}) {currency.symbol}
+                </Option>
+              ))}
+            </Select>
+            {supportedCurrencies.length === 0 && (
+              <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 */}
@@ -186,23 +176,23 @@ const ApplePayConfig = ({
             {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" }}>
-                <Checkbox
-                  name={`network-${network.code}`}
-                  checked={isSelected}
-                  onChange={() => 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" }}>
+                  <Checkbox
+                    name={`network-${network.code}`}
+                    checked={isSelected}
+                    onChange={() => 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" }}>
                         (Not available)
-                    </Typography>
-                  )}
-                </Checkbox>
+                      </Typography>
+                    )}
+                  </Checkbox>
                 </Box>
               );
             })}
@@ -225,16 +215,16 @@ const ApplePayConfig = ({
           <Flex wrap="wrap" gap={4} style={{ marginTop: "12px" }}>
             {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" }}>
-                <Checkbox
-                  name={`capability-${capability.code}`}
-                  checked={isSelected}
-                  onChange={() => handleCapabilityToggle(capability.code)}
-                >
-                  {capability.name} - {capability.description}
-                </Checkbox>
+                  <Checkbox
+                    name={`capability-${capability.code}`}
+                    checked={isSelected}
+                    onChange={() => handleCapabilityToggle(capability.code)}
+                  >
+                    {capability.name} - {capability.description}
+                  </Checkbox>
                 </Box>
               );
             })}
@@ -246,62 +236,6 @@ const ApplePayConfig = ({
           )}
         </Box>
 
-        {/* Payment Options */}
-        {/* <Box>
-          <Typography variant="pi" fontWeight="semiBold" style={{ marginLeft: "2px", marginBottom: "6px" }}>
-            Payment Options
-          </Typography>
-          <Typography variant="pi" textColor="neutral600" style={{ marginLeft: "2px" }}>
-            Select the information you want to collect during payment
-          </Typography>
-          <Flex wrap="wrap" gap={4} style={{ marginTop: "12px" }}>
-            <Box style={{ flex: "0 0 calc(33.333% - 11px)", minWidth: "200px" }}>
-            <Checkbox
-              name="requestPayerName"
-              checked={requestPayerName}
-              onChange={(checked) => onConfigChange({ ...config, requestPayerName: checked })}
-            >
-              Request Payer Name
-            </Checkbox>
-            </Box>
-            <Box style={{ flex: "0 0 calc(33.333% - 11px)", minWidth: "200px" }}>
-            <Checkbox
-              name="requestBillingAddress"
-              checked={requestBillingAddress}
-              onChange={(checked) => onConfigChange({ ...config, requestBillingAddress: checked })}
-            >
-              Request Billing Address
-            </Checkbox>
-            </Box>
-            <Box style={{ flex: "0 0 calc(33.333% - 11px)", minWidth: "200px" }}>
-            <Checkbox
-              name="requestPayerEmail"
-              checked={requestPayerEmail}
-              onChange={(checked) => onConfigChange({ ...config, requestPayerEmail: checked })}
-            >
-              Request Payer Email
-            </Checkbox>
-            </Box>
-            <Box style={{ flex: "0 0 calc(33.333% - 11px)", minWidth: "200px" }}>
-            <Checkbox
-              name="requestPayerPhone"
-              checked={requestPayerPhone}
-              onChange={(checked) => onConfigChange({ ...config, requestPayerPhone: checked })}
-            >
-              Request Payer Phone
-            </Checkbox>
-            </Box>
-            <Box style={{ flex: "0 0 calc(33.333% - 11px)", minWidth: "200px" }}>
-            <Checkbox
-              name="requestShipping"
-              checked={requestShipping}
-              onChange={(checked) => onConfigChange({ ...config, requestShipping: checked })}
-            >
-              Request Shipping Address
-            </Checkbox>
-            </Box>
-          </Flex>
-        </Box> */}
 
         {/* Merchant Identifier Info */}
         <Box>
@@ -309,7 +243,7 @@ const ApplePayConfig = ({
             Merchant Identifier
           </Typography>
           <Typography variant="pi" textColor="neutral600">
-            {settings?.mid || settings?.portalid 
+            {settings?.mid || settings?.portalid
               ? `Using: ${settings.mid || settings.portalid}`
               : "Merchant identifier will be obtained from Payone after domain verification. See documentation for setup instructions."
             }
@@ -320,7 +254,7 @@ const ApplePayConfig = ({
         <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
+              ⚠️ 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:
@@ -336,7 +270,6 @@ const ApplePayConfig = ({
                 >
                   https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev
                 </a>
-                {" "}or log into your Payone Merchant Interface (PMI) → Configuration → Payment Portals → Apple Pay → Download domain verification file
               </Typography>
             </Box>
             <Typography variant="pi" textColor="neutral700" marginBottom={2}>
@@ -344,15 +277,16 @@ const ApplePayConfig = ({
             </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>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>
             </Typography>
+            <br />
             <Typography variant="pi" fontWeight="bold" textColor="danger600" marginTop={2}>
-              ⚠️ Without this file, Apple Pay will NOT work on your domain!
+              Without this file, Apple Pay will NOT work on your domain!
             </Typography>
           </Box>
         </Box>

package/admin/src/pages/App/components/{PaymentActionsPanel.js → PaymentActionsPanel.jsx}

@@ -46,10 +46,10 @@ const PaymentActionsPanel = ({
   setCardexpiredate,
   cardcvc2,
   setCardcvc2,
-  onNavigateToConfig
+  onNavigateToConfig,
 }) => {
-  const mode = (settings?.mode || 'test').toLowerCase();
-  const isLiveMode = mode === 'live';
+  const mode = (settings?.mode || "test").toLowerCase();
+  const isLiveMode = mode === "live";
 
   return (
     <Box
@@ -60,16 +60,39 @@ const PaymentActionsPanel = ({
       paddingRight={8}
     >
       <Flex direction="column" alignItems="stretch" gap={6}>
-        <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '8px' }}>
-          <Typography variant="beta" as="h2" className="payment-title" style={{ fontSize: '20px', marginBottom: '4px' }}>
+        <Box
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: "8px",
+          }}
+        >
+          <Typography
+            variant="beta"
+            as="h2"
+            className="payment-title"
+            style={{ fontSize: "20px", marginBottom: "4px" }}
+          >
             Payment Actions
           </Typography>
-          <Typography variant="pi" textColor="neutral600" className="payment-subtitle" style={{ fontSize: '14px' }}>
-            Process payments, captures, and refunds with multiple payment methods
+          <Typography
+            variant="pi"
+            textColor="neutral600"
+            className="payment-subtitle"
+            style={{ fontSize: "14px" }}
+          >
+            Process payments, captures, and refunds with multiple payment
+            methods
           </Typography>
           {isLiveMode && (
-            <Typography variant="pi" textColor="danger600" style={{ fontSize: '14px', marginTop: '8px', fontWeight: 'bold' }}>
-              ⚠️ Payment Actions are disabled in live mode for security reasons. Please use test mode for testing.
+            <Typography
+              variant="pi"
+              textColor="danger600"
+              style={{ fontSize: "14px", marginTop: "8px", fontWeight: "bold" }}
+            >
+              ⚠️ Payment Actions are disabled in live mode for security reasons.
+              Please use test mode for testing.
             </Typography>
           )}
         </Box>
@@ -80,11 +103,18 @@ const PaymentActionsPanel = ({
           captureMode={captureMode}
           setCaptureMode={setCaptureMode}
           onNavigateToConfig={onNavigateToConfig}
+          settings={settings}
         />
 
         <hr className="payment-divider" />
 
-        <Box className="payment-form-section" style={{ opacity: isLiveMode ? 0.5 : 1, pointerEvents: isLiveMode ? 'none' : 'auto' }}>
+        <Box
+          className="payment-form-section"
+          style={{
+            opacity: isLiveMode ? 0.5 : 1,
+            pointerEvents: isLiveMode ? "none" : "auto",
+          }}
+        >
           <PreauthorizationForm
             paymentAmount={paymentAmount}
             setPaymentAmount={setPaymentAmount}
@@ -112,7 +142,13 @@ const PaymentActionsPanel = ({
 
         <hr className="payment-divider" />
 
-        <Box className="payment-form-section" style={{ opacity: isLiveMode ? 0.5 : 1, pointerEvents: isLiveMode ? 'none' : 'auto' }}>
+        <Box
+          className="payment-form-section"
+          style={{
+            opacity: isLiveMode ? 0.5 : 1,
+            pointerEvents: isLiveMode ? "none" : "auto",
+          }}
+        >
           <AuthorizationForm
             paymentAmount={paymentAmount}
             setPaymentAmount={setPaymentAmount}
@@ -140,7 +176,13 @@ const PaymentActionsPanel = ({
 
         <hr className="payment-divider" />
 
-        <Box className="payment-form-section" style={{ opacity: isLiveMode ? 0.5 : 1, pointerEvents: isLiveMode ? 'none' : 'auto' }}>
+        <Box
+          className="payment-form-section"
+          style={{
+            opacity: isLiveMode ? 0.5 : 1,
+            pointerEvents: isLiveMode ? "none" : "auto",
+          }}
+        >
           <CaptureForm
             paymentAmount={paymentAmount}
             setPaymentAmount={setPaymentAmount}
@@ -153,7 +195,13 @@ const PaymentActionsPanel = ({
 
         <hr className="payment-divider" />
 
-        <Box className="payment-form-section" style={{ opacity: isLiveMode ? 0.5 : 1, pointerEvents: isLiveMode ? 'none' : 'auto' }}>
+        <Box
+          className="payment-form-section"
+          style={{
+            opacity: isLiveMode ? 0.5 : 1,
+            pointerEvents: isLiveMode ? "none" : "auto",
+          }}
+        >
           <RefundForm
             paymentAmount={paymentAmount}
             setPaymentAmount={setPaymentAmount}
@@ -187,4 +235,4 @@ const PaymentActionsPanel = ({
   );
 };
 
-export default PaymentActionsPanel;
+export default PaymentActionsPanel;

package/admin/src/pages/App/components/icons/index.jsx

@@ -0,0 +1,11 @@
+export { default as PaymentIcon } from './PaymentIcon.jsx';
+export { default as PersonIcon } from './PersonIcon.jsx';
+export { default as CreditCardIcon } from './CreditCardIcon.jsx';
+export { default as BankIcon } from './BankIcon.jsx';
+export { default as WalletIcon } from './WalletIcon.jsx';
+export { default as ErrorIcon } from './ErrorIcon.jsx';
+export { default as SuccessIcon } from './SuccessIcon.jsx';
+export { default as PendingIcon } from './PendingIcon.jsx';
+export { default as InfoIcon } from './InfoIcon.jsx';
+export { default as ChevronDownIcon } from './ChevronDownIcon.jsx';
+export { default as ChevronUpIcon } from './ChevronUpIcon.jsx';

package/admin/src/pages/App/components/paymentActions/{AuthorizationForm.js → AuthorizationForm.jsx}

@@ -1,8 +1,14 @@
 import React from "react";
-import { Box, Flex, Typography, TextInput, Button } from "@strapi/design-system";
+import {
+  Box,
+  Flex,
+  Typography,
+  TextInput,
+  Button,
+} from "@strapi/design-system";
 import { Play } from "@strapi/icons";
 import GooglePayButton from "../GooglePaybutton";
-import ApplePayButton from "../ApplePayButton";
+import ApplePayBtn from "../ApplePayBtn";
 import CardDetailsInput from "./CardDetailsInput";
 
 const AuthorizationForm = ({
@@ -14,7 +20,6 @@ const AuthorizationForm = ({
   onAuthorization,
   paymentMethod,
   settings,
-  googlePayToken,
   setGooglePayToken,
   applePayToken,
   setApplePayToken,
@@ -26,7 +31,7 @@ const AuthorizationForm = ({
   setCardexpiredate,
   cardcvc2,
   setCardcvc2,
-  isLiveMode = false
+  isLiveMode = false,
 }) => {
   const handleGooglePayToken = (token, paymentData) => {
     if (!token) {
@@ -44,32 +49,15 @@ const AuthorizationForm = ({
 
   const handleApplePayToken = async (token, paymentData) => {
     if (!token) {
-      console.error("[Apple Pay] Token is missing in handleApplePayToken");
       return Promise.reject(new Error("Token is missing"));
     }
 
-    console.log("[Apple Pay] handleApplePayToken called with token:", {
-      hasToken: !!token,
-      tokenLength: token?.length,
-      paymentData: !!paymentData
-    });
-
-    // IMPORTANT: Set token in state immediately (synchronously)
-    // This ensures the token is saved before the dialog closes
     setApplePayToken(token);
 
-    console.log("[Apple Pay] Token saved to state successfully");
-
-    // Don't call onAuthorization immediately
-    // Let the user manually trigger the payment using the button
-    // This prevents the dialog from closing prematurely if there's an error
-    // The dialog will close with success, and the user will see the "Process Authorization" button
-
-    // Return success immediately so the dialog closes properly
-    // The actual payment processing will happen when the user clicks the button
     return Promise.resolve({
       success: true,
-      message: "Token received successfully. Please click 'Process Authorization' to complete the payment."
+      message:
+        "Token received successfully. Please click 'Process Authorization' to complete the payment.",
     });
   };
 
@@ -79,14 +67,22 @@ const AuthorizationForm = ({
     }
   };
 
-
   return (
     <Flex direction="column" alignItems="stretch" gap={4}>
       <Flex direction="row" gap={2}>
-        <Typography variant="omega" fontWeight="semiBold" textColor="neutral800" className="payment-form-title">
+        <Typography
+          variant="omega"
+          fontWeight="semiBold"
+          textColor="neutral800"
+          className="payment-form-title"
+        >
           Authorization
         </Typography>
-        <Typography variant="pi" textColor="neutral600" className="payment-form-description">
+        <Typography
+          variant="pi"
+          textColor="neutral600"
+          className="payment-form-description"
+        >
           Authorize and capture an amount immediately.
         </Typography>
       </Flex>
@@ -141,25 +137,40 @@ const AuthorizationForm = ({
         />
       ) : paymentMethod === "apl" ? (
         <Box>
-          <ApplePayButton
+          <ApplePayBtn
             amount={paymentAmount}
-            currency="EUR"
             onTokenReceived={handleApplePayToken}
             onError={handleApplePayError}
             settings={settings}
           />
           {applePayToken && (
-            <Box marginTop={3} style={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "8px" }}>
-              <Typography variant="pi" textColor="success600" style={{ marginBottom: "8px", fontWeight: "bold" }}>
-                ✓ Apple Pay token received. You can now process the authorization:
+            <Box
+              marginTop={3}
+              style={{
+                width: "100%",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-start",
+                gap: "8px",
+              }}
+            >
+              <Typography
+                variant="pi"
+                textColor="success600"
+                style={{ marginBottom: "8px", fontWeight: "bold" }}
+              >
+                ✓ Apple Pay token received. You can now process the
+                authorization:
               </Typography>
               <Button
                 variant="default"
                 onClick={() => onAuthorization(applePayToken)}
                 loading={isProcessingPayment}
                 startIcon={<Play />}
-                style={{ maxWidth: '200px' }}
-                disabled={!paymentAmount.trim() || !authReference.trim() || isLiveMode}
+                style={{ maxWidth: "200px" }}
+                disabled={
+                  !paymentAmount.trim() || !authReference.trim() || isLiveMode
+                }
                 className="payment-button payment-button-primary"
               >
                 Process Authorization
@@ -173,7 +184,7 @@ const AuthorizationForm = ({
           onClick={onAuthorization}
           loading={isProcessingPayment}
           startIcon={<Play />}
-          style={{ maxWidth: '200px' }}
+          style={{ maxWidth: "200px" }}
           className="payment-button payment-button-primary"
           disabled={
             !paymentAmount.trim() ||
@@ -192,4 +203,3 @@ const AuthorizationForm = ({
 };
 
 export default AuthorizationForm;
-