Add Example to Crm Data Components to Demonstrate CrmCardActions & CrmActionButton

crm-data-components/README.md

@@ -1,9 +1,10 @@
 # Use CRM data components sample ![](https://badgen.net/badge/-/TypeScript/blue?icon=typescript&label)
 
-This React Project demonstrates the usage of HubSpot CRM Components through UIE. The project includes 2 extensions:
+This React Project demonstrates the usage of HubSpot CRM Components through UIE. The project includes 3 extensions:
 
 1. Association Table displaying important deals associated with the current user (demonstrates pre-filters, quick filters, and property projections)
 2. Stage tracker with high level properties, and property list filtered by pipeline
+3. Property list with dynamic property groups, associated card actions, and card buttons
 
 These extensions demonstrate a number of interactions including:
 
@@ -14,10 +15,12 @@ These extensions demonstrate a number of interactions including:
 
 ![Example Image of the Association Table](https://github.com/HubSpot/ui-extensions-examples/assets/110251572/3230755a-4ea2-44eb-b8b6-4858dbb01a87)
 ![Example Image of Stage Tracker](https://github.com/HubSpot/ui-extensions-examples/assets/110251572/fd35ab4d-a2ac-4165-b5de-02e8a2481a9a)
+![Example Image of Card Actions](./images/crm-actions.gif)
 
 ## Quick Start
 
 ### Step 1: Update your CLI and & authenticate your account
+
 1. Update to latest CLI version by running `npm install -g @hubspot/cli@latest`.
 2. Run `hs init` if you haven’t already done so to create a config file for your parent account.
 3. Run `hs auth` to authenticate your account. Alternatively, select your pre-authenticated account with `hs accounts use`.
@@ -27,9 +30,11 @@ These extensions demonstrate a number of interactions including:
 In the folder where you want this sample to be cloned, create a new project by running `hs project create --templateSource="HubSpot/ui-extensions-examples" --location="crm-data-components" --name="crm-data-components" --template="crm-data-components"`
 
 ### Step 3: Install dependencies
+
 Now in the CLI, `cd` into your project directory such as `cd crm-data-components`. Run `npm install` to install the dependencies for this project.
 
 ### Step 4: Upload project
+
 Run `hs project upload`. If you’d like to build on this project, run `hs project dev` to kickoff the dev process and see changes reflected locally as you build.
 
 ### Step 5: View the cards
@@ -41,7 +46,11 @@ In the main menu select `Sales` > `Deals` to view deal records. Click on any of
 2. Click `Create deal` in the top right hand corner and fill in all required fields. Click `create` once you’ve finished filling in your deal details.
 3. Your new deal should appear in the `Deals table`. Select it and navigate to the `custom tab` in the middle pane to access the sample cards.
 
-For `CRM data: Association Table example card`.In the main menu select `Contacts` > `Contacts` to view contact records. Click on any of the contact objects and navigate to the custom tab to access the sample card. If you don’t have any contacts in the account you’re using to view this sample, create a contact by the following steps:
+For `CRM data: Association Table example card`.In the main menu select `Contacts` > `Contacts` to view contact records. Click on any of the contact objects and navigate to the custom tab to access the sample card. If you don’t have any contacts in the account you’re using to view this sample, create a contact following the steps below.
+
+For `CRM data: Crm Actions`. In the main menu select `Contacts` > `Contacts` to view contact records. Click on any of the contact objects and navigate to the custom tab to access the sample card. If you don’t have any contacts in the account you’re using to view this sample, create a contact by following the steps below.
+
+#### Creating a Contact
 
 1. In the main menu, select `Contacts` > `Contacts`.
 2. Click `Create contact` in the top right hand corner and fill in all required fields. Click `create` once you’ve finished filling in your contact details.

crm-data-components/src/app/app.json

@@ -17,6 +17,9 @@
         },
         {
           "file": "extensions/association-table-example-card.json"
+        },
+        {
+          "file": "extensions/actions-example-card.json"
         }
       ]
     }

crm-data-components/src/app/extensions/ActionsExtension.tsx

@@ -0,0 +1,169 @@
+import React, { useState } from "react";
+import {
+  Divider,
+  Text,
+  Flex,
+  hubspot,
+  Form,
+  Select,
+} from "@hubspot/ui-extensions";
+import {
+  CrmPropertyList,
+  CrmCardActions,
+  CrmActionButton,
+} from "@hubspot/ui-extensions/crm";
+
+// Define the extension to be run within the Hubspot CRM
+hubspot.extend(({ context, runServerlessFunction, actions }) => (
+  <Extension
+    context={context}
+    runServerless={runServerlessFunction}
+    sendAlert={actions.addAlert}
+  />
+));
+
+const scenariosToPropertiesMap: { [key: string]: string[] } = {
+  contact: [
+    "jobtitle",
+    "industry",
+    "date_of_birth",
+    "hs_language",
+    "favorite_color",
+  ],
+  engagement: [
+    "hs_sa_first_engagement_date",
+    "hs_latest_source_data_1",
+    "engagements_last_meeting_booked",
+    "hs_email_sends_since_last_engagement",
+    "hs_time_to_first_engagement",
+  ],
+  deals: [
+    "hs_buying_role",
+    "num_associated_deals",
+    "recent_deal_amount",
+    "recent_deal_close_date",
+  ],
+  nps: [
+    "hs_feedback_show_nps_web_survey",
+    "hs_feedback_last_survey_date",
+    "hs_feedback_last_nps_rating",
+    "hs_feedback_last_nps_follow_up",
+  ],
+};
+
+const options: Array<{ label: string; value: string }> = [
+  { label: "Contact", value: "contact" },
+  { label: "Engagement", value: "engagement" },
+  { label: "Deal Summary", value: "deals" },
+  { label: "NPS", value: "nps" },
+];
+
+const Extension = ({ context, runServerless, sendAlert }) => {
+  const [scenario, setScenario] = useState<any>("engagement");
+
+  const currentObjectId = context.crm.objectId;
+  const currentObjectTypeId = context.crm.objectTypeId;
+
+  const actionsToPropertiesMap = {
+    contact: {
+      label: "View full record",
+      actionType: "PREVIEW_OBJECT",
+      actionContext: {
+        objectTypeId: currentObjectTypeId,
+        objectId: currentObjectId,
+      },
+    },
+    engagement: {
+      label: "Schedule an engagement call",
+      actionType: "SCHEDULE_MEETING",
+      actionContext: {
+        objectTypeId: currentObjectTypeId,
+        objectId: currentObjectId,
+      },
+    },
+    deals: {
+      label: "View the latest deal",
+      actionType: "PREVIEW_OBJECT",
+      actionContext: {
+        objectTypeId: "0-3",
+        objectId: 18899287678,
+      },
+    },
+    nps: {
+      label: "Email NPS Survey",
+      actionType: "SEND_EMAIL",
+      actionContext: {
+        objectTypeId: currentObjectTypeId,
+        objectId: currentObjectId,
+      },
+    },
+  };
+
+  const { label, actionContext, actionType } = actionsToPropertiesMap[scenario];
+
+  return (
+    <>
+      <CrmCardActions
+        actionConfigs={[
+          {
+            type: "dropdown",
+            label: "More",
+            options: [
+              {
+                type: "action-library-button",
+                label: "Send email",
+                actionType: "SEND_EMAIL",
+                actionContext: {
+                  objectTypeId: currentObjectTypeId,
+                  objectId: currentObjectId,
+                },
+              },
+              {
+                type: "action-library-button",
+                label: "Add Note",
+                actionType: "ADD_NOTE",
+                actionContext: {
+                  objectTypeId: currentObjectTypeId,
+                  objectId: currentObjectId,
+                },
+              },
+            ],
+          },
+        ]}
+      />
+
+      <Text variant="microcopy">
+        This is example is a card to show different groups of properties based
+        on the selected scenario.
+      </Text>
+
+      <Flex direction="row" align="end" gap="small">
+        <Form>
+          <Select
+            label="Property Group"
+            name="property-group"
+            tooltip="Please select a property group to view."
+            value={scenario}
+            onChange={(value) => setScenario(value)}
+            options={options}
+          />
+        </Form>
+        <CrmActionButton
+          actionType={actionType}
+          actionContext={actionContext}
+          variant="primary"
+          type="button"
+        >
+          {label}
+        </CrmActionButton>
+      </Flex>
+
+      <Divider />
+
+      <CrmPropertyList
+        properties={scenariosToPropertiesMap[scenario]}
+        direction="row"
+      />
+    </>
+  );
+};

crm-data-components/src/app/extensions/actions-example-card.json

@@ -0,0 +1,16 @@
+{
+  "type": "crm-card",
+  "data": {
+    "title": "CRM Data: Crm Actions",
+    "uid": "actions_example",
+    "location": "crm.record.tab",
+    "module": {
+      "file": "ActionsExtension.tsx"
+    },
+    "objectTypes": [
+      {
+        "name": "contacts"
+      }
+    ]
+  }
+}