[OPFM-147] - Better explanation on why duplicate item adds fail (#5)

* toast message component to add a link to the code with better explaination of why plaid pattern prevents duplicate items for the same institutaion per user

* add explaination to troubleshooting.md

* update link for the toast and troubleshooting.md section to point to server README

client/src/App.css

@@ -82,6 +82,11 @@ shared styles
   background: var(--white);
 }
 
+.toast__link {
+  color: var(--white);
+  text-decoration: underline;
+}
+
 .Toastify__toast--error.toast__background {
   background: var(--red);
 }

client/src/components/DuplicateItemToast.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const DuplicateItemToastMessage = ({ institutionName }) => (
+  <>
+    <div>{`${institutionName} already linked.`}</div>
+    <a
+      className="toast__link"
+      href="https://github.com/plaid/pattern/tree/master/server#preventing-item-duplication"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Click here
+    </a>{' '}
+    for more info.
+  </>
+);
+
+export default DuplicateItemToastMessage;

client/src/components/index.js

@@ -2,6 +2,7 @@ export { default as AccountCard } from './AccountCard';
 export { default as AddUserForm } from './AddUserForm';
 export { default as Banner } from './Banner';
 export { default as Button } from './Button';
+export { default as DuplicateItemToastMessage } from './DuplicateItemToast';
 export { default as IconDots } from './IconDots';
 export { default as ItemCard } from './ItemCard';
 export { default as ItemList } from './ItemList';

client/src/services/api.js

@@ -1,6 +1,9 @@
 import axios from 'axios';
+import React from 'react';
 import { toast } from 'react-toastify';
 
+import { DuplicateItemToastMessage } from '../components';
+
 const baseURL = '/';
 
 const api = axios.create({
@@ -80,7 +83,9 @@ export const exchangeToken = async (
   } catch (err) {
     const { response } = err;
     if (response && response.status === 409) {
-      toast.error(`${institution.name} already linked.`);
+      toast.error(
+        <DuplicateItemToastMessage institutionName={institution.name} />
+      );
     } else {
       toast.error(`Error linking ${institution.name}`);
     }

docs/troubleshooting.md

@@ -7,6 +7,7 @@ If you're experiencing oddities in the app, here are some common problems and th
 ### Link returns a 400 error.
 
 e.g.:
+
 ```
 POST https://sandbox.plaid.com/link/client/get 400 (Bad Request)
 Error: Error retrieving info for public key.
@@ -16,10 +17,13 @@ Error: Error retrieving info for public key.
 
 ---
 
-## I can't access the Plaid Development environment API.**
+## I get a 409 error when linking a duplicate institution for the same user
 
-Before you can access the Development environment, you will need to request access via the [Plaid Dashboard](https://dashboard.plaid.com/overview/development).
+Plaid Pattern has implemented server logic such that duplicate account linkages are prohibited. See [preventing item duplication](https://github.com/plaid/pattern/tree/master/server#preventing-item-duplication) section for more information.
 
+## I can't access the Plaid Development environment API.\*\*
+
+Before you can access the Development environment, you will need to request access via the [Plaid Dashboard](https://dashboard.plaid.com/overview/development).
 
 ## Still need help?
 

server/README.md

@@ -10,7 +10,7 @@ Plaid does not have a user data object for tying multiple items together, so it
 
 ### Preventing item duplication
 
-Plaid does not prevent item duplication. It is entirely possible for a user to create multiple items linked to the same financial institution. In practice, you probably want to prevent this. The easiest way to do this is to check the institution id of a newly created item before performing the token exchange and storing the item. For an example of this, see the [root items route][items-routes].
+By default, Plaid Link will let a user link to the same institution multiple times. Some developers prefer disallowing duplicate account linkages because duplicate connections still come at an additional cost. It is entirely possible for a user to create multiple items linked to the same financial institution. In practice, you probably want to prevent this. The easiest way to do this is to check the institution id of a newly created item before performing the token exchange and storing the item. For an example of this, see the [root items route][items-routes].
 
 ### Using webhooks to update transaction data