New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: new-app-install-flow follow up #14699
Draft
SomayChauhan
wants to merge
144
commits into
calcom:main
Choose a base branch
from
SomayChauhan:feat/new-app-install-flow-followup
base: main
Could not load branches
Branch not found: {{ refName }}
Could not load tags
Nothing to show
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+1,253
−1,072
Draft
Changes from 112 commits
Commits
Show all changes
144 commits
Select commit
Hold shift + click to select a range
2585d62
feat(appStore): add isOAuth config
ThyMinimalDev 550a1fe
refactor(appStore): EventTypeAppSettngsInterface
ThyMinimalDev ca0edf1
refactor(qr_code): split EventTypeAppCardInterface and EventTypeAppSe…
ThyMinimalDev a4d20e7
feat(appStore): redirect to onboarding for stripe and basecam
ThyMinimalDev 905bc23
fix(ui/ScrollableArea): overflow indicator not working
ThyMinimalDev 4e4a8b6
feat(apps): new install app flow
ThyMinimalDev 4fba8af
fix(configureStep): get disabled props for settings
ThyMinimalDev d5b34b8
fix: getAppInstallsBySlug now use teamIds
ThyMinimalDev 81347d9
chore: Alby to AppSettingsInterface
sean-brydon 935745f
chore: Giphy to appsettings interface
sean-brydon 7a401ee
chore: GTM migration
sean-brydon c01ca48
chore: GT4 - migration
sean-brydon c7b3bc8
chore: fathom migration
sean-brydon 8703354
chore: paypal
sean-brydon f220f78
feat: basecamp migration
sean-brydon e4cac4a
feat: metapixel migration
sean-brydon a687aa9
feat:plausable
sean-brydon 7e38f86
feat:stripe
sean-brydon c1be5a1
Merge branch 'main' into new-app-install-flow
ThyMinimalDev f443494
fix merge issues
ThyMinimalDev b117710
fix merge issues in new app install flow steps
ThyMinimalDev 5dbecb7
wip: callback to onboarding
sean-brydon 9b3fd28
fix: imports
sean-brydon 25d4709
fix: more imports
sean-brydon dca6096
Merge branch 'main' into new-app-install-flow
keithwillcode 718e1f7
feat: use redirect to onboarding on install flow
sean-brydon ab8ad87
Merge remote-tracking branch 'refs/remotes/origin/new-app-install-flo…
sean-brydon a6a97fa
Merge branch 'main' into new-app-install-flow
keithwillcode f6eec4e
fix: redirect to event-type after oauth flow
SomayChauhan 1bfd59f
When clicking on install new app button, only redirect to the new app…
SomayChauhan 7ae9535
code refactor, skip event-type step
SomayChauhan b1302b0
removed extra consoles
SomayChauhan b19b27b
so that no one can change the eventTypeId in url
SomayChauhan b7cd45b
theme support enabled
SomayChauhan 1f7ba48
only pass eventTypeId instead of whole evetType obj to OmniInstallApp…
SomayChauhan 82c50d6
fix: clicking on event-type gives error and redirects to /apps
SomayChauhan c811f4d
saved appOnboardingRedirectUrl to OAuth State
SomayChauhan fdacdbe
fix: a user having no team breaks the onboarding flow
SomayChauhan 433417c
add optional chaining to appMetadata.extendsFeature and appMetadata.i…
SomayChauhan 6b59c2c
encode appOnboardingRedirectUrl
SomayChauhan cde8190
fix: dark theme ui issues
SomayChauhan ba6fdfe
skip configure step if no-event types
SomayChauhan c5023cb
exclude calendars from apps- onboarding flow
SomayChauhan 0621d29
Update getAppOnboardingRedirectUrl.ts
SomayChauhan c349d89
fix: On configure step, inputs aren't showing errors
SomayChauhan abafcab
change route from `apps/onboarding` to `apps/installation`
SomayChauhan fed2cc3
fix: flow not correctly working for teams
SomayChauhan 1f0efa3
should only allow team ADMIN or OWER to install an app to team
SomayChauhan 19c56f8
Prevent two payment apps to be enabled
SomayChauhan 7194ce5
removed loading state
SomayChauhan fad6c70
Merge branch 'main' into new-app-install-flow
joeauyeung 6364193
Merge branch 'new-app-install-flow' into new-app-install-flow-2
joeauyeung 1711e49
Fix type error
joeauyeung 9b0f360
undo new-app-flow from OmniInstallAppButton
SomayChauhan 444c1a3
remove OAuth Step, handle step numbering
SomayChauhan 738dc99
fix: redirect url
SomayChauhan 9a5db48
getAppOnboardingRedirectUrl refactor
SomayChauhan b9362c1
for debugging
SomayChauhan 71d579b
Revert "for debugging"
SomayChauhan 3149aca
fix: added toaster
SomayChauhan a422be6
feat: added support to select multiple events (almost)
SomayChauhan 5ea558e
hide button
SomayChauhan 200ff6c
Merge branch 'main' into new-app-install-flow
SomayChauhan 437aefd
Merge branch 'new-app-install-flow' into new-app-install-flow-2
SomayChauhan 9b2e095
Move inner form outside outer form using portal
SomayChauhan e8c5aac
submit buttons refs madness
SomayChauhan d3a6a30
removed configure step
SomayChauhan cef57d3
removed extra unwanted code
SomayChauhan db41b2e
small fix
SomayChauhan 631860f
fix: type error
SomayChauhan 3de4df3
fix: types
SomayChauhan 1ae0982
implemented suggested changes
SomayChauhan 74e9f43
removed step footer
SomayChauhan fc20b5e
fix: Display team event types instead of user's on event types step w…
SomayChauhan f9302cb
fix: typo
SomayChauhan 70096c8
removed shouldLockDisableProps
SomayChauhan 60e04a5
refactor setUpdatedEventTypesStatus, fix type
SomayChauhan 912b0da
removed extra code
SomayChauhan a28f093
can't delete while saving
SomayChauhan bd6c70a
added translations
SomayChauhan 8891ab8
fix: loading in select account step, fix handle onSelect params type
SomayChauhan 7377de7
Merge branch 'main' into new-app-install-flow
SomayChauhan da31d43
Merge branch 'new-app-install-flow' into new-app-install-flow-2
SomayChauhan c1b798c
Fix typo
joeauyeung fc159bc
feat: add skip button to event-types step
SomayChauhan 8fde02c
use set-up-later button in tests
SomayChauhan fc2f873
added skip button to configure step as well
SomayChauhan b0d82a6
feat: add test for analytics apps using the new app install flow
SomayChauhan 22b0cd7
feat: add test for stripe 1
SomayChauhan ebcdb08
feat: add test for stripe 2
SomayChauhan ff25dcd
Fix: Redirect only those apps that extend 'EventType' to the new app …
SomayChauhan 7693077
Merge branch 'main' into new-app-install-flow-2
SomayChauhan eda8ba0
fix: type errors
SomayChauhan 1660aa1
fix: failing tests
SomayChauhan ce64678
Merge branch 'feat/app-install-flow-followup' into new-app-install-fl…
SomayChauhan 19c221b
fix: tests
SomayChauhan 6e5f13b
Merge branch 'main' into new-app-install-flow-2
SomayChauhan a54dce1
Merge branch 'main' into new-app-install-flow-2
joeauyeung 919bf3c
Merge branch 'main' into new-app-install-flow-2
SomayChauhan 398e78d
fix test flakiness
SomayChauhan fc6954d
better naming and code refactor for analytics apps tests
SomayChauhan e8c86fe
run tests parallelly
SomayChauhan 43893f4
Merge branch 'main' into new-app-install-flow-2
SomayChauhan 5ce1e00
removed network idle, giving error
SomayChauhan 9ec06c6
another shot at test flakiness
SomayChauhan 8d04e00
Merge branch 'main' into new-app-install-flow-2
SomayChauhan af6060d
Fix: can't install apps without team selector dropdown on main app s…
SomayChauhan 966084f
Merge branch 'main' into new-app-install-flow-2
SomayChauhan bfddf73
fix: test flakiness
SomayChauhan 897a98a
Merge branch 'main' into new-app-install-flow-2
SomayChauhan 7dcb655
Merge branch 'main' into new-app-install-flow-2
joeauyeung ebf015a
feat: remove dropdown from app-store and redirect to new-app-install-…
SomayChauhan 18e419f
removed extra code
SomayChauhan ec40c3c
fix: account select loading issue
SomayChauhan ef2635b
Merge branch 'main' into new-app-install-flow-2
joeauyeung 29e7db5
Merge branch 'main' into new-app-install-flow-2
zomars 4eafb0b
Merge branch 'main' into new-app-install-flow-2
SomayChauhan 7372e6e
Merge branch 'main' into new-app-install-flow-2
SomayChauhan 32051f3
Merge branch 'main' into new-app-install-flow-2
SomayChauhan 6099451
removed getPaymentCredential (unused)
SomayChauhan e984dad
fix: only redirect after the app has been added to all the event-types
SomayChauhan ce267a8
Merge branch 'main' into new-app-install-flow-2
SomayChauhan 83cc298
Merge branch 'main' into new-app-install-flow-2
SomayChauhan 204caed
remove overflowIndicatorStyles
SomayChauhan 40553f8
Merge branch 'main' into new-app-install-flow-2
SomayChauhan 73e90f9
refactor getUserAdminTeams
SomayChauhan 459aa43
Merge branch 'app-install-flow-2' into feat/new-app-install-flow-foll…
SomayChauhan ca90605
Merge branch 'main' into app-install-flow-2
SomayChauhan 88c744d
send teamId instead of id
SomayChauhan 7cb178b
Merge branch 'app-install-flow-2' into feat/new-app-install-flow-foll…
joeauyeung 9d62d04
seperate locations component
SomayChauhan 7f6c12d
for conferencing apps skip select account page
SomayChauhan 89fd6e2
installing conferencing apps shows locations dropdown in configure step
SomayChauhan 04c22d8
send location data to the handler
SomayChauhan b157944
fix: type errors
SomayChauhan a495e86
fix: handle es-lint errors
SomayChauhan c1fa3e7
fix: app is added again on submit
SomayChauhan 910c1e8
fix: type erros
SomayChauhan 2b8c7ed
filter out managed events for now
SomayChauhan 16aed74
fix: show installed count badge
SomayChauhan 534584b
Merge branch 'main' into pr/14699
SomayChauhan b221748
remove 2 toast message
SomayChauhan 386d55e
feat: added tests for conferencing apps
SomayChauhan 8760f58
Merge branch 'main' into pr/14699
SomayChauhan File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,23 +1,14 @@ | ||
import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation"; | ||
import { useRouter } from "next/navigation"; | ||
|
||
import { doesAppSupportTeamInstall } from "@calcom/app-store/utils"; | ||
import { Spinner } from "@calcom/features/calendars/weeklyview/components/spinner/Spinner"; | ||
import type { UserAdminTeams } from "@calcom/features/ee/teams/lib/getUserAdminTeams"; | ||
import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage"; | ||
import { AppOnboardingSteps } from "@calcom/lib/apps/appOnboardingSteps"; | ||
import { getAppOnboardingUrl } from "@calcom/lib/apps/getAppOnboardingUrl"; | ||
import { useLocale } from "@calcom/lib/hooks/useLocale"; | ||
import type { RouterOutputs } from "@calcom/trpc/react"; | ||
import type { AppFrontendPayload } from "@calcom/types/App"; | ||
import type { ButtonProps } from "@calcom/ui"; | ||
import { | ||
Avatar, | ||
Button, | ||
Dropdown, | ||
DropdownItem, | ||
DropdownMenuContent, | ||
DropdownMenuLabel, | ||
DropdownMenuPortal, | ||
DropdownMenuTrigger, | ||
showToast, | ||
} from "@calcom/ui"; | ||
import { Button } from "@calcom/ui"; | ||
|
||
export const InstallAppButtonChild = ({ | ||
userAdminTeams, | ||
|
@@ -38,16 +29,8 @@ export const InstallAppButtonChild = ({ | |
paid?: AppFrontendPayload["paid"]; | ||
} & ButtonProps) => { | ||
const { t } = useLocale(); | ||
const router = useRouter(); | ||
|
||
const mutation = useAddAppMutation(null, { | ||
onSuccess: (data) => { | ||
if (data?.setupPending) return; | ||
showToast(t("app_successfully_installed"), "success"); | ||
}, | ||
onError: (error) => { | ||
if (error instanceof Error) showToast(error.message || t("app_could_not_be_installed"), "error"); | ||
}, | ||
}); | ||
const shouldDisableInstallation = !multiInstall ? !!(credentials && credentials.length) : false; | ||
|
||
// Paid apps don't support team installs at the moment | ||
|
@@ -84,64 +67,18 @@ export const InstallAppButtonChild = ({ | |
} | ||
|
||
return ( | ||
<Dropdown> | ||
<DropdownMenuTrigger asChild> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I love to see this gone. |
||
<Button | ||
data-testid="install-app-button" | ||
{...props} | ||
// @TODO: Overriding color and size prevent us from | ||
// having to duplicate InstallAppButton for now. | ||
color="primary" | ||
size="base"> | ||
{multiInstall ? t("install_another") : t("install_app")} | ||
</Button> | ||
</DropdownMenuTrigger> | ||
<DropdownMenuPortal> | ||
<DropdownMenuContent | ||
className="w-auto" | ||
onInteractOutside={(event) => { | ||
if (mutation.isPending) event.preventDefault(); | ||
}}> | ||
{mutation.isPending && ( | ||
<div className="z-1 fixed inset-0 flex items-center justify-center"> | ||
<Spinner /> | ||
</div> | ||
)} | ||
<DropdownMenuLabel>{t("install_app_on")}</DropdownMenuLabel> | ||
{userAdminTeams.map((team) => { | ||
const isInstalled = | ||
credentials && | ||
credentials.some((credential) => | ||
credential?.teamId ? credential?.teamId === team.id : credential.userId === team.id | ||
); | ||
|
||
return ( | ||
<DropdownItem | ||
className="flex" | ||
type="button" | ||
data-testid={team.isUser ? "install-app-button-personal" : "anything else"} | ||
key={team.id} | ||
disabled={isInstalled} | ||
CustomStartIcon={ | ||
<Avatar | ||
alt={team.logoUrl || ""} | ||
imageSrc={getPlaceholderAvatar(team.logoUrl, team.name)} // if no image, use default avatar | ||
size="sm" | ||
/> | ||
} | ||
onClick={() => { | ||
mutation.mutate( | ||
team.isUser ? addAppMutationInput : { ...addAppMutationInput, teamId: team.id } | ||
); | ||
}}> | ||
<p> | ||
{t(team.name)} {isInstalled && `(${t("installed")})`} | ||
</p> | ||
</DropdownItem> | ||
); | ||
})} | ||
</DropdownMenuContent> | ||
</DropdownMenuPortal> | ||
</Dropdown> | ||
<Button | ||
data-testid="install-app-button" | ||
disabled={shouldDisableInstallation} | ||
onClick={() => { | ||
router.push( | ||
getAppOnboardingUrl({ slug: addAppMutationInput.slug, step: AppOnboardingSteps.ACCOUNTS_STEP }) | ||
); | ||
}} | ||
color="primary" | ||
size="base" | ||
{...props}> | ||
{t("install_app")} | ||
</Button> | ||
); | ||
}; |
97 changes: 97 additions & 0 deletions
97
apps/web/components/apps/installation/AccountsStepCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,97 @@ | ||
import type { FC } from "react"; | ||
import React, { useState } from "react"; | ||
|
||
import { classNames } from "@calcom/lib"; | ||
import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage"; | ||
import { useLocale } from "@calcom/lib/hooks/useLocale"; | ||
import type { Team, User } from "@calcom/prisma/client"; | ||
import { Avatar, StepCard } from "@calcom/ui"; | ||
|
||
type AccountSelectorProps = { | ||
avatar?: string; | ||
name: string; | ||
alreadyInstalled: boolean; | ||
onClick?: () => void; | ||
loading: boolean; | ||
testId: string; | ||
}; | ||
|
||
const AccountSelector: FC<AccountSelectorProps> = ({ | ||
avatar, | ||
alreadyInstalled, | ||
name, | ||
onClick, | ||
loading, | ||
testId, | ||
}) => { | ||
const { t } = useLocale(); | ||
const [selected, setSelected] = useState(false); | ||
return ( | ||
<div | ||
className={classNames( | ||
"hover:bg-muted flex cursor-pointer flex-row items-center gap-2 p-1", | ||
(alreadyInstalled || loading) && "cursor-not-allowed", | ||
selected && "bg-muted animate-pulse" | ||
)} | ||
data-testid={testId} | ||
onClick={() => { | ||
if (onClick) { | ||
setSelected(true); | ||
onClick(); | ||
} | ||
}}> | ||
<Avatar | ||
alt={avatar || ""} | ||
imageSrc={getPlaceholderAvatar(avatar, name)} // if no image, use default avatar | ||
size="sm" | ||
/> | ||
<div className="text-md pt-0.5 font-medium text-gray-500"> | ||
{name} | ||
{alreadyInstalled ? <span className="ml-1 text-sm text-gray-400">{t("already_installed")}</span> : ""} | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export type PersonalAccountProps = Pick<User, "id" | "avatar" | "name"> & { alreadyInstalled: boolean }; | ||
|
||
export type TeamsProp = (Pick<Team, "id" | "name" | "logo"> & { | ||
alreadyInstalled: boolean; | ||
})[]; | ||
|
||
type AccountStepCardProps = { | ||
teams: TeamsProp; | ||
personalAccount: PersonalAccountProps; | ||
onSelect: (id?: number) => void; | ||
loading: boolean; | ||
}; | ||
|
||
export const AccountsStepCard: FC<AccountStepCardProps> = ({ teams, personalAccount, onSelect, loading }) => { | ||
const { t } = useLocale(); | ||
return ( | ||
<StepCard> | ||
<div className="text-sm font-medium text-gray-400">{t("install_app_on")}</div> | ||
<div className={classNames("mt-2 flex flex-col gap-2 ")}> | ||
<AccountSelector | ||
testId="install-app-button-personal" | ||
avatar={personalAccount.avatar ?? ""} | ||
name={personalAccount.name ?? ""} | ||
alreadyInstalled={personalAccount.alreadyInstalled} | ||
onClick={() => !personalAccount.alreadyInstalled && !loading && onSelect()} | ||
loading={loading} | ||
/> | ||
{teams.map((team) => ( | ||
<AccountSelector | ||
key={team.id} | ||
testId={`install-app-button-team${team.id}`} | ||
alreadyInstalled={team.alreadyInstalled} | ||
avatar={team.logo ?? ""} | ||
name={team.name} | ||
onClick={() => !team.alreadyInstalled && !loading && onSelect(team.id)} | ||
loading={loading} | ||
/> | ||
))} | ||
</div> | ||
</StepCard> | ||
); | ||
}; |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's try and completely remove the need for
userAdminTeams
prop here. Ideally we should be using the new app install flow.