chore: #1277 Update wording on the Webhooks page in the Developers Po…

…rtal (#1279)
reapit · May 19, 2020 · dacb9af · dacb9af
1 parent 7d6f757
commit dacb9af
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 10 deletions.
diff --git a/...ages/marketplace/src/components/pages/__tests__/__snapshots__/developer-webhooks.tsx.snap b/...ages/marketplace/src/components/pages/__tests__/__snapshots__/developer-webhooks.tsx.snap
@@ -14,7 +14,22 @@ exports[`DeveloperWebHooks should match a snapshot 1`] = `
     </Component>
     <Component>
       <Component>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore excepturi aliquam dolor, dolore placeat molestias illum quod quasi nihil. Modi consectetur praesentium sint quod qui quos soluta repellat porro minus.
+        Our webhooks system allows your application to directly subscribe to events happening in our customers data. Rather than needing to make API calls to poll for new information, a webhook subscription can be created to allow Reapit Foundations to send a HTTP request directly to your endpoints that you configure here.
+      </Component>
+      <Component>
+        This system is designed to flexibly work with how your application is built and deployed. If you wish, you can set up a single endpoint to catch all topics for all customers. Alternatively, you may wish to set up a different webhook subscription per topic or per customer.
+      </Component>
+      <Component>
+        For more information about Webhooks, please see our
+         
+        <a
+          className={[Function]}
+          href="https://foundations-documentation.reapit.cloud/api/api-documentation#webhooks"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          webhooks documentation
+        </a>
       </Component>
       <Formik
         enableReinitialize={true}
@@ -49,7 +64,22 @@ exports[`DeveloperWebHooks should match a snapshot 2`] = `
     </Component>
     <Component>
       <Component>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore excepturi aliquam dolor, dolore placeat molestias illum quod quasi nihil. Modi consectetur praesentium sint quod qui quos soluta repellat porro minus.
+        Our webhooks system allows your application to directly subscribe to events happening in our customers data. Rather than needing to make API calls to poll for new information, a webhook subscription can be created to allow Reapit Foundations to send a HTTP request directly to your endpoints that you configure here.
+      </Component>
+      <Component>
+        This system is designed to flexibly work with how your application is built and deployed. If you wish, you can set up a single endpoint to catch all topics for all customers. Alternatively, you may wish to set up a different webhook subscription per topic or per customer.
+      </Component>
+      <Component>
+        For more information about Webhooks, please see our
+         
+        <a
+          className={[Function]}
+          href="https://foundations-documentation.reapit.cloud/api/api-documentation#webhooks"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          webhooks documentation
+        </a>
       </Component>
       <Formik
         enableReinitialize={true}

diff --git a/packages/marketplace/src/components/pages/developer-webhooks.tsx b/packages/marketplace/src/components/pages/developer-webhooks.tsx
@@ -36,6 +36,7 @@ import WebhookEditModal from '../ui/webhook-edit-modal'
 import { selectDeveloperApps } from '@/selector/developer'
 import WebhookTestModal from '../ui/webhook-test-modal'
 import styles from '@/styles/elements/link.scss?mod'
+import linkStyles from '@/styles/elements/link.scss?mod'
 
 export const CreatedCell = ({ cell: { value } }): ReactElement[] => {
   return value.map((line, index) => <p key={index}>{line}</p>)
@@ -203,9 +204,25 @@ export const DeveloperWebhooks = ({
         <H3>Manage Webhook Subscriptions</H3>
         <FormSection>
           <FormSubHeading>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore excepturi aliquam dolor, dolore placeat
-            molestias illum quod quasi nihil. Modi consectetur praesentium sint quod qui quos soluta repellat porro
-            minus.
+            Our webhooks system allows your application to directly subscribe to events happening in our customers data.
+            Rather than needing to make API calls to poll for new information, a webhook subscription can be created to
+            allow Reapit Foundations to send a HTTP request directly to your endpoints that you configure here.
+          </FormSubHeading>
+          <FormSubHeading>
+            This system is designed to flexibly work with how your application is built and deployed. If you wish, you
+            can set up a single endpoint to catch all topics for all customers. Alternatively, you may wish to set up a
+            different webhook subscription per topic or per customer.
+          </FormSubHeading>
+          <FormSubHeading>
+            For more information about Webhooks, please see our{' '}
+            <a
+              className={linkStyles.link}
+              href="https://foundations-documentation.reapit.cloud/api/api-documentation#webhooks"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              webhooks documentation
+            </a>
           </FormSubHeading>
           <Formik initialValues={{ applicationId: '' }} enableReinitialize={true} onSubmit={() => {}}>
             {() => (

diff --git a/packages/marketplace/src/components/ui/__tests__/__snapshots__/webhook-test-modal.tsx.snap b/packages/marketplace/src/components/ui/__tests__/__snapshots__/webhook-test-modal.tsx.snap
@@ -56,7 +56,7 @@ exports[`WebhookTestModalBody WebhookTestModalBody should match snapshot 1`] = `
     <React.Fragment>
       <Unknown>
         <p>
-          To test your Webhook subscription, please select a ‘Subscription Topic’ below:
+          To test your Webhook subscription, please select a subscription topic and an example payload for that topic will be sent to the configured URL. For more information, see 'testing webhook link TBC'
         </p>
       </Unknown>
       <Unknown

diff --git a/packages/marketplace/src/components/ui/webhook-edit-modal.tsx b/packages/marketplace/src/components/ui/webhook-edit-modal.tsx
@@ -35,6 +35,7 @@ import {
 import { WebhookModal, CustomerItem, TopicItem } from '@/reducers/webhook-edit-modal'
 import { selectTopics, selectWebhookData, selectLoading, selectCustomers } from '@/selector/webhook-edit'
 import { isValidHttpsUrl } from '@/utils/validate'
+import linkStyles from '@/styles/elements/link.scss?mod'
 
 const CREATE_MODAL = {
   title: 'Add New Webhook',
@@ -204,10 +205,18 @@ export const WebhookModalInner: React.FunctionComponent<WebhookModalInnerProps>
                 <Form>
                   <Content>
                     <p>
-                      You can create a Webhook to receive notifications from the topics that you choose to subscribe it
-                      to. You can receive notifications for any customer that has installed your application. For more
-                      information about Webhooks, please see our{' '}
+                      Webhooks are configured here to allow your application to receive real-time notifications about
+                      the topics you choose to subscribe it to. A single webhook subscription can receive notifications
+                      for multiple topics so long as your application has been granted the required permissions.
+                    </p>
+                    <p>
+                      Webhooks subscriptions can be set up for any customer who has installed your application.
+                      Additionally, you can choose ‘SBOX’ to listen for sandbox environment notifications.
+                    </p>
+                    <p>
+                      For more information about Webhooks, please see our{' '}
                       <a
+                        className={linkStyles.link}
                         href="https://foundations-documentation.reapit.cloud/api/api-documentation#webhooks"
                         target="_blank"
                         rel="noopener noreferrer"

diff --git a/packages/marketplace/src/components/ui/webhook-test-modal.tsx b/packages/marketplace/src/components/ui/webhook-test-modal.tsx
@@ -86,7 +86,11 @@ export const WebhookTestModalBody: React.FunctionComponent<WebhookTestModalBodyP
       body={
         <>
           <Content>
-            <p>To test your Webhook subscription, please select a ‘Subscription Topic’ below:</p>
+            {/* webhook link will be provide later. https://github.com/reapit/foundations/issues/1277 */}
+            <p>
+              To test your Webhook subscription, please select a subscription topic and an example payload for that
+              topic will be sent to the configured URL. For more information, see &apos;testing webhook link TBC&apos;
+            </p>
           </Content>
           <SelectBox id="topicId" name="topicId" labelText="Subscription Topics" options={topicOptions} required />
         </>