Milestone: Realizing the Admin Order Page

[hanseaston]

Right now, the admin's order page is missing.

The main functionality of the admin's order page is to keep track of all of the user's current orders.

The idea is that once the user pays successful, we want to use the order (all of the item's the user has ordered, the user's username and email, when they have ordered, any comments they have regarding the products).

This is a pretty involved part of the project's new feature and should be addressed with high priority, since the feature is essential to the website's main functionality.

Check out the code in src/components/stripe-button/stripe-button.jsx.

const onToken = (token) => {
    axios({
      url: "payment",
      method: "post",
      data: {
        amount: priceForStripe,
        token: token,
      },
    })
      .then((response) => {
        //TODO: might want to show a more helpful success message
        paymentSuccessCallback();
        alert(
          "Your payment is successful. We will be in touch through email soon"
        );
      })

Essentially, if the Stripe backend detects the payment has been processed successfully (using the test credit card of course), the onToken method will be called, and inside the method, we alert a success message (which should be enhanced, check out issue #), and also call the paymentSuccessCallback().

The method paymentSuccessCallback() is defined in src/pages/cart-checkout/cart-checkout.js.

paymentSucceeded = () => {
    const { cartItems, user } = this.props;
    const { displayName, email } = user;
    // Want to transform the cartItems into an array of object
    // Where each object contains the product name and the product quantity bought
    const transformedCartItems = cartItems.map((cartItem) => {
      const { name, quantity, id } = cartItem;
      return { name, quantity, _id: id };
    });
    axios
      .post("/checkout", {
        transformedCartItems,
        displayName,
        email,
      })
      .catch((err) => {
        console.log(err);
        throw err;
      });

This method retrieves the relevant product and user information, as well as storing the information into the MongoDB database.

What we want to do next is retrieving the same information from the database and displays it in the Admin checkout page

I think a more visual representation would be nice, where each user's order is listed out as a card item. So essentially, the entire page would be filled with card items laid out nicely. Like a blog card item here.

I am only laying out the general idea. What specifically needs to implemented and how to realize the implementation is of course much more complicated and open to discussion. We might need to (or definitely) change up how and what the data needs to be stored in the database, and adding CRUD operation on each user checkout item card as well.

I'm listing this as one of the project's milestones because there's a lot to implement.

Feel free to ask any clarifying questions here and contribute any ideas!