Hubspot make use of pop-up email in contacts onclick button with customized crm card

Question

Can anyone help me here? I have been stuck with this problem for 3 days. I joined the Slack community for help, but no one has responded.

I have an issue with the pop-up email in contacts. I asked if this is possible, and I was told it is, but I keep getting error codes that I can't resolve. I am creating a customized CRM card using the existing template from the command "hs project create." What I really want is a button that, when clicked, will open the pop-up email interaction/email editor in HubSpot contacts and copy the subject and body that I want to send in the email.

Here is what i did so far: i have this file : Example.jsx

import React, { useState, useEffect } from "react";
import {
  Button,
  hubspot,
} from "@hubspot/ui-extensions";

// Define the extension to be run within the Hubspot CRM
hubspot.extend(({ context, runServerlessFunction, actions }) => (
  <Extension
    context={context}
    runServerless={runServerlessFunction}
    sendAlert={actions.addAlert}
  />
));


const Extension = ({ context, runServerless, sendAlert }) => {
  const [loginState, setLoginState] = useState({
    token: null,
    personId: null,
    workEmail: null,
  });

  const handleSendEmail = async (email) => {
    try {
      const { response } = await runServerless({
        name: "emailEditor",
        parameters: {
          subject: "test subject",
          body: "test body",
          to: [{ email: email }],
        },
      });
    } catch (error) {
      console.error("Error opening email editor:", error);
    }
  };

  return (
    <Button
      type="submit"
      onClick={() => handleSendEmail(email)}
      variant="destructive"
    >
      Send Email
    </Button>
  );
};

export default Extension;

then i created a file of openEmailInCRM.js

import React from "react";

import { useServerlessFunction } from "@hubspot/ui-extensions";

export default async function openEmailInCRM(context) {
  const { subject, body, to } = context.parameters;
  const { actions } = useServerlessFunction();
  try {
    await actions.openEmailEditor({ subject, body, to });
  } catch (error) {
    console.error("Error opening email editor", error);
  }
}

then i have a file on the app.functions:

const hubspot = require("@hubspot/api-client");

exports.main = async (context = {}) => {  
  const { subject, body, to } = context.parameters;
  try {
    await context.runServerlessFunction({
      name: "openEmailInCRM",
      parameters: {
        subject,
        body,
        to,
      },
    });

    return {
      statusCode: 200,
    };
  } catch (error) {
    console.error("Error opening email editor", error);

    return {
      statusCode: error,
    };
  }
};

Error opening email editor TypeError: context.runServerlessFunction is not a function

I really ran out of idea on how to do this. I am hoping to someone who could help to find a solution with my problem.

Here is my serverless.json:

{
  "appFunctions": {
    "myFunc": {
      "file": "example-function.js",
      "secrets": []
    },    
    "emailEditor": {
      "file": "open-email-editor.js",
      "secrets": []
    },
    "openEmailInCRM": {
      "file": "openEmailInCRM.js",
      "secrets": []
    }
  }
}