@amp-labs/react 1.0.2 → 1.2.0

package/build/src/components/Configure/types.d.ts

@@ -1,15 +1,23 @@
-import { HydratedIntegrationField, HydratedIntegrationFieldExistent, IntegrationFieldMapping } from '../../services/api';
+import { HydratedIntegrationField, HydratedIntegrationFieldExistent, HydratedIntegrationWriteObject, IntegrationFieldMapping } from '../../services/api';
+export type SelectedNonConfigurableWriteFields = {
+    [key: string]: boolean;
+};
+type SavedWriteConfigureState = {
+    selectedNonConfigurableWriteFields: SelectedNonConfigurableWriteFields;
+};
+export type ConfigureStateWrite = {
+    writeObjects: HydratedIntegrationWriteObject[] | null;
+    selectedNonConfigurableWriteFields: SelectedNonConfigurableWriteFields | null;
+    isWriteModified: boolean;
+    savedConfig: SavedWriteConfigureState;
+};
 export type SelectOptionalFields = {
     [key: string]: boolean;
 };
 export type SelectMappingFields = {
     [key: string]: string | undefined;
 };
-type SavedConfigureState = {
-    optionalFields: SelectOptionalFields;
-    requiredMapFields: SelectMappingFields;
-};
-export type ConfigureState = {
+export type ConfigureStateRead = {
     allFields: HydratedIntegrationFieldExistent[] | null;
     requiredFields: HydratedIntegrationField[] | null;
     optionalFields: HydratedIntegrationField[] | null;
@@ -20,6 +28,14 @@ export type ConfigureState = {
     isRequiredMapFieldsModified: boolean;
     savedConfig: SavedConfigureState;
 };
+type SavedConfigureState = {
+    optionalFields: SelectOptionalFields;
+    requiredMapFields: SelectMappingFields;
+};
+export type ConfigureState = {
+    read: ConfigureStateRead | null;
+    write: ConfigureStateWrite | null;
+};
 export type ObjectConfigurationsState = Record<string, ConfigureState>;
 export type NavObject = {
     name: string;

package/build/src/components/Configure/utils.d.ts

@@ -11,7 +11,7 @@ export declare function isIntegrationFieldMapping(field: HydratedIntegrationFiel
 /**
  *
  * @param action HydratedIntegrationAction
- * @param objectName string (account, contect, etc...)
+ * @param objectName string (account, contact, etc...)
  * @returns HydratedIntegrationObject | null
  */
 export declare function getStandardObjectFromAction(action: HydratedIntegrationRead, objectName: string): HydratedIntegrationObject | null;
@@ -20,7 +20,8 @@ export declare function getRequiredMapFieldsFromObject(object: HydratedIntegrati
 export declare function getOptionalFieldsFromObject(object: HydratedIntegrationObject): HydratedIntegrationField[] | null;
 export declare const getReadObject: (config: Config, objectName: string) => any;
 export declare function getFieldKeyValue(field: HydratedIntegrationField): string;
+export declare const generateOtherNavObject: (config: Config | undefined) => NavObject;
 export declare function generateNavObjects(config: Config | undefined, hydratedRevision: HydratedRevision): NavObject[];
-export declare function validateFieldMappings(requiredMapFields: IntegrationFieldMapping[] | null, selectedRequiredMapFields: SelectMappingFields | null, setErrors: (boundary: ErrorBoundary, errors: string[]) => void): {
+export declare function validateFieldMappings(requiredMapFields: IntegrationFieldMapping[] | null | undefined, selectedRequiredMapFields: SelectMappingFields | null | undefined, setErrors: (boundary: ErrorBoundary, errors: string[]) => void): {
     errorList: string[];
 };

package/build/src/components/Configure/utils.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateFieldMappings = exports.generateNavObjects = exports.getFieldKeyValue = exports.getReadObject = exports.getOptionalFieldsFromObject = exports.getRequiredMapFieldsFromObject = exports.getRequiredFieldsFromObject = exports.getStandardObjectFromAction = exports.isIntegrationFieldMapping = void 0;
+exports.validateFieldMappings = exports.generateNavObjects = exports.generateOtherNavObject = exports.getFieldKeyValue = exports.getReadObject = exports.getOptionalFieldsFromObject = exports.getRequiredMapFieldsFromObject = exports.getRequiredFieldsFromObject = exports.getStandardObjectFromAction = exports.isIntegrationFieldMapping = void 0;
 const ErrorContextProvider_1 = require("../../context/ErrorContextProvider");
+const constant_1 = require("./nav/ObjectManagementNav/constant");
 /**
  * type guard for IntegrationFieldMapping | IntegrationFieldExistent
  *
@@ -16,7 +17,7 @@ exports.isIntegrationFieldMapping = isIntegrationFieldMapping;
 /**
  *
  * @param action HydratedIntegrationAction
- * @param objectName string (account, contect, etc...)
+ * @param objectName string (account, contact, etc...)
  * @returns HydratedIntegrationObject | null
  */
 function getStandardObjectFromAction(action, objectName) {
@@ -50,11 +51,16 @@ function getFieldKeyValue(field) {
     if (isIntegrationFieldMapping(field)) {
         return field.mapToName; // custom mapping
     }
-    return field.fieldName; // existant field
+    return field.fieldName; // existent field
 }
 exports.getFieldKeyValue = getFieldKeyValue;
-// generates standard objects and whether they are complete based on config and hydrated revision
-function generateNavObjects(config, hydratedRevision) {
+/**
+ * generates Nav Objects for read action
+ * @param config
+ * @param hydratedRevision
+ * @returns NavObject[]
+ */
+const generateReadNavObjects = (config, hydratedRevision) => {
     var _a, _b, _c;
     const navObjects = [];
     (_c = (_b = (_a = hydratedRevision.content) === null || _a === void 0 ? void 0 : _a.read) === null || _b === void 0 ? void 0 : _b.standardObjects) === null || _c === void 0 ? void 0 : _c.forEach((object) => {
@@ -66,6 +72,20 @@ function generateNavObjects(config, hydratedRevision) {
         });
     });
     return navObjects;
+};
+const generateOtherNavObject = (config) => {
+    var _a;
+    const navObject = {
+        name: constant_1.OTHER_CONST,
+        completed: config ? !!((_a = config === null || config === void 0 ? void 0 : config.content) === null || _a === void 0 ? void 0 : _a.write) : false,
+    };
+    return navObject;
+};
+exports.generateOtherNavObject = generateOtherNavObject;
+// generates standard objects and whether they are complete based on config and hydrated revision
+function generateNavObjects(config, hydratedRevision) {
+    const navObjects = generateReadNavObjects(config, hydratedRevision);
+    return navObjects;
 }
 exports.generateNavObjects = generateNavObjects;
 // validates whether required fields are filled out or throws error

package/build/src/components/Connect/ConnectProvider.d.ts

@@ -4,6 +4,8 @@ interface ConnectProviderProps {
     consumerName?: string;
     groupRef: string;
     groupName?: string;
+    redirectUrl?: string;
+    onSuccess?: (connectionID: string) => void;
 }
-export declare function ConnectProvider({ provider, consumerRef, consumerName, groupRef, groupName, }: ConnectProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConnectProvider({ provider, consumerRef, consumerName, groupRef, groupName, redirectUrl, onSuccess, }: ConnectProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/src/components/Connect/ConnectProvider.js

@@ -2,17 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConnectProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
-const NavIcon_1 = require("../../assets/NavIcon");
-const ConnectionsContext_1 = require("../../context/ConnectionsContext");
-const ProjectContext_1 = require("../../context/ProjectContext");
-const utils_1 = require("../../utils");
-const ProtectedConnectionLayout_1 = require("../Configure/ProtectedConnectionLayout");
-function ConnectedSuccessBox({ provider }) {
-    const { appName } = (0, ProjectContext_1.useProject)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Container, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { p: 8, maxWidth: "600px", minHeight: "290px", borderWidth: 1, borderRadius: 8, boxShadow: "lg", margin: "auto", marginTop: "40px", bgColor: "white", paddingTop: "100px", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { width: "100%", display: "flex", alignContent: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(react_1.Box, { margin: "auto", children: NavIcon_1.CheckMarkIcon }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { textAlign: "center", paddingTop: "25px", children: `You've successfully connected ${(0, utils_1.capitalize)(provider)} to ${appName}.` })] }) }));
-}
-function ConnectProvider({ provider, consumerRef, consumerName, groupRef, groupName, }) {
-    return ((0, jsx_runtime_1.jsx)(ConnectionsContext_1.ConnectionsProvider, { provider: provider, groupRef: groupRef, children: (0, jsx_runtime_1.jsx)(ProtectedConnectionLayout_1.ProtectedConnectionLayout, { provider: provider, consumerRef: consumerRef, consumerName: consumerName, groupRef: groupRef, groupName: groupName, children: (0, jsx_runtime_1.jsx)(ConnectedSuccessBox, { provider: provider }) }) }));
+const ConnectionsContextProvider_1 = require("../../context/ConnectionsContextProvider");
+const ProtectedConnectionLayout_1 = require("../Configure/layout/ProtectedConnectionLayout");
+const RedirectHandler_1 = require("../RedirectHandler");
+const ConnectedSuccessBox_1 = require("./ConnectedSuccessBox");
+function ConnectProvider({ provider, consumerRef, consumerName, groupRef, groupName, redirectUrl, onSuccess, }) {
+    return ((0, jsx_runtime_1.jsx)(ConnectionsContextProvider_1.ConnectionsProvider, { provider: provider, groupRef: groupRef, children: (0, jsx_runtime_1.jsx)(ProtectedConnectionLayout_1.ProtectedConnectionLayout, { provider: provider, consumerRef: consumerRef, consumerName: consumerName, groupRef: groupRef, groupName: groupName, onSuccess: onSuccess, children: (0, jsx_runtime_1.jsx)(RedirectHandler_1.RedirectHandler, { redirectURL: redirectUrl, children: (0, jsx_runtime_1.jsx)(ConnectedSuccessBox_1.ConnectedSuccessBox, { provider: provider }) }) }) }));
 }
 exports.ConnectProvider = ConnectProvider;

package/build/src/components/Connect/ConnectedSuccessBox.d.ts

@@ -0,0 +1,5 @@
+interface ConnectedSuccessBoxProps {
+    provider: string;
+}
+export declare function ConnectedSuccessBox({ provider }: ConnectedSuccessBoxProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/src/components/Connect/ConnectedSuccessBox.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectedSuccessBox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const NavIcon_1 = require("../../assets/NavIcon");
+const ProjectContextProvider_1 = require("../../context/ProjectContextProvider");
+const utils_1 = require("../../utils");
+function ConnectedSuccessBox({ provider }) {
+    const { appName } = (0, ProjectContextProvider_1.useProject)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Container, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { p: 8, maxWidth: "600px", minHeight: "290px", borderWidth: 1, borderRadius: 8, boxShadow: "lg", margin: "auto", marginTop: "40px", bgColor: "white", paddingTop: "100px", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { width: "100%", display: "flex", alignContent: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(react_1.Box, { margin: "auto", children: NavIcon_1.CheckMarkIcon }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { textAlign: "center", paddingTop: "25px", children: `You've successfully connected ${(0, utils_1.capitalize)(provider)} to ${appName}.` })] }) }));
+}
+exports.ConnectedSuccessBox = ConnectedSuccessBox;

package/build/src/components/Connect/useConnectionHandler.d.ts

@@ -0,0 +1,10 @@
+type ConnectionHandlerPropsProps = {
+    onSuccess?: (connectionID: string) => void;
+};
+/**
+ * ConnectionHandler is a component that handles onSuccess and onError callbacks
+ * @param onSuccess - callback function to be called when a connection is successful
+ * @returns
+ */
+export declare function useConnectionHandler({ onSuccess }: ConnectionHandlerPropsProps): void;
+export {};

package/build/src/components/Connect/useConnectionHandler.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConnectionHandler = void 0;
+const react_1 = require("react");
+const ConnectionsContextProvider_1 = require("../../context/ConnectionsContextProvider");
+function useOnSuccessHandler(onSuccess) {
+    const { selectedConnection } = (0, ConnectionsContextProvider_1.useConnections)();
+    (0, react_1.useEffect)(() => {
+        // Check if a onSuccess callback is present
+        if (onSuccess && selectedConnection) {
+            // call callback when connection is selected
+            onSuccess(selectedConnection.id);
+        }
+    }, [onSuccess, selectedConnection]);
+}
+/**
+ * ConnectionHandler is a component that handles onSuccess and onError callbacks
+ * @param onSuccess - callback function to be called when a connection is successful
+ * @returns
+ */
+function useConnectionHandler({ onSuccess }) {
+    useOnSuccessHandler(onSuccess);
+}
+exports.useConnectionHandler = useConnectionHandler;

package/build/src/components/ErrorTextBox.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorTextBox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+function ErrorTextBox({ message }) {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { minHeight: "300px", padding: "30px", display: "flex", flexDirection: "column", justifyContent: "space-evenly", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { 
+                        // eslint-disable-next-line max-len
+                        d: "M20.5796 7.72236L3.63955 36.0024C3.29029 36.6072 3.10549 37.293 3.10353 37.9914C3.10158 38.6898 3.28254 39.3766 3.62841 39.9834C3.97428 40.5902 4.473 41.0959 5.07497 41.4501C5.67693 41.8043 6.36115 41.9947 7.05955 42.0024H40.9396C41.638 41.9947 42.3222 41.8043 42.9241 41.4501C43.5261 41.0959 44.0248 40.5902 44.3707 39.9834C44.7166 39.3766 44.8975 38.6898 44.8956 37.9914C44.8936 37.293 44.7088 36.6072 44.3596 36.0024L27.4196 7.72236C27.063 7.13458 26.561 6.6486 25.9619 6.31133C25.3629 5.97406 24.687 5.79688 23.9996 5.79688C23.3121 5.79688 22.6362 5.97406 22.0372 6.31133C21.4381 6.6486 20.9361 7.13458 20.5796 7.72236Z", stroke: "#7F1D1D", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M24 18V26", stroke: "#7F1D1D", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M24 34H24.02", stroke: "#7F1D1D", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { boxSizing: "border-box", display: "flex", justifyContent: "center", alignItems: "center", "align-self": "stretch", padding: "12px 50px 12px 50px", borderRadius: "8px", border: "2px solid #FECACA", background: "#FEF2F2", children: (0, jsx_runtime_1.jsx)(react_1.Text, { color: "#991B1B", children: message }) })] }));
+}
+exports.ErrorTextBox = ErrorTextBox;

package/build/src/components/Oauth/NoSubdomainEntry/LandingContent.d.ts

@@ -0,0 +1,8 @@
+type LandingContentProps = {
+    provider: string;
+    handleSubmit: () => void;
+    error: string | null;
+    isButtonDisabled?: boolean;
+};
+export declare function LandingContent({ provider, handleSubmit, error, isButtonDisabled, }: LandingContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/src/components/Oauth/NoSubdomainEntry/LandingContent.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LandingContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const utils_1 = require("../../../utils");
+const OAuthErrorAlert_1 = require("../OAuthErrorAlert");
+function LandingContent({ provider, handleSubmit, error, isButtonDisabled, }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Container, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { p: 8, maxWidth: "600px", borderWidth: 1, borderRadius: 8, boxShadow: "lg", textAlign: ['left'], margin: "auto", marginTop: "40px", bgColor: "white", children: (0, jsx_runtime_1.jsxs)(react_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(react_1.FormLabel, { marginTop: "16", marginBottom: "0", children: (0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h4", size: "md", children: `Set up ${(0, utils_1.capitalize)(provider)} integration` }) }), (0, jsx_runtime_1.jsx)(OAuthErrorAlert_1.OAuthErrorAlert, { error: error }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.Button, { isDisabled: isButtonDisabled, width: "100%", type: "submit", onClick: handleSubmit, children: "Next" })] }) }) }));
+}
+exports.LandingContent = LandingContent;

package/build/src/components/Oauth/NoSubdomainEntry/NoSubdomainOauthFlow.d.ts

@@ -0,0 +1,16 @@
+/**
+ * OAuth flow for any providers that do not require the consumer to enter a subdomain first.
+ */
+interface NoSubdomainOauthFlowProps {
+    provider: string;
+    consumerRef: string;
+    consumerName?: string;
+    groupRef: string;
+    groupName?: string;
+}
+/**
+ * NoSubdomainOauthFlow first prompts user with a next button,
+ * then launches a popup with the OAuth flow.
+ */
+export declare function NoSubdomainOauthFlow({ provider, consumerRef, consumerName, groupRef, groupName, }: NoSubdomainOauthFlowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/src/components/Oauth/NoSubdomainEntry/NoSubdomainOauthFlow.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoSubdomainOauthFlow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * OAuth flow for any providers that do not require the consumer to enter a subdomain first.
+ */
+const react_1 = require("react");
+const ApiKeyContextProvider_1 = require("../../../context/ApiKeyContextProvider");
+const ProjectContextProvider_1 = require("../../../context/ProjectContextProvider");
+const utils_1 = require("../../../utils");
+const fetchOAuthCallbackURL_1 = require("../fetchOAuthCallbackURL");
+const OAuthPopup_1 = __importDefault(require("../OAuthPopup"));
+const LandingContent_1 = require("./LandingContent");
+/**
+ * NoSubdomainOauthFlow first prompts user with a next button,
+ * then launches a popup with the OAuth flow.
+ */
+function NoSubdomainOauthFlow({ provider, consumerRef, consumerName, groupRef, groupName, }) {
+    const { projectId } = (0, ProjectContextProvider_1.useProject)();
+    const apiKey = (0, ApiKeyContextProvider_1.useApiKey)();
+    const [oAuthCallbackURL, setOAuthCallbackURL] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    // 1. fetch provider apps
+    // 2. find matching app to provider
+    // 3. fetch OAuth callback URL from connection so that oath popup can be launched
+    const handleSubmit = async () => {
+        var _a;
+        setError(null);
+        if (consumerName && groupName && apiKey) {
+            try {
+                const url = await (0, fetchOAuthCallbackURL_1.fetchOAuthCallbackURL)(projectId, consumerRef, groupRef, consumerName, groupName, apiKey, provider);
+                setOAuthCallbackURL(url);
+            }
+            catch (err) {
+                console.error(err);
+                setError((_a = err.message) !== null && _a !== void 0 ? _a : 'Unexpected error');
+            }
+        }
+    };
+    const onClose = (0, react_1.useCallback)((err) => {
+        setError(err);
+        setOAuthCallbackURL(null);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(OAuthPopup_1.default, { title: `Connect to ${(0, utils_1.capitalize)(provider)}`, url: oAuthCallbackURL, onClose: onClose, children: (0, jsx_runtime_1.jsx)(LandingContent_1.LandingContent, { provider: provider, handleSubmit: handleSubmit, error: error }) }));
+}
+exports.NoSubdomainOauthFlow = NoSubdomainOauthFlow;

package/build/src/components/Oauth/OAuthErrorAlert.d.ts

@@ -0,0 +1,5 @@
+interface OAuthErrorAlertProps {
+    error: string | null;
+}
+export declare function OAuthErrorAlert({ error }: OAuthErrorAlertProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/build/src/components/Oauth/OAuthErrorAlert.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OAuthErrorAlert = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+function OAuthErrorAlert({ error }) {
+    if (error) {
+        return ((0, jsx_runtime_1.jsxs)(react_1.Alert, { status: "error", marginTop: "2em", children: [(0, jsx_runtime_1.jsx)(react_1.AlertIcon, {}), (0, jsx_runtime_1.jsx)(react_1.AlertDescription, { children: error })] }));
+    }
+    return null;
+}
+exports.OAuthErrorAlert = OAuthErrorAlert;

package/build/src/components/{Connect → Oauth}/OAuthPopup.js

@@ -7,9 +7,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * Takes a URL and creates a popup showing that page.
  */
 const react_1 = require("react");
-const ApiKeyProvider_1 = require("../../context/ApiKeyProvider");
-const ConnectionsContext_1 = require("../../context/ConnectionsContext");
-const ProjectContext_1 = require("../../context/ProjectContext");
+const ApiKeyContextProvider_1 = require("../../context/ApiKeyContextProvider");
+const ConnectionsContextProvider_1 = require("../../context/ConnectionsContextProvider");
+const ProjectContextProvider_1 = require("../../context/ProjectContextProvider");
 const api_1 = require("../../services/api");
 const DEFAULT_WIDTH = 600; // px
 const DEFAULT_HEIGHT = 600; // px
@@ -23,21 +23,19 @@ const createPopup = ({ url, title, }) => {
     return popup;
 };
 function OAuthPopup({ title = '', url, children, onClose, }) {
-    const { projectId } = (0, ProjectContext_1.useProject)();
-    const apiKey = (0, ApiKeyProvider_1.useApiKey)();
+    const { projectId } = (0, ProjectContextProvider_1.useProject)();
+    const apiKey = (0, ApiKeyContextProvider_1.useApiKey)();
     const [externalWindow, setExternalWindow] = (0, react_1.useState)();
     const intervalRef = (0, react_1.useRef)();
     const clearTimer = () => window.clearInterval(intervalRef.current);
-    const { setSelectedConnection } = (0, ConnectionsContext_1.useConnections)();
+    const { setSelectedConnection } = (0, ConnectionsContextProvider_1.useConnections)();
     (0, react_1.useEffect)(() => {
         if (url)
             setExternalWindow(createPopup({ url, title }));
     }, [url, title]);
     const refreshConnections = (0, react_1.useCallback)(async (connectionId) => {
-        const connection = await (0, api_1.api)().getConnection({ projectId, connectionId }, {
-            headers: {
-                'X-Api-Key': apiKey !== null && apiKey !== void 0 ? apiKey : '',
-            },
+        const connection = await (0, api_1.api)().connectionApi.getConnection({ projectId, connectionId }, {
+            headers: { 'X-Api-Key': apiKey !== null && apiKey !== void 0 ? apiKey : '' },
         });
         setSelectedConnection(connection);
     }, [projectId, apiKey, setSelectedConnection]);

package/build/src/components/{Salesforce → Oauth/Salesforce}/SalesforceOauthFlow.d.ts

@@ -12,5 +12,5 @@ interface SalesforceOauthFlowProps {
  * SalesforceOauthFlow first prompts user for their workspace ("subdomain" in Salesforce lingo),
  * then launches a popup with the OAuth flow.
  */
-declare function SalesforceOauthFlow({ consumerRef, consumerName, groupRef, groupName, }: SalesforceOauthFlowProps): import("react/jsx-runtime").JSX.Element;
-export default SalesforceOauthFlow;
+export declare function SalesforceOauthFlow({ consumerRef, consumerName, groupRef, groupName, }: SalesforceOauthFlowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/src/components/Oauth/Salesforce/SalesforceOauthFlow.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SalesforceOauthFlow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Prompts customer to input their Salesforce subdomain, then creates an OAuth connection to
+ * that Salesforce instance.
+ */
+const react_1 = require("react");
+const constants_1 = require("../../../constants");
+const ApiKeyContextProvider_1 = require("../../../context/ApiKeyContextProvider");
+const ProjectContextProvider_1 = require("../../../context/ProjectContextProvider");
+const fetchOAuthCallbackURL_1 = require("../fetchOAuthCallbackURL");
+const OAuthPopup_1 = __importDefault(require("../OAuthPopup"));
+const SubdomainEntry_1 = require("./SubdomainEntry");
+/**
+ * SalesforceOauthFlow first prompts user for their workspace ("subdomain" in Salesforce lingo),
+ * then launches a popup with the OAuth flow.
+ */
+function SalesforceOauthFlow({ consumerRef, consumerName, groupRef, groupName, }) {
+    const { projectId } = (0, ProjectContextProvider_1.useProject)();
+    const apiKey = (0, ApiKeyContextProvider_1.useApiKey)();
+    const [workspace, setWorkspace] = (0, react_1.useState)('');
+    const [oAuthCallbackURL, setOAuthCallbackURL] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    const isButtonDisabled = workspace.length === 0;
+    const provider = constants_1.PROVIDER_SALESFORCE;
+    // 1. fetch provider apps
+    // 2. find matching app to provider
+    // 3. fetch OAuth callback URL from connection so that oath popup can be launched
+    const handleSubmit = async () => {
+        var _a;
+        setError(null);
+        if (workspace && consumerName && groupName && apiKey) {
+            try {
+                const url = await (0, fetchOAuthCallbackURL_1.fetchOAuthCallbackURL)(projectId, consumerRef, groupRef, consumerName, groupName, apiKey, provider, workspace);
+                setOAuthCallbackURL(url);
+            }
+            catch (err) {
+                console.error(err);
+                setError((_a = err.message) !== null && _a !== void 0 ? _a : 'Unexpected error');
+            }
+        }
+        else {
+            setError('missing required fields');
+        }
+    };
+    const onClose = (0, react_1.useCallback)((err) => {
+        setError(err);
+        setOAuthCallbackURL(null);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(OAuthPopup_1.default, { title: "Connect to Salesforce", url: oAuthCallbackURL, onClose: onClose, children: (0, jsx_runtime_1.jsx)(SubdomainEntry_1.SubdomainEntry, { handleSubmit: handleSubmit, setWorkspace: setWorkspace, error: error, isButtonDisabled: isButtonDisabled }) }));
+}
+exports.SalesforceOauthFlow = SalesforceOauthFlow;

package/build/src/components/Oauth/Salesforce/SubdomainEntry.d.ts

@@ -0,0 +1,8 @@
+type SubdomainEntryProps = {
+    handleSubmit: () => void;
+    setWorkspace: (workspace: string) => void;
+    error: string | null;
+    isButtonDisabled?: boolean;
+};
+export declare function SubdomainEntry({ handleSubmit, setWorkspace, error, isButtonDisabled, }: SubdomainEntryProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/src/components/Oauth/Salesforce/SubdomainEntry.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubdomainEntry = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@chakra-ui/icons");
+const react_1 = require("@chakra-ui/react");
+const OAuthErrorAlert_1 = require("../OAuthErrorAlert");
+const SALESFORCE_HELP_URL = 'https://help.salesforce.com/articleView?id=domain_name_not_found.htm&type=5';
+function SubdomainEntry({ handleSubmit, setWorkspace, error, isButtonDisabled, }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Container, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { p: 8, maxWidth: "600px", borderWidth: 1, borderRadius: 8, boxShadow: "lg", textAlign: ['left'], margin: "auto", marginTop: "40px", bgColor: "white", children: (0, jsx_runtime_1.jsxs)(react_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(react_1.FormLabel, { marginTop: "16", marginBottom: "0", children: (0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h4", size: "md", children: "Enter your Salesforce subdomain" }) }), (0, jsx_runtime_1.jsxs)(react_1.Link, { href: SALESFORCE_HELP_URL, color: "blackAlpha.600", isExternal: true, children: ["What is my Salesforce subdomain?", (0, jsx_runtime_1.jsx)(icons_1.ExternalLinkIcon, { mx: "2px" })] }), (0, jsx_runtime_1.jsx)(OAuthErrorAlert_1.OAuthErrorAlert, { error: error }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { marginTop: "1em", children: [(0, jsx_runtime_1.jsx)(react_1.Input, { placeholder: "MyDomain", onChange: (event) => setWorkspace(event.currentTarget.value) }), (0, jsx_runtime_1.jsx)(react_1.Text, { lineHeight: "2.2em", marginLeft: "0.4em", children: ".my.salesforce.com" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.Button, { isDisabled: isButtonDisabled, width: "100%", type: "submit", onClick: handleSubmit, children: "Next" })] }) }) }));
+}
+exports.SubdomainEntry = SubdomainEntry;

package/build/src/components/Oauth/fetchOAuthCallbackURL.d.ts

@@ -0,0 +1 @@
+export declare const fetchOAuthCallbackURL: (projectId: string, consumerRef: string, groupRef: string, consumerName: string, groupName: string, apiKey: string, provider: string, workspace?: string) => Promise<string>;

package/build/src/components/Oauth/fetchOAuthCallbackURL.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fetchOAuthCallbackURL = void 0;
+const api_1 = require("../../services/api");
+const utils_1 = require("../../utils");
+const fetchOAuthCallbackURL = async (projectId, consumerRef, groupRef, consumerName, groupName, apiKey, provider, workspace) => {
+    const providerApps = await (0, api_1.api)().providerAppApi.listProviderApps({ projectId }, {
+        headers: { 'X-Api-Key': apiKey !== null && apiKey !== void 0 ? apiKey : '' },
+    });
+    const app = providerApps.find((a) => a.provider === provider);
+    if (!app) {
+        throw new Error(`You must first set up a ${(0, utils_1.capitalize)(provider)} Connected App using the Ampersand Console.`);
+    }
+    const url = await (0, api_1.api)().oAuthApi.oauthConnect({
+        connectOAuthParams: {
+            providerWorkspaceRef: workspace,
+            projectId,
+            groupRef,
+            groupName,
+            consumerRef,
+            consumerName,
+            providerAppId: app.id,
+            provider,
+        },
+    });
+    return url;
+};
+exports.fetchOAuthCallbackURL = fetchOAuthCallbackURL;

package/build/src/components/RedirectHandler/RedirectHandler.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+type RedirectHandlerProps = {
+    redirectURL?: string;
+    children: React.ReactNode;
+};
+/**
+ * RedirectHandler is a component that redirects to a specified URL when mounted or
+ * will render the children if no redirect URL is present.
+ *
+ * @param redirectURL
+ * @param children
+ * @returns
+ */
+export declare function RedirectHandler({ redirectURL, children }: RedirectHandlerProps): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/build/src/components/RedirectHandler/RedirectHandler.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RedirectHandler = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const LoadingIcon_1 = require("../../assets/LoadingIcon");
+/**
+ * RedirectHandler is a component that redirects to a specified URL when mounted or
+ * will render the children if no redirect URL is present.
+ *
+ * @param redirectURL
+ * @param children
+ * @returns
+ */
+function RedirectHandler({ redirectURL, children }) {
+    (0, react_1.useEffect)(() => {
+        // Check if a redirect URL is present
+        if (redirectURL) {
+            // Redirect to the specified URL
+            window.location.replace(redirectURL);
+        }
+    }, [redirectURL]);
+    // show a loading message if a redirect URL is present
+    if (redirectURL) {
+        return ((0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(LoadingIcon_1.LoadingIcon, { message: "Redirecting..." }) }));
+    }
+    // render children if no redirect URL is present
+    return children;
+}
+exports.RedirectHandler = RedirectHandler;

package/build/src/components/RedirectHandler/index.d.ts

@@ -0,0 +1 @@
+export { RedirectHandler } from './RedirectHandler';

package/build/src/components/RedirectHandler/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RedirectHandler = void 0;
+var RedirectHandler_1 = require("./RedirectHandler");
+Object.defineProperty(exports, "RedirectHandler", { enumerable: true, get: function () { return RedirectHandler_1.RedirectHandler; } });

package/build/src/constants.d.ts

@@ -1 +1,2 @@
 export declare const PROVIDER_SALESFORCE = "salesforce";
+export declare const PROVIDER_HUBSPOT = "hubspot";

package/build/src/constants.js

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PROVIDER_SALESFORCE = void 0;
+exports.PROVIDER_HUBSPOT = exports.PROVIDER_SALESFORCE = void 0;
 exports.PROVIDER_SALESFORCE = 'salesforce';
+exports.PROVIDER_HUBSPOT = 'hubspot';

package/build/src/{components/AmpersandProvider/AmpersandProvider.js → context/AmpersandContextProvider/AmpersandContextProvider.js}

@@ -9,14 +9,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * Also optionally accepts theme styles object with CSS values.
  */
 const react_1 = require("react");
-const ApiKeyProvider_1 = require("../../context/ApiKeyProvider");
-const ErrorContextProvider_1 = require("../../context/ErrorContextProvider");
-const IntegrationListContext_1 = require("../../context/IntegrationListContext");
-const ProjectContext_1 = require("../../context/ProjectContext");
-const ThemeProvider_1 = require("../ThemeProvider");
+const ThemeProvider_1 = require("../../components/ThemeProvider");
+const ApiKeyContextProvider_1 = require("../ApiKeyContextProvider");
+const ErrorContextProvider_1 = require("../ErrorContextProvider");
+const IntegrationListContextProvider_1 = require("../IntegrationListContextProvider");
+const ProjectContextProvider_1 = require("../ProjectContextProvider");
 function AmpersandProvider(props) {
     const { options: { apiKey, projectId }, children } = props;
-    return ((0, jsx_runtime_1.jsx)(ThemeProvider_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(ErrorContextProvider_1.ErrorStateProvider, { children: (0, jsx_runtime_1.jsx)(ApiKeyProvider_1.ApiKeyProvider, { value: apiKey, children: (0, jsx_runtime_1.jsx)(ProjectContext_1.ProjectProvider, { projectId: projectId, children: (0, jsx_runtime_1.jsx)(IntegrationListContext_1.IntegrationListProvider, { projectId: projectId, children: children }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(ThemeProvider_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(ErrorContextProvider_1.ErrorStateProvider, { children: (0, jsx_runtime_1.jsx)(ApiKeyContextProvider_1.ApiKeyProvider, { value: apiKey, children: (0, jsx_runtime_1.jsx)(ProjectContextProvider_1.ProjectProvider, { projectId: projectId, children: (0, jsx_runtime_1.jsx)(IntegrationListContextProvider_1.IntegrationListProvider, { projectId: projectId, children: children }) }) }) }) }));
 }
 exports.AmpersandProvider = AmpersandProvider;
 exports.AmpersandContext = (0, react_1.createContext)(null);

package/build/src/context/AmpersandContextProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './AmpersandContextProvider';

package/build/src/{components/AmpersandProvider → context/AmpersandContextProvider}/index.js

@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./AmpersandProvider"), exports);
+__exportStar(require("./AmpersandContextProvider"), exports);