@basiq/connect-auth 0.1.79 → 0.1.83

package/package.json

@@ -1,9 +1,9 @@
 {
-  "version": "0.1.79",
+  "version": "0.1.83",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
-  "files": ["dist", "src"],
+  "files": ["dist"],
   "engines": {
     "node": ">=10"
   },
@@ -17,7 +17,8 @@
     "analyze": "size-limit --why"
   },
   "peerDependencies": {
-    "react": ">=16"
+    "react": ">=16",
+    "react-dom": ">=16"
   },
   "husky": {
     "hooks": {
@@ -53,12 +54,13 @@
     "typescript": "^3.9.10",
     "rollup-plugin-url": "^3.0.1",
     "@rollup/plugin-image": "^2.1.1",
-    "@types/styled-components": "^5.1.25",
-    "i18next": "^21.8.1",
-    "react-i18next": "^11.16.9"
+    "@types/styled-components": "^5.1.25"
+
 
   },
   "dependencies": {
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.5",
+    "i18next": "^21.8.1",
+    "react-i18next": "^11.16.9"
   }
 }

package/src/App.tsx

@@ -1,96 +0,0 @@
-import React, { createRef, SyntheticEvent, useEffect, useState } from 'react';
-import { AppContainer, AppContainerPage, AppContainerWrapper, PageHeader, Root } from './styledComponents';
-import GlobalStyles from './styledComponents/styles';
-import { detectScrollToBottom } from './helpers';
-import {AuthScreen, NotFound, Page, StartScreen} from './components/pages';
-import { authUser } from './actions/actions';
-import { LoadingModal } from './components/modals';
-
-function App() {
-	const ref = createRef<HTMLDivElement>();
-	const [shadow, setShadow] = useState(false);
-	const [currentScreen, setCurrentScreen] = useState(0);
-	const [loading, setLoading] = useState(true);
-	const [authId, setAuthId] = useState('');
-	const [mobile, setMobile] = useState('');
-	const [logo, setLogo] = useState('');
-	const [appName, setAppName] = useState('');
-	const [errorCode, setErrorCode] = useState('');
-
-	const handleConnectionsScroll = (event: SyntheticEvent<HTMLDivElement>) => {
-		setShadow(detectScrollToBottom(event));
-	};
-
-	useEffect(() => {
-		const getData = async () => {
-			const id = window.location.pathname.substring(1);
-			if (id?.length > 0) {
-				setAuthId(id);
-				setLoading(true);
-				const response = await authUser(id, 'GET');
-				if (response?.data?.status === 'code-not-sent') {
-					setCurrentScreen(1);
-					setMobile(response?.data?.mobile);
-					if (response?.data?.appName) {
-						setAppName(response?.data?.appName);
-					}
-					if (response?.data?.partner?.logoUrl) {
-						setLogo(response?.data?.partner?.logoUrl);
-					}
-				} else {
-					showErrorScreen(response?.statusCode.toString());
-				}
-				setLoading(false);
-			} else {
-				showErrorScreen('404');
-			}
-		};
-		getData();
-	}, []);
-
-	const showErrorScreen = (code: string) => {
-		setErrorCode(code);
-		setCurrentScreen(3);
-	};
-
-	const getScreen = () => {
-		switch (currentScreen) {
-			case 0:
-				return <Page shadow={shadow}><LoadingModal isOpen={loading} disableTransparency /></Page>;
-			case 1:
-				return (
-					<StartScreen
-						appName={appName}
-						shadow={shadow}
-						showErrorScreen={showErrorScreen}
-						onContinue={() => setCurrentScreen(2)}
-						authId={authId}
-					/>
-				);
-			case 2:
-				return <AuthScreen number={mobile} onBack={() => setCurrentScreen(1)} shadow={shadow} authId={authId} />;
-			case 3:
-				return <NotFound messageCode={errorCode} />;
-			default:
-				return <NotFound messageCode={errorCode} />;
-		}
-	};
-
-	return (
-		<Root>
-			<GlobalStyles />
-			<AppContainerWrapper>
-				<AppContainer onScroll={handleConnectionsScroll} ref={ref}>
-					{logo && (
-						<PageHeader>
-							<img src={logo} alt="logo" />
-						</PageHeader>
-					)}
-					<AppContainerPage>{getScreen()}</AppContainerPage>
-				</AppContainer>
-			</AppContainerWrapper>
-		</Root>
-	);
-}
-
-export default App;

package/src/BasiqConnect.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { ThemeProvider } from 'styled-components';
-import App from './App';
-import './locales/i18n';
-import { theme } from './styledComponents';
-
-export function BasiqConnect() {
-return(
-	<React.StrictMode>
-		<ThemeProvider theme={theme}>
-			<App />
-			</ThemeProvider>
-	</React.StrictMode>
-		);
-
-}
-

package/src/actions/actions.ts

@@ -1,72 +0,0 @@
-import { DASHBOARD_API_URL } from '../helpers';
-
-export const verifySmsCode = async (authRequestId: string, smsCode: string) => {
-	const body = {
-		'sms-code': smsCode
-	};
-
-	const reqData = {
-		headers: {
-			'Content-Type': 'application/json',
-			Authorization: `Basic SMS_CODE:${authRequestId}`
-		},
-		method: 'POST',
-		body: JSON.stringify(body)
-	};
-
-	const result = await fetch(`${DASHBOARD_API_URL}client_auth/${authRequestId}/token`, reqData);
-
-	if (result.status >= 200 && result.status < 300) {
-		const json = result.status === 204 ? null : await result.json();
-		return {
-			data: json,
-			headers: result.headers,
-			statusCode: result.status
-		};
-	}
-	if (result.status >= 400) {
-		return {
-			headers: result.headers,
-			statusCode: result.status,
-			error: result.statusText || 'Something went wrong'
-		};
-	}
-	return {
-		headers: result.headers,
-		statusCode: result.status,
-		error: result.statusText || 'Something went wrong'
-	};
-};
-
-export const authUser = async (authRequestId: string, method: 'POST' | 'GET' = 'POST') => {
-	const reqData = {
-		headers: {
-			'Content-Type': 'application/json'
-		},
-		method
-	};
-
-	const result = await fetch(`${DASHBOARD_API_URL}client_auth/${authRequestId}`, reqData);
-
-	if (result.status >= 200 && result.status < 300) {
-		const json = result.status === 204 ? null : await result.json();
-		return {
-			data: json,
-			headers: result.headers,
-			statusCode: result.status
-		};
-	}
-	if (result.status >= 400) {
-		const json = result.status === 403 ? null : await result.json();
-		return {
-			headers: result.headers,
-			statusCode: result.status,
-			error: json.message || result.statusText || 'Something went wrong'
-		};
-	}
-	return {
-		headers: result.headers,
-		statusCode: result.status,
-		error: result.statusText || 'Something went wrong'
-	};
-};

package/src/components/modals/LoadingModal.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import Modal from '../ui/Modal';
-import { LoadingModalStyled, LoadingModalText } from '../../styledComponents';
-import Icon from '../ui/icon';
-import loadingIndicator from '../../images/loading_indicator.svg';
-
-interface IProps {
-	isOpen: boolean;
-	disableTransparency?: boolean;
-	loadingText?: string;
-}
-
-function LoadingModal(props: IProps) {
-	const { isOpen, disableTransparency, loadingText } = props;
-	const { t } = useTranslation();
-
-	return (
-		<Modal isOpen={isOpen} disableTransparency={!!disableTransparency}>
-			<LoadingModalStyled disableTransparency={!!disableTransparency}>
-				<Icon img={loadingIndicator} rotating />
-				<LoadingModalText>{loadingText || t<string>('loading')}</LoadingModalText>
-			</LoadingModalStyled>
-		</Modal>
-	);
-}
-
-export default LoadingModal;

package/src/components/modals/index.ts

@@ -1 +0,0 @@
-export { default as LoadingModal } from './LoadingModal';

package/src/components/pages/AuthScreen.tsx

@@ -1,96 +0,0 @@
-import React, { ChangeEvent, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import Page, { IButton } from './Page';
-import { DivAsLink, InputContainer, InputStyled, PageConnectFooterControl, PageConnectFooterText, StatusMessage } from '../../styledComponents';
-import { InnerContainer } from '../../styledComponents/pages/start';
-import { LoadingModal } from '../modals';
-import { authUser, verifySmsCode } from '../../actions/actions';
-
-interface IProps {
-	shadow: boolean;
-	onBack: () => void;
-	number: string;
-	authId: string;
-}
-
-function AuthScreen({ onBack, number, authId, shadow }: IProps) {
-	const { t } = useTranslation();
-	const [error, setError] = useState('');
-	const [code, setCode] = useState('');
-	const [resend, setResend] = useState(false);
-	const [loading, setLoading] = useState(false);
-	const handleCodeApply = async () => {
-		setLoading(true);
-		const response = await verifySmsCode(authId, code);
-		setLoading(false);
-		if (response?.data?.access_token) {
-			window.open(`https://consent.basiq.io/home?token=${response?.data?.access_token}`);
-		}
-		if (response?.error) {
-			setError(t('this_code_doesnt_appear_to_be_valid'));
-		}
-	};
-	const buttons: IButton[] = [
-		{
-			label: t('continue'),
-			onClick: () => handleCodeApply()
-		}
-	];
-
-	const handleResend = async () => {
-		setError('');
-		setCode('');
-		setLoading(true);
-		const response = await authUser(authId);
-		setLoading(false);
-		if (response.error) {
-			setError(t('failed_to_send_sms'));
-		} else {
-			setResend(true);
-		}
-	};
-	const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
-		setError('');
-		setResend(false);
-		setCode(e.target.value);
-	};
-	return (
-		<Page
-			title={t('verify_your_mobile_number')}
-			subTitle={t('please_enter_the_sms_code_sent_to_your_mobile_number', { number })}
-			shadow={shadow}
-			buttons={buttons}
-			onBack={onBack}
-		>
-			<InnerContainer>
-				<InputContainer>
-					<InputStyled
-						pattern="\d{4}"
-						inputMode="numeric"
-						autoComplete="one-time-code"
-						type="text"
-						maxLength={4}
-						onChange={handleInput}
-						value={code}
-						filled={code.length === 4}
-						error={!!error}
-					/>
-				</InputContainer>
-				<PageConnectFooterControl>
-					{resend && <StatusMessage>{t<string>('new_sms_code_has_been_sent')}</StatusMessage>}
-					{!!error && <StatusMessage error>{error}</StatusMessage>}
-					<PageConnectFooterText>
-						<span>
-							<>
-							{t('didnt_receive_the_code')} <DivAsLink onClick={() => handleResend()}>{t<string>('resend_sms')}</DivAsLink>
-							</>
-						</span>
-					</PageConnectFooterText>
-				</PageConnectFooterControl>
-				<LoadingModal isOpen={loading} />
-			</InnerContainer>
-		</Page>
-	);
-}
-
-export default AuthScreen;

package/src/components/pages/NotFound.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-	PageControlsSection,
-	PageShadowWrapper,
-	PageStatusScreenContent,
-	PageStatusScreenMain,
-	PageStyled,
-	StatusScreenCircleContainer,
-	StatusScreenErrorCode
-} from '../../styledComponents';
-import Icon from '../ui/icon';
-import Page from './Page';
-import err from '../../images/error.svg';
-
-interface IProps {
-	messageCode?: string;
-}
-
-function NotFound({ messageCode = '404' }: IProps) {
-	const { t } = useTranslation();
-	return (
-		<Page shadow={false}>
-			<PageStyled>
-				<PageStatusScreenMain>
-					<PageStyled>
-						<PageStatusScreenContent>
-							<StatusScreenCircleContainer type="warning">
-								<Icon img={err} rotating={false} />
-							</StatusScreenCircleContainer>
-							<span>{t<string>('page_not_found')}</span>
-							<StatusScreenErrorCode>{`${t('error')}: ${messageCode}`}</StatusScreenErrorCode>
-						</PageStatusScreenContent>
-					</PageStyled>
-				</PageStatusScreenMain>
-				<PageControlsSection notEmpty={false}>
-					<PageShadowWrapper />
-				</PageControlsSection>
-			</PageStyled>
-		</Page>
-	);
-}
-
-export default NotFound;

package/src/components/pages/Page.tsx

@@ -1,46 +0,0 @@
-import React, { ReactElement } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button } from '../ui';
-import { PageControlsSection, PageMainContainer, PageShadow, PageShadowWrapper, PageStyled, PageSubtitle } from '../../styledComponents';
-import { ButtonType } from '../ui/Button';
-
-interface IProps {
-	buttons?: IButton[];
-	children: ReactElement;
-	title?: string | ReactElement;
-	subTitle?: string;
-	shadow: boolean;
-	onBack?: () => void;
-}
-
-export interface IButton {
-	label: string;
-	onClick: () => void;
-	buttonType?: ButtonType;
-	disabled?: boolean;
-}
-
-function Page(props: IProps) {
-	const { buttons, children, title, subTitle, shadow, onBack } = props;
-
-	const { t } = useTranslation();
-
-	return (
-		<PageStyled buttonCount={buttons?.length}>
-			{onBack && <Button onClick={onBack} label={t('back')} buttonType="back" />}
-			{title && <h3>{title}</h3>}
-			{subTitle && <PageSubtitle>{subTitle}</PageSubtitle>}
-			<PageMainContainer>{children}</PageMainContainer>
-			<PageControlsSection notEmpty={(buttons?.length ?? 0) > 0}>
-				<PageShadowWrapper>
-					{shadow && <PageShadow />}
-					{buttons?.map((b, index) => (
-						<Button key={index} onClick={b.onClick} label={b.label} buttonType={b.buttonType} disabled={b.disabled} />
-					))}
-				</PageShadowWrapper>
-			</PageControlsSection>
-		</PageStyled>
-	);
-}
-
-export default Page;

package/src/components/pages/StartScreen.tsx

@@ -1,83 +0,0 @@
-import React, { useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import Page, { IButton } from './Page';
-import { H4Styled, Spacer, InnerContainer } from '../../styledComponents';
-import { authUser } from '../../actions/actions';
-import { LoadingModal } from '../modals';
-
-interface IProps {
-	onContinue: () => void;
-	showErrorScreen: (code:string) => void;
-	shadow: boolean;
-	appName: string;
-	authId?: string;
-}
-
-function StartScreen(props: IProps) {
-	const { onContinue, appName, shadow, authId } = props;
-	const [loading, setLoading] = useState(false);
-	const { t } = useTranslation();
-	const handleContinue = async () => {
-		setLoading(true);
-		if(!!authId){
-			const response = await authUser(authId);
-			if (response?.data?.status === 'code-sent') {
-				setLoading(false);
-				onContinue();
-			}
-		}
-
-	};
-	const buttons: IButton[] = [
-		{
-			label: t('continue'),
-			onClick: () => handleContinue()
-		}
-	];
-	return (
-		<Page
-			title={
-				appName ? (
-					<Trans t={t} i18nKey="use_basiq_to_connect_your_accounts" values={{ name: appName }} components={{ bold: <strong /> }} />
-				) : (
-					<Trans t={t} i18nKey="we_use_basiq_to_connect_your_accounts" components={{ bold: <strong /> }} />
-				)
-			}
-			shadow={shadow}
-			buttons={buttons}
-		>
-			<InnerContainer>
-				<Spacer />
-				<H4Styled>{t<string>('to_do_this_we_will_ask_you_to')}</H4Styled>
-				<ul>
-					<li>
-						<Trans t={t} i18nKey="verify_your_mobile_number_bold" components={{ bold: <strong /> }} />
-					</li>
-					<li>
-						<Trans t={t} i18nKey="consent_to_share_your_data_with_us" components={{ bold: <strong /> }} />
-					</li>
-					<li>
-						<Trans t={t} i18nKey="share_your_financial_data" components={{ bold: <strong /> }} />
-					</li>
-				</ul>
-				<H4Styled>{t<string>('things_you_should_know')}</H4Styled>
-				<ul>
-					<li>{t<string>('we_dont_share_your_data_without_your_consent')}</li>
-					<li>{t<string>('you_can_easily_stop_sharing_your_data_at_any_time')}</li>
-					<li>{t<string>('you_can_choose_to_delete_shared_data_when_we_no_longer_need_it')}</li>
-				</ul>
-				<Spacer />
-				<span>
-					<>
-					{t('by_proceeding_you_agree_to_the')}{' '}
-						<a href="https://docs.basiq.io/en/articles/415750-basiq-terms-of-service">{t<string>('terms_of_service')}</a> {t('and')}{' '}
-						<a href="https://docs.basiq.io/en/articles/382581-basiq-privacy-policy">{t<string>('privacy_notice')}</a>
-					</>
-				</span>
-				<LoadingModal isOpen={loading} />
-			</InnerContainer>
-		</Page>
-	);
-}
-
-export default StartScreen;

package/src/components/pages/index.ts

@@ -1,4 +0,0 @@
-export { default as Page } from './Page';
-export { default as NotFound } from './NotFound';
-export { default as StartScreen } from './StartScreen';
-export { default as AuthScreen } from './AuthScreen';

package/src/components/ui/Button.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { ButtonLabel, ButtonStyled } from '../../styledComponents';
-import back from '../../images/back.svg';
-
-export type ButtonType = 'secondary' | 'tiny' | 'link' | 'back';
-
-interface Props {
-	onClick: () => void;
-	label: string;
-	buttonType?: ButtonType;
-	disabled?: boolean;
-}
-
-function Button(props: Props) {
-	const { onClick, label, buttonType, disabled } = props;
-	return (
-		<ButtonStyled buttonType={buttonType} disabled={disabled || false} onClick={onClick}>
-			{buttonType === 'back' && <img src={back} alt="" />}
-			<ButtonLabel> {label || ''}</ButtonLabel>
-		</ButtonStyled>
-	);
-}
-
-export default Button;

package/src/components/ui/Modal.tsx

@@ -1,29 +0,0 @@
-import React, { ReactElement, SyntheticEvent } from 'react';
-import { ModalStyled } from '../../styledComponents';
-
-interface IProps {
-	children: ReactElement;
-	onClose?: () => void;
-	isOpen: boolean;
-	disableTransparency: boolean;
-}
-
-function Modal(props: IProps) {
-	const { children, onClose, isOpen, disableTransparency } = props;
-	const handleOutsideClick = (e: SyntheticEvent<HTMLElement>) => {
-		if (onClose && (e.target as HTMLElement).id === 'ui-modal') {
-			onClose();
-		}
-	};
-	return (
-		<>
-			{isOpen ? (
-				<ModalStyled id="ui-modal" disableTransparency={disableTransparency} onClick={handleOutsideClick}>
-					{children}
-				</ModalStyled>
-			) : null}
-		</>
-	);
-}
-
-export default Modal;

package/src/components/ui/icon.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { IconWrapper } from '../../styledComponents';
-
-interface IProps {
-	rotating: boolean;
-	img: string;
-}
-
-function Icon(props: IProps) {
-	const { rotating, img } = props;
-	return (
-		<IconWrapper rotating={rotating}>
-			<img src={img} alt="" />
-		</IconWrapper>
-	);
-}
-
-export default Icon;

package/src/components/ui/index.ts

@@ -1 +0,0 @@
-export { default as Button } from './Button';

package/src/custom.d.ts

@@ -1,9 +0,0 @@
-declare module '*.svg?inline' {
-    const content: any
-    export default content
-}
-
-declare module '*.svg' {
-    const content: any
-    export default content
-}

package/src/fonts.d.ts

@@ -1 +0,0 @@
-declare module '*.otf';

package/src/helpers/constants.ts

@@ -1,2 +0,0 @@
-// export const DASHBOARD_API_URL = 'https://c9joivz12f.execute-api.ap-southeast-2.amazonaws.com/Development/';
-export const DASHBOARD_API_URL = 'https://p4c8zn20r9.execute-api.ap-southeast-2.amazonaws.com/Production_v1/';

package/src/helpers/hookUtils.ts

@@ -1,8 +0,0 @@
-import { useRef } from 'react';
-
-export const useFocus = () => {
-	const htmlElRef = useRef<HTMLInputElement>(null);
-	const setFocus = () => htmlElRef.current && htmlElRef.current.focus();
-
-	return [htmlElRef, setFocus];
-};

package/src/helpers/index.ts

@@ -1,3 +0,0 @@
-export * from './hookUtils';
-export * from './utils';
-export * from './constants';

package/src/helpers/utils.ts

@@ -1,12 +0,0 @@
-import { SyntheticEvent } from 'react';
-
-export function detectScrollToBottom(event: SyntheticEvent<HTMLDivElement>) {
-	const { scrollHeight, scrollTop, clientHeight } = event.currentTarget;
-	return scrollHeight - scrollTop > clientHeight;
-}
-
-export const hexToRGBa = (hex: string, opacity: number) => {
-	const hexToRGBA = hex.match(/[A-Za-z0-9]{2}/g)?.map((v) => parseInt(v, 16));
-	const opp = opacity > 1 && opacity < 0 ? 1 : opacity;
-	return `rgba(${hexToRGBA?.concat(opp).join()})`;
-};

package/src/images/back.svg

@@ -1,8 +0,0 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
-<title></title>
-<g id="icomoon-ignore">
-</g>
-<path fill="#000" d="M682.667 469.333h-241.493l53.333-55.893c7.287-7.645 11.77-18.019 11.77-29.44 0-23.584-19.119-42.703-42.703-42.703-12.164 0-23.139 5.085-30.917 13.246l-0.016 0.017-122.027 128c-1.338 1.628-2.607 3.44-3.731 5.347l-0.109 0.199c-1.886 2.326-3.467 5.004-4.62 7.899l-0.073 0.207c-1.426 3.52-2.347 7.596-2.557 11.859l-0.003 0.088-0.853 3.84c0.073 5.873 1.322 11.435 3.52 16.489l-0.107-0.275c2.2 5.299 5.227 9.831 8.968 13.662l127.992 127.992c7.733 7.795 18.45 12.621 30.293 12.621s22.56-4.826 30.291-12.618l0.003-0.003c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003-55.467-54.613h238.507c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667v0z"></path>
-<path fill="#000" d="M512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0zM512 853.333c-188.513 0-341.333-152.82-341.333-341.333s152.82-341.333 341.333-341.333c188.513 0 341.333 152.82 341.333 341.333v0c0 188.513-152.82 341.333-341.333 341.333v0z"></path>
-</svg>