diff --git a/crm-data-components/README.md b/crm-data-components/README.md index 28acd22..c7afce2 100644 --- a/crm-data-components/README.md +++ b/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. diff --git a/crm-data-components/images/crm-actions.gif b/crm-data-components/images/crm-actions.gif new file mode 100644 index 0000000..94956dd Binary files /dev/null and b/crm-data-components/images/crm-actions.gif differ 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..d2a8708 --- /dev/null +++ b/crm-data-components/src/app/extensions/ActionsExtension.tsx @@ -0,0 +1,203 @@ +import React, { useState, useMemo } from 'react'; +import { + Divider, + Text, + Flex, + hubspot, + Button, + Select, + ErrorState, +} 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' }, + { label: 'View Action Button Error', value: 'error' }, +]; + +const Extension = ({ context, runServerless, sendAlert }) => { + const [scenario, setScenario] = useState('engagement'); + const [error, setError] = useState(); + + const currentObjectId = context.crm.objectId; + const currentObjectTypeId = context.crm.objectTypeId; + + const actionsToPropertiesMap = useMemo(() => { + return { + 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, + }, + }, + error: { + label: 'Action button is disabled', + actionType: 'ADD_NOTE', + actionContext: { + // Missing actionContext will cause an error within CrmActionButton and disable the button + }, + }, + }; + }, [currentObjectTypeId, 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. + + + +