\n
\n );\n };\n\n const CategoryLinks = ({ category }) => {\n const nameWithoutSpaces = removeSpaces(category.name);\n const isShowSubmenu = !!statesSubmenus[nameWithoutSpaces];\n const propsIcon = getPropsIconType(category);\n const isCategoryActive = category.items.some(item => item.path === pathNameActive) && openSideBar === false;\n\n return (\n {children}
\n \n \n \n {\n resetToggleSubmenus();\n setStatesSubmenus({\n [nameWithoutSpaces]: !statesSubmenus[nameWithoutSpaces],\n });\n }}\n >\n {category.name} \n {openSideBar && (\n
\n \n \n setOpenSideBar(!openSideBar)}\n />\n
\n\n \n \n );\n};\n\nAppSideBar.defaultProps = {};\n\nAppSideBar.propTypes = {};\n\nexport default AppSideBar;\n","/* eslint prefer-destructuring: \"off\" */\n\nexport function requestState(method = 'get', resource = 'RESOURCE') {\n return `API_${method.toUpperCase()}_${resource}_REQUEST`;\n}\n\nexport function successResponse(method = 'get', resource = 'RESOURCE') {\n return `API_${method.toUpperCase()}_${resource}_SUCCESS`;\n}\n\nexport function errorResponse(method = 'get', resource = 'RESOURCE') {\n return `API_${method.toUpperCase()}_${resource}_ERROR`;\n}\n\nexport function createConstant(resource = 'RESOURCE', method = 'get', type = 'request') {\n let suffix = type.toLowerCase();\n let verb = method.toLowerCase();\n\n switch (suffix) {\n case 'request':\n suffix = 'REQUEST';\n break;\n case 'error':\n suffix = 'ERROR';\n break;\n case 'success':\n suffix = 'SUCCESS';\n break;\n default:\n suffix = 'REQUEST';\n }\n\n switch (verb) {\n case 'get':\n verb = 'GET';\n break;\n case 'post':\n verb = 'POST';\n break;\n case 'delete':\n verb = 'DELETE';\n break;\n case 'put':\n verb = 'PUT';\n break;\n case 'patch':\n verb = 'PATCH';\n break;\n default:\n verb = 'GET';\n }\n\n return `API_${verb}_${resource}_${suffix}`;\n}\n\nexport function createGetRequest(resource) {\n return createConstant(resource, 'get');\n}\n\nexport function createPostRequest(resource) {\n return createConstant(resource, 'post');\n}\n\nexport function createPutRequest(resource) {\n return createConstant(resource, 'put');\n}\n\nexport function createPatchRequest(resource) {\n return createConstant(resource, 'patch');\n}\n\nexport function createDeleteRequest(resource) {\n return createConstant(resource, 'delete');\n}\n\nexport function createResponse(actionInfo, response, type) {\n return {\n type: createConstant(actionInfo.resource, actionInfo.verb, type),\n payload: {\n code: response.status,\n data: response.data,\n },\n };\n}\n\nexport function createSuccessResponse(actionInfo, response) {\n return createResponse(actionInfo, response, 'success');\n}\n\nexport function createErrorResponse(actionInfo, response) {\n return createResponse(actionInfo, response, 'error');\n}\n\nexport function getActionTypeInfo(actionType) {\n const info = actionType.split('_');\n const invalidResponse = { correctActionType: false };\n const validResponse = {\n prefix: '',\n verb: '',\n suffix: '',\n resource: '',\n correctActionType: '',\n responseActionType: '',\n };\n if (info.length < 4) {\n return invalidResponse;\n }\n validResponse.prefix = info[0];\n validResponse.verb = info[1];\n validResponse.suffix = info[info.length - 1];\n validResponse.resource = info.slice(2, info.length - 1).join('_');\n validResponse.correctActionType = validResponse.prefix === 'API' && validResponse.suffix === 'REQUEST';\n validResponse.responseActionType = `API_${validResponse.verb}_${validResponse.resource}`;\n return validResponse;\n}\n\nexport function isObject(value) {\n return Object.prototype.toString.call(value) === '[object Object]';\n}\n\nexport function isFunction(functionToCheck) {\n const getType = {};\n return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';\n}\n\nexport function isString(value) {\n return typeof value === 'string' || value instanceof String;\n}\n\nexport function isArray(value) {\n return value instanceof Array;\n}\nexport function assingIdValue(paramObj, idName, objName) {\n const obj = paramObj;\n if (obj[objName] === undefined || obj[objName] === null) {\n obj[idName] = null;\n delete obj[objName];\n return obj;\n }\n obj[idName] = obj[objName].id;\n delete obj[objName];\n return obj;\n}\n","import { validateMode } from '../../../common/modeUtils';\nimport { createDeleteRequest, createGetRequest, createPostRequest } from '../../../helpers/reduxUtils';\n\nexport const MERCHANT_INFO = 'MERCHANT_INFO';\nexport const MERCHANT_API_KEY = 'MERCHANT_API_KEY';\nexport const MERCHANT_CREATE_API_APPLICATION = 'MERCHANT_CREATE_API_APPLICATION';\nexport const MERCHANT_DELETE_API_KEY = 'MERCHANT_DELETE_API_KEY';\nexport const MERCHANT_VERIFIED_ACCOUNT = 'MERCHANT_VERIFIED_ACCOUNT';\n\nexport function getMerchantInfo() {\n const route = '/api/merchant/info';\n return {\n type: createGetRequest(MERCHANT_INFO),\n payload: {\n route,\n success: (res, store) => {\n const headers = res?.config?.headers;\n if (Boolean(headers)) {\n store.dispatch(merchantVerifiedAccount(headers));\n }\n },\n },\n };\n}\n\nexport function getMerchantApiKey(mode) {\n validateMode(mode);\n const route = '/apikey';\n return {\n type: createGetRequest(MERCHANT_API_KEY),\n payload: {\n route,\n apiEndPoint: 2,\n mode,\n },\n };\n}\n\nexport function createApiApplication(name, onSuccess = () => {}, onFailure = () => {}, mode) {\n validateMode(mode);\n const route = '/apikey';\n const data = {\n type: 'BASIC',\n name,\n };\n return {\n type: createPostRequest(MERCHANT_CREATE_API_APPLICATION),\n payload: {\n route,\n data,\n apiEndPoint: 2,\n success: onSuccess,\n failure: onFailure,\n mode,\n },\n };\n}\n\nexport function deleteApiApplication(apikeyId, onSuccess = () => {}, onFailure = () => {}, mode) {\n validateMode(mode);\n const route = `/apikey/${apikeyId}`;\n return {\n type: createDeleteRequest(MERCHANT_DELETE_API_KEY),\n payload: {\n route,\n apiEndPoint: 2,\n success: onSuccess,\n failure: onFailure,\n mode,\n },\n };\n}\n\nexport function merchantVerifiedAccount(headers) {\n const route = `https://api-gw.payclip.com/kyc/fraud-profile`;\n return {\n type: createGetRequest(MERCHANT_VERIFIED_ACCOUNT),\n payload: {\n route,\n fullRoute: true,\n headers: headers,\n },\n };\n}\n","import { createGetRequest, createPostRequest } from '../../../helpers/reduxUtils';\nimport { getMerchantInfo } from '../merchants';\nimport JwtAuthService from '../../../services/jwtService';\n\nimport cookieService from '../../../services/cookieService';\nimport { PRODUCTIVE_MODE, SANDBOX_MODE } from '../../../common/authorizationModeType';\n\nexport const LOGIN_WITH_TOKEN = 'LOGIN_WITH_TOKEN';\nexport const GET_SANDBOX_TOKEN = 'GET_SANDBOX_TOKEN';\nexport const LOGOUT = 'LOGOUT';\n\nexport function getSandboxTokenAndLoginUser() {\n return {\n type: createPostRequest(GET_SANDBOX_TOKEN),\n payload: {\n route: '/iam/sandbox/login',\n apiEndPoint: 2,\n success: (res, store) => {\n cookieService.saveToken(res?.data?.token, SANDBOX_MODE);\n store.dispatch(loginUserWithToken());\n },\n },\n };\n}\n\nexport function loginUserWithToken() {\n const route = '/api/merchant/user/info';\n return {\n type: createGetRequest(LOGIN_WITH_TOKEN),\n payload: {\n route,\n success: (res, store) => {\n store.dispatch(getMerchantInfo());\n },\n mode: PRODUCTIVE_MODE,\n },\n };\n}\n\nexport function exitApp() {\n return {\n type: LOGOUT,\n };\n}\n\nexport function logout() {\n JwtAuthService.logout();\n return dispatch => {\n setTimeout(() => {\n dispatch(exitApp());\n }, 500);\n };\n}\n","import { useEffect, useState } from 'react';\nimport { useSelector } from 'react-redux';\nimport { logout } from '../../../redux/actions/session';\nimport getConfigValue from '../../../config/enviromentVariables';\n\nexport const useAppHeader = () => {\n const merchantInfo = useSelector(state => state.session.merchantInfo);\n const nameMerchant = merchantInfo?.merchant?.name;\n const [showMenu, setShowMenu] = useState();\n\n const addShadow = () => {\n const navbar = document.getElementById(`navbar`);\n const exitsClass = navbar?.classList.contains(`shadow`);\n if (window.scrollY >= 15) {\n if (!exitsClass) {\n navbar?.classList.add(`shadow`);\n }\n } else {\n if (exitsClass) {\n navbar?.classList.remove(`shadow`);\n }\n }\n };\n\n useEffect(() => {\n window.addEventListener(`scroll`, addShadow);\n return () => {\n window.removeEventListener(`scroll`, addShadow);\n };\n }, []);\n\n return {\n props: {\n showMenu,\n nameMerchant,\n },\n methods: {\n setShowMenu,\n closeSession: () => {\n logout();\n setShowMenu(false);\n window.location.replace(`${getConfigValue('merchantDashboard')}/users/sign_in?loginFrom=developerPortal`);\n },\n getInitialsName: () => {\n return nameMerchant.trim().split(/\\s+/).length > 1\n ? `${nameMerchant.trim().split(/\\s+/)[0][0].toUpperCase()}${nameMerchant\n .trim()\n .split(/\\s+/)[1][0]\n .toUpperCase()}`\n : nameMerchant.trim().slice(0, 2).toUpperCase();\n },\n },\n };\n};\n","import React from 'react';\nimport './AppHeader.css';\nimport { useAppHeader } from './useAppHeader';\nimport ClipButton from '@clipmx/clip-storybook/dist/components/Button';\nimport clsx from 'clsx';\n\nconst AppHeader = () => {\n const {\n props: { showMenu, nameMerchant },\n methods: { setShowMenu, closeSession, getInitialsName },\n } = useAppHeader();\n return (\n \n );\n};\n\nexport default AppHeader;\n\nAppHeader.defaultProps = {};\nAppHeader.propTypes = {};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport AppSidebar from '../../common/AppSidebar';\nimport AppHeader from '../../common/AppHeader/AppHeader';\nimport './DashboardLayout.css';\n\nconst DashboardLayout = ({ children }) => {\n return (\n \n
\n );\n};\n\nDashboardLayout.defaultProps = {\n children: null,\n};\n\nDashboardLayout.propTypes = {\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n};\n\nexport default DashboardLayout;\n","import clevertap from 'clevertap-web-sdk';\nimport getConfigValue from '../config/enviromentVariables';\n\nconst getFullEventName = eventName => {\n return `CX_DEV-DASHBOARD_${eventName}`;\n};\n\nexport const EVENTS = {\n API_KEYS: {\n APP_LIST_VIEWED: 'API-KEYS_APP-LIST_VIEWED',\n APP_LIST_CREATE_NEW_CLICKED: 'API-KEYS_APP-LIST_CREATE-NEW-CLICKED',\n CREATE_APP_DIALOG: 'API-KEYS_CREATE-APP-DIALOG_DISPLAYED',\n CREATE_APP_SAVE: 'API-KEYS_CREATE-APP-DIALOG_SAVE-CLICKED',\n CREATE_APP_SUCCEEDED: 'API-KEYS_CREATE-APP_SUCCEEDED',\n CREATE_APP_FAILED: 'API-KEYS_CREATE-APP_FAILED',\n APP_DETAIL_CLICKED: 'API-KEYS_APP-LIST_APP-DETAIL-CLICKED',\n APP_DETAIL_DELETE_CLICK: 'API-KEYS_APP-DETAIL_DELETE-CLICKED',\n DELETE_APP_DIALOG_DISPLAYED: 'API-KEYS_DELETE-APP-DIALOG_DISPLAYED',\n DELETE_APP_CONFIRMATION_CLICKED: 'API-KEYS_DELETE-APP-DIALOG_CONFIRMATION-CLICKED',\n DELETE_APP_FAILED: 'API-KEYS_DELETE-APP_FAILED',\n DELETE_APP_SUCCEEDED: 'API-KEYS_DELETE-APP_SUCCEEDED',\n },\n WEBHOOKS: {\n SETUP_VIEWED: 'WEBHOOKS_SETUP_VIEWED',\n SETUP_URL_SUCCEEDED: 'WEBHOOKS_SETUP-URL_SUCCEEDED',\n SETUP_URL_FAILED: 'WEBHOOKS_SETUP-URL_FAILED',\n DISABLE_SUCCEEDED: 'WEBHOOKS_DISABLE_SUCCEEDED',\n DISABLE_FAILED: 'WEBHOOKS_DISABLE_FAILED',\n ENABLE_SUCCEEDED: 'WEBHOOKS_ENABLE_SUCCEEDED',\n ENABLE_FAILED: 'WEBHOOKS_ENABLE_FAILED',\n TEST_NOTIFICATION_SENT: 'WEBHOOKS_TEST-NOTIFICATION_SENT',\n TEST_NOTIFICATION_FAILED: 'WEBHOOKS_TEST-NOTIFICATION_FAILED',\n },\n SDK: {\n SDK_IOS_DOWNLOAD_VIEWED: 'SDK_IOS-DOWNLOAD_VIEWED',\n SDK_IOS_DOWNLOAD_CLICKED: 'SDK_IOS-DOWNLOAD_CLICKED',\n SAMPLE_PROJECTS_VIEWED: 'SDK_SAMPLE-PROJECTS_VIEWED',\n SAMPLE_DOWNLOAD_CLICKED: 'SDK_SAMPLE-DOWNLOAD_CLICKED',\n },\n};\n\nexport const CleverTap = {\n initialize: function () {\n try {\n clevertap.privacy.push({ optOut: false });\n clevertap.privacy.push({ useIP: false });\n clevertap.spa = true;\n clevertap.init(getConfigValue('clevertapApiKey'));\n } catch (error) {\n console.log(error);\n }\n },\n\n event: function (name, payload) {\n if (process.env.NODE_ENV !== 'test') {\n try {\n if (payload) {\n clevertap.event.push(getFullEventName(name), payload);\n console.info('CLEVERTAP_EVENT', {\n name: getFullEventName(name),\n payload,\n });\n } else {\n clevertap.event.push(getFullEventName(name));\n console.info('CLEVERTAP_EVENT', {\n name: getFullEventName(name),\n });\n }\n } catch (error) {\n console.info('CLEVERTAP_EVENT', {\n name: getFullEventName(name),\n error: error,\n });\n }\n }\n },\n\n profile: function (userInfo) {\n clevertap.onUserLogin.push({\n Site: {\n Name: `${userInfo.first_name} ${userInfo.last_name} ${userInfo.second_last_name}`,\n Identity: userInfo?.email,\n Email: userInfo?.email,\n Phone: `+52${userInfo?.mobile}`,\n DOB: new Date(),\n },\n });\n },\n};\n\nexport default CleverTap;\n","export default __webpack_public_path__ + \"static/media/empty-credentials.dc45254c.svg\";","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport './Skeleton.css';\n\nconst Skeleton = ({ length, className, height, ...otherProps }) => {\n const styleProps = {\n ...(height && {\n height: height,\n }),\n };\n return (\n \n {children} \n
\n \n {Array.from({ length }).map((_, index) => (\n \n ))}\n
\n );\n};\n\nSkeleton.defaultProps = {\n className: '',\n length: 3,\n height: '',\n};\n\nSkeleton.propTypes = {\n className: PropTypes.string,\n length: PropTypes.number,\n height: PropTypes.string,\n};\n\nexport default Skeleton;\n","import { useContext, useEffect, useState } from 'react';\nimport { DialogContext } from '@clipmx/clip-storybook/dist/components/Dialog/dialogContext';\nimport { useHistory } from 'react-router-dom';\nimport { AlertContext } from '../../Alert';\nimport { initialize } from 'redux-form';\nimport { PRODUCTIVE_MODE, SANDBOX_MODE } from '../../../../common/authorizationModeType';\nimport CleverTap, { EVENTS } from '../../../../events';\n\nexport const useNewCredential = ({ typeCredential, createApiApplication, dispatch, apiKey }) => {\n const [inputNameCredential, setInputNameCredential] = useState({\n value: '',\n error: '',\n });\n const [sendRequest, setSendRequest] = useState(false);\n const { dialogActions } = useContext(DialogContext);\n const { openAlert } = useContext(AlertContext);\n const history = useHistory();\n\n /*\n * Validation rules for the credential name. Regular expressions are used that are validated sequentially\n * and if any condition does not meet, the error message is displayed. To add one more you have to consider\n * the order of where it is placed.\n */\n const RULES = {\n /* Validation rules for credential name. Regular expressions are used. */\n notEmpty: {\n regex: /^.{1}?/,\n error: 'Este campo es obligatorio.',\n },\n threerOrMore: {\n text: '3 caracteres o más',\n regex: /^.{3}?/,\n error: 'El nombre debe llevar 3 caracteres o más.',\n },\n noSpecialCharacters: {\n text: 'Sin caracteres especiales',\n regex: /^[a-zA-Z0-9\\u00E0-\\u00FC\\s]+$/,\n error: 'El nombre no puede llevar caracteres especiales.',\n },\n /**Validate that there are no spaces in the middle of the word */\n /*noSpaces: {\n text: 'Sin espacios',\n regex: /\\b^(?!.* )\\w+\\b/,\n error: 'El nombre no puede llevar espacios.',\n }, */\n upToOneHundredCharacters: {\n regex: /^[\\w\\u00E0-\\u00FC\\s]{3,100}$/,\n error: 'El nombre debe tener menos de 100 caracteres.',\n },\n };\n\n const EVALUATIONS = Object.keys(RULES).reduce((accumulator, currentValue) => {\n const _regex = RULES[currentValue].regex;\n return {\n ...accumulator,\n [currentValue]: _regex.test(inputNameCredential.value.trim()),\n };\n }, {});\n\n const getError = () => {\n let error = '';\n Object.keys(RULES).some(key => {\n if (EVALUATIONS[key] === false) {\n error = RULES[key].error;\n return true;\n }\n return false;\n });\n return error;\n };\n\n const submitData = ({ appName }) => {\n const mode = typeCredential === 'prod' ? PRODUCTIVE_MODE : SANDBOX_MODE;\n return new Promise(() => {\n return createApiApplication(\n appName,\n () => {\n CleverTap.event(EVENTS.API_KEYS.CREATE_APP_SUCCEEDED, { SOURCE: mode, appName: appName });\n setSendRequest(false);\n openAlert({ severity: 'success', message: `Creaste la credencial ${inputNameCredential.value}.` });\n dialogActions.closeDialog('ApplicationName');\n },\n () => {\n setSendRequest(false);\n openAlert({ severity: 'error', message: 'Hubo un error al crear la credencial. Intentalo más tarde.' });\n CleverTap.event(EVENTS.API_KEYS.CREATE_APP_FAILED, { SOURCE: mode, appName: appName });\n dialogActions.closeDialog('ApplicationName');\n },\n mode\n );\n });\n };\n\n useEffect(() => {\n dispatch(initialize('createApiKeyForm', { appName: '' }));\n }, [dispatch]);\n\n useEffect(() => {\n if (apiKey?.item) {\n const nameCredential = apiKey?.item?.name;\n const apiKeyCredential = apiKey?.item?.api_key;\n const apiSecretCredential = apiKey?.item?.api_secret;\n const createdAt = apiKey?.item?.created_at;\n history.push({\n pathname: `/credentials/${apiKeyCredential}`,\n state: { nameCredential, apiKeyCredential, apiSecretCredential, typeCredential, createdAt },\n });\n }\n // eslint-disable-next-line\n }, [apiKey]);\n\n return {\n props: {\n inputNameCredential,\n EVALUATIONS,\n RULES,\n sendRequest,\n isError:\n (inputNameCredential.error !== '' && inputNameCredential.value !== '') ||\n (inputNameCredential.error !== '' && inputNameCredential.value === ''),\n rulesKeysToRender: Object.keys(RULES).reduce((accumulator, currentValue) => {\n const text = RULES[currentValue]?.text;\n if (text) {\n return [...accumulator, currentValue];\n }\n return accumulator;\n }, []),\n },\n methods: {\n onChange: ({ target: { value } }) => {\n setInputNameCredential({\n value,\n error: '',\n });\n },\n onCloseDialog: () => {\n dialogActions.closeDialog('ApplicationName');\n },\n onClickCreate: async () => {\n const invalidText = Object.values(EVALUATIONS).some(evaluation => evaluation === false);\n if (invalidText) {\n setInputNameCredential({ ...inputNameCredential, error: getError() });\n } else {\n setSendRequest(true);\n submitData({ appName: inputNameCredential.value.trim() });\n }\n },\n },\n };\n};\n","import React from 'react';\nimport { ClipTypography } from '@clipmx/clip-storybook/dist/components/Typography/Typography';\nimport { TextField } from '@material-ui/core';\nimport { ClipButton } from '@clipmx/clip-storybook/dist/components/Button/Button';\nimport CircularProgress from '@clipmx/clip-storybook/dist/components/CircularProgress';\nimport { bindActionCreators } from 'redux';\nimport { reduxForm } from 'redux-form';\nimport { connect } from 'react-redux';\nimport { createApiApplication } from '../../../../redux/actions/merchants';\nimport './NewCredential.css';\nimport { useNewCredential } from './useNewCredential';\nimport clsx from 'clsx';\nimport Icons from '../../Icons';\n\nconst NewCredential = ({ typeCredential = 'prod', ...otherProps }) => {\n const {\n props: { inputNameCredential, EVALUATIONS, RULES, sendRequest, isError, rulesKeysToRender },\n methods: { onChange, onCloseDialog, onClickCreate },\n } = useNewCredential({ ...otherProps, typeCredential });\n return (\n \n );\n};\n\nconst mapStateToProps = state => {\n const {\n session: { apiKey },\n } = state;\n return { apiKey };\n};\n\nfunction mapDispatchToProps(dispatch) {\n return bindActionCreators({ createApiApplication }, dispatch);\n}\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(\n reduxForm({\n form: 'createApiKeyForm', // a unique identifier for this form\n })(NewCredential)\n);\n","import React, { useContext } from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { CleverTap, EVENTS } from '../../../events';\nimport { DialogContext } from '@clipmx/clip-storybook/dist/components/Dialog/dialogContext';\nimport { ClipTypography } from '@clipmx/clip-storybook/dist/components/Typography/Typography';\nimport Icons from '../Icons';\nimport EmptyCredentialsImg from './../../../files/empty-credentials.svg';\nimport Skeleton from '../Skeleton/Skeleton';\nimport NewCredential from '../forms/NewCredential/NewCredential';\nimport { orderByDate, toDateLong } from '../../../helpers/dateHelpers';\nimport { ClipButton } from '@clipmx/clip-storybook/dist/components/Button/Button';\n\nexport const useCredentials = ({ credentials: { prodCredentials = null, testCredentials = null } }) => {\n const history = useHistory();\n\n const { dialogActions } = useContext(DialogContext);\n\n const typeCredential = {\n test: 'test',\n prod: 'prod',\n };\n\n const createCredential = (credential = typeCredential.prod) => {\n CleverTap.event(EVENTS.API_KEYS.APP_LIST_CREATE_NEW_CLICKED, { SOURCE: 'APP_LIST' });\n dialogActions.registerDialog('ApplicationName', {\n open: true,\n type: 'form',\n maxWidth: 'xl',\n title: 'Crear credencial',\n children: \n 
\n \n Aún no creas credenciales para pruebas.\n \n
\n );\n\n const RenderListByType = ({ credentials, type = typeCredential.prod }) => {\n if (credentials === null) {\n return {toDateLong(credential.created_at)}
\n\n \n Credenciales\n \n \n Cada credencial proporciona un conjunto único de claves API y configuraciones para realizar solicitudes a las\n APIs de Clip.\n \n {verifiedAccount === false && (\n
\n );\n};\n\nCredentials.defaultProps = {\n credentials: {\n prodCredentials: null,\n testCredentials: null,\n },\n};\n\nCredentials.propTypes = {\n /**\n * The response from the server with\n * the merchant API keys information\n * This can be one of the two types\n * string for loading || object for the response\n */\n credentials: PropTypes.exact({\n prodCredentials: PropTypes.exact({\n items: PropTypes.array,\n messages: PropTypes.array,\n query: PropTypes.object,\n meta: PropTypes.object,\n }),\n testCredentials: PropTypes.exact({\n items: PropTypes.array,\n messages: PropTypes.array,\n query: PropTypes.object,\n meta: PropTypes.object,\n }),\n }),\n};\n\nexport default Credentials;\n","import React, { useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport { getMerchantApiKey } from '../../redux/actions/merchants';\nimport Credentials from '../common/Credentials';\nimport './ApiCredentials.css';\nimport { PRODUCTIVE_MODE, SANDBOX_MODE } from '../../common/authorizationModeType';\nfunction ApiCredentialsComponent() {\n const dispatch = useDispatch();\n const session = useSelector(state => {\n return state?.session;\n });\n\n useEffect(() => {\n dispatch(getMerchantApiKey(PRODUCTIVE_MODE));\n dispatch(getMerchantApiKey(SANDBOX_MODE));\n }, [dispatch]);\n\n return (\n \n
\n )}\n \n Importante: Asegúrate de verificar tu identidad como se indica{' '}\n \n aquí\n {' '}\n antes de usar los productos de Clip (APIs | SDKs | Plugins). De lo contrario, tus clientes podrían tener\n rechazos en los pagos, lo que afectará el proceso de pagos y la experiencia de compra.\n
\n\n
\n \n \n \n
\n {ProdCredentialsList}
\n \n \n \n\n \n Importante:{` `}\n Las credenciales de pruebas funcionan únicamente con el Checkout Transparente. Consulta la lista de APIs\n compatibles{' '}\n \n aquí\n \n .\n \n
\n {TestCredentialsList}
\n \n
\n );\n}\n\nApiCredentialsComponent.defaultProps = {\n getMerchantApiKey: null,\n classes: null,\n merchantInfo: null,\n apiKey: null,\n};\n\nApiCredentialsComponent.propTypes = {\n getMerchantApiKey: PropTypes.func,\n classes: PropTypes.object,\n merchantInfo: PropTypes.object,\n apiKey: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n};\n\nexport default ApiCredentialsComponent;\n","const redTheme = theme => {\n const sidebarColor = '#fff';\n const sidebarBackground = '#fff';\n const sideBarWidth = 255;\n const sideBarCollapsedWidth = theme.spacing(7);\n return {\n width: sideBarWidth,\n widthCollapsed: sideBarCollapsedWidth,\n background: sidebarBackground,\n color: sidebarColor,\n sidebar: {\n position: 'absolute',\n top: 0,\n bottom: 0,\n width: '100%',\n height: '100%',\n color: sidebarColor,\n background: sidebarBackground,\n },\n sidebarBackground: {\n position: 'absolute',\n width: '100%',\n height: '100%',\n top: 0,\n left: 0,\n zIndex: 0,\n // backgroundImage: `url(${AppSidebarBg})`,\n backgroundImage: 'linear-gradient(to bottom, #fc4c02, #a8093c)',\n backgroundPosition: 'center',\n backgroundRepeat: 'repeat',\n backgroundSize: 'cover',\n },\n sidebarBody: {\n position: 'absolute',\n top: 0,\n bottom: 0,\n width: '100%',\n height: '100%',\n overflowX: 'hidden',\n overflowY: 'auto',\n },\n sidebarHeader: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-around',\n alignContent: 'center',\n whiteSpace: 'nowrap',\n padding: '0 8px',\n ...theme.mixins.toolbar,\n },\n sidebarSection: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'left',\n alignContent: 'center',\n whiteSpace: 'nowrap',\n padding: '0 16px',\n color: sidebarColor,\n ...theme.mixins.toolbar,\n },\n sectionTitle: {\n fontWeight: 400,\n },\n sidebarTitleLink: {\n textDecoration: 'none',\n color: 'inherit',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-around',\n alignContent: 'center',\n whiteSpace: 'nowrap',\n },\n logo: {\n color: theme.palette.secondary.main,\n zIndex: 10,\n },\n title: props => ({\n position: 'relative',\n overflow: 'visible',\n marginLeft: '5px',\n display: props.isCollapsed ? 'none' : 'block',\n fontSize: '1.1rem',\n letterSpacing: '.015em',\n // fontWeight: 'bold',\n }),\n name: {},\n tagline: {\n fontSize: 8,\n fontWeight: 'bold',\n position: 'absolute',\n top: '100%',\n marginTop: -5,\n background: theme.palette.primary.main,\n color: '#fff',\n borderRadius: 2,\n padding: '1px 3px',\n right: 0,\n },\n navList: {\n width: sideBarWidth,\n fontSize: '1.1em',\n fontWeight: 400,\n lineHeight: 1.5,\n letterSpacing: '0.00938em',\n },\n navListHeader: {\n textAlign: 'center',\n color: 'rgba(255,255,255,0.9)',\n },\n iconFeatures: {\n color: '#95de3c',\n },\n iconDocs: {\n color: '#f8cda9',\n },\n iconSupporters: {\n color: '#e3b546',\n },\n iconDiscuss: {\n color: '#ccc',\n },\n navItemWrapper: {\n position: 'relative',\n },\n navItemWrapperActive: {\n // background: 'rgba(0, 0, 0, 0.08)',\n },\n navItemWrapperActiveCollapsed: {\n background: 'rgba(0, 0, 0, 0.08)',\n },\n navItem: {\n position: 'relative',\n transition: 'background .23s ease',\n '&.active:not(.open)': {\n color: theme.palette.secondary.main,\n backgroundColor: 'white',\n // background: 'rgba(0, 0, 0, 0.08)',\n '& .MuiListItemIcon-root': {\n // color: '#fff',\n color: theme.palette.secondary.main,\n },\n },\n '&.open': {\n color: '#fff',\n '& .MuiListItemIcon-root': {\n color: '#fff',\n },\n },\n },\n navItemPoper: {\n width: sideBarWidth,\n color: 'rgba(0, 0, 0, 0.87)',\n background: sidebarBackground,\n },\n navItemChildren: {\n transition: 'background .23s ease',\n // position: 'absolute',\n },\n navItemChildrenActive: {\n background: 'rgba(0, 0, 0, 0.1)',\n },\n navItemCollapsed: {\n whiteSpace: 'nowrap',\n flexWrap: 'nowrap',\n width: sideBarCollapsedWidth,\n '& $iconToggle': {\n position: 'absolute',\n // bottom: -1,\n fontSize: 14,\n top: '50%',\n marginTop: '-0.5em',\n transform: 'rotate(90deg)',\n right: '3px',\n },\n '&.active': {\n background: 'rgba(0, 0, 0, 0.08)',\n },\n },\n navItemIcon: {\n minWidth: 40,\n color: 'white',\n },\n navItemIconCollapsed: {\n minWidth: 40,\n color: 'rgba(0, 0, 0, 0.87)',\n },\n iconToggle: {\n fontSize: '100',\n },\n iconToggleInactive: {\n opacity: 1,\n },\n iconSpacer: {\n fontSize: 13,\n marginLeft: 6,\n },\n navItemCollapsedWrapper: {\n width: sideBarCollapsedWidth,\n },\n menuDivider: {\n backgroundColor: 'rgba(255,255,255,0.2)',\n },\n logoSvg: props => ({\n display: 'inline-block',\n verticalAlign: 'text-bottom',\n width: props.size,\n height: props.size,\n }),\n path: {\n transition: 'all .3s ease',\n },\n outline: {\n fill: 'white',\n },\n letter: {\n fill: 'red',\n },\n backZone: {},\n };\n};\n\nexport default redTheme;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@clipmx/clip-storybook/dist/components/Button';\nimport { MenuOpenTwoTone as MenuOpenTwoToneIcon } from '@clipmx/clip-storybook/dist/components/Icons';\nimport { SwapHorizTwoTone as SwapHorizTwoToneIcon } from '@clipmx/clip-storybook/dist/components/Icons';\nimport redClipTheme from '../../themes/sideBar/redClip';\n\nconst AppConfiguration = props => {\n const { changeTheme, changeHeaderType, changeIconSettings } = props;\n return (\n \n
\n );\n};\nAppConfiguration.defaultProps = {\n changeTheme: () => true,\n changeHeaderType: () => true,\n changeIconSettings: () => true,\n};\n\nAppConfiguration.propTypes = {\n changeTheme: PropTypes.func,\n changeHeaderType: PropTypes.func,\n changeIconSettings: PropTypes.func,\n};\n\nexport default AppConfiguration;\n","import React from 'react';\nimport { ClipInput } from '@clipmx/clip-storybook/dist/components/Input';\n\nconst InputLabeled = props => {\n const {\n input,\n id,\n inputProps,\n label,\n type,\n helperText,\n meta: { touched, error },\n enableTip,\n className,\n ...rest\n } = props;\n return (\n \n
\n \n \n Activar recepción de notificaciones\n \n
\n );\n});\n\nexport default WebHookToggle;\n","import React, { memo, useContext } from 'react';\nimport { useDispatch } from 'react-redux';\n\nimport Typography from '@clipmx/clip-storybook/dist/components/Typography';\nimport Grid from '@clipmx/clip-storybook/dist/components/Grid';\nimport ClipButton from '@clipmx/clip-storybook/dist/components/Button';\n\nimport { testPostbackWebHook } from '../../../../redux/actions/webhooks';\nimport { AlertContext } from '../../Alert';\n\nimport getConfigValue from '../../../../config/enviromentVariables';\n\nimport useStyles from '../useStyles';\nimport { EVENTS, CleverTap } from '../../../../events';\n\nconst WebHookTest = memo(() => {\n const classes = useStyles();\n const dispatch = useDispatch();\n const { openAlert } = useContext(AlertContext);\n\n const handleClick = () => {\n dispatch(\n testPostbackWebHook(\n () => {\n CleverTap.event(EVENTS.WEBHOOKS.TEST_NOTIFICATION_SENT);\n openAlert({ severity: 'success', message: `La notificación de prueba se ha enviado exitosamente` });\n },\n () => {\n CleverTap.event(EVENTS.WEBHOOKS.TEST_NOTIFICATION_FAILED);\n openAlert({\n severity: 'error',\n message: 'Hubo un error al enviar la notificación de prueba. Comprueba tu URL y vuelve a intentarlo',\n });\n }\n )\n );\n };\n\n return (\n \n \n \n \n Notificación de prueba\n \n \n \n \n {`Envía una notificación de prueba a tu endpoint, el contenido de la respuestas\n se envía en formato JSON. Puedes saber más sobre los casos de notificación en la `}\n \n referencia técnica de Postback webhooks\n \n \n \n \n \n \n Enviar notificación\n \n \n
\n );\n});\n\nexport default WebHookTest;\n","import React, { memo, useEffect } from 'react';\nimport { useSelector } from 'react-redux';\n\nimport CardHeader from '@clipmx/clip-storybook/dist/components/Card/CardHeader';\nimport CardContent from '@clipmx/clip-storybook/dist/components/Card/CardContent';\n\nimport Card from '@clipmx/clip-storybook/dist/components/Card';\nimport Typography from '@clipmx/clip-storybook/dist/components/Typography';\n\nimport WebHookForm from '../forms/WebhookForm';\nimport WebHookToggle from './WebHookToggle';\nimport WebHookTest from './WebHookTest';\n\nimport useStyles from './useStyles';\nimport { EVENTS, CleverTap } from '../../../events';\n\nconst WebHookCard = memo(() => {\n const notificationStatus = useSelector(state => state?.webhooks?.enabled);\n const webHookUrl = useSelector(state => state?.webhooks?.destination);\n\n const showWebHookTest = !!notificationStatus && !!webHookUrl;\n const showWebHookToggle = !!webHookUrl;\n\n const classes = useStyles();\n\n useEffect(() => {\n const { WEBHOOKS } = EVENTS;\n CleverTap.event(WEBHOOKS.SETUP_VIEWED, {\n IS_ENABLED: showWebHookTest && showWebHookToggle,\n });\n }, [showWebHookTest, showWebHookToggle]);\n\n return (\n \n \n Postback Webhooks\n \n \n \n {loading ? \n \n
\n );\n};\n\nWebHooks.propTypes = {\n classes: PropTypes.object,\n};\n\nexport default WebHooks;\n","import { useContext, useState } from 'react';\nimport { DialogContext } from '@clipmx/clip-storybook/dist/components/Dialog/dialogContext';\nimport { CleverTap, EVENTS } from '../../../events';\nimport { AlertContext } from '../Alert';\nimport Icons from '../Icons';\nimport { ClipTypography } from '@clipmx/clip-storybook/dist/components/Typography/Typography';\nimport { ClipButton } from '@clipmx/clip-storybook/dist/components/Button/Button';\nimport { useHistory } from 'react-router-dom';\nimport { CircularProgress } from '@material-ui/core';\nimport { PRODUCTIVE_MODE, SANDBOX_MODE } from '../../../common/authorizationModeType';\n\nexport const useDetailCredential = ({\n apiSecretCredential,\n apiKeyCredential,\n deleteApiKey,\n nameCredential,\n typeCredential,\n}) => {\n const { dialogActions } = useContext(DialogContext);\n const history = useHistory();\n const [isShowKeySecret, setIsShowKeySecret] = useState(false);\n\n const { openAlert } = useContext(AlertContext);\n\n const copyClipboard = (type, data) => {\n try {\n navigator.clipboard.writeText(data);\n openAlert({ severity: 'success', message: `Copiaste la clave ${type === 'apiKey' ? 'API' : 'secreta'}.` });\n } catch (error) {\n openAlert({ severity: 'error', message: 'Hubo un error al copiar la clave. Por favor inténtalo de nuevo.' });\n }\n };\n\n const processResultRemoveCredential = (isSuccessProcess = true, callbackCloseModal = () => {}) => {\n CleverTap.event(EVENTS.API_KEYS.DELETE_APP_SUCCEEDED);\n dialogActions.closeDialog('DeleteApiKeyForm');\n openAlert({\n severity: isSuccessProcess ? 'success' : 'error',\n message: isSuccessProcess\n ? `Eliminaste la credencial ${nameCredential}.`\n : 'Hubo un error al eliminar la credencial. Intentalo más tarde',\n });\n if (isSuccessProcess) {\n history.push('/credentials');\n }\n callbackCloseModal();\n };\n\n const ConfirmModal = () => {\n const [isProcessDelete, setIsProcessDelete] = useState(false);\n const mode = typeCredential === 'prod' ? PRODUCTIVE_MODE : SANDBOX_MODE;\n return (\n \n \n {`¿Deseas eliminar la credencial ${nameCredential}?`}\n \n
\n );\n };\n\n return {\n props: {\n isShowKeySecret,\n },\n methods: {\n showKeySecret: () => {\n setIsShowKeySecret(!isShowKeySecret);\n },\n deleteCredential: () => {\n CleverTap.event(EVENTS.API_KEYS.APP_DETAIL_DELETE_CLICK);\n dialogActions.registerDialog('DeleteApiKeyForm', {\n open: true,\n type: 'form',\n minWidth: 'xl',\n title: 'Eliminar credencial',\n children: \n dialogActions.closeDialog('DeleteApiKeyForm')}\n data-testid=\"button-return-modal-delete-credential\"\n >\n Regresar\n \n {\n setIsProcessDelete(true);\n await deleteApiKey(\n apiKeyCredential,\n () => processResultRemoveCredential(true, setIsProcessDelete),\n () => processResultRemoveCredential(false, setIsProcessDelete),\n mode\n );\n }}\n >\n {isProcessDelete ? (\n
\n \n {apiSecretCredential !== '' ? (\n <>\n Recuerda usar las credenciales correctas dependiendo del ambiente en el que estés trabajando. Si olvidas\n tu clave secreta, debes crear una credencial nueva.\n \n ) : (\n <>\n Por seguridad tu clave secreta ya no esta disponible. Si la olvidas o extravias, deberas crear una\n credencial nueva.\n \n )}\n
\n ),\n IconCopy: ({ type, data }) => (\n\n copyClipboard(type, data)} />\n
\n ),\n },\n };\n};\n","/* eslint max-len: 0 */\nimport React from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { ClipTypography } from '@clipmx/clip-storybook/dist/components/Typography/Typography';\nimport { Checkbox, FormControlLabel, TextField } from '@material-ui/core';\nimport Icons from '../Icons';\nimport { useDetailCredential } from './useDetailCredential';\nimport './DetailCredential.css';\nimport { toDateLong } from '../../../helpers/dateHelpers';\nimport { bindActionCreators } from 'redux';\nimport { connect } from 'react-redux';\nimport { deleteApiApplication } from '../../../redux/actions/merchants';\n\nconst DetailCredential = ({\n className,\n apiKeyCredential = '',\n apiSecretCredential = '',\n nameCredential = '',\n createdAt = '',\n typeCredential = 'prod' /* or test */,\n deleteApiApplication: deleteApiKey,\n}) => {\n const {\n props: { isShowKeySecret },\n methods: { showKeySecret, deleteCredential },\n microcomponents: { Legend, IconCopy },\n } = useDetailCredential({ apiSecretCredential, apiKeyCredential, deleteApiKey, nameCredential, typeCredential });\n return (\n \n
\n \n
\n \n );\n};\n\nDetailCredential.defaultProps = {\n className: '',\n};\n\nDetailCredential.propTypes = {\n className: PropTypes.string,\n};\n\nfunction mapDispatchToProps(dispatch) {\n return bindActionCreators({ deleteApiApplication }, dispatch);\n}\n\nexport default connect(null, mapDispatchToProps)(DetailCredential);\n","import useMediaQuery from '@clipmx/clip-storybook/dist/hooks/useMediaQuery';\nimport useTheme from '@clipmx/clip-storybook/dist/hooks/useTheme';\nimport { useLocation, useHistory } from 'react-router-dom';\nimport { DialogContext } from '@clipmx/clip-storybook/dist/components/Dialog/dialogContext';\nimport { useContext } from 'react';\nimport { ClipTypography } from '@clipmx/clip-storybook/dist/components/Typography/Typography';\nimport { ClipButton } from '@clipmx/clip-storybook/dist/components/Button/Button';\n\nexport const useDetailCredentialView = () => {\n const history = useHistory();\n const theme = useTheme();\n const { state = {} } = useLocation();\n const { nameCredential, apiKeyCredential, apiSecretCredential, typeCredential, createdAt } = state;\n const { dialogActions } = useContext(DialogContext);\n\n const isMobil = useMediaQuery(theme.breakpoints.down('xs'));\n\n const CloseModalReturn = () => dialogActions.closeDialog('BackToCredentialsList');\n const ReturToList = () =>\n history.push({\n pathname: `/credentials`,\n });\n\n return {\n props: {\n isMobil,\n nameCredential,\n apiKeyCredential,\n apiSecretCredential,\n createdAt,\n typeCredential,\n },\n methods: {\n BackToList: (isReturnShowSecretKey = false) => {\n if (isReturnShowSecretKey === false) {\n ReturToList();\n return;\n }\n\n dialogActions.registerDialog('BackToCredentialsList', {\n open: true,\n type: 'form',\n maxWidth: 'xl',\n title: '¿Quieres salir?',\n children: (\n \n \n Una vez que lo hagas, esta clave secreta ya no estará disponible. Asegúrate de guardarla en un lugar\n seguro.\n \n
\n ),\n name: 'BackToCredentialsList',\n });\n },\n },\n };\n};\n","/* eslint max-len: 0 */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport DetailCredential from '../../common/DetailCredential';\nimport { ClipButton } from '@clipmx/clip-storybook/dist/components/Button/Button';\nimport Icons from '../../common/Icons';\nimport './DetailCredentialView.css';\nimport { useDetailCredentialView } from './useDetailCredentialView';\n\nconst DetailCredentialView = () => {\n const {\n props: { isMobil, apiKeyCredential, apiSecretCredential = '', nameCredential, createdAt, typeCredential },\n methods: { BackToList },\n } = useDetailCredentialView();\n return (\n \n \n Cancelar\n \n {\n CloseModalReturn();\n ReturToList();\n }}\n >\n Salir\n \n
\n \n
\n );\n};\n\nDetailCredentialView.defaultProps = {\n className: '',\n};\n\nDetailCredentialView.propTypes = {\n className: PropTypes.string,\n};\n\nexport default DetailCredentialView;\n","import React from 'react';\nimport { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';\n\nimport RouteWithLayout from './RouteWithLayout';\n\nimport DashboardLayout from '../components/layouts/DashboardLayout';\nimport ApiCredentials from '../components/views/ApiCredentials';\nimport AppConfiguration from '../components/views/AppConfiguration';\nimport WebHooks from '../components/views/WebHooks';\nimport DetailCredentialView from '../components/views/DetailCredentialView';\n\nexport const AppRouterComponent = BrowserRouter;\n\nconst Router = props => {\n return (\n \n
\n \n \n \n \n \n
\n );\n};\nexport default Router;\n","/* eslint no-param-reassign: \"off\" */\n/* eslint consistent-return: \"off\" */\nimport produce from 'immer';\nimport { GET_SANDBOX_TOKEN, LOGIN_WITH_TOKEN, LOGOUT } from '../../actions/session';\nimport {\n MERCHANT_INFO,\n MERCHANT_API_KEY,\n MERCHANT_CREATE_API_APPLICATION,\n MERCHANT_DELETE_API_KEY,\n MERCHANT_VERIFIED_ACCOUNT,\n} from '../../actions/merchants';\nimport { successResponse, errorResponse, requestState } from '../../../helpers/reduxUtils';\nimport { SANDBOX_MODE } from '../../../common/authorizationModeType';\n\nexport const PENDING = 1;\nexport const NO_AUTHENTICATED = 2;\nexport const IS_AUTHENTICATED = 3;\n\nexport const ADMIN = 'ADMIN';\n\nexport const initialState = {\n userInfo: null,\n merchantInfo: null,\n apiKey: null,\n apiKeySandBox: null,\n tokenSandbox: null,\n status: PENDING,\n isVerifiedAccount: null,\n};\n\nconst session = (state = initialState, action = {}) =>\n produce(state, draft => {\n const { type, payload } = action;\n switch (type) {\n case successResponse('get', LOGIN_WITH_TOKEN): {\n draft.userInfo = payload.data;\n break;\n }\n case successResponse('get', MERCHANT_INFO): {\n draft.merchantInfo = payload.data;\n draft.status = IS_AUTHENTICATED;\n break;\n }\n case requestState('get', MERCHANT_API_KEY): {\n draft.apiKey = null;\n draft.apiKeySandBox = null;\n break;\n }\n case successResponse('post', GET_SANDBOX_TOKEN): {\n draft.tokenSandbox = payload?.data?.token;\n break;\n }\n case errorResponse('post', GET_SANDBOX_TOKEN): {\n draft.status = NO_AUTHENTICATED;\n break;\n }\n case requestState('post', MERCHANT_CREATE_API_APPLICATION): {\n break;\n }\n case successResponse('post', MERCHANT_CREATE_API_APPLICATION): {\n draft.apiKey = payload.data;\n break;\n }\n case successResponse('get', MERCHANT_API_KEY): {\n if (payload?.data?.query?.mode === SANDBOX_MODE) {\n draft.apiKeySandBox = payload.data;\n } else {\n draft.apiKey = payload.data;\n }\n break;\n }\n case errorResponse('post', MERCHANT_CREATE_API_APPLICATION):\n break;\n case errorResponse('get', MERCHANT_API_KEY): {\n draft.apiKey = null;\n draft.apiKeySandBox = null;\n break;\n }\n case successResponse('delete', MERCHANT_DELETE_API_KEY): {\n break;\n }\n case requestState('delete', MERCHANT_DELETE_API_KEY): {\n break;\n }\n case errorResponse('delete', MERCHANT_DELETE_API_KEY): {\n break;\n }\n case LOGOUT:\n case errorResponse('get', MERCHANT_INFO):\n case errorResponse('get', LOGIN_WITH_TOKEN): {\n draft.status = NO_AUTHENTICATED;\n draft.userInfo = initialState.userInfo;\n draft.merchantInfo = initialState.merchantInfo;\n draft.tokenSandbox = initialState.tokenSandbox;\n break;\n }\n case successResponse('get', MERCHANT_VERIFIED_ACCOUNT): {\n if (payload?.data?.KYC === 'KYC_ACCEPTED') {\n draft.isVerifiedAccount = true;\n } else {\n draft.isVerifiedAccount = false;\n }\n break;\n }\n case errorResponse('get', MERCHANT_VERIFIED_ACCOUNT): {\n draft.isVerifiedAccount = false;\n break;\n }\n default:\n break;\n }\n });\n\nexport default session;\n","import produce from 'immer';\n\nimport { successResponse, requestState } from '../../../helpers/reduxUtils';\nimport {\n POSTBACK_GET_INFO,\n POSTBACK_UPDATE_WEBHOOK,\n POSTBACK_UPDATE_NOTIFICATION_STATUS,\n} from '../../actions/webhooks';\n\nexport const initialState = {\n loading: null,\n destination: null,\n enabled: null,\n};\n\nconst webhooksReducer = (state = initialState, action = {}) =>\n produce(state, draft => {\n const { type, payload } = action;\n switch (type) {\n case requestState('get', POSTBACK_GET_INFO): {\n draft.loading = true;\n break;\n }\n case successResponse('get', POSTBACK_GET_INFO): {\n draft.loading = null;\n draft.destination = payload.data?.notification_postback?.destination;\n draft.enabled = payload.data?.notification_postback?.enabled;\n break;\n }\n case successResponse('post', POSTBACK_UPDATE_WEBHOOK): {\n if (isEmpty(payload.data)) {\n draft.destination = true;\n draft.enabled = true;\n break;\n }\n draft.destination = payload.data?.notification?.postback?.destination;\n draft.enabled = payload.data?.notification?.postback?.enabled;\n break;\n }\n case successResponse('put', POSTBACK_UPDATE_NOTIFICATION_STATUS): {\n draft.destination = payload.data.endpoint;\n draft.enabled = payload.data.enabled;\n break;\n }\n default:\n break;\n }\n });\n\nconst isEmpty = obj => {\n return Object.keys(obj).length === 0;\n};\n\nexport default webhooksReducer;\n","import { combineReducers } from 'redux';\nimport { reducer as reduxFormReducer } from 'redux-form';\nimport session from './session';\nimport webhooks from './webhooks';\n\nexport default combineReducers({\n session,\n webhooks,\n form: reduxFormReducer,\n});\n","import { apiSendData, POST, PUT, PATCH, DELETE, GET } from '../../helpers/request';\nimport { getActionTypeInfo, createSuccessResponse, createErrorResponse, isFunction } from '../../helpers/reduxUtils';\nimport { PRODUCTIVE_MODE } from '../../common/authorizationModeType';\n\nfunction processMiddleware(action, store, actionInfo) {\n const {\n payload: {\n route,\n query,\n data,\n success: successAction,\n failure: failureAction,\n apiEndPoint,\n fullRoute,\n mode = PRODUCTIVE_MODE,\n headers = {},\n },\n } = action;\n\n function success(res) {\n store.dispatch(createSuccessResponse(actionInfo, res));\n if (isFunction(successAction)) {\n successAction(res, store);\n }\n }\n\n function failure(error) {\n store.dispatch(createErrorResponse(actionInfo, error));\n if (isFunction(failureAction)) {\n failureAction(error, store);\n }\n throw error;\n }\n const autoHandleError = !isFunction(failure);\n\n switch (actionInfo.verb) {\n case 'GET':\n apiSendData(GET, route, query, {}, mode, apiEndPoint, fullRoute, headers, autoHandleError, store)\n .then(success, failure)\n .catch(e => console.log(e));\n break;\n case 'PUT':\n apiSendData(PUT, route, {}, data, mode, apiEndPoint, fullRoute, headers, autoHandleError, store)\n .then(success, failure)\n .catch(e => console.log(e));\n break;\n case 'POST':\n apiSendData(POST, route, {}, data, mode, apiEndPoint, fullRoute, headers, autoHandleError, store)\n .then(success, failure)\n .catch(e => console.log(e));\n break;\n case 'PATCH':\n apiSendData(PATCH, route, {}, data, mode, apiEndPoint, fullRoute, headers, autoHandleError, store)\n .then(success, failure)\n .catch(e => console.log(e));\n break;\n case 'DELETE':\n apiSendData(DELETE, route, {}, data, mode, apiEndPoint, fullRoute, headers, autoHandleError, store)\n .then(success, failure)\n .catch(e => console.log(e));\n break;\n default:\n throw new Error('Bad format on the API method name');\n }\n}\n\nconst apiResolveMiddleware = store => next => action => {\n const actionInfo = getActionTypeInfo(action.type);\n if (actionInfo.correctActionType === true) {\n processMiddleware(action, store, actionInfo);\n }\n next(action);\n};\n\nexport default apiResolveMiddleware;\n","import React from 'react';\nimport { ClipTypography } from '@clipmx/clip-storybook/dist/components/Typography/Typography';\nimport CircularProgress from '@clipmx/clip-storybook/dist/components/CircularProgress';\nimport './Loading.css';\n\nconst Loading = () => {\n return (\n \n \n Cargando...\n \n
\n );\n};\n\nexport default Loading;\n","import React, { Component, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport { getSandboxTokenAndLoginUser, exitApp } from '../../redux/actions/session';\nimport { PENDING, NO_AUTHENTICATED, IS_AUTHENTICATED, ADMIN } from '../../redux/reducers/session';\nimport getConfigValue from '../../config/enviromentVariables';\nimport JwtAuthService from '../../services/jwtService';\nimport CleverTap from '../../events';\nimport { PRODUCTIVE_MODE } from '../../common/authorizationModeType';\nimport Loading from './Loading/Loading';\n\nclass AuthGuard extends Component {\n state = {\n showContent: false,\n merchantInfoAndUserInfoLoaded: false,\n };\n\n componentDidMount() {\n this.authGuard();\n }\n\n shouldComponentUpdate(nextProps, nextState) {\n const { status } = this.props;\n const { showContent } = this.state;\n return nextProps.status !== status || nextState.showContent !== showContent || nextProps.tokenSandbox !== null;\n }\n\n componentDidUpdate() {\n const { merchantInfoAndUserInfoLoaded } = this.state;\n const { status, userInfo, merchantInfo, tokenSandbox } = this.props;\n const canProcessAuth = status === IS_AUTHENTICATED && !!userInfo && !!merchantInfo && !!tokenSandbox;\n this.authGuard();\n if (canProcessAuth && !merchantInfoAndUserInfoLoaded) {\n // eslint-disable-next-line react/no-did-update-set-state\n this.setState({ merchantInfoAndUserInfoLoaded: true });\n this.setState({ showContent: true });\n }\n }\n\n redirectRoute = () => {\n const token = JwtAuthService.getToken(PRODUCTIVE_MODE);\n const uri = token ? '' : '/users/sign_in?loginFrom=developerPortal';\n window.location.replace(`${getConfigValue('merchantDashboard')}${uri}`);\n };\n\n authGuard = () => {\n const { merchantInfo, userInfo, status, tokenSandbox, getSandboxTokenAndLoginUser: login } = this.props;\n if (status === NO_AUTHENTICATED || (userInfo && userInfo.role !== ADMIN)) {\n this.redirectRoute();\n return null;\n }\n if (status === PENDING && !userInfo && !merchantInfo && !tokenSandbox) {\n login();\n }\n\n if (status === IS_AUTHENTICATED && !!merchantInfo && !!userInfo && !!tokenSandbox) this.logProfile();\n\n return null;\n };\n\n logProfile = () => {\n const { userInfo } = this.props;\n CleverTap.profile(userInfo);\n };\n\n render() {\n const { showContent } = this.state;\n const { status, userInfo, merchantInfo, tokenSandbox, children } = this.props;\n const canProcessAuth = status === IS_AUTHENTICATED && !!userInfo && !!merchantInfo && !!tokenSandbox;\n return canProcessAuth && showContent ?