@tap-payments/auth-jsconnect 2.0.34-test → 2.0.36-test

package/build/features/app/entity/entityStore.js

@@ -51,6 +51,8 @@ import API from '../../../api';
 import { FlowsTypes } from '../../../@types';
 import { handleCurrentActiveScreen, handleNextScreenStep } from '../../../app/settings';
 import { ENTITY_STEP_NAMES, BUSINESS_FLOW_SUCCESS } from '../../../constants';
+import moment from 'moment';
+import { convertNumbers2English } from '../../../utils';
 export var verifyLeadToken = createAsyncThunk('entityVerifyLeadToken', function (token, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
     var payload, data, boardInfoData, board_id, board_info_id, info, hasEntityCompleted;
     var _a;
@@ -64,22 +66,26 @@ export var verifyLeadToken = createAsyncThunk('entityVerifyLeadToken', function
                 return [4, API.leadService.verifyLeadToken(payload)];
             case 1:
                 data = (_b.sent()).data;
+                return [4, thunkApi.dispatch(retrieveChannels())];
+            case 2:
+                _b.sent();
                 boardInfoData = undefined;
-                if (!(!(data === null || data === void 0 ? void 0 : data.errors) && !(data === null || data === void 0 ? void 0 : data.mw_error))) return [3, 5];
+                if (!(!(data === null || data === void 0 ? void 0 : data.errors) && !(data === null || data === void 0 ? void 0 : data.mw_error))) return [3, 6];
                 board_id = data === null || data === void 0 ? void 0 : data.id;
                 board_info_id = data === null || data === void 0 ? void 0 : data.board_info_id;
-                if (!(!!board_id && !!board_info_id)) return [3, 3];
+                if (!(!!board_id && !!board_info_id)) return [3, 4];
                 return [4, API.boardService.retrieveBoardInfo({ id: board_id, infoId: board_info_id })];
-            case 2:
+            case 3:
                 boardInfoData = _b.sent();
-                _b.label = 3;
-            case 3: return [4, thunkApi.dispatch(retrieveBoardDetails(board_id))];
-            case 4:
+                _b.label = 4;
+            case 4: return [4, thunkApi.dispatch(retrieveBoardDetails(board_id))];
+            case 5:
                 _b.sent();
                 info = boardInfoData.info;
                 hasEntityCompleted = ((_a = info === null || info === void 0 ? void 0 : info.find(function (flow) { return flow.name === 'entity'; })) === null || _a === void 0 ? void 0 : _a.status) === 'completed';
+                thunkApi.dispatch(handleCurrentActiveScreen('ENTITY_INFO_STEP'));
                 if (data.step_name === ENTITY_STEP_NAMES.PHONE_AUTH) {
-                    thunkApi.dispatch(handleCurrentActiveScreen('ENTITY_VERIFY_STEP'));
+                    thunkApi.dispatch(handleCurrentActiveScreen('ENTITY_INFO_STEP'));
                 }
                 else if (hasEntityCompleted) {
                     thunkApi.dispatch(handleNextScreenStep('ENTITY_SUCCESS_FOUR_FLOWS_BUTTONS_STEP'));
@@ -87,8 +93,8 @@ export var verifyLeadToken = createAsyncThunk('entityVerifyLeadToken', function
                 else if (data.step_name === ENTITY_STEP_NAMES.ENTITY_INFO) {
                     thunkApi.dispatch(handleNextScreenStep('ENTITY_INFO_STEP'));
                 }
-                _b.label = 5;
-            case 5: return [2, { data: data, boardResponse: { flows: BUSINESS_FLOW_SUCCESS.concat(boardInfoData === null || boardInfoData === void 0 ? void 0 : boardInfoData.info) }, token: token }];
+                _b.label = 6;
+            case 6: return [2, { data: data, boardResponse: { flows: BUSINESS_FLOW_SUCCESS.concat(boardInfoData === null || boardInfoData === void 0 ? void 0 : boardInfoData.info) }, token: token }];
         }
     });
 }); });
@@ -156,6 +162,35 @@ export var retrieveBoardDetails = createAsyncThunk('entityRetrieveEntityInfo', f
         }
     });
 }); });
+export var updateEntityInfo = createAsyncThunk('updateEntityInfo', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
+    var _a, settings, entity, requestBody, data;
+    var _b, _c, _d, _e, _f;
+    return __generator(this, function (_g) {
+        switch (_g.label) {
+            case 0:
+                _a = thunkApi.getState(), settings = _a.settings, entity = _a.entity;
+                requestBody = {
+                    id: (_c = (_b = entity.data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.entity) === null || _c === void 0 ? void 0 : _c.id,
+                    activities: (_d = (params.activities || [])) === null || _d === void 0 ? void 0 : _d.map(function (_a) {
+                        var en = _a.en;
+                        return en;
+                    }),
+                    license_name: params.licenseName,
+                    license_number: params.licenseNumber,
+                    business_operation_start_at: params.operationStartDate,
+                    step_name: ENTITY_STEP_NAMES.ENTITY_INFO
+                };
+                return [4, API.entityService.updateEntityInfo(requestBody)];
+            case 1:
+                data = (_g.sent()).data;
+                if (!data.errors) {
+                    thunkApi.dispatch(handleNextScreenStep());
+                    (_f = (_e = settings.data.appConfig).onStepCompleted) === null || _f === void 0 ? void 0 : _f.call(_e, settings.data.activeScreen.name, requestBody);
+                }
+                return [2, { data: data, formData: params }];
+        }
+    });
+}); });
 export var updateBoardSuccess = createAsyncThunk('updateBoardEntitySuccess', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
     var _a, settings, entity, _b, id, infoId, payload, data;
     var _c, _d, _e, _f;
@@ -184,6 +219,17 @@ export var updateBoardSuccess = createAsyncThunk('updateBoardEntitySuccess', fun
         }
     });
 }); });
+export var retrieveChannels = createAsyncThunk('retrieveChannelsEntity', function () { return __awaiter(void 0, void 0, void 0, function () {
+    var data;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4, API.dataService.getChannelsOfServices()];
+            case 1:
+                data = (_a.sent()).data;
+                return [2, data];
+        }
+    });
+}); });
 var initialState = {
     error: null,
     loading: false,
@@ -197,11 +243,9 @@ var initialState = {
             otp: ''
         },
         entityData: {
-            licenseNumber: '',
-            licenseName: '',
             activities: [],
             salesChannels: [],
-            operationStartDate: ''
+            operationStartDate: '1998-08-22'
         }
     }
 };
@@ -226,15 +270,49 @@ export var entitySlice = createSlice({
             state.customLoading = true;
         })
             .addCase(verifyLeadToken.fulfilled, function (state, action) {
-            var _a;
+            var _a, _b, _c;
             state.error = null;
             state.customLoading = false;
-            var _b = action.payload, data = _b.data, token = _b.token, boardResponse = _b.boardResponse;
+            var _d = action.payload, data = _d.data, token = _d.token, boardResponse = _d.boardResponse;
             var description = (((_a = data === null || data === void 0 ? void 0 : data.errors) === null || _a === void 0 ? void 0 : _a[0]) || {}).description;
             if (description) {
                 state.error = description;
                 return;
             }
+            var _e = state.data.verify.responseBody || {}, brand = _e.brand, entity = _e.entity;
+            var issuingDate = brand === null || brand === void 0 ? void 0 : brand.business_operation_start_at;
+            if (!!issuingDate) {
+                var formattedDate = moment(issuingDate).format('YYYY-MM-DD');
+                state.data.entityData.operationStartDate = convertNumbers2English(formattedDate);
+            }
+            var channels = (_b = state.data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.channelList;
+            var selectedChannels = (!!(channels === null || channels === void 0 ? void 0 : channels[0]) && [channels === null || channels === void 0 ? void 0 : channels[0]]) || [];
+            var _f = brand || {}, website = _f.website, social = _f.social;
+            var isHasWebsite = (website === null || website === void 0 ? void 0 : website.length) > 0;
+            var isHasTwitter = social === null || social === void 0 ? void 0 : social.find(function (s) { return s.includes('twitter.com'); });
+            var isHasInstagram = social === null || social === void 0 ? void 0 : social.find(function (s) { return s.includes('instagram.com'); });
+            var websiteData = channels === null || channels === void 0 ? void 0 : channels.find(function (c) { return c.name_en.toLocaleLowerCase() === 'website'; });
+            var socialData = channels === null || channels === void 0 ? void 0 : channels.find(function (c) { return c.name_en.toLocaleLowerCase() === 'social'; });
+            if (isHasWebsite && (isHasTwitter || isHasInstagram))
+                selectedChannels = [websiteData, socialData];
+            else if (isHasTwitter || isHasInstagram)
+                selectedChannels = [socialData];
+            else if (isHasWebsite)
+                selectedChannels = [websiteData];
+            if (((_c = brand === null || brand === void 0 ? void 0 : brand.channel_services) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+                selectedChannels = channels === null || channels === void 0 ? void 0 : channels.filter(function (channel) {
+                    var _a;
+                    return (_a = brand === null || brand === void 0 ? void 0 : brand.channel_services) === null || _a === void 0 ? void 0 : _a.find(function (storedChannel) { return channel.name_en.toLowerCase() === storedChannel.toLowerCase(); });
+                });
+            }
+            state.data.entityData.salesChannels = selectedChannels;
+            var activities = (entity === null || entity === void 0 ? void 0 : entity.activities) || [];
+            var selectedActivity = activities === null || activities === void 0 ? void 0 : activities.filter(function (activity) {
+                var _a;
+                return (_a = brand === null || brand === void 0 ? void 0 : brand.activities) === null || _a === void 0 ? void 0 : _a.find(function (value) { var _a; return ((_a = activity.en) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === value.toLowerCase(); });
+            });
+            state.data.entityData.activities = (selectedActivity === null || selectedActivity === void 0 ? void 0 : selectedActivity.length) > 0 ? selectedActivity : [activities === null || activities === void 0 ? void 0 : activities[0]];
+            state.data.entityData.responseBody = __assign(__assign({}, state.data.entityData.responseBody), { entity_id: entity === null || entity === void 0 ? void 0 : entity.id, activities: activities, selectedActivities: (selectedActivity === null || selectedActivity === void 0 ? void 0 : selectedActivity.length) > 0 ? selectedActivity : [activities === null || activities === void 0 ? void 0 : activities[0]] });
             state.data.verify.responseBody = __assign(__assign(__assign(__assign({}, data), boardResponse), state.data.verify.responseBody), { board_id: data.id });
             state.data.verify.token = token;
         })
@@ -279,6 +357,27 @@ export var entitySlice = createSlice({
             .addCase(verifyEntityLeadOTP.rejected, function (state, action) {
             state.loading = false;
             state.error = action.error.message;
+        })
+            .addCase(updateEntityInfo.pending, function (state) {
+            state.loading = true;
+            state.error = null;
+        })
+            .addCase(updateEntityInfo.fulfilled, function (state, action) {
+            var _a;
+            state.loading = false;
+            state.error = null;
+            var _b = action.payload, data = _b.data, formData = _b.formData;
+            var description = (((_a = data === null || data === void 0 ? void 0 : data.errors) === null || _a === void 0 ? void 0 : _a[0]) || {}).description;
+            if (description) {
+                state.error = description;
+                return;
+            }
+            state.data.entityData = formData;
+            state.data.entityData.responseBody = data;
+        })
+            .addCase(updateEntityInfo.rejected, function (state, action) {
+            state.loading = false;
+            state.error = action.error.message;
         })
             .addCase(retrieveBoardDetails.pending, function (state) {
             state.error = null;
@@ -314,6 +413,42 @@ export var entitySlice = createSlice({
             .addCase(updateBoardSuccess.rejected, function (state, action) {
             state.loading = false;
             state.error = action.error.message;
+        })
+            .addCase(retrieveChannels.pending, function (state) {
+            state.error = null;
+            state.loading = true;
+        })
+            .addCase(retrieveChannels.fulfilled, function (state, action) {
+            var _a;
+            state.error = null;
+            state.loading = false;
+            var data = action.payload || {};
+            var description = (((_a = data === null || data === void 0 ? void 0 : data.errors) === null || _a === void 0 ? void 0 : _a[0]) || {}).description;
+            if (description) {
+                state.error = description;
+                return;
+            }
+            var channels = data || [];
+            state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), { channelList: channels });
+            var brand = (state.data.verify.responseBody || {}).brand;
+            var selectedChannels = (!!(channels === null || channels === void 0 ? void 0 : channels[0]) && [channels === null || channels === void 0 ? void 0 : channels[0]]) || [];
+            var _b = brand || {}, website = _b.website, social = _b.social;
+            var isHasWebsite = (website === null || website === void 0 ? void 0 : website.length) > 0;
+            var isHasTwitter = social === null || social === void 0 ? void 0 : social.find(function (s) { return s.includes('twitter.com'); });
+            var isHasInstagram = social === null || social === void 0 ? void 0 : social.find(function (s) { return s.includes('instagram.com'); });
+            var websiteData = channels === null || channels === void 0 ? void 0 : channels.find(function (c) { return c.name_en.toLocaleLowerCase() === 'website'; });
+            var socialData = channels === null || channels === void 0 ? void 0 : channels.find(function (c) { return c.name_en.toLocaleLowerCase() === 'social'; });
+            if (isHasWebsite && (isHasTwitter || isHasInstagram))
+                selectedChannels = [websiteData, socialData];
+            else if (isHasTwitter || isHasInstagram)
+                selectedChannels = [socialData];
+            else if (isHasWebsite)
+                selectedChannels = [websiteData];
+            state.data.entityData.salesChannels = selectedChannels;
+        })
+            .addCase(retrieveChannels.rejected, function (state, action) {
+            state.error = action.error.message;
+            state.loading = false;
         });
     }
 });

package/build/features/auth/Auth.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { LibConfig } from '../../@types';
+export interface AuthLibProps extends LibConfig {
+    leadId: string;
+}
+export declare function AuthLib(props: AuthLibProps): JSX.Element;
+export declare function renderAuthLib(config: AuthLibProps, elementId: string): void;
+export declare function unmountAuthLib(elementId: string): void;

package/build/features/auth/Auth.js

@@ -0,0 +1,53 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useEffect } from 'react';
+import { FeatureContainer } from '../shared/Containers';
+import { useAppTheme, useAppSelector, useAppConfig, useErrorListener, useStepStartedListener } from '../../hooks';
+import { settingsSelector } from '../../app/settings';
+import AnimationFlow from '../../components/AnimationFlow';
+import { store } from '../../app/store';
+import { authSelector } from '../app/auth/authStore';
+import { ReduxProvider, ThemeProvider } from '../../components/Providers';
+import Collapse from '../../components/Collapse';
+import { reactElement } from '../../utils';
+import { AUTH_SCREENS_NAVIGATION } from '../../constants';
+import { authFeatureScreens } from '../featuresScreens';
+import Background from '../shared/Background';
+import CustomFooter from '../shared/Footer';
+var Auth = memo(function (props) {
+    var theme = useAppTheme().theme;
+    var _a = useAppSelector(settingsSelector), data = _a.data, error = _a.error, settingLoading = _a.loading;
+    var authError = useAppSelector(authSelector).error;
+    useAppConfig(__assign({ navigation: AUTH_SCREENS_NAVIGATION }, props));
+    useErrorListener(authError || error);
+    useStepStartedListener();
+    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open;
+    useEffect(function () {
+        if (!props.leadId)
+            throw new Error('leadId is required');
+    }, []);
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading, error: error, open: open, footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: authFeatureScreens.map(function (_a, index) {
+                        var Element = _a.element, name = _a.name;
+                        var isActive = activeScreen.name === name;
+                        return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
+                    }) }) })) })) })));
+});
+export function AuthLib(props) {
+    return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Auth, __assign({}, props)) })));
+}
+export function renderAuthLib(config, elementId) {
+    reactElement(elementId).render(_jsx(AuthLib, __assign({}, config)));
+}
+export function unmountAuthLib(elementId) {
+    reactElement(elementId).unmount();
+}

package/build/features/auth/index.d.ts

@@ -0,0 +1 @@
+export * from './Auth';

package/build/features/auth/index.js

@@ -0,0 +1 @@
+export * from './Auth';

package/build/features/auth/screens/OTP/OTP.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface OTPProps {
+}
+declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+export default _default;

package/build/features/auth/screens/OTP/OTP.js

@@ -0,0 +1,72 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '@mui/material/Box/Box';
+import { styled } from '@mui/material/styles';
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import Text from '../../../../components/Text';
+import { clearError, authSelector, resetOTPScreen, verifyAuth } from '../../../app/auth/authStore';
+import Button from '../../../shared/Button';
+import { ScreenContainer } from '../../../shared/Containers';
+import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { useLanguage } from '../../../../hooks';
+import { useForm, FormProvider } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import Form from '../../../../components/Form';
+import { maskPhone } from '../../../../utils';
+import { OTPValidation } from './validation';
+import OTPInput from './OTPInput';
+var OTPTitleContainerStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        background: theme.palette.common.white,
+        border: '1px solid',
+        borderColor: theme.palette.divider,
+        direction: theme.direction,
+        borderRadius: theme.spacing(0, 0, 1.25, 1.25),
+        marginBottom: theme.spacing(5.75)
+    });
+});
+var OTPTitleStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({}, theme.typography.body1), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightLight, marginBlock: theme.spacing(1.75), marginInline: theme.spacing(2.5), lineHeight: 1.75, whiteSpace: 'pre-line' }));
+});
+var FormStyled = styled(Form)(function () { return ({
+    display: 'flex',
+    flexDirection: 'column'
+}); });
+var OTP = function () {
+    var dispatch = useAppDispatch();
+    var _a = useAppSelector(authSelector), data = _a.data, loading = _a.loading, error = _a.error;
+    var methods = useForm({
+        resolver: yupResolver(OTPValidation),
+        defaultValues: { otp: '' },
+        mode: 'onChange'
+    });
+    var t = useTranslation().t;
+    var isAr = useLanguage().isAr;
+    React.useEffect(function () {
+        if (error)
+            dispatch(clearError());
+        return function () {
+            dispatch(resetOTPScreen());
+        };
+    }, [methods.formState.isValid]);
+    var onSubmit = function (formData) {
+        dispatch(verifyAuth(formData));
+    };
+    var disabled = !methods.formState.isValid || !!error;
+    var phone = data.mobileNumber || '+966 522556154';
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [loading ? t('ide_otp_waiting_title') : t('ide_opt_sent_title'), !loading && _jsx("span", __assign({ dir: 'ltr' }, { children: maskPhone(phone) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ disabled: disabled, disableBack: true, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('confirm') }))] })) })) }));
+};
+export default React.memo(OTP);

package/build/features/auth/screens/OTP/OTPInput.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface OTPProps {
+}
+declare const _default: React.MemoExoticComponent<({}: OTPProps) => JSX.Element>;
+export default _default;

package/build/features/auth/screens/OTP/OTPInput.js

@@ -0,0 +1,44 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box/Box';
+import { styled } from '@mui/material/styles';
+import OTPField from '../../../shared/OTP';
+import { DEFAULT_TIMER_VALUE } from '../../../../constants';
+import { useAppDispatch } from '../../../../hooks';
+var BoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        flexDirection: 'column',
+        fontFamily: theme.typography.fontFamily
+    });
+});
+var OTPInput = function (_a) {
+    var _b = useFormContext(), control = _b.control, setValue = _b.setValue;
+    var t = useTranslation().t;
+    var dispatch = useAppDispatch();
+    var otpControl = useController({ name: 'otp', control: control });
+    var handleOnOTPChange = function (otp) {
+        otpControl.field.onChange(otp);
+    };
+    var handleOnResendOTP = function () {
+        if (otpControl.field.value)
+            setValue('otp', '', { shouldValidate: true });
+    };
+    var otpValue = otpControl.field.value;
+    return (_jsx(BoxStyled, __assign({ dir: 'ltr' }, { children: _jsx(OTPField, { timeEndLabel: t('ide_otp_resend_label'), timerInSeconds: DEFAULT_TIMER_VALUE, onResetClick: handleOnResendOTP, value: otpValue, onChange: function (number) { return handleOnOTPChange(number.toString()); } }) })));
+};
+export default React.memo(OTPInput);

package/build/features/auth/screens/OTP/index.d.ts

@@ -0,0 +1,3 @@
+import OTP, { OTPProps } from './OTP';
+export type { OTPProps };
+export default OTP;

package/build/features/auth/screens/OTP/index.js

@@ -0,0 +1,2 @@
+import OTP from './OTP';
+export default OTP;

package/build/features/auth/screens/OTP/validation.d.ts

@@ -0,0 +1,8 @@
+import * as yup from 'yup';
+export declare const OTPValidation: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+    otp: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+}>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+    otp: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+}>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+    otp: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+}>>>;

package/build/features/auth/screens/OTP/validation.js

@@ -0,0 +1,4 @@
+import * as yup from 'yup';
+export var OTPValidation = yup.object().shape({
+    otp: yup.string().min(6, 'otp_min_length').required('otp_required')
+});

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

@@ -28,16 +28,18 @@ import BrandName from './BrandName';
 import SocialMedia from './SocialMedia';
 import TAC from './TAC';
 import BrandList from './BrandList';
+import SalesChannels from './SalesChannels';
 var Merchant = function (_a) {
-    var _b, _c, _d;
-    var _e = React.useState(false), brandNameChecking = _e[0], setBrandNameChecking = _e[1];
-    var _f = React.useState(ValidationOptions.NEW_USER), userType = _f[0], setUserType = _f[1];
-    var _g = React.useState(false), listActive = _g[0], setListActive = _g[1];
-    var _h = useAppSelector(connectSelector), data = _h.data, loading = _h.loading, error = _h.error;
+    var _b, _c;
+    var _d = React.useState(false), brandNameChecking = _d[0], setBrandNameChecking = _d[1];
+    var _e = React.useState(ValidationOptions.NEW_USER), userType = _e[0], setUserType = _e[1];
+    var _f = React.useState(false), listActive = _f[0], setListActive = _f[1];
+    var _g = useAppSelector(connectSelector), data = _g.data, loading = _g.loading, error = _g.error;
     var isNewUser = (_b = data.otpData.responseBody) === null || _b === void 0 ? void 0 : _b.new_user;
     var isAbsher = data.otpData.isAbsher;
-    var brandList = ((_c = data.brandData.responseBody) === null || _c === void 0 ? void 0 : _c.brands) || [];
-    var _j = data.brandData, brandName = _j.brandName, links = _j.links, selectedBrandItem = _j.selectedBrandItem, termAndConditionChecked = _j.termAndConditionChecked, responseBody = _j.responseBody;
+    var _h = data.brandData.responseBody || {}, brands = _h.brands, channelList = _h.channelList;
+    var brandList = brands || [];
+    var _j = data.brandData, brandName = _j.brandName, links = _j.links, selectedBrandItem = _j.selectedBrandItem, termAndConditionChecked = _j.termAndConditionChecked, responseBody = _j.responseBody, salesChannels = _j.salesChannels;
     var methods = useForm({
         resolver: yupResolver(MerchantValidationSchema(userType)),
         defaultValues: {
@@ -82,6 +84,7 @@ var Merchant = function (_a) {
                 var sites = { website: '', twitter: '', instagram: '' };
                 methods.setValue('brandName', '', { shouldValidate: true });
                 methods.setValue('links', sites);
+                methods.setValue('salesChannels', []);
             }, 100);
         }
         if (isNewUser === false && (brandList === null || brandList === void 0 ? void 0 : brandList.length) > 0 && (formDataSelectedBrand === null || formDataSelectedBrand === void 0 ? void 0 : formDataSelectedBrand.id) !== 'other') {
@@ -92,18 +95,35 @@ var Merchant = function (_a) {
             var website = (_e = formDataSelectedBrand === null || formDataSelectedBrand === void 0 ? void 0 : formDataSelectedBrand.website) === null || _e === void 0 ? void 0 : _e.replaceAll(/(https|http):\/\//g, '');
             var sites_1 = __assign(__assign({}, links), { website: website, twitter: twitter, instagram: instagram });
             setTimeout(function () { return methods.setValue('links', sites_1, { shouldValidate: true }); }, 100);
+            var selectedChannels = (!!(channelList === null || channelList === void 0 ? void 0 : channelList[0]) && [channelList === null || channelList === void 0 ? void 0 : channelList[0]]) || [];
+            var _f = formDataSelectedBrand || {}, websiteUrl = _f.website, social = _f.social;
+            var isHasWebsite = (websiteUrl === null || websiteUrl === void 0 ? void 0 : websiteUrl.length) > 0;
+            var isHasTwitter = social === null || social === void 0 ? void 0 : social.find(function (s) { return s.includes('twitter.com'); });
+            var isHasInstagram = social === null || social === void 0 ? void 0 : social.find(function (s) { return s.includes('instagram.com'); });
+            var websiteData = channelList === null || channelList === void 0 ? void 0 : channelList.find(function (c) { return c.name_en.toLocaleLowerCase() === 'website'; });
+            var socialData = channelList === null || channelList === void 0 ? void 0 : channelList.find(function (c) { return c.name_en.toLocaleLowerCase() === 'social'; });
+            if (isHasWebsite && (isHasTwitter || isHasInstagram))
+                selectedChannels = [websiteData, socialData];
+            else if (isHasTwitter || isHasInstagram)
+                selectedChannels = [socialData];
+            else if (isHasWebsite)
+                selectedChannels = [websiteData];
+            methods.setValue('salesChannels', selectedChannels);
         }
     }, [formDataSelectedBrand, isNewUser]);
     React.useEffect(function () {
         if (!(formDataSelectedBrand === null || formDataSelectedBrand === void 0 ? void 0 : formDataSelectedBrand.id) && (selectedBrandItem === null || selectedBrandItem === void 0 ? void 0 : selectedBrandItem.id))
             methods.setValue('selectedBrandItem', selectedBrandItem, { shouldValidate: true });
     }, [selectedBrandItem]);
+    React.useEffect(function () {
+        methods.setValue('salesChannels', salesChannels);
+    }, [salesChannels]);
     var brandErrChecks = !methods.formState.isValid || !!methods.formState.errors.brandName || !!error;
-    var disabled = brandErrChecks || brandNameChecking || ((_d = data.brandData.responseBody) === null || _d === void 0 ? void 0 : _d.response_code) === '5';
+    var disabled = brandErrChecks || brandNameChecking || ((_c = data.brandData.responseBody) === null || _c === void 0 ? void 0 : _c.response_code) === '5';
     var isBrandListAvailable = userType !== ValidationOptions.NEW_USER && brandList.length > 0;
     var askingForBrandInfo = userType === ValidationOptions.NEW_USER ||
         brandList.length === 0 ||
         userType === ValidationOptions.EXISTING_USER_WITH_OTHER_BRAND;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(BrandList, { show: isBrandListAvailable, list: brandList, onListOpen: function () { return setListActive(true); }, onListClose: function () { return setListActive(false); } }), _jsx(BrandName, { show: !listActive && askingForBrandInfo, brandNameChecking: brandNameChecking, fetchingBrandName: setBrandNameChecking }), _jsx(SocialMedia, { show: !listActive, isNewUser: isNewUser }), _jsx(TAC, { show: !listActive && askingForBrandInfo }), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, error: t(error || ''), loading: loading }, { children: t('next') })) }))] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(BrandList, { show: isBrandListAvailable, list: brandList, onListOpen: function () { return setListActive(true); }, onListClose: function () { return setListActive(false); } }), _jsx(BrandName, { show: !listActive && askingForBrandInfo, brandNameChecking: brandNameChecking, fetchingBrandName: setBrandNameChecking }), _jsx(Collapse, __assign({ in: !listActive }, { children: _jsx(SalesChannels, {}) })), _jsx(SocialMedia, { show: !listActive, isNewUser: isNewUser }), _jsx(TAC, { show: !listActive && askingForBrandInfo }), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, error: t(error || ''), loading: loading }, { children: t('next') })) }))] })) })) }));
 };
 export default React.memo(Merchant);

package/build/features/connect/screens/Merchant/SalesChannels.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export declare const MandatoryStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const CollapseStyled: import("@emotion/styled").StyledComponent<import("../../../../components/Collapse").CollapseProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+declare const SalesChannels: () => JSX.Element;
+export default SalesChannels;