Commit fd1935fe authored by Dmytro Zavgorodniy's avatar Dmytro Zavgorodniy

[RNA-761] Move setup Router configs from tipsi-react-app

parent 168c1693
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Router } from 'tipsi-router'
import { connect } from 'react-redux'
import { createSelector } from 'reselect'
import Stripe from 'tipsi-stripe'
import md5 from 'md5'
import { addCard, selectCard } from '../../actions'
import { userCardsSelector } from '../../selectors'
import { getCardBrand } from '../../utils/getCardBrand'
const FOUR_DIGITS_CVC_ISSUER = 'American Express'
const mapStateToProps = createSelector(
userCardsSelector,
userCards => ({ userCards })
)
const mapDispatchToProps = { addCard, selectCard }
export default function enhanceAddCard(ComposedComponent, NavigationButton) {
class Wrapper extends Component {
static propTypes = {
// map state to props
userCards: PropTypes.object.isRequired,
// map dispatch to props
addCard: PropTypes.func.isRequired,
selectCard: PropTypes.func.isRequired,
}
state = {
loading: false,
valid: false,
params: {},
errorMessage: undefined,
}
componentWillMount() {
Router.config({
navigationBar: {
title: 'Add New Card',
renderRight: ({ params }) => (
<NavigationButton
title="Done"
onPress={this.handleSubmit}
disabled={!params.active}
loading={params.loading}
testId="doneButton"
/>
),
},
})
}
isValidForm = () => {
const { valid, params: { holder = '', number = '', expMonth = '', expYear = '' } } = this.state
if (valid && !!holder.replace(/\s+/g, '') && number && expMonth && expYear) {
// Generate card unique id
const cardUniqueId = md5(`${number}_${expMonth}_${expYear}`)
// Check if card already exists
return !this.props.userCards[cardUniqueId]
}
return false
}
updateRouteParamsWithLoading = (loading) => {
Router.updateParams({ active: this.isValidForm(), loading })
}
updateState = (nextState) => {
this.setState(nextState, () => {
this.updateRouteParamsWithLoading(nextState.loading)
})
}
shouldFocusCardholderField = ({ cvc, number }) => (
(cvc.length === 3 && getCardBrand(number) !== FOUR_DIGITS_CVC_ISSUER) || cvc.length > 3
)
handleParamsChanged = (valid, params) => {
this.updateState({
valid,
errorMessage: undefined,
params: { ...this.state.params, ...params },
})
return { shouldFocusCardholder: valid && this.shouldFocusCardholderField(params) }
}
handleCardHolderChanged = (holder) => {
this.updateState({
errorMessage: undefined,
params: { ...this.state.params, holder: holder.toUpperCase() },
})
}
handleSubmit = async () => {
if (!this.isValidForm()) {
return
}
const { params, loading } = this.state
if (loading) {
return
}
try {
this.setState({ loading: true })
this.updateRouteParamsWithLoading(true)
const { tokenId, card: { last4, brand } } = await Stripe.createTokenWithCard(params)
const { number, cvc, expMonth, expYear, holder } = params
const id = md5(`${number}_${expMonth}_${expYear}`)
if (this.props.userCards.userCards.order.includes(id)) {
this.setState({ errorMessage: 'CARD ALREADY EXISTS' })
return
}
await this.props.addCard({
id,
tokenId,
last4,
brand,
name: holder,
number,
cvc,
expMonth,
expYear,
})
this.props.selectCard(id)
Router.pop()
} finally {
this.setState({ loading: false })
// this.updateRouteParamsWithLoading(false)
}
}
export default function enhanceAddCard(ComposedComponent) {
return class Wrapper extends Component {
render() {
return (
<ComposedComponent {...this.props} />
<ComposedComponent
params={this.state.params}
errorMessage={this.state.errorMessage}
handleParamsChanged={this.handleParamsChanged}
handleCardHolderChanged={this.handleCardHolderChanged}
handleSubmit={this.handleSubmit}
/>
)
}
}
return connect(mapStateToProps, mapDispatchToProps)(Wrapper)
}
import React, { Component } from 'react'
import { Router, NavigationStyles } from 'tipsi-router'
export default function enhanceAddShipping(ComposedComponent) {
return class Wrapper extends Component {
componentWillMount() {
Router.config({
navigationBar: {
title: 'Add shipping address',
renderRight: () => null,
},
styles: {
...NavigationStyles.SlideVertical,
gestures: null,
},
})
}
render() {
return (
<ComposedComponent {...this.props} />
......
import React, { Component } from 'react'
import { Router } from 'tipsi-router'
import { Router, NavigationStyles } from 'tipsi-router'
export default function enhanceLogin(ComposedComponent) {
return class Wrapper extends Component {
componentWillMount() {
Router.config({
navigationBar: {
visible: false,
},
styles: {
...NavigationStyles.SlideVertical,
gestures: null,
},
})
}
dismissModal = (user, route = { params: {} }) => {
Router.dismissModal()
if (route.params.redirect) {
......@@ -12,6 +24,7 @@ export default function enhanceLogin(ComposedComponent) {
)
}
}
render() {
return (
<ComposedComponent {...this.props} dismissModal={this.dismissModal} />
......
import React, { Component } from 'react'
import { Router, NavigationStyles } from 'tipsi-router'
export default function enhanceAddPaymentContact(ComposedComponent) {
export default function enhanceAddPaymentContact(ComposedComponent, LeftButton) {
return class Wrapper extends Component {
componentWillMount() {
Router.config({
navigationBar: {
title: 'Add contact phone',
renderLeft: ({ params }) => (
<LeftButton {...params} />
),
renderRight: () => null,
},
styles: {
...NavigationStyles.SlideVertical,
gestures: null,
},
})
}
render() {
return (
......
import React, { Component } from 'react'
import { Router, NavigationStyles } from 'tipsi-router'
export default function enhanceSelectPaymentContact(ComposedComponent) {
export default function enhanceSelectPaymentContact(ComposedComponent, LeftButton) {
return class Wrapper extends Component {
componentWillMount() {
Router.config({
navigationBar: {
title: 'Contact Selection',
renderLeft: ({ params }) => (
<LeftButton {...params} />
),
renderRight: null,
},
styles: {
...NavigationStyles.SlideVertical,
gestures: null,
},
})
}
render() {
return (
......
import React, { Component } from 'react'
import { NavigationStyles } from 'tipsi-router'
export default function enhancePaymentDetails(ComposedComponent) {
return class Wrapper extends Component {
returnBackConfig = {
styles: {
...NavigationStyles.Fade,
sceneAnimations: props => ({
...NavigationStyles.Fade.sceneAnimations(props),
backgroundColor: 'rgba(0,0,0,0.5)',
shadowOpacity: 0,
opacity: 1,
}),
},
}
render() {
return (
<ComposedComponent {...this.props} />
<ComposedComponent returnBackConfig={this.returnBackConfig} {...this.props} />
)
}
}
......
import React, { Component } from 'react'
import { Router, NavigationStyles } from 'tipsi-router'
export default function enhanceSelectShipping(ComposedComponent) {
export default function enhanceSelectShipping(ComposedComponent, LeftButton) {
return class Wrapper extends Component {
componentWillMount() {
Router.config({
navigationBar: {
title: 'Address Selection',
renderLeft: ({ params }) => (
<LeftButton {...params} />
),
renderRight: null,
},
styles: {
...NavigationStyles.SlideVertical,
gestures: null,
},
})
}
render() {
return (
<ComposedComponent {...this.props} />
......
......@@ -79,8 +79,7 @@ function enhanceStore(ComposedComponent, StoreSearchInput, FiltersModal, Filters
this.props.analyticsLogEvent('ui_storeTabView_changeTab_click', { currentValue, nextValue })
if (isEmpty(this.props.title)) {
Router.setTitle(tabItems[tabIndex].title)
Router.updateParams()
Router.updateTitle(tabItems[tabIndex].title)
}
this.setState({ tabIndex })
......
......@@ -6863,15 +6863,6 @@
"integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=",
"dev": true
},
"tipsi-stripe": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/tipsi-stripe/-/tipsi-stripe-4.0.0.tgz",
"integrity": "sha1-I2sLSGg9HCbtd0c0nWZyo5H6sk0=",
"dev": true,
"requires": {
"prop-types": "15.6.0"
}
},
"tmp": {
"version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
......
......@@ -23,15 +23,16 @@
"redux-persist": "^4.1.0",
"redux-persist-transform-filter": "0.0.6",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.1",
"tipsi-stripe": "4.0.0"
"reselect": "^3.0.1"
},
"peerDependencies": {
"redux-form": "^7.1.2",
"normalizr": "^3.2.2",
"@expo/ex-navigation": "3.1.0",
"react-native-firebase-analytics": "3.0.2",
"tipsi_api": "git+ssh://git@git.gettipsi.com/tipsi_frontend/tipsi_api.git#1.30.0"
"tipsi_api": "git+ssh://git@git.gettipsi.com/tipsi_frontend/tipsi_api.git#1.30.0",
"tipsi-stripe": "4.0.0",
"md5": "^2.2.1"
},
"dependencies": {}
}
......@@ -11,7 +11,6 @@ import {
} from 'tipsi_api/selectors'
import { searchInventory, clearPaginationCache } from 'tipsi_api/actions'
import { Schemas } from 'tipsi_api/middleware'
import { withNavigation } from '@expo/ex-navigation'
import { STORE_SEARCH_KEY } from '../actions'
const getStoreId = (state, props) => props.storeId
......@@ -78,5 +77,5 @@ export const drinkListSelector = ({ component, drinkType, listLabel }) => {
),
})
return connect(mapStateToProps, mapDispatchToProps)(withNavigation(component))
return connect(mapStateToProps, mapDispatchToProps)(component)
}
......@@ -6,9 +6,16 @@ import createFilter from 'redux-persist-transform-filter'
import thunk from 'redux-thunk'
import uuidv4 from 'uuid/v4'
import { createNavigationEnabledStore, NavigationReducer as navigation } from 'tipsi-router'
import { entities, relations, auth, checkApi, meta, paginations } from 'tipsi_api/reducers'
import {
entities,
relations,
auth,
checkApi,
meta,
paginations,
deliveryZone,
} from 'tipsi_api/reducers'
import createApiMiddleware from 'tipsi_api/middleware'
import logger from 'redux-logger'
import createCleanableReducer from './reducers/createCleanableReducer'
import * as reducers from './reducers'
import { analyticsMiddleware } from './middlewares'
......@@ -31,7 +38,7 @@ const tipsiMiddleware = createApiMiddleware({
const middleware = [tipsiMiddleware, thunk, analyticsMiddleware]
// if (__DEV__) {
// middleware.push(logger)
// middleware.push(require('redux-logger')())
// }
const createStoreWithNavigation = createNavigationEnabledStore({
......@@ -45,6 +52,7 @@ const combinedReducers = combineReducers({
relations,
auth,
checkApi,
deliveryZone,
meta,
paginations,
navigation,
......@@ -64,6 +72,7 @@ export const persistorRehydration = new Promise((resolve) => {
'entities',
'userCards',
'userAddresses',
'userContacts',
'userDelivery',
'ageConfirmation',
],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment