From 5f00219c43c45af26be0dfbd0d355ff6db9745f9 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Thu, 25 Apr 2024 19:15:26 -0400 Subject: [PATCH 1/3] Create an example template for CrmCardActions and CrmActionButton --- crm-data-components/src/app/app.json | 3 + .../src/app/extensions/ActionsExtension.tsx | 169 ++++++++++++++++++ .../app/extensions/actions-example-card.json | 16 ++ 3 files changed, 188 insertions(+) create mode 100644 crm-data-components/src/app/extensions/ActionsExtension.tsx create mode 100644 crm-data-components/src/app/extensions/actions-example-card.json diff --git a/crm-data-components/src/app/app.json b/crm-data-components/src/app/app.json index b7a5511..7aaa1d1 100644 --- a/crm-data-components/src/app/app.json +++ b/crm-data-components/src/app/app.json @@ -17,6 +17,9 @@ }, { "file": "extensions/association-table-example-card.json" + }, + { + "file": "extensions/actions-example-card.json" } ] } diff --git a/crm-data-components/src/app/extensions/ActionsExtension.tsx b/crm-data-components/src/app/extensions/ActionsExtension.tsx new file mode 100644 index 0000000..2839d2e --- /dev/null +++ b/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 }) => ( + +)); + +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("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 ( + <> + + + + This is example is a card to show different groups of properties based + on the selected scenario. + + + +
+ setScenario(value)} - options={options} - /> -
+