@planningcenter/topbar 10.20.5 → 11.0.1

package/dist/topbar.module.js

@@ -911,6 +911,40 @@ function remove() {
 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__default.Component {
   constructor(props) {
     super(props);
@@ -925,44 +959,26 @@ class ConnectedPeopleProvider extends React__default.Component {
     }) => {
       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() {
@@ -2546,7 +2562,8 @@ const SmallTopbar = ({
     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__default.createElement(Avatar, {
     env: props.env,
@@ -2973,25 +2990,27 @@ const requestClearConnectedPeopleCache = () => remove();
 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__default.createElement(StackView$2, {
     axis: "vertical",
     spacing: /*#__PURE__*/React__default.createElement(Divider, null),
-    flexGrow: 1
+    grow: 1,
+    shrink: 1
   }, /*#__PURE__*/React__default.createElement(GridView, {
     columns: "auto 1fr auto",
     alignment: "start",
@@ -3088,17 +3107,24 @@ function UserProfile({
         display: "none"
       }
     },
-    marginTop: "auto"
+    marginTop: "auto",
+    shrink: 1,
+    minHeight: 0,
+    overflow: "auto",
+    position: "relative"
   }, /*#__PURE__*/React__default.createElement(StackView$2, {
     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__default.createElement(HeadingUppercase, {
-    color: "var(--t-text-color-default-secondary)",
+    color: "var(--t-text-color-secondary)",
     fontWeight: 500
   }, "Linked Accounts")), /*#__PURE__*/React__default.createElement(List, {
-    dividerColor: "var(--t-border-color-default-base)",
+    dividerColor: "var(--t-border-color)",
     width: "100%"
   }, connectedPeopleMenuFormatter(connectedPeople).map(({
     id,
@@ -3108,10 +3134,11 @@ function UserProfile({
     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__default.createElement(Text, {
     truncate: true
@@ -3119,10 +3146,11 @@ function UserProfile({
     onClick: e => {
       requestClearAppsCache();
       requestClearConnectedPeopleCache();
-      requestUnlinkConnectedPeople();
+      unlinkConnectedPeople(env);
       e.preventDefault();
     },
     color: "var(--t-text-color-status-error)",
+    cursor: "pointer",
     padding: 2,
     underline: false
   }, /*#__PURE__*/React__default.createElement(Text, {
@@ -4316,14 +4344,11 @@ function toolIsRoutable(tool) {
 function Toolbar({
   appName,
   autoMountTool,
-  connectedPeople,
   env,
   helpdeskConfig = {},
   linkToProfile = true,
   onReceiveTasksWorker,
   requestClearAppsCache,
-  requestSwitchConnectedPerson,
-  requestUnlinkConnectedPeople,
   userAvatarPath,
   userName,
   _storeDataOverride
@@ -4477,15 +4502,13 @@ function Toolbar({
     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: {