@tap-payments/auth-jsconnect 1.0.41 → 1.0.45

package/build/features/connect/screens/Merchant/BrandName.js

@@ -86,6 +86,6 @@ var BrandName = function (_a) {
     var clearBrandName = function () {
         brandControl.field.onChange('');
     };
-    return (_jsxs(ScreenContainer, __assign({ sx: { mt: 2.5, mb: 3 } }, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: t('signup_brand_name_label') }), _jsx(Tooltip, __assign({ title: t('brand_name_hint'), onMouseOver: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: isHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] }), _jsx(Input, { onChange: handleBrandNameChange, value: brandNameValue, placeholder: t('signup_brand_name_placeholder'), warningType: 'alert', warningMessage: error && t(error), endAdornment: !error && brandNameValue ? _jsx(CheckIcon, {}) : brandNameValue && _jsx(ClearIcon, { onClick: clearBrandName }) })] })));
+    return (_jsxs(ScreenContainer, __assign({ sx: { mt: 2.5, mb: 3 } }, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: t('signup_brand_name_label') }), _jsx(Tooltip, __assign({ title: t('brand_name_hint'), onMouseOver: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onTouchStartCapture: function () { return setIsHovered(true); } }, { children: isHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] }), _jsx(Input, { onChange: handleBrandNameChange, value: brandNameValue, placeholder: t('signup_brand_name_placeholder'), warningType: 'alert', warningMessage: error && t(error), endAdornment: !error && brandNameValue ? _jsx(CheckIcon, {}) : brandNameValue && _jsx(ClearIcon, { onClick: clearBrandName }) })] })));
 };
 export default React.memo(BrandName);

package/build/features/connect/screens/Mobile/Mobile.js

@@ -29,7 +29,6 @@ import Divider from '@mui/material/Divider';
 import Text from '../../../../components/Text';
 import MIDTitle from './Title';
 import MobileNumber from './MobileNumber';
-import BusinessCountry from './BusinessCountry';
 import { PhoneValidationSchema } from './validation';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
@@ -108,6 +107,6 @@ var Mobile = function (_a) {
     var isCountryListActive = listType === ListType.CountryCodeList;
     var listActive = isBusinessListActive || isCountryListActive;
     var disabled = !methods.formState.isValid || !!error;
-    return (_jsxs(ScreenContainer, { children: [_jsx(MIDTitle, { show: !listActive, title: t('join_our_community'), description: t('ide_terms_and_conditions_description') }), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(InputsContainerStyled, { children: [_jsx(BusinessCountry, { country: data.businessCountry, show: !isCountryListActive }), _jsx(MobileNumber, { show: !isBusinessListActive, setMobileLength: setMobileLength, countries: data.countries, onListOpen: function () { return handleMenuListClick(ListType.CountryCodeList); }, onListClose: function () { return handleMenuListClick(); } })] }), _jsxs(Collapse, __assign({ in: !listActive }, { children: [_jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disableBack: true, disabled: disabled || settingsStore.loading, loading: loading, error: t(error || '') }, { children: t('next') })), _jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(AbsherButton, __assign({ disabled: settingsStore.loading || loading, onClick: function () { return onBack(); }, isAr: isAr }, { children: t('absher_button_label') }))] }))] })) }))] }));
+    return (_jsxs(ScreenContainer, { children: [_jsx(MIDTitle, { show: !listActive, title: t('join_our_community'), description: t('ide_terms_and_conditions_description') }), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputsContainerStyled, { children: _jsx(MobileNumber, { show: !isBusinessListActive, setMobileLength: setMobileLength, countries: data.countries, onListOpen: function () { return handleMenuListClick(ListType.CountryCodeList); }, onListClose: function () { return handleMenuListClick(); } }) }), _jsxs(Collapse, __assign({ in: !listActive }, { children: [_jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disableBack: true, disabled: disabled || settingsStore.loading, loading: loading, error: t(error || '') }, { children: t('next') })), _jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(AbsherButton, __assign({ disabled: settingsStore.loading || loading, onClick: function () { return onBack(); }, isAr: isAr }, { children: t('absher_button_label') }))] }))] })) }))] }));
 };
 export default React.memo(Mobile);

package/build/features/connect/screens/NID/NID.js

@@ -29,7 +29,6 @@ import Divider from '@mui/material/Divider';
 import Text from '../../../../components/Text';
 import IDNumber from './IDNumber';
 import DOB from './DOB';
-import BusinessCountry from '../Mobile/BusinessCountry';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
@@ -87,6 +86,6 @@ var NID = function (_a) {
         dispatch(handlePrevScreenStep('CONNECT_MOBILE_STEP'));
     };
     var disabled = !methods.formState.isValid || !!error;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(BusinessCountry, { show: !collapse, country: data.businessCountry }), _jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(IDNumber, { show: !collapse }) })), _jsx(DOB, { onDateClicked: handleCollapseOpenClose }), _jsxs(Collapse, __assign({ in: !collapse }, { children: [_jsx(Button, __assign({ loading: loading, isAr: isAr, disableBack: true, disabled: disabled || settingsStore.loading, error: t(error || '') }, { children: t('next') })), _jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(AbsherButton, __assign({ onClick: function () { return onBack(); }, disabled: loading || settingsStore.loading, hideIcon: true, isAr: isAr }, { children: t('mobile_button_label') }))] }))] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(IDNumber, { show: !collapse }) })), _jsx(DOB, { onDateClicked: handleCollapseOpenClose }), _jsxs(Collapse, __assign({ in: !collapse }, { children: [_jsx(Button, __assign({ loading: loading, isAr: isAr, disableBack: true, disabled: disabled || settingsStore.loading, error: t(error || '') }, { children: t('next') })), _jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(AbsherButton, __assign({ onClick: function () { return onBack(); }, disabled: loading || settingsStore.loading, hideIcon: true, isAr: isAr }, { children: t('mobile_button_label') }))] }))] })) })) }));
 };
 export default React.memo(NID);

package/build/features/shared/Containers/FeatureContainer.js

@@ -28,6 +28,6 @@ var Container = styled(Box)(function (_a) {
         _b);
 });
 var FeatureContainer = React.forwardRef(function (props, ref) {
-    return _jsx(Container, __assign({}, props, { ref: ref, id: 'feature-container' }));
+    return _jsx(Container, __assign({}, props, { ref: ref, id: 'main-feature-container' }));
 });
 export default FeatureContainer;

package/build/features/shared/Containers/ScreenContainer.js

@@ -24,6 +24,6 @@ var BoxStyled = styled(Box)(function (_a) {
     });
 });
 var ScreenContainer = React.forwardRef(function (props, ref) {
-    return _jsx(BoxStyled, __assign({}, props, { ref: ref }));
+    return _jsx(BoxStyled, __assign({}, props, { ref: ref, id: 'main-screen-containers' }));
 });
 export default ScreenContainer;

package/build/features/shared/Footer/Footer.js

@@ -4,13 +4,19 @@ import { useAppDispatch, useLanguage } from '../../../hooks';
 import { handleLanguage } from '../../../app/settings';
 import Footer from '../../../components/Footer';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { connectSelector } from '../../app/connect/connectStore';
 export default function CustomFooter() {
     var isEn = useLanguage().isEn;
     var t = useTranslation().t;
     var dispatch = useAppDispatch();
+    var _a = useSelector(connectSelector), data = _a.data, loading = _a.loading, error = _a.error;
     var handleChangeLanguage = function () {
         var language = isEn ? LanguageMode.AR : LanguageMode.EN;
         dispatch(handleLanguage(language));
     };
-    return _jsx(Footer, { onSwitchLanguage: handleChangeLanguage, language: t('language') });
+    var country = data.businessCountry;
+    var countryName = isEn ? country.name.english : country.name.arabic;
+    var countryFlag = country.logo;
+    return (_jsx(Footer, { onSwitchLanguage: handleChangeLanguage, language: t('language'), countryName: countryName, countryFlag: countryFlag }));
 }

package/build/hooks/useElementSizeById.d.ts

@@ -0,0 +1,6 @@
+interface ElementSize {
+    width: number;
+    height: number;
+}
+export declare const useElementSizeById: (id: string) => ElementSize;
+export {};

package/build/hooks/useElementSizeById.js

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+export var useElementSizeById = function (id) {
+    var _a = useState({ width: 0, height: 0 }), size = _a[0], setSize = _a[1];
+    var element = document.getElementById(id);
+    useEffect(function () {
+        if (element) {
+            var _a = element.getBoundingClientRect(), width = _a.width, height = _a.height;
+            setSize({ width: width, height: height });
+        }
+    }, [element]);
+    return size;
+};

package/package.json

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