@tap-payments/apple-pay-button 0.0.57-development → 0.0.58-development

package/build/components/ActionButton/ActionButton.js

@@ -50,7 +50,8 @@ export default function ActionButton(props) {
                 background: background
             }, '&:disabled': {
                 background: background,
-                color: textColor
+                color: textColor,
+                pointerEvents: 'none'
             } }, sx), disabled: disabled, rounded: rounded, onClick: onClick }, rest, { children: children })));
 }
 ActionButton.defaultProps = {

package/build/components/InitialLoader/InitialLoader.js

@@ -11,19 +11,16 @@ var StyledLottie = styled(Lottie, {
     return ({
         border: 'none',
         width: '100%',
-        borderRadius: edges === Edges.STRAIGHT ? '0' : '10px',
+        borderRadius: edges === Edges.STRAIGHT ? '0px' : '30px',
         overflow: 'hidden',
         height: '48px',
         maxWidth: '360px',
-        minWidth: '170px',
-        '& svg': {
-            width: '100%'
-        }
+        minWidth: '170px'
     });
 });
 export default function InitialLoader(_a) {
     var open = _a.open, themeMode = _a.themeMode, edges = _a.edges;
     if (!open)
         return null;
-    return (_jsx(StyledLottie, { animationData: themeMode === ThemeMode.DARK ? DarkLoader : LightLoader, edges: edges, loop: true }));
+    return (_jsx(StyledLottie, { "data-testid": 'InitialLoader-StyledLottie', animationData: themeMode === ThemeMode.DARK ? DarkLoader : LightLoader, edges: edges, loop: true }));
 }

package/build/components/PayButton/PayButton.d.ts

@@ -5,6 +5,7 @@ export interface PayButtonProps {
     isRounded?: boolean;
     isFailed?: boolean;
     isSuccess?: boolean;
+    disabled?: boolean;
     bgColor?: string;
     gradientColor?: string;
     edges?: Edges;

package/build/components/PayButton/PayButton.js

@@ -20,7 +20,7 @@ import BlackErrorGif from '../../assets/gif/error-black.gif';
 import { StyledContainerLoader } from './style';
 import { Edges, ThemeMode } from '../../@types/enums';
 var PayButton = function (_a) {
-    var theme = _a.theme, isRounded = _a.isRounded, isFailed = _a.isFailed, isSuccess = _a.isSuccess, bgColor = _a.bgColor, gradientColor = _a.gradientColor, edges = _a.edges, titleAsset = _a.titleAsset, onClick = _a.onClick;
+    var theme = _a.theme, isRounded = _a.isRounded, isFailed = _a.isFailed, isSuccess = _a.isSuccess, disabled = _a.disabled, bgColor = _a.bgColor, gradientColor = _a.gradientColor, edges = _a.edges, titleAsset = _a.titleAsset, onClick = _a.onClick;
     var renderButtonLabel = function () {
         if (isFailed) {
             return _jsx("img", { src: theme === ThemeMode.DARK ? BlackErrorGif : WhiteErrorGif, alt: 'error', width: 30, height: 30 });
@@ -33,7 +33,7 @@ var PayButton = function (_a) {
         }
         return _jsx("img", { src: titleAsset, alt: 'logo' });
     };
-    return (_jsx(StyledContainerLoader, __assign({ "data-testid": 'PayButton', "data-src": 'apple-pay-button-element', "data-is-rounded": isRounded, "data-is-error": isFailed, "data-is-success": isSuccess, edges: edges }, { children: _jsx(ActionButton, __assign({ "data-testid": 'PayButton-ActionButton', "data-src": 'apple-pay-button-element', "data-is-error": isFailed, "data-is-success": isSuccess, gradientColor: gradientColor, bgColor: bgColor, rounded: isRounded, onClick: onClick, style: {
+    return (_jsx(StyledContainerLoader, __assign({ "data-testid": 'PayButton', "data-src": 'apple-pay-button-element', "data-is-rounded": isRounded, "data-is-error": isFailed, "data-is-success": isSuccess, edges: edges }, { children: _jsx(ActionButton, __assign({ "data-testid": 'PayButton-ActionButton', "data-src": 'apple-pay-button-element', "data-is-error": isFailed, "data-is-success": isSuccess, gradientColor: gradientColor, bgColor: bgColor, rounded: isRounded, onClick: onClick, disabled: disabled, style: {
                 borderRadius: edges === Edges.STRAIGHT ? '0px' : '30px'
             } }, { children: renderButtonLabel() })) })));
 };

package/build/components/PayButton/style.d.ts

@@ -3,9 +3,3 @@ import { Edges } from '../../@types';
 export declare const StyledContainerLoader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     edges?: Edges | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const DisabledButton: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    edges?: Edges | undefined;
-    backgroundColor?: string | undefined;
-    color?: string | undefined;
-    font?: string | undefined;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;

package/build/components/PayButton/style.js

@@ -17,25 +17,3 @@ export var StyledContainerLoader = styled('section', {
         overflow: 'hidden'
     });
 });
-export var DisabledButton = styled('button', {
-    shouldForwardProp: function (prop) { return !['edges', 'backgroundColor', 'color', 'font'].includes(prop); }
-})(function (_a) {
-    var edges = _a.edges, backgroundColor = _a.backgroundColor, color = _a.color, font = _a.font;
-    return ({
-        border: 'none',
-        width: 'calc(100% - 16px)',
-        borderRadius: edges === Edges.STRAIGHT ? '0px' : '30px',
-        overflow: 'hidden',
-        height: '48px',
-        color: color,
-        backgroundColor: backgroundColor,
-        maxWidth: '360px',
-        minWidth: '170px',
-        pointerEvents: 'none',
-        cursor: 'not-allowed',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        font: font
-    });
-});

package/build/features/ApplePayButton/ApplePayButton.js

@@ -19,14 +19,14 @@ import './ApplePayButton.css';
 import { StyledContainer } from './style';
 import PayButton from '../../components/PayButton';
 var ApplePay = React.memo(function (props) {
-    var _a, _b, _c;
-    var _d = useApplePay({ buttonProps: props }), onClick = _d.onClick, loading = _d.loading, onApplePayButtonClicked = _d.onApplePayButtonClicked, disabled = _d.disabled, applePayRequestData = _d.applePayRequestData, isIframeIntegration = _d.isIframeIntegration, applePayRequestConfiguration = _d.applePayRequestConfiguration, mappedProps = _d.mappedProps, theme = _d.theme, isRounded = _d.isRounded, success = _d.success, error = _d.error, backgroundColor = _d.backgroundColor, gradientColor = _d.gradientColor, titleAsset = _d.titleAsset;
+    var _a, _b, _c, _d;
+    var _e = useApplePay({ buttonProps: props }), onClick = _e.onClick, loading = _e.loading, onApplePayButtonClicked = _e.onApplePayButtonClicked, disabled = _e.disabled, applePayRequestData = _e.applePayRequestData, isIframeIntegration = _e.isIframeIntegration, applePayRequestConfiguration = _e.applePayRequestConfiguration, mappedProps = _e.mappedProps, theme = _e.theme, isRounded = _e.isRounded, success = _e.success, error = _e.error, backgroundColor = _e.backgroundColor, gradientColor = _e.gradientColor, titleAsset = _e.titleAsset;
     React.useEffect(function () {
         if (props.debug) {
             console.log('ApplePayButtonProps', props);
         }
     }, []);
-    return (_jsx(StyledContainer, __assign({ "data-src": 'apple-pay-button-element', "data-testid": 'ApplePayButton-section' }, { children: loading ? (_jsx(InitialLoader, { open: true, themeMode: (_a = mappedProps.interface) === null || _a === void 0 ? void 0 : _a.theme, edges: (_b = mappedProps.interface) === null || _b === void 0 ? void 0 : _b.edges })) : (_jsx(_Fragment, { children: _jsx(PayButton, { "data-src": 'apple-pay-button-element', "data-testid": 'ApplePayButton', theme: theme, isRounded: isRounded, isSuccess: success, isFailed: error, bgColor: backgroundColor, gradientColor: gradientColor, titleAsset: titleAsset, edges: (_c = mappedProps.interface) === null || _c === void 0 ? void 0 : _c.edges, onClick: onClick }) })) })));
+    return (_jsx(StyledContainer, __assign({ "data-src": 'apple-pay-button-element', "data-testid": 'ApplePayButton-section', edges: (_a = mappedProps.interface) === null || _a === void 0 ? void 0 : _a.edges }, { children: loading ? (_jsx(InitialLoader, { open: true, themeMode: (_b = mappedProps.interface) === null || _b === void 0 ? void 0 : _b.theme, edges: (_c = mappedProps.interface) === null || _c === void 0 ? void 0 : _c.edges })) : (_jsx(_Fragment, { children: _jsx(PayButton, { "data-src": 'apple-pay-button-element', "data-testid": 'ApplePayButton', theme: theme, isRounded: isRounded, isSuccess: success, isFailed: error, bgColor: backgroundColor, gradientColor: gradientColor, titleAsset: titleAsset, edges: (_d = mappedProps.interface) === null || _d === void 0 ? void 0 : _d.edges, disabled: disabled, onClick: onClick }) })) })));
 });
 export function ApplePayButton(props) {
     return _jsx(ApplePay, __assign({}, props));

package/build/features/ApplePayButton/style.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="react" />
-export declare const StyledContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+import { Edges } from '../../@types';
+export declare const StyledContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    edges?: Edges | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/build/features/ApplePayButton/style.js

@@ -1,12 +1,20 @@
 import { styled } from '@mui/material';
-export var StyledContainer = styled('section')(function () { return ({
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'column',
-    margin: '0 auto',
-    height: '48px',
-    maxWidth: '360px',
-    minWidth: '170px'
-}); });
+import { Edges } from '../../@types';
+export var StyledContainer = styled('section', {
+    shouldForwardProp: function (prop) { return !['edges'].includes(prop); }
+})(function (_a) {
+    var edges = _a.edges;
+    return ({
+        width: '100%',
+        display: 'flex',
+        borderRadius: edges === Edges.STRAIGHT ? '0px' : '30px',
+        overflow: 'hidden',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        margin: '0 auto',
+        height: '48px',
+        maxWidth: '360px',
+        minWidth: '170px'
+    });
+});

package/build/hooks/useApplePay.js

@@ -68,8 +68,9 @@ export var useApplePay = function (_a) {
     var _r = useState(false), isRounded = _r[0], setIsRounded = _r[1];
     var mappedProps = getDefaultValues(buttonProps);
     var environment = mappedProps.environment, interfaceObj = mappedProps.interface, merchant = mappedProps.merchant, customer = mappedProps.customer, acceptance = mappedProps.acceptance, scope = mappedProps.scope, debug = mappedProps.debug, onError = mappedProps.onError, onSuccess = mappedProps.onSuccess, onCancel = mappedProps.onCancel, onReady = mappedProps.onReady, metaData = mappedProps.metaData, headers = mappedProps.headers, operator = mappedProps.operator, order = mappedProps.order, onOrderCreated = mappedProps.onOrderCreated, integration = mappedProps.integration, transaction = mappedProps.transaction, post = mappedProps.post, redirect = mappedProps.redirect;
+    var isIframeIntegration = buttonProps.integration === 'iframe';
     useMerchantApplePay({
-        isIframeIntegration: integration === 'iframe',
+        isIframeIntegration: isIframeIntegration,
         onError: onError,
         onSuccess: onSuccess,
         scope: scope,
@@ -80,11 +81,13 @@ export var useApplePay = function (_a) {
         transaction: transaction,
         operator: operator,
         post: post,
-        redirect: redirect
+        redirect: redirect,
+        setError: setError,
+        setSuccess: setSuccess,
+        setIsRounded: setIsRounded
     });
     var lang = (_c = (_b = mappedProps.interface) === null || _b === void 0 ? void 0 : _b.locale) !== null && _c !== void 0 ? _c : 'en';
     var theme = getDefaultThemeMode((_d = mappedProps.interface) === null || _d === void 0 ? void 0 : _d.theme);
-    var isIframeIntegration = buttonProps.integration === 'iframe';
     var applePayPaymentMethodOptions = useMemo(function () {
         if (!profileData)
             return null;
@@ -245,7 +248,7 @@ export var useApplePay = function (_a) {
                                     console.info('Creating merchant session and validating merchant session');
                                     console.info('onvalidatemerchant event', event);
                                 }
-                                setLoading(true);
+                                setDisabled(true);
                                 _a.label = 1;
                             case 1:
                                 _a.trys.push([1, 3, , 4]);
@@ -267,7 +270,7 @@ export var useApplePay = function (_a) {
                                 session_1.completePayment({ status: ApplePaySession.STATUS_FAILURE });
                                 throw error_1;
                             case 4:
-                                setLoading(false);
+                                setDisabled(false);
                                 return [2];
                         }
                     });
@@ -283,6 +286,7 @@ export var useApplePay = function (_a) {
                                 _b.label = 1;
                             case 1:
                                 _b.trys.push([1, 7, 8, 9]);
+                                setIsRounded === null || setIsRounded === void 0 ? void 0 : setIsRounded(true);
                                 _a = scope;
                                 switch (_a) {
                                     case Scope.APPLE_PAY_TOKEN: return [3, 2];
@@ -296,6 +300,7 @@ export var useApplePay = function (_a) {
                             case 3: return [4, appService.tapTokenization(event.payment.token.paymentData)];
                             case 4:
                                 data = _b.sent();
+                                setSuccess === null || setSuccess === void 0 ? void 0 : setSuccess(true);
                                 onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
                                 session_1.completePayment({ status: ApplePaySession.STATUS_SUCCESS });
                                 return [3, 6];
@@ -309,10 +314,12 @@ export var useApplePay = function (_a) {
                                 error_2 = _b.sent();
                                 if (debug)
                                     console.error('error in onpaymentauthorized', error_2);
+                                setError(true);
                                 session_1.completePayment({ status: ApplePaySession.STATUS_FAILURE });
                                 throw error_2;
                             case 8:
                                 setLoading(false);
+                                setIsRounded === null || setIsRounded === void 0 ? void 0 : setIsRounded(false);
                                 return [7];
                             case 9: return [2];
                         }

package/build/hooks/useMerchantApplePay.d.ts

@@ -3,6 +3,9 @@ interface ApplePayRequestData {
     isIframeIntegration: boolean;
     onError?: (error: any) => void;
     onSuccess?: (data: Record<string, any>) => void;
+    setIsRounded?: (loading: boolean) => void;
+    setSuccess?: (success: boolean) => void;
+    setError?: (error: boolean) => void;
     scope: typeof Scope[keyof typeof Scope];
     profileData?: Pick<MetaData, 'merchant' | 'payment_options'>;
     merchant: Pick<MetaData['merchant'], 'id'>;
@@ -13,5 +16,5 @@ interface ApplePayRequestData {
     redirect?: ApplePayButtonProps['redirect'];
     post?: ApplePayButtonProps['post'];
 }
-export declare const useMerchantApplePay: ({ isIframeIntegration, onError, onSuccess, scope, profileData, order, customer, transaction, operator, redirect, post }: ApplePayRequestData) => void;
+export declare const useMerchantApplePay: ({ isIframeIntegration, onError, onSuccess, merchant, setIsRounded, setError, setSuccess, scope, profileData, order, customer, transaction, operator, redirect, post }: ApplePayRequestData) => void;
 export {};

package/build/hooks/useMerchantApplePay.js

@@ -36,14 +36,14 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import * as React from 'react';
 import appService from '../api/app.service';
-import { Scope } from '../@types';
+import { Scope, CHARGE_CODE } from '../@types';
 var EVENT_NAME = 'TAP_BUTTON::APPLE_PAY_ON_PAYMENT_AUTHORIZED';
 export var useMerchantApplePay = function (_a) {
-    var isIframeIntegration = _a.isIframeIntegration, onError = _a.onError, onSuccess = _a.onSuccess, scope = _a.scope, profileData = _a.profileData, order = _a.order, customer = _a.customer, transaction = _a.transaction, operator = _a.operator, redirect = _a.redirect, post = _a.post;
+    var isIframeIntegration = _a.isIframeIntegration, onError = _a.onError, onSuccess = _a.onSuccess, merchant = _a.merchant, setIsRounded = _a.setIsRounded, setError = _a.setError, setSuccess = _a.setSuccess, scope = _a.scope, profileData = _a.profileData, order = _a.order, customer = _a.customer, transaction = _a.transaction, operator = _a.operator, redirect = _a.redirect, post = _a.post;
     var onMessageReceived = React.useCallback(function (_a) {
         var message = _a.data;
         return __awaiter(void 0, void 0, void 0, function () {
-            var _b, event, data, _c, response, tokenId, supportCurrency, transactionRequest, transactionResponse, _d, e_1;
+            var _b, event, data, _c, response, tokenId, supportCurrency, transactionRequest, transactionResponse, _d, successState, e_1;
             var _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
             return __generator(this, function (_w) {
                 switch (_w.label) {
@@ -65,12 +65,17 @@ export var useMerchantApplePay = function (_a) {
                     case 2:
                         onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
                         return [3, 12];
-                    case 3: return [4, appService.tapTokenization(data)];
+                    case 3:
+                        setIsRounded === null || setIsRounded === void 0 ? void 0 : setIsRounded(true);
+                        return [4, appService.tapTokenization(data)];
                     case 4:
                         response = _w.sent();
+                        setSuccess === null || setSuccess === void 0 ? void 0 : setSuccess(true);
                         onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(response);
                         return [3, 12];
-                    case 5: return [4, appService.tapTokenization(data)];
+                    case 5:
+                        setIsRounded === null || setIsRounded === void 0 ? void 0 : setIsRounded(true);
+                        return [4, appService.tapTokenization(data)];
                     case 6:
                         tokenId = (_w.sent()).id;
                         supportCurrency = ((_f = (_e = profileData === null || profileData === void 0 ? void 0 : profileData.payment_options) === null || _e === void 0 ? void 0 : _e.supported_currencies) !== null && _f !== void 0 ? _f : [])[0];
@@ -122,6 +127,13 @@ export var useMerchantApplePay = function (_a) {
                         _w.label = 10;
                     case 10:
                         transactionResponse = _d;
+                        successState = scope === Scope.AUTHORIZE ? CHARGE_CODE.AUTHORIZED : CHARGE_CODE.SUCCESS;
+                        if ((transactionResponse === null || transactionResponse === void 0 ? void 0 : transactionResponse.response.code) === successState) {
+                            setSuccess === null || setSuccess === void 0 ? void 0 : setSuccess(true);
+                        }
+                        else {
+                            setError === null || setError === void 0 ? void 0 : setError(true);
+                        }
                         onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(transactionResponse);
                         return [3, 12];
                     case 11:

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tap-payments/apple-pay-button",
-	"version": "0.0.57-development",
+	"version": "0.0.58-development",
 	"description": "Apple Pay Button React Component",
 	"main": "build/index.js",
 	"module": "build/index.js",