fix: resend api

src/domain/orders/details/index.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react"
+import React, { useEffect, useState } from "react"
 import { Text, Flex, Box, Image } from "rebass"
 import ReactJson from "react-json-view"
 import styled from "@emotion/styled"
@@ -16,6 +16,7 @@ import Timeline from "./timeline"
 import buildTimeline from "./utils/build-timeline"
 import SwapMenu from "./swap/create"
 import ClaimMenu from "./claim/create"
+import NotificationResend from "./notification/resend-menu"
 import CustomerInformation from "./customer"
 
 import { ReactComponent as Clipboard } from "../../../assets/svg/clipboard.svg"
@@ -27,6 +28,7 @@ import Spinner from "../../../components/spinner"
 
 import { decideBadgeColor } from "../../../utils/decide-badge-color"
 import useMedusa from "../../../hooks/use-medusa"
+import Medusa from "../../../services/api"
 
 const AlignedDecimal = ({ value, currency }) => {
   const fixed = (value / 100).toFixed(2)
@@ -116,6 +118,10 @@ const OrderDetails = ({ id }) => {
   const [toReceive, setToReceive] = useState(false)
   const [isFulfilling, setIsFulfilling] = useState(false)
 
+  const [notifications, setNotifications] = useState([])
+  const [notificationsLoaded, setNotificationsLoaded] = useState(false)
+  const [notificationResend, setNotificationResend] = useState(false)
+
   const {
     order,
     update: updateOrder,
@@ -136,14 +142,26 @@ const OrderDetails = ({ id }) => {
     refund,
     isLoading,
     updateClaim,
-    archive,
-    complete,
     cancel,
     toaster,
   } = useMedusa("orders", {
     id,
   })
 
+  useEffect(() => {
+    if (order?.id && !notificationsLoaded) {
+      Medusa.notifications
+        .list({
+          resource_type: "order",
+          resource_id: order.id,
+        })
+        .then(({ data }) => {
+          setNotifications(data.notifications)
+        })
+        .finally(() => setNotificationsLoaded(true))
+    }
+  }, [order])
+
   const handleCopyToClip = val => {
     var tempInput = document.createElement("input")
     tempInput.value = val
@@ -167,7 +185,7 @@ const OrderDetails = ({ id }) => {
     )
   }
 
-  const events = buildTimeline(order)
+  const events = buildTimeline(order, notifications)
 
   const decidePaymentButton = paymentStatus => {
     switch (true) {
@@ -380,6 +398,7 @@ const OrderDetails = ({ id }) => {
           <Timeline
             events={events}
             order={order}
+            onResendNotification={n => setNotificationResend(n)}
             onSaveClaim={updateClaim}
             onFulfillClaim={claim => setClaimToFulfill(claim)}
             onReceiveClaim={receiveClaim}
@@ -681,6 +700,13 @@ const OrderDetails = ({ id }) => {
           toaster={toaster}
         />
       )}
+      {notificationResend && (
+        <NotificationResend
+          notification={notificationResend}
+          onDismiss={() => setNotificationResend(false)}
+          toaster={toaster}
+        />
+      )}
       {showSwap && (
         <SwapMenu
           order={order}

src/domain/orders/details/notification/resend-menu.js

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from "react"
+import { Text, Flex, Box } from "rebass"
+import { Radio } from "@rebass/forms"
+import { useForm, useFieldArray } from "react-hook-form"
+
+import Modal from "../../../../components/modal"
+import Input from "../../../../components/input"
+import Button from "../../../../components/button"
+
+import Medusa from "../../../../services/api"
+
+const ResendMenu = ({ notification, onDismiss, toaster }) => {
+  const { errors, register, setValue, handleSubmit } = useForm({})
+
+  useEffect(() => {
+    setValue("to", notification.to)
+  }, [])
+
+  const onSubmit = data => {
+    return Medusa.notifications
+      .resend(notification.id, {
+        to: data.to,
+      })
+      .then(() => onDismiss())
+      .then(() => toaster("The notification was resent", "success"))
+      .catch(() => toaster("Failed to resend", "error"))
+  }
+
+  return (
+    <Modal onClick={onDismiss}>
+      <Modal.Body width={"600px"} as="form" onSubmit={handleSubmit(onSubmit)}>
+        <Modal.Header>Resend notification</Modal.Header>
+        <Modal.Content flexDirection="column">
+          <Flex my={3} flexDirection="column">
+            <Flex mb={3}>
+              <Box flex={1}>
+                <Input
+                  inline
+                  label={"To"}
+                  type="text"
+                  placeholder={"To address"}
+                  name={`to`}
+                  invalid={errors.to && errors.to}
+                  ref={register({
+                    required: "Must be filled",
+                  })}
+                />
+              </Box>
+            </Flex>
+          </Flex>
+        </Modal.Content>
+        <Modal.Footer justifyContent="flex-end">
+          <Button type="submit" variant="primary">
+            Resend
+          </Button>
+        </Modal.Footer>
+      </Modal.Body>
+    </Modal>
+  )
+}
+
+export default ResendMenu

src/domain/orders/details/notification/timeline.js

@@ -0,0 +1,70 @@
+import React, { useState } from "react"
+import { Text, Flex, Box, Image } from "rebass"
+import { navigate } from "gatsby"
+import styled from "@emotion/styled"
+import moment from "moment"
+import ReactTooltip from "react-tooltip"
+
+import { ReactComponent as Clipboard } from "../../../../assets/svg/clipboard.svg"
+import { decideBadgeColor } from "../../../../utils/decide-badge-color"
+import Typography from "../../../../components/typography"
+import Badge from "../../../../components/badge"
+import Button from "../../../../components/button"
+import Dropdown from "../../../../components/dropdown"
+
+import useMedusa from "../../../../hooks/use-medusa"
+
+export default ({ event, onResend }) => {
+  const name = event_name => {
+    switch (event_name) {
+      case "order.placed":
+        return "Order Confirmation"
+      case "order.return_requested":
+        return "Return Request Confirmation"
+      case "order.shipment_created":
+        return "Shipment Notice"
+      case "order.items_returned":
+        return "Return Received Notice"
+      default:
+        return event_name
+    }
+  }
+
+  const handleResend = () => {
+    onResend(event.raw)
+  }
+
+  return (
+    <Flex
+      alignItems="center"
+      sx={{
+        ".rsnd-btn": {
+          display: "none",
+        },
+        ":hover": {
+          ".rsnd-btn": {
+            display: "inline-block",
+          },
+        },
+      }}
+    >
+      <Box width={"100%"} sx={{ borderBottom: "hairline" }} mb={3} pb={3}>
+        <Flex px={3} width={"100%"} justifyContent="space-between">
+          <Box>
+            <Flex mb={2}>
+              <Text mr={100} fontSize={1} color="grey" fontWeight="500">
+                {name(event.event_name)} Sent
+              </Text>
+            </Flex>
+            <Text fontSize="11px" color="grey">
+              {moment(event.time).format("MMMM Do YYYY, H:mm:ss")}
+            </Text>
+          </Box>
+          <Button className="rsnd-btn" variant="primary" onClick={handleResend}>
+            Resend
+          </Button>
+        </Flex>
+      </Box>
+    </Flex>
+  )
+}

src/domain/orders/details/timeline/index.js

@@ -3,6 +3,7 @@ import { Text, Flex, Box, Image } from "rebass"
 import styled from "@emotion/styled"
 import moment from "moment"
 
+import NotificationTimeline from "../notification/timeline"
 import ClaimTimeline from "../claim/timeline"
 import SwapTimeline from "../swap/timeline"
 import ReturnTimeline from "../returns/timeline"
@@ -56,6 +57,7 @@ const LineItem = ({ lineItem, currency, taxRate }) => {
 export default ({
   events,
   order,
+  onResendNotification,
   onSaveClaim,
   onFulfillClaim,
   onFulfillSwap,
@@ -66,6 +68,14 @@ export default ({
     <Box>
       {events.map(event => {
         switch (event.type) {
+          case "notification":
+            return (
+              <NotificationTimeline
+                key={event.id}
+                event={event}
+                onResend={onResendNotification}
+              />
+            )
           case "return":
             return (
               <ReturnTimeline

src/domain/orders/details/utils/build-timeline.js

@@ -1,6 +1,18 @@
-const buildTimeline = order => {
+const buildTimeline = (order, notifications) => {
   const events = []
 
+  for (const n of notifications) {
+    events.push({
+      id: n.id,
+      type: "notification",
+      event_name: n.event_name,
+      provider_id: n.provider_id,
+      created_at: n.created_at,
+      time: n.created_at,
+      raw: n,
+    })
+  }
+
   const returns = order.returns.map(r => {
     const items = r.items.map(i => {
       const line = order.items.find(({ id }) => i.item_id === id)

src/services/api.js

@@ -27,6 +27,19 @@ export default {
       // return medusaRequest("DELETE", path)
     },
   },
+  notifications: {
+    list(search = {}) {
+      const params = Object.keys(search)
+        .map(k => `${k}=${search[k]}`)
+        .join("&")
+      let path = `/admin/notifications${params && `?${params}`}`
+      return medusaRequest("GET", path)
+    },
+    resend(id, config) {
+      let path = `/admin/notifications/${id}/resend`
+      return medusaRequest("POST", path, config)
+    },
+  },
   customers: {
     retrieve(customerId) {
       const path = `/admin/customers/${customerId}`