@tap-payments/auth-jsconnect 1.0.61 → 1.0.65

package/build/features/shared/Button/FlowsButtons.js

@@ -10,17 +10,22 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import React from 'react';
 import Button from '../../../components/Button';
 import { alpha, styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
-var Image = styled('img')(function (_a) {
+import { ICONS_NAMES } from '../../../constants';
+import CheckIcon from '@mui/icons-material/Check';
+var Image = styled('img', { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
     var theme = _a.theme;
     return ({
         width: theme.spacing(3),
         height: theme.spacing(3),
         fontSize: theme.spacing(3),
-        marginInlineStart: theme.spacing(1)
+        marginInlineStart: theme.spacing(1),
+        transform: theme.direction === 'rtl' ? 'scaleX(-1)' : 'scaleX(1)'
     });
 });
 var ButtonBoxStyled = styled(Box)(function (_a) {
@@ -29,29 +34,41 @@ var ButtonBoxStyled = styled(Box)(function (_a) {
         margin: theme.spacing(0, 2.5, 2.5, 2.5)
     });
 });
-var ButtonStyled = styled(Button)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        width: '100%',
-        paddingInlineStart: theme.spacing(0.75),
-        backgroundColor: theme.palette.common.white,
-        border: "1px solid ".concat(theme.palette.primary.main),
-        color: theme.palette.primary.main,
-        '&:hover': {
-            backgroundColor: theme.palette.primary.main,
-            color: theme.palette.common.white
-        },
-        '&:disabled': {
+var ButtonStyled = styled(Button, { shouldForwardProp: function (prop) { return prop !== 'isCompleted'; } })(function (_a) {
+    var theme = _a.theme, isCompleted = _a.isCompleted;
+    return (__assign(__assign({ width: '100%', textTransform: 'none', paddingInlineStart: theme.spacing(0.75), backgroundColor: theme.palette.common.white, border: "1px solid ".concat(theme.palette.primary.main), color: theme.palette.primary.main }, (isCompleted && {
+        paddingInlineEnd: '13px',
+        color: theme.palette.success.main,
+        border: "1px solid ".concat(theme.palette.success.main)
+    })), { '&:hover': __assign({ backgroundColor: theme.palette.primary.main, color: theme.palette.common.white }, (isCompleted && {
+            backgroundColor: theme.palette.common.white,
+            border: "1px solid ".concat(theme.palette.success.main),
+            color: theme.palette.success.main,
+            cursor: 'initial'
+        })), '&:disabled': {
             backgroundColor: theme.palette.common.white,
             color: alpha(theme.palette.primary.main, 0.3)
-        }
+        } }));
+});
+var CheckIconStyled = styled(CheckIcon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: theme.spacing(2.5),
+        height: theme.spacing(2.5),
+        color: theme.palette.success.main
     });
 });
 export default function FlowsButtons(_a) {
     var buttons = _a.buttons;
-    return (_jsx(ButtonBoxStyled, { children: buttons.map(function (_a, index) {
-            var title = _a.title, href = _a.href, src = _a.src;
-            var isLast = index === buttons.length - 1;
-            return (_jsx(Link, __assign({ href: href, underline: 'none', target: '_blank' }, { children: _jsx(ButtonStyled, __assign({ sx: { mb: isLast ? 0 : 1.8 }, startIcon: _jsx(Image, { src: src, alt: title }), type: 'button' }, { children: title })) }), index));
+    var _b = React.useState(), index = _b[0], setIndex = _b[1];
+    return (_jsx(ButtonBoxStyled, { children: buttons.map(function (_a, idx) {
+            var title = _a.title, href = _a.href, src = _a.src, hoverSrc = _a.hoverSrc, isCompleted = _a.isCompleted;
+            var isLast = idx === buttons.length - 1;
+            var linkProps = {
+                href: href,
+                target: '_blank'
+            };
+            return (_createElement(Link, __assign({}, (!isCompleted && linkProps), { underline: 'none', key: idx, onMouseEnter: function () { return !isCompleted && setIndex(idx); }, onMouseLeave: function () { return setIndex(undefined); } }),
+                _jsx(ButtonStyled, __assign({ isCompleted: isCompleted, sx: { mb: isLast ? 0 : 1.8 }, endIcon: isCompleted ? (_jsx(CheckIconStyled, {})) : (_jsx(Image, { sx: { height: 15 }, src: index === idx ? ICONS_NAMES.Arrow_white_right_icon : ICONS_NAMES.Arrow_filled_right_icon })), startIcon: _jsx(Image, { src: index === idx ? hoverSrc : src, alt: title }), type: 'button' }, { children: title }))));
         }) }));
 }

package/build/features/shared/Button/MobileButton.js

@@ -21,6 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import Button from '../../../components/Button';
 import Icon from '../../../components/Icon';
 import { alpha, styled } from '@mui/material/styles';
@@ -38,23 +39,21 @@ var ButtonBoxStyled = styled(Box)(function (_a) {
         margin: theme.spacing(0, 2.5, 2.5, 2.5)
     });
 });
-var ButtonStyled = styled(Button)(function (_a) {
-    var theme = _a.theme;
+var ButtonStyled = styled(Button, { shouldForwardProp: function (prop) { return prop !== 'touched'; } })(function (_a) {
+    var theme = _a.theme, touched = _a.touched;
     return ({
         paddingInlineStart: theme.spacing(0.75),
-        backgroundColor: theme.palette.common.white,
+        textTransform: 'none',
+        backgroundColor: touched ? theme.palette.primary.main : theme.palette.common.white,
         border: "1px solid ".concat(theme.palette.primary.main),
-        color: theme.palette.primary.main,
+        color: touched ? theme.palette.common.white : theme.palette.primary.main,
         '&:hover': {
-            backgroundColor: theme.palette.primary.main,
-            color: theme.palette.common.white,
+            backgroundColor: touched ? theme.palette.primary.main : theme.palette.common.white,
+            color: touched ? theme.palette.common.white : theme.palette.primary.main,
             img: {
-                filter: 'brightness(0) invert(1)'
+                filter: touched ? 'brightness(0) invert(1)' : ''
             }
         },
-        '&:active': {
-            backgroundColor: theme.palette.common.white
-        },
         '&:disabled': {
             backgroundColor: theme.palette.common.white,
             color: alpha(theme.palette.primary.main, 0.3)
@@ -63,5 +62,9 @@ var ButtonStyled = styled(Button)(function (_a) {
 });
 export default function MobileButton(_a) {
     var children = _a.children, isAr = _a.isAr, hideIcon = _a.hideIcon, disabled = _a.disabled, props = __rest(_a, ["children", "isAr", "hideIcon", "disabled"]);
-    return (_jsx(ButtonBoxStyled, { children: _jsx(ButtonStyled, __assign({ disabled: disabled, type: 'button', startIcon: !hideIcon && _jsx(IconStyled, { disabled: disabled, src: ICONS_NAMES.MOBILE_ICON }) }, props, { children: children })) }));
+    var _b = React.useState(false), touched = _b[0], setTouched = _b[1];
+    var handleTouch = function () {
+        setTouched(true);
+    };
+    return (_jsx(ButtonBoxStyled, { children: _jsx(ButtonStyled, __assign({ onTouchStart: handleTouch, touched: touched, disabled: disabled, type: 'button', startIcon: !hideIcon && _jsx(IconStyled, { disabled: disabled, src: ICONS_NAMES.MOBILE_ICON }) }, props, { children: children })) }));
 }

package/build/features/shared/SuccessScreen/SuccessScreen.js

@@ -67,6 +67,6 @@ var ThankYou = function (_a) {
     var title = _a.title, showEmailProviders = _a.showEmailProviders, onSuccess = _a.onSuccess, successTitle = _a.successTitle;
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    return (_jsxs(ContainerStyled, { children: [title && (_jsx(TextContainerStyled, { children: _jsxs(TitleStyled, { children: [title, " "] }) })), _jsx(IconStyled, { src: ICONS_NAMES.EMAIL_ICON, alt: 'loading...' }), showEmailProviders && (_jsx(MailBoxStyled, { children: _jsx(EmailProvidersButton, { gmail: { title: t('open_gmail'), href: 'https://mail.google.com/mail/u/0/#inbox' }, outlook: { title: t('open_outlook'), href: 'https://outlook.live.com/mail/0/' }, apple: { title: t('open_apple'), href: 'https://www.icloud.com/mail/' } }) })), onSuccess && !showEmailProviders && (_jsx(MailBoxStyled, { children: _jsx(AbsherButton, __assign({ hideIcon: true, isAr: isAr, onClick: onSuccess }, { children: t(successTitle || 'open_mail_box') })) }))] }));
+    return (_jsxs(ContainerStyled, { children: [title && (_jsx(TextContainerStyled, { children: _jsxs(TitleStyled, { children: [title, " "] }) })), _jsx(IconStyled, { src: ICONS_NAMES.EMAIL_ICON, alt: 'loading...' }), showEmailProviders && (_jsx(MailBoxStyled, { children: _jsx(EmailProvidersButton, { gmail: { title: t('gmail_btn_open_title'), href: 'https://mail.google.com/mail/u/0/#inbox' }, outlook: { title: t('outlook_btn_open_title'), href: 'https://outlook.live.com/mail/0/' }, apple: { title: t('apple_btn_open_title'), href: 'https://www.icloud.com/mail/' } }) })), onSuccess && !showEmailProviders && (_jsx(MailBoxStyled, { children: _jsx(AbsherButton, __assign({ hideIcon: true, isAr: isAr, onClick: onSuccess }, { children: t(successTitle || 'open_mail_box') })) }))] }));
 };
 export default React.memo(ThankYou);

package/build/utils/string.d.ts

@@ -9,6 +9,7 @@ export declare const getIndividualName: (name: string) => {
 export declare const convertNumbers2English: (str: string) => string;
 export declare const getParameterByName: (name: string) => string | null;
 export declare const getClientEmailUrl: () => string;
+export declare const getFlowUrl: (path: string) => string;
 export declare const capitalizeTheFirstLetterOfEachWord: (words: string) => string;
 export declare const getRequestHeaders: (deviceInfo: DeviceInfo) => {
     al: string;

package/build/utils/string.js

@@ -49,6 +49,10 @@ export var getClientEmailUrl = function () {
     var origin = window.location.origin;
     return origin + '/?token=';
 };
+export var getFlowUrl = function (path) {
+    var origin = window.location.origin;
+    return origin + path + '?token=';
+};
 export var capitalizeTheFirstLetterOfEachWord = function (words) {
     var separateWord = words.toLowerCase().split(' ');
     for (var i = 0; i < separateWord.length; i++) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tap-payments/auth-jsconnect",
-	"version": "1.0.61",
+	"version": "1.0.65",
 	"description": "connect library, auth",
 	"private": false,
 	"main": "build/index.js",