Handle Refunds and Stocked/Unstocked Items (#56)

* Refund functional

* Properly handle null stock

* Fixed listing card styling for mobile

Author: destin-estrela

graphql.schema.json

@@ -3606,6 +3606,55 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "refundPurchase",
+            "description": null,
+            "args": [
+              {
+                "name": "course",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "SCALAR",
+                    "name": "String",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              },
+              {
+                "name": "receiptId",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "SCALAR",
+                    "name": "String",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "Boolean",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "fulfillPurchase",
             "description": null,

src/Components/MarketHome/CreateListingDialog.tsx

@@ -18,7 +18,7 @@ export function listingFormToInputType(values: MarketListingFormInput): MarketLi
       description: values.description,
       image: values.image,
       price: parseInt(values.price, 10),
-      stock: values.stock === '' ? -1 : parseInt(values.stock, 10),
+      stock: values.stock === '' ? null : Math.max(parseInt(values.stock, 10), 0),
    };
 }
 

src/Components/MarketHome/ListingCard.scss

@@ -3,16 +3,18 @@
 }
 
 .center {
-   margin: auto;
-   display: flex;
-   justify-content: center;
+   margin: 0;
+   position: absolute;
+   top: 50%;
+   left: 50%;
+   -ms-transform: translate(-50%, -50%);
+   transform: translate(-50%, -50%);
 }
 
 .listing-card-outer {
    display: inline-block;
 }
 
-
 .purchase-card {
    border: 1px solid rgb(253, 253, 253);
    margin-left: 8%;
@@ -33,14 +35,16 @@
 
 .listing-card {
    border: 1px solid rgb(255, 255, 255);
-   margin: 12px;
+   margin: 0.5em;
    box-sizing: border-box;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
-   overflow: hidden;
+   overflow: auto;
    background: #fff;
-   width: 300px;
-   height: 150px;
+   min-height: 16em;
+   height: auto;
+   min-width: 22em;
+   width: auto;
    display: inline-block;
    vertical-align: top;
    position: relative;

src/Components/MarketHome/ListingCard.tsx

@@ -40,7 +40,7 @@ export default function ListingCard({
 
    const initialValues: MarketListingFormInput = {
       price: listingInfo.price.toString(),
-      stock: listingInfo.stock ? listingInfo.stock.toString() : '',
+      stock: listingInfo.stock != null ? listingInfo.stock.toString() : '',
       image: listingInfo.image,
       description: listingInfo.description,
       listingName: listingInfo.listingName,
@@ -112,6 +112,7 @@ export default function ListingCard({
                            <span>{listingInfo.listingName}</span>
                         </h3>
                         <p className="listing-points">{listingInfo.price} P</p>
+                        {listingInfo.stock != null ? <p>{listingInfo.stock} Left</p> : <></>}
                      </div>
                   </div>
                ) : (

src/Components/MarketHome/ListingForm.tsx

@@ -78,7 +78,6 @@ export default function ListingForm({ initialValues, onSubmit, handleClose }: Pr
                   onBlur={handleBlur}
                />
                <SmallTextField
-                  required
                   id="stock"
                   label="Stock"
                   type="number"

src/Components/MarketHome/PurchaseCard.tsx

@@ -6,6 +6,7 @@ import {
    FulfillMutation,
    ReceiptInfoFragment,
    useFulfillMutation,
+   useRefundMutation,
 } from '../../__generated__/types';
 import ReceiptMenu from './SimplyMenu';
 
@@ -14,6 +15,7 @@ type Props = {
    displayStudentName: boolean;
    displayListingName: boolean;
    editPurchase: any;
+   deletePurchase: any;
 };
 
 function determineMiddleText(displayListingName: boolean, displayStudentName: boolean) {
@@ -31,21 +33,36 @@ export function PurchaseCard({
    displayListingName,
    displayStudentName,
    editPurchase,
+   deletePurchase,
 }: Props) {
    const middleText = determineMiddleText(displayListingName, displayStudentName);
 
-   const onMutationCompleted = (data: FulfillMutation) => {
+   const onFulfillCompleted = (data: FulfillMutation) => {
       console.log('Mutation Completed');
       editPurchase(data.fulfillPurchase);
    };
 
-   const onMutationError = (e: ApolloError) => {
+   const onRefundCompleted = () => {
+      console.log('Mutation Completed');
+      deletePurchase(purchase.receiptId);
+   };
+
+   const onFulfillError = (e: ApolloError) => {
+      console.log(e.message);
+   };
+
+   const onRefundError = (e: ApolloError) => {
       console.log(e.message);
    };
 
-   const [fulfill, { loading: mutationLoading }] = useFulfillMutation({
-      onCompleted: onMutationCompleted,
-      onError: onMutationError,
+   const [fulfill, { loading: fulfillLoading }] = useFulfillMutation({
+      onCompleted: onFulfillCompleted,
+      onError: onFulfillError,
+   });
+
+   const [refund] = useRefundMutation({
+      onCompleted: onRefundCompleted,
+      onError: onRefundError,
    });
 
    const onClickFulfill = () => {
@@ -68,9 +85,22 @@ export function PurchaseCard({
       }).catch((e) => console.log(e));
    };
 
+   const onClickRefund = () => {
+      refund({
+         variables: {
+            course: purchase.course,
+            receiptId: purchase.receiptId,
+         },
+      }).catch((e) => console.log(e));
+   };
+
    return (
       <div className="purchase-card">
-         <ReceiptMenu onClickUnfulfill={onClickUnFulfill} fulfilled={purchase.fulfilled} />
+         <ReceiptMenu
+            onClickUnfulfill={onClickUnFulfill}
+            fulfilled={purchase.fulfilled}
+            onClickRefund={onClickRefund}
+         />
          {!purchase.fulfilled ? (
             <div>
                <Button
@@ -86,7 +116,7 @@ export function PurchaseCard({
                   onClick={onClickFulfill}
                >
                   <span>Fulfill </span>
-                  {mutationLoading ? <CircularProgress size={15} /> : <></>}
+                  {fulfillLoading ? <CircularProgress size={15} /> : <></>}
                </Button>
             </div>
          ) : (

src/Components/MarketHome/PurchaseTab.tsx

@@ -19,6 +19,14 @@ export function PurchaseTab() {
    const { classId } = useParams<Record<string, string>>();
    const [purchases, setPurchases] = useState<ReceiptInfoFragment[]>([]);
 
+   const removeFromPurchases = (receiptId: string) => {
+      setPurchases(
+         purchases.filter((p) => {
+            return p.receiptId !== receiptId;
+         })
+      );
+   };
+
    const { loading, error, data } = useRecentQuery({
       variables: {
          course: classId,
@@ -58,6 +66,7 @@ export function PurchaseTab() {
          {purchases.map((purchase) => {
             return (
                <PurchaseCard
+                  deletePurchase={removeFromPurchases}
                   purchase={purchase}
                   displayListingName
                   displayStudentName

src/Components/MarketHome/SimplyMenu.tsx

@@ -5,9 +5,10 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
 type Props = {
    onClickUnfulfill: any;
    fulfilled: boolean;
+   onClickRefund: any;
 };
 
-export default function SimpleMenu({ onClickUnfulfill, fulfilled }: Props) {
+export default function SimpleMenu({ onClickUnfulfill, fulfilled, onClickRefund }: Props) {
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -23,6 +24,11 @@ export default function SimpleMenu({ onClickUnfulfill, fulfilled }: Props) {
       handleClose();
    };
 
+   const handleRefund = () => {
+      onClickRefund();
+      handleClose();
+   };
+
    return (
       <div>
          <Button
@@ -46,7 +52,7 @@ export default function SimpleMenu({ onClickUnfulfill, fulfilled }: Props) {
             onClose={handleClose}
          >
             {fulfilled ? <MenuItem onClick={handleUnfulfill}>Unfulfill</MenuItem> : <></>}
-            <MenuItem onClick={handleClose}>Refund</MenuItem>
+            <MenuItem onClick={handleRefund}>Refund</MenuItem>
          </Menu>
       </div>
    );

src/Components/MarketHome/market.graphql

@@ -99,3 +99,8 @@ mutation Fulfill($receiptId: String!, $course: String!, $fulfilled: Boolean!) {
       ...ReceiptInfo
    }
 }
+
+mutation Refund($receiptId: String!, $course: String!) {
+  refundPurchase(course: $course, receiptId: $receiptId)
+}
+