@paypal/checkout-components 5.0.237 → 5.0.239

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.237",
+  "version": "5.0.239",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -91,11 +91,11 @@
     "@krakenjs/post-robot": "^11.0.0",
     "@krakenjs/zalgo-promise": "^2.0.0",
     "@krakenjs/zoid": "^10.0.0",
-    "@paypal/common-components": "^1.0.27",
+    "@paypal/common-components": "^1.0.33",
     "@paypal/funding-components": "^1.0.27",
     "@paypal/sdk-client": "^4.0.166",
     "@paypal/sdk-constants": "^1.0.123",
-    "@paypal/sdk-logos": "^1.0.45"
+    "@paypal/sdk-logos": "^2.0.0"
   },
   "lint-staged": {
     "*.sh": "prettier --write"

package/src/funding/bancontact/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { BancontactLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getBancontactConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
         
         shippingChange: false,
     
@@ -16,6 +18,23 @@ export function getBancontactConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => BancontactLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => BancontactLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>Bancontact</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/blik/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { BlikLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getBlikConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
         
         shippingChange: false,
     
@@ -16,6 +18,23 @@ export function getBlikConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => BlikLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => BlikLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>BLIK</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/boleto/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { BoletoLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getBoletoConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
 
         automatic: false,
 
@@ -18,6 +20,23 @@ export function getBoletoConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => BoletoLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => BoletoLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>Boleto Bancário</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/common.jsx

@@ -218,3 +218,36 @@ export const DEFAULT_FUNDING_CONFIG : FundingSourceConfig = {
         return true;
     }
 };
+
+export const DEFAULT_APM_FUNDING_CONFIG : FundingSourceConfig = {
+
+    ...DEFAULT_FUNDING_CONFIG,
+
+    colors: [
+        BUTTON_COLOR.DEFAULT,
+        BUTTON_COLOR.SILVER,
+        BUTTON_COLOR.WHITE,
+        BUTTON_COLOR.BLACK
+    ],
+
+    logoColors: {
+        [ BUTTON_COLOR.DEFAULT ]:   LOGO_COLOR.DEFAULT,
+        [ BUTTON_COLOR.SILVER ]:    LOGO_COLOR.BLACK,
+        [ BUTTON_COLOR.WHITE ]:     LOGO_COLOR.BLACK,
+        [ BUTTON_COLOR.BLACK ]:     LOGO_COLOR.WHITE
+    },
+
+    textColors: {
+        [ BUTTON_COLOR.DEFAULT ]:   TEXT_COLOR.WHITE,
+        [ BUTTON_COLOR.BLACK ]:     TEXT_COLOR.WHITE,
+        [ BUTTON_COLOR.SILVER ]:    TEXT_COLOR.BLACK,
+        [ BUTTON_COLOR.WHITE ]:     TEXT_COLOR.BLACK
+    },
+
+    secondaryColors: {
+        [ DEFAULT ]:                BUTTON_COLOR.DEFAULT,
+        [ BUTTON_COLOR.SILVER ]:    BUTTON_COLOR.SILVER,
+        [ BUTTON_COLOR.WHITE ]:     BUTTON_COLOR.WHITE,
+        [ BUTTON_COLOR.BLACK ]:     BUTTON_COLOR.BLACK
+    }
+};

package/src/funding/eps/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { EpsLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getEpsConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
 
         shippingChange: false,
     
@@ -16,6 +18,23 @@ export function getEpsConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => EpsLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => EpsLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>eps</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/giropay/config.jsx

@@ -2,13 +2,16 @@
 /** @jsx node */
 
 import { GiropayLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
+
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getGiropayConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
 
         shippingChange: false,
     
@@ -16,6 +19,23 @@ export function getGiropayConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
     
-        Logo: ({ logoColor, optional }) => GiropayLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => GiropayLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>giropay</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/ideal/config.jsx

@@ -5,12 +5,12 @@ import { IdealLogo } from '@paypal/sdk-logos/src';
 import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
 
 export function getIdealConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
 
         shippingChange: false,
     
@@ -25,15 +25,15 @@ export function getIdealConfig() : FundingSourceConfig {
                 return logo;
             }
 
-            const idealLogo = (
+            const apmLogo = (
                 <Fragment>
-                    { logo }<Space /><Text>Online betalen</Text>
+                    { logo }<Space /><Text animate optional>iDEAL</Text>
                 </Fragment>
             );
 
             return (<BasicLabel
                 { ...opts }
-                logo={ idealLogo }
+                logo={ apmLogo }
             />);
         }
     };

package/src/funding/maxima/config.jsx

@@ -3,7 +3,7 @@
 
 import { MaximaLogo } from '@paypal/sdk-logos/src';
 
-import { BUTTON_LAYOUT } from '../../constants';
+import { BUTTON_COLOR, BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
 
 export function getMaximaConfig() : FundingSourceConfig {
@@ -16,6 +16,13 @@ export function getMaximaConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => MaximaLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => MaximaLogo({ logoColor, optional }),
+
+        colors: [
+            BUTTON_COLOR.DEFAULT,
+            BUTTON_COLOR.SILVER,
+            BUTTON_COLOR.WHITE,
+            BUTTON_COLOR.BLACK
+        ]
     };
 }

package/src/funding/mercadopago/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { MercadoPagoLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getMercadopagoConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
         
         shippingChange: false,
     
@@ -16,6 +18,23 @@ export function getMercadopagoConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => MercadoPagoLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => MercadoPagoLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>Mercado Pago</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/multibanco/config.jsx

@@ -2,14 +2,16 @@
 /** @jsx node */
 
 import { MultibancoLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getMultibancoConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
-        
+        ...DEFAULT_APM_FUNDING_CONFIG,
+
         automatic: false,
 
         shippingChange: false,
@@ -18,6 +20,23 @@ export function getMultibancoConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => MultibancoLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => MultibancoLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>Multibanco</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/mybank/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { MybankLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getMybankConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
 
         shippingChange: false,
     
@@ -16,6 +18,23 @@ export function getMybankConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
     
-        Logo: ({ logoColor, optional }) => MybankLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => MybankLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>MyBank</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/oxxo/config.jsx

@@ -2,14 +2,16 @@
 /** @jsx node */
 
 import { OxxoLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getOxxoConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
-        
+        ...DEFAULT_APM_FUNDING_CONFIG,
+
         automatic: false,
 
         shippingChange: false,
@@ -18,6 +20,23 @@ export function getOxxoConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => OxxoLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => OxxoLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>OXXO</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/p24/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { P24Logo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getP24Config() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
 
         layouts: [
             BUTTON_LAYOUT.VERTICAL
@@ -16,6 +18,23 @@ export function getP24Config() : FundingSourceConfig {
 
         shippingChange: false,
     
-        Logo: ({ logoColor, optional }) => P24Logo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => P24Logo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>Przelewy24</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/sofort/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { SofortLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getSofortConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
 
         shippingChange: false,
 
@@ -16,6 +18,23 @@ export function getSofortConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
     
-        Logo: ({ logoColor, optional }) => SofortLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => SofortLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>SOFORT</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/trustly/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { TrustlyLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getTrustlyConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
 
         automatic: false,
         
@@ -18,6 +20,23 @@ export function getTrustlyConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => TrustlyLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => TrustlyLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>Trustly</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }