@planningcenter/topbar 10.20.5 → 11.0.0-rc.0

package/dist/topbar.umd.js

@@ -922,6 +922,40 @@
   function navigateTo(location) {
     window.location = location;
   }
+  function setConnectedPeopleInStore(connectedPeople) {
+    store$1.setState({
+      ...store$1.getState(),
+      connectedPeople
+    });
+  }
+  function switchConnectedPerson(env, toId, returnPath) {
+    apiRequest(railsCsrfFetch, `${pcoUrl(env)("api")}/login/v2/me/switch_connected_person`, {
+      data: {
+        data: {
+          attributes: {
+            id: toId,
+            return_path: returnPath
+          }
+        }
+      },
+      method: "POST"
+    }).then(({
+      json
+    }) => {
+      var _a;
+      if ((_a = json === null || json === void 0 ? void 0 : json.meta) === null || _a === void 0 ? void 0 : _a.redirect_to) navigateTo(json.meta.redirect_to);
+    });
+  }
+  function unlinkConnectedPeople(env) {
+    apiRequest(railsCsrfFetch, `${pcoUrl(env)("api")}/login/v2/me/unlink`, {
+      method: "POST"
+    }).then(({
+      json
+    }) => {
+      var _a;
+      if ((_a = json === null || json === void 0 ? void 0 : json.meta) === null || _a === void 0 ? void 0 : _a.redirect_to) navigateTo(json.meta.redirect_to);
+    });
+  }
   class ConnectedPeopleProvider extends React.Component {
     constructor(props) {
       super(props);
@@ -936,44 +970,26 @@
       }) => {
         if (!ok || !json) return;
         const connectedPeople = json.data;
+        setConnectedPeopleInStore(connectedPeople);
         return this.setState({
           connectedPeople
         }, () => window.localStorage.setItem("Topbar:ConnectedPeople", JSON.stringify(connectedPeople)));
       });
     }
     unlink() {
-      apiRequest(this.props.configuredFetch, `${pcoUrl(this.props.env)("api")}/login/v2/me/unlink`, {
-        method: "POST"
-      }).then(({
-        json
-      }) => {
-        var _a;
-        if ((_a = json === null || json === void 0 ? void 0 : json.meta) === null || _a === void 0 ? void 0 : _a.redirect_to) navigateTo(json.meta.redirect_to);
-      });
+      unlinkConnectedPeople(this.props.env);
     }
     switch(toId, returnPath) {
-      apiRequest(this.props.configuredFetch, `${pcoUrl(this.props.env)("api")}/login/v2/me/switch_connected_person`, {
-        data: {
-          data: {
-            attributes: {
-              id: toId,
-              return_path: returnPath
-            }
-          }
-        },
-        method: "POST"
-      }).then(({
-        json
-      }) => {
-        var _a;
-        if ((_a = json === null || json === void 0 ? void 0 : json.meta) === null || _a === void 0 ? void 0 : _a.redirect_to) navigateTo(json.meta.redirect_to);
-      });
+      switchConnectedPerson(this.props.env, toId, returnPath);
     }
     componentDidMount() {
       const connectedPeople = JSON.parse(window.localStorage.getItem("Topbar:ConnectedPeople"));
-      if (connectedPeople) return this.setState({
-        connectedPeople
-      });
+      if (connectedPeople && connectedPeople.length) {
+        setConnectedPeopleInStore(connectedPeople);
+        return this.setState({
+          connectedPeople
+        });
+      }
       return this.fetch();
     }
     render() {
@@ -2557,7 +2573,8 @@
       className: styles$3["profile-button"],
       onClick: () => {
         var _a, _b;
-        return (_b = (_a = window.topbar) === null || _a === void 0 ? void 0 : _a.openProfile) === null || _b === void 0 ? void 0 : _b.call(_a);
+        props.requestConnectedPeopleFetch();
+        (_b = (_a = window.topbar) === null || _a === void 0 ? void 0 : _a.openProfile) === null || _b === void 0 ? void 0 : _b.call(_a);
       }
     }, /*#__PURE__*/React.createElement(Avatar, {
       env: props.env,
@@ -2984,25 +3001,27 @@
   function UserProfile({
     appName,
     closeDrawer,
-    connectedPeople,
+    env,
     hasConnectedPeople,
     linkToProfile,
     loginSettingsUrl,
     logoutUrl,
     profileUrl,
     requestClearAppsCache,
-    requestSwitchConnectedPerson,
-    requestUnlinkConnectedPeople,
     userAvatarPath
   }) {
+    var _a;
+    const storeState = useStore();
     const {
       mfaConfigured,
       name
-    } = useStore();
+    } = storeState;
+    const connectedPeople = (_a = storeState.connectedPeople) !== null && _a !== void 0 ? _a : [];
     return /*#__PURE__*/React.createElement(tapestryReact.StackView, {
       axis: "vertical",
       spacing: /*#__PURE__*/React.createElement(tapestryReact.Divider, null),
-      flexGrow: 1
+      grow: 1,
+      shrink: 1
     }, /*#__PURE__*/React.createElement(tapestryReact.GridView, {
       columns: "auto 1fr auto",
       alignment: "start",
@@ -3099,17 +3118,24 @@
           display: "none"
         }
       },
-      marginTop: "auto"
+      marginTop: "auto",
+      shrink: 1,
+      minHeight: 0,
+      overflow: "auto",
+      position: "relative"
     }, /*#__PURE__*/React.createElement(tapestryReact.StackView, {
       backgroundColor: "var(--t-fill-color-neutral-060)",
       paddingVertical: 1.5,
       paddingHorizontal: 2,
-      borderBottom: `1px solid var(--t-border-color-default-base)`
+      borderBottom: `1px solid var(--t-border-color)`,
+      position: "sticky",
+      top: 0,
+      zIndex: 1
     }, /*#__PURE__*/React.createElement(tapestryReact.HeadingUppercase, {
-      color: "var(--t-text-color-default-secondary)",
+      color: "var(--t-text-color-secondary)",
       fontWeight: 500
     }, "Linked Accounts")), /*#__PURE__*/React.createElement(tapestryReact.List, {
-      dividerColor: "var(--t-border-color-default-base)",
+      dividerColor: "var(--t-border-color)",
       width: "100%"
     }, connectedPeopleMenuFormatter(connectedPeople).map(({
       id,
@@ -3119,10 +3145,11 @@
       onClick: e => {
         requestClearAppsCache();
         requestClearConnectedPeopleCache();
-        requestSwitchConnectedPerson(id, `${appName}/`);
+        switchConnectedPerson(env, String(id), `${appName}/`);
         e.preventDefault();
       },
-      color: "var(--t-text-color-default-secondary)",
+      color: "var(--t-text-color-secondary)",
+      cursor: "pointer",
       padding: 2
     }, /*#__PURE__*/React.createElement(tapestryReact.Text, {
       truncate: true
@@ -3130,10 +3157,11 @@
       onClick: e => {
         requestClearAppsCache();
         requestClearConnectedPeopleCache();
-        requestUnlinkConnectedPeople();
+        unlinkConnectedPeople(env);
         e.preventDefault();
       },
       color: "var(--t-text-color-status-error)",
+      cursor: "pointer",
       padding: 2,
       underline: false
     }, /*#__PURE__*/React.createElement(tapestryReact.Text, {
@@ -4327,14 +4355,11 @@
   function Toolbar({
     appName,
     autoMountTool,
-    connectedPeople,
     env,
     helpdeskConfig = {},
     linkToProfile = true,
     onReceiveTasksWorker,
     requestClearAppsCache,
-    requestSwitchConnectedPerson,
-    requestUnlinkConnectedPeople,
     userAvatarPath,
     userName,
     _storeDataOverride
@@ -4488,15 +4513,13 @@
       Profile: {
         appName,
         closeDrawer,
-        connectedPeople: connectedPeople || [],
+        env,
         hasConnectedPeople: (storeData === null || storeData === void 0 ? void 0 : storeData.hasConnectedPeople) || false,
         linkToProfile,
         loginSettingsUrl,
         logoutUrl,
         profileUrl,
         requestClearAppsCache: requestClearAppsCache || (() => {}),
-        requestSwitchConnectedPerson: requestSwitchConnectedPerson || (() => {}),
-        requestUnlinkConnectedPeople: requestUnlinkConnectedPeople || (() => {}),
         userAvatarPath
       },
       Tasks: {