Add pricing page

src/navigation/index.js

@@ -20,6 +20,7 @@ import StoreDashboard from './store/Dashboard';
 import StoreDelivery from './store/Delivery';
 import StoreNewDeliveryAddress from './store/NewDeliveryAddress';
 import StoreNewDeliveryForm from './store/NewDeliveryForm';
+import StoreNewDeliveryPrice from './store/NewDeliveryPrice';
 
 import CheckoutPaymentMethodCard from './checkout/PaymentMethodCard';
 import CheckoutPaymentMethodCashOnDelivery from './checkout/PaymentMethodCashOnDelivery';
@@ -42,10 +43,10 @@ import CourierSettingsTags from './courier/Tags';
 import CourierTaskListPage from './courier/TaskListPage';
 import CourierTasksPage from './courier/TasksPage';
 
-import CheckoutPayment from './checkout/Payment';
 import CheckoutLogin from './checkout/Login';
 import CheckoutMercadopago from './checkout/Mercadopago';
 import CheckoutMoreInfos from './checkout/MoreInfos';
+import CheckoutPayment from './checkout/Payment';
 import CheckoutProductDetails from './checkout/ProductDetails';
 import CheckoutShippingDate from './checkout/ShippingDate';
 import CheckoutSummary from './checkout/Summary';
@@ -132,6 +133,7 @@ export default {
   StoreDelivery,
   StoreNewDeliveryAddress,
   StoreNewDeliveryForm,
+  StoreNewDeliveryPrice,
   SearchForm,
   Carts,
   AddressDetails,

src/navigation/navigators/StoreNavigator.js

@@ -60,6 +60,13 @@ const NewDeliveryNavigator = () => (
         headerShown: false,
       }}
     />
+    <NewDeliveryStack.Screen
+      name="StoreNewDeliveryPrice"
+      component={screens.StoreNewDeliveryPrice}
+      options={{
+        headerShown: false,
+      }}
+    />
   </NewDeliveryStack.Navigator>
 );
 const RootStack = createStackNavigator();

src/navigation/store/NewDeliveryForm.js

@@ -16,7 +16,6 @@ import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import { connect, useDispatch } from 'react-redux';
 
 import {
-  createDelivery,
   loadPackages,
   loadTimeSlot,
   loadTimeSlotChoices,
@@ -172,7 +171,7 @@ function NewDelivery(props) {
       },
     };
 
-    dispatch(createDelivery(delivery, () => navigation.navigate('StoreHome')));
+    navigation.navigate('StoreNewDeliveryPrice', { delivery });
   }
 
   function validate(values) {
@@ -296,7 +295,7 @@ function NewDelivery(props) {
         setFieldValue,
         setFieldTouched,
       }) => (
-        <ModalFormWrapper handleSubmit={handleSubmit} t={t} isSubmit>
+        <ModalFormWrapper handleSubmit={handleSubmit} t={t}>
           {/* <View style={[styles.formGroup]}>
             <Text style={styles.label}>
               {t('STORE_NEW_DELIVERY_ADDRESS')}

src/navigation/store/NewDeliveryPrice.js

@@ -0,0 +1,65 @@
+import { Formik } from 'formik';
+import { t } from 'i18next';
+import { Text, View } from 'native-base';
+import { withTranslation } from 'react-i18next';
+import { StyleSheet } from 'react-native';
+import { connect, useDispatch } from 'react-redux';
+import { createDelivery, getPrice } from '../../redux/Store/actions';
+import FormInput from './components/FormInput';
+import ModalFormWrapper from './ModalFormWrapper';
+
+function NewDeliveryPrice(props) {
+  const dispatch = useDispatch();
+  const delivery = props.route.params?.delivery;
+  if (!delivery) return;
+  dispatch(getPrice(delivery));
+
+  function submit(values) {
+    dispatch(
+      createDelivery(values, () => {
+        props.navigation.navigate('StoreHome');
+      }),
+    );
+  }
+
+  return (
+    <Formik
+      initialValues={delivery}
+      onSubmit={submit}
+      validateOnBlur={false}
+      validateOnChange={false}>
+      {({ handleSubmit }) => (
+        <ModalFormWrapper handleSubmit={handleSubmit} t={t} isSubmit>
+          <View style={styles.formGroup}>
+            <Text style={styles.label}>Price excluding tax</Text>
+            <FormInput value={props.priceExcludingTax} editable={false} />
+          </View>
+          <View style={styles.formGroup}>
+            <Text style={styles.label}>Total</Text>
+            <FormInput value={props.price} editable={false} />
+          </View>
+        </ModalFormWrapper>
+      )}
+    </Formik>
+  );
+}
+
+const styles = StyleSheet.create({
+  label: {
+    marginBottom: 8,
+    fontWeight: '500',
+  },
+  formGroup: {
+    marginBottom: 10,
+  },
+});
+
+function mapStateToProps(state) {
+  const price = state.store.price;
+  const priceExcludingTax = state.store.priceExcludingTax;
+  return {
+    price,
+    priceExcludingTax,
+  };
+}
+export default connect(mapStateToProps)(withTranslation()(NewDeliveryPrice));

src/redux/Store/actions.js

@@ -17,6 +17,29 @@ export const LOAD_TIME_SLOTS_SUCCESS = '@store/LOAD_TIME_SLOTS_SUCCESS';
 export const LOAD_TIME_SLOT_CHOICES_SUCCESS =
   '@store/LOAD_TIME_SLOT_CHOICES_SUCCESS';
 export const LOAD_PACKAGES_SUCCESS = '@store/LOAD_PACKAGES_SUCCESS';
+export const GET_PRICE_SUCCESS = '@store/GET_PRICE_SUCCESS';
+
+export const getPriceSuccess = createAction(GET_PRICE_SUCCESS);
+export function getPrice(delivery) {
+  console.log('🚀 ~ delivery:', delivery);
+  return (dispatch, getState) => {
+    const { app } = getState();
+    const { httpClient } = app;
+
+    dispatch(setLoading(true));
+
+    return httpClient
+      .post(`/api/retail_prices/calculate`, delivery)
+      .then(res => {
+        console.log('🚀 ~ res:', res);
+        dispatch(getPriceSuccess(res));
+        dispatch(setLoading(false));
+      })
+      .catch(e => {
+        dispatch(setLoading(false));
+      });
+  };
+}
 
 export const loadPackagesSuccess = createAction(LOAD_PACKAGES_SUCCESS);
 export function loadPackages(store) {

src/redux/Store/reducers.js

@@ -1,6 +1,7 @@
 import {
   ASSERT_DELIVERY_ERROR,
   CREATE_DELIVERY_SUCCESS,
+  GET_PRICE_SUCCESS,
   INIT_SUCCESS,
   LOAD_ADDRESSES_SUCCESS,
   LOAD_DELIVERIES_SUCCESS,
@@ -17,6 +18,7 @@ import { LOAD_MY_STORES_SUCCESS } from '../App/actions';
 import { composeWithState } from '../../utils/delivery';
 
 import _ from 'lodash';
+import { formatPrice } from '../../utils/formatting';
 
 const initialState = {
   fetchError: null, // Error object describing the error
@@ -33,6 +35,8 @@ const initialState = {
   timeSlots: [],
   choices: [],
   assertDeliveryError: null,
+  price: null,
+  priceExcludingTax: null,
 };
 
 const replace = (deliveries, delivery, pickup, dropoff) => {
@@ -72,6 +76,14 @@ export default (state = initialState, action = {}) => {
       }
 
       break;
+    case GET_PRICE_SUCCESS:
+      const { amount, tax } = action.payload;
+
+      return {
+        ...state,
+        price: formatPrice(amount),
+        priceExcludingTax: formatPrice(amount - tax.amount),
+      };
     case LOAD_DELIVERIES_SUCCESS:
       const { store, deliveries, pagination } = action.payload;