@amp-labs/react 1.0.1 → 1.1.0

package/build/src/components/Oauth/Hubspot/HubspotOauthFlow.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Hubspot landing component, which then will launch to create an OAuth connection to Hubspot.
+ */
+interface HubspotOauthFlowProps {
+    consumerRef: string;
+    consumerName?: string;
+    groupRef: string;
+    groupName?: string;
+}
+/**
+ * HubspotOauthFlow first prompts user with a next button,
+ * then launches a popup with the OAuth flow.
+ */
+export declare function HubspotOauthFlow({ consumerRef, consumerName, groupRef, groupName, }: HubspotOauthFlowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/src/components/Oauth/Hubspot/HubspotOauthFlow.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.HubspotOauthFlow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Hubspot landing component, which then will launch to create an OAuth connection to Hubspot.
+ */
+const react_1 = require("react");
+const constants_1 = require("../../../constants");
+const ApiKeyProvider_1 = require("../../../context/ApiKeyProvider");
+const ProjectContext_1 = require("../../../context/ProjectContext");
+const OAuthPopup_1 = __importDefault(require("../../Connect/OAuthPopup"));
+const fetchOAuthCallbackURL_1 = require("../fetchOAuthCallbackURL");
+const HubspotLandingContent_1 = require("./HubspotLandingContent");
+/**
+ * HubspotOauthFlow first prompts user with a next button,
+ * then launches a popup with the OAuth flow.
+ */
+function HubspotOauthFlow({ consumerRef, consumerName, groupRef, groupName, }) {
+    const { projectId } = (0, ProjectContext_1.useProject)();
+    const apiKey = (0, ApiKeyProvider_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, constants_1.PROVIDER_HUBSPOT);
+                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 Hubspot", url: oAuthCallbackURL, onClose: onClose, children: (0, jsx_runtime_1.jsx)(HubspotLandingContent_1.HubspotLandingContent, { handleSubmit: handleSubmit, error: error }) }));
+}
+exports.HubspotOauthFlow = HubspotOauthFlow;

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/{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 ApiKeyProvider_1 = require("../../../context/ApiKeyProvider");
+const ProjectContext_1 = require("../../../context/ProjectContext");
+const OAuthPopup_1 = __importDefault(require("../../Connect/OAuthPopup"));
+const fetchOAuthCallbackURL_1 = require("../fetchOAuthCallbackURL");
+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, ProjectContext_1.useProject)();
+    const apiKey = (0, ApiKeyProvider_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,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fetchOAuthCallbackURL = void 0;
+const constants_1 = require("../../constants");
+const api_1 = require("../../services/api");
+const utils_1 = require("../../utils");
+const fetchOAuthCallbackURL = async (projectId, consumerRef, groupRef, consumerName, groupName, apiKey, provider = constants_1.PROVIDER_SALESFORCE, workspace) => {
+    const providerApps = await (0, api_1.api)().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)().oauthConnect({
+        connectOAuthParams: {
+            providerWorkspaceRef: workspace,
+            projectId,
+            groupRef,
+            groupName,
+            consumerRef,
+            consumerName,
+            providerAppId: app.id,
+            provider,
+        },
+    });
+    return url;
+};
+exports.fetchOAuthCallbackURL = fetchOAuthCallbackURL;

package/build/src/components/ThemeProvider/Button/buttonTheme.d.ts

@@ -0,0 +1,13 @@
+export declare const buttonVariants: {
+    warning: {
+        bg: string;
+        outlineColor: string;
+        outline: string;
+        outlineOffset: string;
+        borderColor: string;
+        color: string;
+        _hover: {
+            bg: string;
+        };
+    };
+};

package/build/src/components/ThemeProvider/Button/buttonTheme.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonVariants = void 0;
+// define custom button variants
+exports.buttonVariants = {
+    warning: {
+        bg: 'red.50',
+        outlineColor: 'red.800',
+        outline: '2px solid',
+        outlineOffset: '0',
+        borderColor: 'red.800',
+        color: 'red.800',
+        _hover: {
+            bg: 'red.100', // Background color on hover
+        },
+    },
+};

package/build/src/components/ThemeProvider/Button/index.d.ts

@@ -0,0 +1,2 @@
+import { buttonVariants } from './buttonTheme';
+export { buttonVariants };

package/build/src/components/ThemeProvider/Button/index.js

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

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const Button_1 = require("./Button");
 const customTheme = (0, react_1.extendTheme)({
     components: {
         Tabs: {
@@ -23,8 +24,28 @@ const customTheme = (0, react_1.extendTheme)({
                         },
                     },
                 },
+                // consider creating a warning variant tab
+                warningTab: {
+                    width: '100%',
+                    borderRadius: '4px',
+                    _hover: {
+                        bg: 'red.200',
+                    },
+                    _selected: {
+                        color: 'red.800',
+                        fontWeight: '500',
+                        bg: 'red.100',
+                        border: 'none',
+                        _hover: {
+                            bg: 'red.200',
+                        },
+                    },
+                },
             },
         },
+        Button: {
+            variants: Button_1.buttonVariants,
+        },
     },
 });
 const theme = (0, react_1.extendTheme)((0, react_1.withDefaultColorScheme)({

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

@@ -1,2 +1,3 @@
 export * from './AmpersandProvider';
 export * from './Configure';
+export * from './Connect/ConnectProvider';

package/build/src/components/index.js

@@ -16,3 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./AmpersandProvider"), exports);
 __exportStar(require("./Configure"), exports);
+__exportStar(require("./Connect/ConnectProvider"), exports);

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/context/{ApiKeyContext.d.ts → ApiKeyProvider.d.ts}

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 export declare const ApiKeyContext: import("react").Context<string | null>;
 export declare const ApiKeyProvider: import("react").Provider<string | null>;
+export declare const useApiKey: () => string;

package/build/src/context/ApiKeyProvider.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useApiKey = exports.ApiKeyProvider = exports.ApiKeyContext = void 0;
+const react_1 = require("react");
+exports.ApiKeyContext = (0, react_1.createContext)(null);
+exports.ApiKeyProvider = exports.ApiKeyContext.Provider;
+const useApiKey = () => {
+    const apiKey = (0, react_1.useContext)(exports.ApiKeyContext);
+    if (apiKey === null) {
+        throw new Error('useApiKey must be used within an ApiKeyProvider');
+    }
+    return apiKey;
+};
+exports.useApiKey = useApiKey;

package/build/src/context/ConnectionsContext.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { Connection } from '../services/api';
 interface ConnectionsContextValue {
     connections: Connection[] | null;
@@ -6,11 +6,12 @@ interface ConnectionsContextValue {
     setConnections: React.Dispatch<React.SetStateAction<Connection[] | null>>;
     setSelectedConnection: React.Dispatch<React.SetStateAction<Connection | null>>;
 }
-export declare const ConnectionsContext: React.Context<ConnectionsContextValue>;
+export declare const ConnectionsContext: import("react").Context<ConnectionsContextValue>;
 export declare const useConnections: () => ConnectionsContextValue;
 type ConnectionsProviderProps = {
-    projectId: string;
+    provider?: string;
+    groupRef: string;
     children?: React.ReactNode;
 };
-export declare function ConnectionsProvider({ projectId, children, }: ConnectionsProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConnectionsProvider({ provider, groupRef, children, }: ConnectionsProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/src/context/ConnectionsContext.js

@@ -6,9 +6,10 @@ const react_1 = require("react");
 const LoadingIcon_1 = require("../assets/LoadingIcon");
 const ErrorTextBox_1 = require("../components/Configure/ErrorTextBox");
 const api_1 = require("../services/api");
-const ApiKeyContext_1 = require("./ApiKeyContext");
+const ApiKeyProvider_1 = require("./ApiKeyProvider");
 const ErrorContextProvider_1 = require("./ErrorContextProvider");
 const InstallIntegrationContext_1 = require("./InstallIntegrationContext");
+const ProjectContext_1 = require("./ProjectContext");
 exports.ConnectionsContext = (0, react_1.createContext)({
     connections: null,
     selectedConnection: null,
@@ -18,18 +19,25 @@ exports.ConnectionsContext = (0, react_1.createContext)({
 const useConnections = () => {
     const context = (0, react_1.useContext)(exports.ConnectionsContext);
     if (!context) {
-        throw new Error('useConnections must be used within a ConnectionsListProvider');
+        throw new Error('useConnections must be used within a ConnectionsProvider');
     }
     return context;
 };
 exports.useConnections = useConnections;
-function ConnectionsProvider({ projectId, children, }) {
-    const { groupRef, provider } = (0, InstallIntegrationContext_1.useInstallIntegrationProps)();
+function ConnectionsProvider({ provider, groupRef, children, }) {
+    const apiKey = (0, ApiKeyProvider_1.useApiKey)();
+    const { projectId } = (0, ProjectContext_1.useProject)();
     const [connections, setConnections] = (0, react_1.useState)(null);
     const [selectedConnection, setSelectedConnection] = (0, react_1.useState)(null);
-    const apiKey = (0, react_1.useContext)(ApiKeyContext_1.ApiKeyContext);
     const [isLoading, setLoadingState] = (0, react_1.useState)(true);
     const { setError, isError } = (0, ErrorContextProvider_1.useErrorState)();
+    const { provider: providerFromProps } = (0, InstallIntegrationContext_1.useInstallIntegrationProps)();
+    if (!projectId) {
+        throw new Error('ConnectionsProvider must be used within AmpersandProvider');
+    }
+    if (!provider && !providerFromProps) {
+        throw new Error('ConnectionsProvider must be given a provider prop or be used within InstallIntegrationProvider');
+    }
     (0, react_1.useEffect)(() => {
         (0, api_1.api)().listConnections({ projectId, groupRef, provider }, {
             headers: {

package/build/src/context/InstallIntegrationContext.d.ts

@@ -10,6 +10,7 @@ interface InstallIntegrationContextValue {
     groupName?: string;
     installation?: Installation;
     setInstallation: (installationObj: Installation) => void;
+    resetInstallations: () => void;
 }
 export declare function useInstallIntegrationProps(): InstallIntegrationContextValue;
 interface InstallIntegrationProviderProps {

package/build/src/context/InstallIntegrationContext.js

@@ -7,7 +7,7 @@ const LoadingIcon_1 = require("../assets/LoadingIcon");
 const ErrorTextBox_1 = require("../components/Configure/ErrorTextBox");
 const api_1 = require("../services/api");
 const utils_1 = require("../utils");
-const ApiKeyContext_1 = require("./ApiKeyContext");
+const ApiKeyProvider_1 = require("./ApiKeyProvider");
 const ErrorContextProvider_1 = require("./ErrorContextProvider");
 const IntegrationListContext_1 = require("./IntegrationListContext");
 const ProjectContext_1 = require("./ProjectContext");
@@ -22,6 +22,7 @@ const InstallIntegrationContext = (0, react_1.createContext)({
     groupName: '',
     installation: undefined,
     setInstallation: () => { },
+    resetInstallations: () => { },
 });
 // Create a custom hook to access the props
 function useInstallIntegrationProps() {
@@ -34,14 +35,14 @@ function useInstallIntegrationProps() {
 exports.useInstallIntegrationProps = useInstallIntegrationProps;
 // Wrap your parent component with the context provider
 function InstallIntegrationProvider({ children, integration, consumerRef, consumerName, groupRef, groupName, }) {
+    const apiKey = (0, ApiKeyProvider_1.useApiKey)();
     const { projectId } = (0, ProjectContext_1.useProject)();
-    const [installations, setInstallations] = (0, react_1.useState)([]);
-    const installation = (installations === null || installations === void 0 ? void 0 : installations[0]) || null; // there should only be one installation for mvp
-    const apiKey = (0, react_1.useContext)(ApiKeyContext_1.ApiKeyContext);
     const { integrations } = (0, IntegrationListContext_1.useIntegrationList)();
-    const integrationObj = (0, react_1.useMemo)(() => (0, utils_1.findIntegrationFromList)(integration, integrations || []), [integration, integrations]);
+    const [installations, setInstallations] = (0, react_1.useState)([]);
     const [isLoading, setLoadingState] = (0, react_1.useState)(true);
     const { setError, isError } = (0, ErrorContextProvider_1.useErrorState)();
+    const installation = (installations === null || installations === void 0 ? void 0 : installations[0]) || null; // there should only be one installation for mvp
+    const integrationObj = (0, react_1.useMemo)(() => (0, utils_1.findIntegrationFromList)(integration, integrations || []), [integration, integrations]);
     (0, react_1.useEffect)(() => {
         if (integrationObj === null && (integrations === null || integrations === void 0 ? void 0 : integrations.length)) {
             console.error(`Integration "${integration}" not found in integration list`);
@@ -52,9 +53,7 @@ function InstallIntegrationProvider({ children, integration, consumerRef, consum
     const setInstallation = (0, react_1.useCallback)((installationObj) => {
         setInstallations([installationObj]);
     }, [setInstallations]);
-    const integrationErrorKey = (integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.id) || '';
-    // check if integration has been installed in AmpersandProvider
-    (0, react_1.useEffect)(() => {
+    const resetInstallations = (0, react_1.useCallback)(() => {
         if (integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.id) {
             // check if installation exists on selected integration
             (0, api_1.api)().listInstallations({ projectId, integrationId: integrationObj.id, groupRef }, {
@@ -72,7 +71,12 @@ function InstallIntegrationProvider({ children, integration, consumerRef, consum
                 console.error('Error retrieving installation information: ', err);
             });
         }
-    }, [projectId, integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.id, apiKey, groupRef, setError]);
+    }, [integrationObj, projectId, apiKey, setError, groupRef]);
+    const integrationErrorKey = (integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.id) || '';
+    // check if integration has been installed in AmpersandProvider
+    (0, react_1.useEffect)(() => {
+        resetInstallations();
+    }, [resetInstallations]);
     const props = (0, react_1.useMemo)(() => ({
         integrationId: (integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.id) || '',
         provider: (integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.provider) || '',
@@ -83,8 +87,9 @@ function InstallIntegrationProvider({ children, integration, consumerRef, consum
         groupName,
         installation,
         setInstallation,
+        resetInstallations,
     }), [integrationObj, consumerRef, consumerName, groupRef,
-        groupName, installation, setInstallation]);
+        groupName, installation, setInstallation, resetInstallations]);
     return (isError(ErrorContextProvider_1.ErrorBoundary.INSTALLATION_LIST, integrationErrorKey)) ? (0, jsx_runtime_1.jsx)(ErrorTextBox_1.ErrorTextBox, { message: `Error retrieving installation information for integration "${(integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.name) || 'unknown'}"` }) : ((0, jsx_runtime_1.jsx)(InstallIntegrationContext.Provider, { value: props, children: isLoading ? (0, jsx_runtime_1.jsx)(LoadingIcon_1.LoadingIcon, {}) : children }));
 }
 exports.InstallIntegrationProvider = InstallIntegrationProvider;

package/build/src/context/IntegrationListContext.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const LoadingIcon_1 = require("../assets/LoadingIcon");
 const ErrorTextBox_1 = require("../components/Configure/ErrorTextBox");
 const api_1 = require("../services/api");
-const ApiKeyContext_1 = require("./ApiKeyContext");
+const ApiKeyProvider_1 = require("./ApiKeyProvider");
 const ErrorContextProvider_1 = require("./ErrorContextProvider");
 exports.IntegrationListContext = (0, react_1.createContext)({
     integrations: null,
@@ -20,9 +20,9 @@ const useIntegrationList = () => {
 };
 exports.useIntegrationList = useIntegrationList;
 function IntegrationListProvider({ projectId, children }) {
-    const [integrations, setIntegrations] = (0, react_1.useState)(null);
-    const apiKey = (0, react_1.useContext)(ApiKeyContext_1.ApiKeyContext);
+    const apiKey = (0, ApiKeyProvider_1.useApiKey)();
     const { setError, isError } = (0, ErrorContextProvider_1.useErrorState)();
+    const [integrations, setIntegrations] = (0, react_1.useState)(null);
     const [isLoading, setLoadingState] = (0, react_1.useState)(true);
     (0, react_1.useEffect)(() => {
         (0, api_1.api)().listIntegrations({ projectId }, {

package/build/src/context/ProjectContext.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const LoadingIcon_1 = require("../assets/LoadingIcon");
 const ErrorTextBox_1 = require("../components/Configure/ErrorTextBox");
 const api_1 = require("../services/api");
-const ApiKeyContext_1 = require("./ApiKeyContext");
+const ApiKeyProvider_1 = require("./ApiKeyProvider");
 const ErrorContextProvider_1 = require("./ErrorContextProvider");
 exports.ProjectContext = (0, react_1.createContext)({
     project: null,
@@ -22,10 +22,10 @@ const useProject = () => {
 };
 exports.useProject = useProject;
 function ProjectProvider({ projectId, children }) {
+    const apiKey = (0, ApiKeyProvider_1.useApiKey)();
+    const { isError, setError } = (0, ErrorContextProvider_1.useErrorState)();
     const [project, setProject] = (0, react_1.useState)(null);
-    const apiKey = (0, react_1.useContext)(ApiKeyContext_1.ApiKeyContext);
     const [isLoading, setLoadingState] = (0, react_1.useState)(true);
-    const { isError, setError } = (0, ErrorContextProvider_1.useErrorState)();
     (0, react_1.useEffect)(() => {
         (0, api_1.api)().getProject({ projectId }, {
             headers: {

package/build/src/hooks/useIsIntegrationInstalled.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIsIntegrationInstalled = void 0;
 const react_1 = require("react");
-const ApiKeyContext_1 = require("../context/ApiKeyContext");
+const ApiKeyProvider_1 = require("../context/ApiKeyProvider");
 const IntegrationListContext_1 = require("../context/IntegrationListContext");
 const ProjectContext_1 = require("../context/ProjectContext");
 const api_1 = require("../services/api");
 const useIsIntegrationInstalled = (integration, groupRef) => {
-    const apiKey = (0, react_1.useContext)(ApiKeyContext_1.ApiKeyContext);
+    const apiKey = (0, ApiKeyProvider_1.useApiKey)();
     const { projectId } = (0, ProjectContext_1.useProject)();
     const { integrations } = (0, IntegrationListContext_1.useIntegrationList)();
     const [isLoaded, setIsLoaded] = (0, react_1.useState)(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amp-labs/react",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Ampersand React library.",
   "author": {
     "name": "Ampersand Labs",
@@ -56,7 +56,7 @@
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-n": "^16.2.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
@@ -75,6 +75,7 @@
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",
+    "immer": "^10.0.3",
     "lodash.isequal": "^4.5.0"
   }
 }