Connect MySubscription + OrderHistory to API

front-end/actions/auth.js

@@ -61,18 +61,11 @@ export const getUserProfile = () => async dispatch => {
             email,
             name,
             orders {
-              billingAddress {
-                id,
-                name,
-                phoneNumber,
-                city,
-                country,
-                postcode,
-                address
-              },
+              id,
               deliveryDayOfWeek,
               deliveryTime,
               paymentDate,
+              cancelDate,
               shippingAddress {
                 id,
                 name,

front-end/actions/order.js

@@ -0,0 +1,40 @@
+import axios from 'axios';
+import { AsyncStorage } from 'react-native';
+
+import actionTypes from '../constants/actionTypes/order';
+import { baseURL } from '../utils/envConfig';
+
+export const setSelectedOrder = order => {
+  return { type: actionTypes.SET_SELECTED_ORDER, payload: order };
+};
+
+export const cancelOrder = orderId => async dispatch => {
+  dispatch({ type: actionTypes.CANCEL_ORDER_PENDING });
+  const accessToken = await AsyncStorage.getItem('accessToken');
+
+  try {
+    const res = await axios.post(
+      baseURL,
+      {
+        query: `
+        mutation {
+          cancelOrder(orderId: "${orderId}") {
+            id,
+            cancelDate
+          }
+        }
+      `,
+      },
+      { headers: { Authorization: accessToken } }
+    );
+
+    const { id, cancelDate } = res.data.data.cancelOrder;
+    dispatch({
+      type: actionTypes.CANCEL_ORDER_SUCCESS,
+      payload: { id, cancelDate },
+    });
+  } catch (err) {
+    console.log('ERROR cancelOrder: ', err.response.data);
+    dispatch({ type: actionTypes.CANCEL_ORDER_FAIL });
+  }
+};

front-end/components/OrderHistoryBox.js

@@ -25,7 +25,7 @@ export default function SubscriptionBox({
 
       <View style={styles.mainTextContainer}>
         <Text style={styles.orderDate}>Date: {orderDate}</Text>
-        <Text style={styles.orderID}>Order ID: #{orderID}</Text>
+        <Text style={styles.orderID}>Order ID: #{orderID.substring(0, 7)}</Text>
       </View>
 
       <View style={styles.divider} />
@@ -41,7 +41,7 @@ export default function SubscriptionBox({
 
 SubscriptionBox.propTypes = {
   orderDate: PropTypes.string,
-  orderID: PropTypes.number,
+  orderID: PropTypes.string,
   orderPrice: PropTypes.number,
   isActive: PropTypes.bool,
 };

front-end/components/SubscriptionBox.js

@@ -17,7 +17,7 @@ export default function SubscriptionBox({ subscriptionTitle, isActive }) {
         source={boxNameToImageMapper[subscriptionTitle]}
         style={{ height: 72, width: 67 }}
       />
-      <Text style={styles.subscriptionTitle}>{subscriptionTitle} Box</Text>
+      <Text style={styles.subscriptionTitle}>{subscriptionTitle}</Text>
     </View>
   );
 }

front-end/components/SubscriptionSummary.js

@@ -36,9 +36,7 @@ export default class SubscriptionSummary extends React.Component {
             </TouchableOpacity>
             <CancelConfirmModal
               visible={this.state.cancelDialogVisible}
-              onPressCancelSubscription={() =>
-                this.props.onPressRemoveSubscription(this.props.id)
-              }
+              onPressCancelSubscription={this.onPressRemoveSubscription}
               onPressCloseModal={this.onPressCloseCancelDialogModal}
               modalTitle={this.props.modalTitle}
               modalTextContent={this.props.modalTextContent}

front-end/constants/actionTypes/order.js

@@ -0,0 +1,9 @@
+import { getAsyncActionType } from '../../utils/redux';
+
+const SET_SELECTED_ORDER = 'SET_SELECTED_ORDER';
+const CANCEL_ORDER = 'CANCEL_ORDER';
+
+export default {
+  SET_SELECTED_ORDER,
+  ...getAsyncActionType(CANCEL_ORDER),
+};

front-end/reducers/auth.js

@@ -1,4 +1,5 @@
 import actionTypes from '../constants/actionTypes/auth';
+import orderActionTypes from '../constants/actionTypes/order';
 import userActionTypes from '../constants/actionTypes/user';
 
 const INITIAL_STATE = {
@@ -39,6 +40,19 @@ export default (state = INITIAL_STATE, { type, payload }) => {
           ),
         },
       };
+    case orderActionTypes.CANCEL_ORDER_SUCCESS:
+      return {
+        ...state,
+        user: {
+          ...state.user,
+          orders: state.user.orders.map(o => {
+            if (o.id === payload.id) {
+              o.cancelDate = payload.cancelDate;
+            }
+            return o;
+          }),
+        },
+      };
     default:
       return state;
   }

front-end/reducers/index.js

@@ -3,9 +3,11 @@ import { combineReducers } from 'redux';
 import authReducer from './auth';
 import subscriptionReducer from './subscription';
 import checkoutReducer from './checkout';
+import orderReducer from './order';
 
 export default combineReducers({
   auth: authReducer,
   subscription: subscriptionReducer,
   checkout: checkoutReducer,
+  order: orderReducer,
 });

front-end/reducers/order.js

@@ -0,0 +1,25 @@
+import actionTypes from '../constants/actionTypes/order';
+
+const INITIAL_STATE = {
+  selectedOrder: {},
+};
+
+export default (state = INITIAL_STATE, { type, payload }) => {
+  switch (type) {
+    case actionTypes.SET_SELECTED_ORDER:
+      return {
+        ...state,
+        selectedOrder: payload,
+      };
+    case actionTypes.CANCEL_ORDER_SUCCESS:
+      return {
+        ...state,
+        selectedOrder: {
+          ...state.selectedOrder,
+          cancelDate: payload.cancelDate,
+        },
+      };
+    default:
+      return state;
+  }
+};

front-end/screens/MainScreens/MainScreenNavigator.js

@@ -19,9 +19,9 @@ import ChangeShippingAddressScreen from './MySubscriptionScreens/SubscriptionMan
 import ShippingAddressCheckoutScreen from './MySubscriptionScreens/CheckoutScreens/ShippingAddressCheckoutScreen';
 import DeliveryScheduleCheckoutScreen from './MySubscriptionScreens/CheckoutScreens/DeliveryScheduleCheckoutScreen';
 import OrderSummaryScreen from './MySubscriptionScreens/CheckoutScreens/OrderSummaryScreen';
-import OrderHistoryDetailsScreen from "./OrderHistoryScreens/OrderHistoryDetailsScreen";
-import OrderSuccessScreen from "./MySubscriptionScreens/CheckoutScreens/OrderSuccessScreen";
-import OrderErrorScreen from "./MySubscriptionScreens/CheckoutScreens/OrderErrorScreen";
+import OrderHistoryDetailsScreen from './OrderHistoryScreens/OrderHistoryDetailsScreen';
+import OrderSuccessScreen from './MySubscriptionScreens/CheckoutScreens/OrderSuccessScreen';
+import OrderErrorScreen from './MySubscriptionScreens/CheckoutScreens/OrderErrorScreen';
 
 const MySubscriptionStack = createStackNavigator(
   {
@@ -61,7 +61,8 @@ MySubscriptionStack.navigationOptions = ({ navigation }) => {
 
 const OrderHistoryStack = createStackNavigator({
   Home: OrderHistoryScreen,
-  OrderHistoryDetails: OrderHistoryDetailsScreen
+  SubscriptionDetail: SubscriptionDetailScreen,
+  OrderHistoryDetails: OrderHistoryDetailsScreen,
 });
 
 OrderHistoryStack.navigationOptions = {

front-end/screens/MainScreens/MySubscriptionScreens/AddSubscriptionScreens/SubscriptionSelectionScreen.js

@@ -14,8 +14,10 @@ import {
 import SideSwipe from 'react-native-sideswipe';
 import { Icon, Button } from 'react-native-elements';
 import { connect } from 'react-redux';
+import _ from 'lodash';
 
 import Carousel from './Carousel';
+import Loader from '../../../../components/Loader';
 import Colors from '../../../../constants/Colors';
 import commonStyles from '../../../../constants/commonStyles';
 import { getAllSubscriptions } from '../../../../actions/subscription';
@@ -234,8 +236,8 @@ class SubscriptionSelectionScreen extends React.Component {
     const { allSubscriptions } = this.props;
     const contentOffset = (width - Carousel.WIDTH) / 2;
 
-    if (allSubscriptions.length === 0) {
-      return null;
+    if (_.isEmpty(allSubscriptions)) {
+      return <Loader />;
     }
 
     return (
@@ -644,10 +646,13 @@ const mapStateToProps = state => ({
   selectedSubscription: state.checkout.selectedSubscription,
 });
 
-export default connect(mapStateToProps, {
-  getAllSubscriptions,
-  setSelectedSubscription,
-  addSubscriptionToCart,
-  removeSubscriptionFromCart,
-  cleanCart,
-})(SubscriptionSelectionScreen);
+export default connect(
+  mapStateToProps,
+  {
+    getAllSubscriptions,
+    setSelectedSubscription,
+    addSubscriptionToCart,
+    removeSubscriptionFromCart,
+    cleanCart,
+  }
+)(SubscriptionSelectionScreen);

front-end/screens/MainScreens/MySubscriptionScreens/MySubscriptionScreen.js

@@ -10,6 +10,8 @@ import {
 } from 'react-native';
 import { Icon, Button } from 'react-native-elements';
 import { connect } from 'react-redux';
+import _ from 'lodash';
+import moment from 'moment';
 
 import SubscriptionBox from '../../../components/SubscriptionBox';
 import commonStyles from '../../../constants/commonStyles';
@@ -21,7 +23,10 @@ import {
 } from '../../../utils/dateTime';
 import Colors from '../../../constants/Colors';
 import Layout from '../../../constants/Layout';
+import Loader from '../../../components/Loader';
 import { getUserProfile } from '../../../actions/auth';
+import { setSelectedOrder } from '../../../actions/order';
+import { setSelectedSubscription } from '../../../actions/checkout';
 
 const width = Layout.window.width;
 
@@ -105,66 +110,83 @@ class MySubscriptionScreen extends React.Component {
     this.props.navigation.navigate('AddSubscription');
   };
 
-  onPressManageSubscription = orderId => {
+  onPressManageSubscription = order => {
+    this.props.setSelectedOrder(order);
     this.props.navigation.navigate('SubscriptionManagement');
   };
 
-  onPressSubscriptionDetails = () => {
+  onPressSubscriptionDetails = subscription => {
+    this.props.setSelectedSubscription(subscription);
     this.props.navigation.navigate('SubscriptionDetail');
   };
 
   renderSubscriptionListPerOrder = () => {
-    return this.state.currentOrders.map(order => (
-      <View key={order.id} style={styles.subscriptionOrderContainer}>
-        <Text style={styles.deliveryDateTitle}>
-          Next Delivery Date: {this.getOrderNextDeliveryDate(order)}
-        </Text>
-        {!order.isActive && (
-          <Text style={styles.endSubscriptionText}>
-            *Your subscription will end on{' '}
-            {this.getOrderEndSubscriptionDate(order.orderDate)}
+    return this.props.user.orders
+      .filter(
+        o =>
+          o.cancelDate === null ||
+          moment().diff(moment(o.cancelDate), 'months') === 0
+      )
+      .map(order => (
+        <View key={order.id} style={styles.subscriptionOrderContainer}>
+          <Text style={styles.deliveryDateTitle}>
+            Next Delivery Date: {this.getOrderNextDeliveryDate(order)}
           </Text>
-        )}
-        <View style={styles.subscriptionBoxContainer}>
-          {order.subscriptions &&
-            this.renderSubscriptionBoxes(order.subscriptions)}
+          {order.cancelDate !== null && (
+            <Text style={styles.endSubscriptionText}>
+              *Your subscription will end on{' '}
+              {this.getOrderEndSubscriptionDate(order.paymentDate)}
+            </Text>
+          )}
+          <View style={styles.subscriptionBoxContainer}>
+            {order.items &&
+              this.renderSubscriptionBoxes(
+                order.items,
+                order.cancelDate === null
+              )}
+          </View>
+          <Button
+            type={'clear'}
+            title={'Manage your subscriptions'}
+            icon={
+              <Icon name={'chevron-right'} size={18} color={Colors.darkGrey} />
+            }
+            iconRight={true}
+            titleStyle={[styles.manageButtonText, { marginRight: 2 }]}
+            buttonStyle={{ alignItems: 'center' }}
+            containerStyle={styles.manageButtonContainer}
+            onPress={() => this.onPressManageSubscription(order)}
+          />
         </View>
-        <Button
-          type={'clear'}
-          title={'Manage your subscriptions'}
-          icon={
-            <Icon name={'chevron-right'} size={18} color={Colors.darkGrey} />
-          }
-          iconRight={true}
-          titleStyle={[styles.manageButtonText, { marginRight: 2 }]}
-          buttonStyle={{ alignItems: 'center' }}
-          containerStyle={styles.manageButtonContainer}
-          onPress={() => this.onPressManageSubscription(order.id)}
-        />
-      </View>
-    ));
+      ));
   };
 
-  renderSubscriptionBoxes = subscriptionList => {
+  renderSubscriptionBoxes = (subscriptionList, isOrderActive) => {
     return subscriptionList.map(subscription => {
       return (
         <TouchableOpacity
-          onPress={this.onPressSubscriptionDetails}
+          onPress={() => this.onPressSubscriptionDetails(subscription)}
           key={subscription.id}
         >
           <SubscriptionBox
             subscriptionTitle={subscription.title}
-            isActive={subscription.isActive}
+            isActive={isOrderActive}
           />
         </TouchableOpacity>
       );
     });
   };
 
   render() {
+    const { user } = this.props;
+
+    if (_.isEmpty(user)) {
+      return <Loader />;
+    }
+
     return (
       <View style={styles.mainContainer}>
-        {this.state.currentOrders && this.state.currentOrders.length > 0 ? (
+        {user.orders && user.orders.length > 0 ? (
           <View
             style={{
               paddingLeft: 32,
@@ -297,7 +319,11 @@ const styles = StyleSheet.create({
   },
 });
 
+const mapStateToProps = state => ({
+  user: state.auth.user,
+});
+
 export default connect(
-  null,
-  { getUserProfile }
+  mapStateToProps,
+  { getUserProfile, setSelectedOrder, setSelectedSubscription }
 )(MySubscriptionScreen);