SDP-877: Retry invitation SMS (#18)

src/api/retryInvitationSMS.ts

@@ -0,0 +1,19 @@
+import { handleApiResponse } from "api/handleApiResponse";
+import { API_URL } from "constants/settings";
+
+export const retryInvitationSMS = async (
+  token: string,
+  receiverWalletId: string,
+): Promise<{ message: string }> => {
+  const response = await fetch(
+    `${API_URL}/receivers/wallets/${receiverWalletId}`,
+    {
+      method: "PATCH",
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+
+  return handleApiResponse(response);
+};

src/generated/gitInfo.ts

@@ -1 +1 @@
-export default { commitHash: "4aaf371", version: "1.0.0-rc2-21-g4aaf371" };
+export default { commitHash: "d13cf63", version: "1.0.0-rc2-10-gd13cf63" };

src/pages/ReceiverDetails.tsx

@@ -11,7 +11,11 @@ import {
 } from "@stellar/design-system";
 
 import { AppDispatch } from "store";
-import { getReceiverDetailsAction } from "store/ducks/receiverDetails";
+import {
+  getReceiverDetailsAction,
+  resetRetryStatusAction,
+  retryInvitationSMSAction,
+} from "store/ducks/receiverDetails";
 import {
   getReceiverPaymentsAction,
   getReceiverPaymentsWithParamsAction,
@@ -28,6 +32,7 @@ import { PaymentsTable } from "components/PaymentsTable";
 import { Pagination } from "components/Pagination";
 import { ReceiverWalletBalance } from "components/ReceiverWalletBalance";
 import { ReceiverWalletHistory } from "components/ReceiverWalletHistory";
+import { NotificationWithButtons } from "components/NotificationWithButtons";
 
 import { number, percent } from "helpers/formatIntlNumber";
 import { renderNumberOrDash } from "helpers/renderNumberOrDash";
@@ -125,6 +130,10 @@ export const ReceiverDetails = () => {
     handlePageChange(newPage);
   };
 
+  const handleRetryInvitation = (receiverWalletId: string) => {
+    dispatch(retryInvitationSMSAction({ receiverWalletId }));
+  };
+
   const setCardTemplateRows = (rows: number) => {
     return {
       "--StatCard-template-rows": rows,
@@ -256,28 +265,76 @@ export const ReceiverDetails = () => {
   const renderWallets = () => {
     return (
       <div className="ReceiverDetails__wallets">
-        <div className="ReceiverDetails__wallets__dropdown">
-          <Select
-            fieldSize="sm"
-            id="receiver-wallets"
-            value={selectedWallet?.id}
-            onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
-              setSelectedWallet(
-                receiverDetails.wallets.find(
-                  (w) => w.id === event.currentTarget.value,
-                ),
-              )
-            }
+        {receiverDetails.retryInvitationStatus === "SUCCESS" && (
+          <NotificationWithButtons
+            variant="success"
+            title="SMS invitation sent successfully!"
+            buttons={[
+              {
+                label: "Dismiss",
+                onClick: () => {
+                  dispatch(resetRetryStatusAction());
+                },
+              },
+            ]}
           >
-            {receiverDetails.wallets.map((w) => (
-              <option key={w.id} value={w.id}>
-                {renderWalletOptionText(w)}
-              </option>
-            ))}
-          </Select>
-
-          <div className="ReceiverDetails__wallets__subtitle">
-            {renderTitle(receiverDetails.wallets.length, "wallet", "wallets")}
+            {" "}
+          </NotificationWithButtons>
+        )}
+        {receiverDetails.retryInvitationStatus === "ERROR" && (
+          <NotificationWithButtons
+            variant="error"
+            title="Error"
+            buttons={[
+              {
+                label: "Dismiss",
+                onClick: () => {
+                  dispatch(resetRetryStatusAction());
+                },
+              },
+            ]}
+          >
+            {receiverDetails.errorString}
+          </NotificationWithButtons>
+        )}
+        <div className="ReceiverDetails__wallets__row">
+          <div className="ReceiverDetails__wallets__dropdown">
+            <Select
+              fieldSize="sm"
+              id="receiver-wallets"
+              value={selectedWallet?.id}
+              onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
+                setSelectedWallet(
+                  receiverDetails.wallets.find(
+                    (w) => w.id === event.currentTarget.value,
+                  ),
+                )
+              }
+            >
+              {receiverDetails.wallets.map((w) => (
+                <option key={w.id} value={w.id}>
+                  {renderWalletOptionText(w)}
+                </option>
+              ))}
+            </Select>
+
+            <div className="ReceiverDetails__wallets__subtitle">
+              {renderTitle(receiverDetails.wallets.length, "wallet", "wallets")}
+            </div>
+          </div>
+
+          <div>
+            <Button
+              variant="secondary"
+              size="xs"
+              type="reset"
+              onClick={(e) => {
+                e.preventDefault();
+                handleRetryInvitation(selectedWallet?.id || "");
+              }}
+            >
+              Retry Invitation SMS
+            </Button>
           </div>
         </div>
 
@@ -422,7 +479,10 @@ export const ReceiverDetails = () => {
   };
 
   const renderContent = () => {
-    if (receiverDetails.errorString) {
+    if (
+      receiverDetails.errorString &&
+      receiverDetails.retryInvitationStatus !== "ERROR"
+    ) {
       return (
         <Notification variant="error" title="Error">
           {receiverDetails.errorString}

src/store/ducks/receiverDetails.ts

@@ -2,6 +2,7 @@ import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { RootState } from "store";
 import { getReceiverDetails } from "api/getReceiverDetails";
 import { patchReceiverInfo } from "api/patchReceiver";
+import { retryInvitationSMS } from "api/retryInvitationSMS";
 import { handleApiErrorString } from "api/handleApiErrorString";
 import { endSessionIfTokenInvalid } from "helpers/endSessionIfTokenInvalid";
 import { refreshSessionToken } from "helpers/refreshSessionToken";
@@ -69,6 +70,31 @@ export const updateReceiverDetailsAction = createAsyncThunk<
   },
 );
 
+export const retryInvitationSMSAction = createAsyncThunk<
+  string,
+  { receiverWalletId: string },
+  { rejectValue: RejectMessage; state: RootState }
+>(
+  "receiverDetails/retryInvitationSMSAction",
+  async ({ receiverWalletId }, { rejectWithValue, getState, dispatch }) => {
+    const { token } = getState().userAccount;
+
+    try {
+      const response = await retryInvitationSMS(token, receiverWalletId);
+      return response.message;
+    } catch (error: unknown) {
+      const err = error as ApiError;
+      const errorString = handleApiErrorString(err);
+      endSessionIfTokenInvalid(errorString, dispatch);
+
+      return rejectWithValue({
+        errorString: `Error retrying invitation: ${errorString}`,
+        errorExtras: err?.extras,
+      });
+    }
+  },
+);
+
 const initialState: ReceiverDetailsInitialState = {
   id: "",
   phoneNumber: "",
@@ -104,6 +130,7 @@ const initialState: ReceiverDetailsInitialState = {
   ],
   status: undefined,
   updateStatus: undefined,
+  retryInvitationStatus: undefined,
   errorString: undefined,
 };
 
@@ -112,6 +139,9 @@ const receiverDetailsSlice = createSlice({
   initialState,
   reducers: {
     resetReceiverDetailsAction: () => initialState,
+    resetRetryStatusAction: (state) => {
+      state.retryInvitationStatus = undefined;
+    },
   },
   extraReducers: (builder) => {
     // Get receiver details
@@ -153,13 +183,29 @@ const receiverDetailsSlice = createSlice({
       state.updateStatus = "ERROR";
       state.errorString = action.payload?.errorString;
     });
+    //retryInvitationSMSAction
+    builder.addCase(
+      retryInvitationSMSAction.pending,
+      (state = initialState) => {
+        state.retryInvitationStatus = "PENDING";
+      },
+    );
+    builder.addCase(retryInvitationSMSAction.fulfilled, (state) => {
+      state.retryInvitationStatus = "SUCCESS";
+      state.errorString = undefined;
+    });
+    builder.addCase(retryInvitationSMSAction.rejected, (state, action) => {
+      state.retryInvitationStatus = "ERROR";
+      state.errorString = action.payload?.errorString;
+    });
   },
 });
 
 export const receiverDetailsSelector = (state: RootState) =>
   state.receiverDetails;
 export const { reducer } = receiverDetailsSlice;
-export const { resetReceiverDetailsAction } = receiverDetailsSlice.actions;
+export const { resetReceiverDetailsAction, resetRetryStatusAction } =
+  receiverDetailsSlice.actions;
 
 const formatReceiver = (receiver: ApiReceiver): ReceiverDetails => ({
   id: receiver.id,

src/styles.scss

@@ -369,6 +369,12 @@ body {
     margin-bottom: pxToRem(12px);
   }
 
+  &__row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
   &__dropdown {
     display: flex;
     align-items: center;

src/types/index.ts

@@ -153,6 +153,7 @@ export type ReceiverDetailsInitialState = {
   verifications: ReceiverVerification[];
   status: ActionStatus | undefined;
   updateStatus: ActionStatus | undefined;
+  retryInvitationStatus: ActionStatus | undefined;
   errorString?: string;
 };