Payment history view

Author: Matthew Freire

core/api/serializers.py

@@ -1,6 +1,9 @@
 from django_countries.serializer_fields import CountryField
 from rest_framework import serializers
-from core.models import Address, Item, Order, OrderItem, Coupon, Variation, ItemVariation
+from core.models import (
+    Address, Item, Order, OrderItem, Coupon, Variation, ItemVariation,
+    Payment
+)
 
 
 class StringSerializer(serializers.StringRelatedField):
@@ -195,3 +198,13 @@ class Meta:
             'address_type',
             'default'
         )
+
+
+class PaymentSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Payment
+        fields = (
+            'id',
+            'amount',
+            'timestamp'
+        )

core/api/urls.py

@@ -13,7 +13,8 @@
     AddressCreateView,
     AddressUpdateView,
     AddressDeleteView,
-    OrderItemDeleteView
+    OrderItemDeleteView,
+    PaymentListView
 )
 
 urlpatterns = [
@@ -35,4 +36,6 @@
          OrderItemDeleteView.as_view(), name='order-item-delete'),
     path('order-item/update-quantity/',
          OrderQuantityUpdateView.as_view(), name='order-item-update-quantity'),
+    path('payments/', PaymentListView.as_view(), name='payment-list'),
+
 ]

core/api/views.py

@@ -14,7 +14,10 @@
 from rest_framework.response import Response
 from rest_framework.status import HTTP_200_OK, HTTP_400_BAD_REQUEST
 from core.models import Item, OrderItem, Order
-from .serializers import ItemSerializer, OrderSerializer, ItemDetailSerializer, AddressSerializer
+from .serializers import (
+    ItemSerializer, OrderSerializer, ItemDetailSerializer, AddressSerializer,
+    PaymentSerializer
+)
 from core.models import Item, OrderItem, Order, Address, Payment, Coupon, Refund, UserProfile, Variation, ItemVariation
 
 
@@ -287,3 +290,11 @@ class AddressUpdateView(UpdateAPIView):
 class AddressDeleteView(DestroyAPIView):
     permission_classes = (IsAuthenticated, )
     queryset = Address.objects.all()
+
+
+class PaymentListView(ListAPIView):
+    permission_classes = (IsAuthenticated, )
+    serializer_class = PaymentSerializer
+
+    def get_queryset(self):
+        return Payment.objects.filter(user=self.request.user)

db.sqlite3

@@ -19,3 +19,4 @@ export const addressUpdateURL = id => `${endpoint}/addresses/${id}/update/`;
 export const addressDeleteURL = id => `${endpoint}/addresses/${id}/delete/`;
 export const orderItemDeleteURL = id => `${endpoint}/order-items/${id}/delete/`;
 export const orderItemUpdateQuantityURL = `${endpoint}/order-item/update-quantity/`;
+export const paymentListURL = `${endpoint}/payments/`;

src/constants.js

@@ -15,21 +15,74 @@ import {
   Menu,
   Message,
   Segment,
-  Select
+  Select,
+  Table
 } from "semantic-ui-react";
 import {
   countryListURL,
   addressListURL,
   addressCreateURL,
   addressUpdateURL,
   addressDeleteURL,
-  userIDURL
+  userIDURL,
+  paymentListURL
 } from "../constants";
 import { authAxios } from "../utils";
 
 const UPDATE_FORM = "UPDATE_FORM";
 const CREATE_FORM = "CREATE_FORM";
 
+class PaymentHistory extends React.Component {
+  state = {
+    payments: []
+  };
+
+  componentDidMount() {
+    this.handleFetchPayments();
+  }
+
+  handleFetchPayments = () => {
+    this.setState({ loading: true });
+    authAxios
+      .get(paymentListURL)
+      .then(res => {
+        this.setState({
+          loading: false,
+          payments: res.data
+        });
+      })
+      .catch(err => {
+        this.setState({ error: err, loading: false });
+      });
+  };
+
+  render() {
+    const { payments } = this.state;
+    return (
+      <Table celled>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>ID</Table.HeaderCell>
+            <Table.HeaderCell>Amount</Table.HeaderCell>
+            <Table.HeaderCell>Date</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {payments.map(p => {
+            return (
+              <Table.Row key={p.id}>
+                <Table.Cell>{p.id}</Table.Cell>
+                <Table.Cell>${p.amount}</Table.Cell>
+                <Table.Cell>{new Date(p.timestamp).toUTCString()}</Table.Cell>
+              </Table.Row>
+            );
+          })}
+        </Table.Body>
+      </Table>
+    );
+  }
+}
+
 class AddressForm extends React.Component {
   state = {
     error: null,
@@ -227,6 +280,16 @@ class Profile extends React.Component {
     });
   };
 
+  handleGetActiveItem = () => {
+    const { activeItem } = this.state;
+    if (activeItem === "billingAddress") {
+      return "Billing Address";
+    } else if (activeItem === "shippingAddress") {
+      return "Shipping Address";
+    }
+    return "Payment History";
+  };
+
   handleFormatCountries = countries => {
     const keys = Object.keys(countries);
     return keys.map(k => {
@@ -293,16 +356,76 @@ class Profile extends React.Component {
     this.setState({ selectedAddress: null });
   };
 
-  render() {
+  renderAddresses = () => {
     const {
       activeItem,
-      error,
-      loading,
       addresses,
       countries,
       selectedAddress,
       userID
     } = this.state;
+    return (
+      <React.Fragment>
+        <Card.Group>
+          {addresses.map(a => {
+            return (
+              <Card key={a.id}>
+                <Card.Content>
+                  {a.default && (
+                    <Label as="a" color="blue" ribbon="right">
+                      Default
+                    </Label>
+                  )}
+                  <Card.Header>
+                    {a.street_address}, {a.apartment_address}
+                  </Card.Header>
+                  <Card.Meta>{a.country}</Card.Meta>
+                  <Card.Description>{a.zip}</Card.Description>
+                </Card.Content>
+                <Card.Content extra>
+                  <Button
+                    color="yellow"
+                    onClick={() => this.handleSelectAddress(a)}
+                  >
+                    Update
+                  </Button>
+                  <Button
+                    color="red"
+                    onClick={() => this.handleDeleteAddress(a.id)}
+                  >
+                    Delete
+                  </Button>
+                </Card.Content>
+              </Card>
+            );
+          })}
+        </Card.Group>
+        {addresses.length > 0 ? <Divider /> : null}
+        {selectedAddress === null ? (
+          <AddressForm
+            activeItem={activeItem}
+            countries={countries}
+            formType={CREATE_FORM}
+            userID={userID}
+            callback={this.handleCallback}
+          />
+        ) : null}
+        {selectedAddress && (
+          <AddressForm
+            activeItem={activeItem}
+            userID={userID}
+            countries={countries}
+            address={selectedAddress}
+            formType={UPDATE_FORM}
+            callback={this.handleCallback}
+          />
+        )}
+      </React.Fragment>
+    );
+  };
+
+  render() {
+    const { activeItem, error, loading } = this.state;
     const { isAuthenticated } = this.props;
     if (!isAuthenticated) {
       return <Redirect to="/login" />;
@@ -349,63 +472,12 @@ class Profile extends React.Component {
             </Menu>
           </Grid.Column>
           <Grid.Column width={10}>
-            <Header>{`Update your ${
-              activeItem === "billingAddress" ? "billing" : "shipping"
-            } address`}</Header>
+            <Header>{this.handleGetActiveItem()}</Header>
             <Divider />
-            <Card.Group>
-              {addresses.map(a => {
-                return (
-                  <Card key={a.id}>
-                    <Card.Content>
-                      {a.default && (
-                        <Label as="a" color="blue" ribbon="right">
-                          Default
-                        </Label>
-                      )}
-                      <Card.Header>
-                        {a.street_address}, {a.apartment_address}
-                      </Card.Header>
-                      <Card.Meta>{a.country}</Card.Meta>
-                      <Card.Description>{a.zip}</Card.Description>
-                    </Card.Content>
-                    <Card.Content extra>
-                      <Button
-                        color="yellow"
-                        onClick={() => this.handleSelectAddress(a)}
-                      >
-                        Update
-                      </Button>
-                      <Button
-                        color="red"
-                        onClick={() => this.handleDeleteAddress(a.id)}
-                      >
-                        Delete
-                      </Button>
-                    </Card.Content>
-                  </Card>
-                );
-              })}
-            </Card.Group>
-            {addresses.length > 0 ? <Divider /> : null}
-            {selectedAddress === null ? (
-              <AddressForm
-                activeItem={activeItem}
-                countries={countries}
-                formType={CREATE_FORM}
-                userID={userID}
-                callback={this.handleCallback}
-              />
-            ) : null}
-            {selectedAddress && (
-              <AddressForm
-                activeItem={activeItem}
-                userID={userID}
-                countries={countries}
-                address={selectedAddress}
-                formType={UPDATE_FORM}
-                callback={this.handleCallback}
-              />
+            {activeItem === "paymentHistory" ? (
+              <PaymentHistory />
+            ) : (
+              this.renderAddresses()
             )}
           </Grid.Column>
         </Grid.Row>