From 8013a52a94a8265ec9a91719546f829d22a9c4ea Mon Sep 17 00:00:00 2001
From: Jimmy <jimmyhogoboom@gmail.com>
Date: Fri, 22 Nov 2024 16:41:22 -0600
Subject: [PATCH] feat: allow for specifying a custom width for the profile
 popup

---
 packages/web-shared/components/Profile/Profile.js  | 14 ++++++++------
 .../components/Profile/Profile.styles.js           |  2 +-
 .../web-shared/components/Profile/ProfileButton.js |  4 +++-
 .../web-shared/components/Searchbar/Searchbar.js   |  2 +-
 packages/web-shared/embeds/Main.js                 |  1 +
 packages/web-shared/providers/AppProvider.js       |  1 +
 packages/web-shared/providers/SearchProvider.js    |  2 ++
 web-embeds/src/App.js                              |  4 ++++
 8 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/web-shared/components/Profile/Profile.js b/packages/web-shared/components/Profile/Profile.js
index 531a3ac3..08e9c13f 100644
--- a/packages/web-shared/components/Profile/Profile.js
+++ b/packages/web-shared/components/Profile/Profile.js
@@ -26,7 +26,7 @@ import themeGet from '@styled-system/theme-get';
 import { logout, useAuth } from '../../providers/AuthProvider';
 import authSteps from '../Auth/authSteps';
 
-const Profile = ({ theme, handleCloseProfile, ...rest }) => {
+const Profile = ({ theme, handleCloseProfile, size, ...rest }) => {
   const { currentUser } = useCurrentUser();
   const { currentChurch } = useCurrentChurch();
 
@@ -85,11 +85,13 @@ const Profile = ({ theme, handleCloseProfile, ...rest }) => {
             _: '0%',
             sm: 'xxl',
           }}
-          width={{
-            _: '100%',
-            sm: '350px',
-            md: '520px',
-          }}
+          width={
+            size ?? {
+              _: '100%',
+              sm: '350px',
+              md: '520px',
+            }
+          }
         >
           <Box display="flex" alignItems="center" justifyContent="end">
             <Styled.CloseIcon onClick={handleCloseProfile}>
diff --git a/packages/web-shared/components/Profile/Profile.styles.js b/packages/web-shared/components/Profile/Profile.styles.js
index 465e75f3..555d18c0 100644
--- a/packages/web-shared/components/Profile/Profile.styles.js
+++ b/packages/web-shared/components/Profile/Profile.styles.js
@@ -12,7 +12,7 @@ const Profile = withTheme(styled.div`
   position: absolute;
   transition: opacity 0.3s ease;
   z-index: 9999;
-  right: 0;
+  right: -15px;
 
   @media screen and (max-width: ${themeGet('breakpoints.sm')}) {
     position: fixed;
diff --git a/packages/web-shared/components/Profile/ProfileButton.js b/packages/web-shared/components/Profile/ProfileButton.js
index 051da5c9..0fe19c59 100644
--- a/packages/web-shared/components/Profile/ProfileButton.js
+++ b/packages/web-shared/components/Profile/ProfileButton.js
@@ -32,7 +32,9 @@ const ProfileButton = (props) => {
           </Box>
         )}
       </Box>
-      {showProfile ? <Profile handleCloseProfile={() => setShowProfile(false)} /> : null}
+      {showProfile ? (
+        <Profile handleCloseProfile={() => setShowProfile(false)} size={props.popupSize} />
+      ) : null}
     </Box>
   );
 };
diff --git a/packages/web-shared/components/Searchbar/Searchbar.js b/packages/web-shared/components/Searchbar/Searchbar.js
index 67279473..5fff6441 100644
--- a/packages/web-shared/components/Searchbar/Searchbar.js
+++ b/packages/web-shared/components/Searchbar/Searchbar.js
@@ -161,7 +161,7 @@ const Searchbar = (props = {}) => {
             </Styled.InterfaceWrapper>
           </Styled.Interface>
           <Box p={16}>
-            <ProfileButton />
+            <ProfileButton popupSize={searchState.searchProfileSize} />
           </Box>
         </Box>
         <SearchResults autocompleteState={autocompleteState} autocomplete={autocompleteInstance} />
diff --git a/packages/web-shared/embeds/Main.js b/packages/web-shared/embeds/Main.js
index 18271b4c..b63dd930 100644
--- a/packages/web-shared/embeds/Main.js
+++ b/packages/web-shared/embeds/Main.js
@@ -61,6 +61,7 @@ const Main = ({ type }) => {
                 type={widget.dataset.type}
                 church={widget.dataset.church}
                 searchFeed={widget.dataset.searchFeed}
+                searchProfileSize={widget.dataset.searchProfileSize}
                 featureFeed={widget.dataset.featureFeed}
                 modal={widget.dataset.modal}
                 emptyPlaceholderText={widget.dataset.emptyPlaceholderText}
diff --git a/packages/web-shared/providers/AppProvider.js b/packages/web-shared/providers/AppProvider.js
index 5983226f..d348df40 100644
--- a/packages/web-shared/providers/AppProvider.js
+++ b/packages/web-shared/providers/AppProvider.js
@@ -35,6 +35,7 @@ function AppProvider(props = {}) {
             <SearchProvider
               church={props.church}
               searchFeed={props.searchFeed}
+              searchProfileSize={props.searchProfileSize}
               customPlaceholder={props.customPlaceholder}
             >
               <ModalProvider>
diff --git a/packages/web-shared/providers/SearchProvider.js b/packages/web-shared/providers/SearchProvider.js
index e2998a56..1e762425 100644
--- a/packages/web-shared/providers/SearchProvider.js
+++ b/packages/web-shared/providers/SearchProvider.js
@@ -8,6 +8,7 @@ const SearchDispatchContext = createContext();
 const initialState = {
   church: null,
   searchFeed: null,
+  searchProfileSize: null,
   customPlaceholder: null,
   loading: true,
 };
@@ -37,6 +38,7 @@ function SearchProvider(props = {}) {
     ...initialState, // spread the original initialState object
     church: props.church, // add church to state
     searchFeed: props.searchFeed, // add search feed id to state
+    searchProfileSize: props.searchProfileSize, // specify a custom width for the profile popup
     customPlaceholder: props.customPlaceholder, // add search custom placeholder to state
   });
 
diff --git a/web-embeds/src/App.js b/web-embeds/src/App.js
index 696ac424..1bd03983 100644
--- a/web-embeds/src/App.js
+++ b/web-embeds/src/App.js
@@ -24,6 +24,9 @@ function App() {
   const searchFeed = searchElement
     ? searchElement.getAttribute("data-search-feed")
     : null;
+  const searchProfileSize = searchElement
+    ? searchElement.getAttribute("data-search-profile-size")
+    : null;
   const church = churchElement
     ? churchElement.getAttribute("data-church")
     : null;
@@ -57,6 +60,7 @@ function App() {
     <AppProvider
       church={church}
       searchFeed={searchFeed}
+      searchProfileSize={searchProfileSize}
       customPlaceholder={customPlaceholder}
       usePathRouter={usePathRouter}
     >