From ab417ac26724508f3f9b9def68aec0173b2178c3 Mon Sep 17 00:00:00 2001 From: Hariom Balhara Date: Sat, 24 Sep 2022 17:25:50 +0530 Subject: [PATCH] Hide mobile nav on subpages based on backPath (#4695) * Hide nav on subpages based on backPath. Add backPath where it was missing * Fix heading not showing on mobile Co-authored-by: Peer Richelsen --- apps/web/components/v2/apps/App.tsx | 422 +++++++++--------- .../pages/v2/apps/categories/[category].tsx | 34 +- .../pages/form-edit/[...appPages].tsx | 6 +- .../pages/route-builder/[...appPages].tsx | 6 +- .../ee/workflows/pages/v2/workflow.tsx | 1 + packages/ui/v2/core/Shell.tsx | 18 +- 6 files changed, 241 insertions(+), 246 deletions(-) diff --git a/apps/web/components/v2/apps/App.tsx b/apps/web/components/v2/apps/App.tsx index 3de990f8da..9d1f894c93 100644 --- a/apps/web/components/v2/apps/App.tsx +++ b/apps/web/components/v2/apps/App.tsx @@ -1,6 +1,6 @@ import Link from "next/link"; import { useRouter } from "next/router"; -import React, { useEffect, useState } from "react"; +import React, { useState } from "react"; import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation"; import { InstallAppButton } from "@calcom/app-store/components"; @@ -9,7 +9,6 @@ import classNames from "@calcom/lib/classNames"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { App as AppType } from "@calcom/types/App"; -import Badge from "@calcom/ui/Badge"; import { Icon } from "@calcom/ui/Icon"; import { showToast, SkeletonText } from "@calcom/ui/v2"; import { Button, SkeletonButton, Shell } from "@calcom/ui/v2"; @@ -37,7 +36,6 @@ const Component = ({ images, }: Parameters[0]) => { const { t } = useLocale(); - const { data: user } = trpc.useQuery(["viewer.me"]); const hasImages = images && images.length > 0; const router = useRouter(); @@ -66,225 +64,213 @@ const Component = ({ const allowedMultipleInstalls = categories.indexOf("calendar") > -1; return ( - <> -
- - - {t("app_store")} - - -
- -
- {hasImages && ( -
- {images ? ( - images.map((img) => ( - {`Screenshot - )) - ) : ( - - )} -
- )} -
-
-
-
- {name} -

{name}

-
-

- - - {categories[0]} - - {" "} - • {t("published_by", { author })} -

-
-
- {!appCredentials.isLoading ? ( - isGlobal || - (existingCredentials.length > 0 && allowedMultipleInstalls ? ( -
- - {!isGlobal && ( - { - if (useDefaultComponent) { - props = { - onClick: () => { - mutation.mutate({ type, variant, slug }); - }, - loading: mutation.isLoading, - }; - } - return ( - - ); - }} - /> - )} -
- ) : existingCredentials.length > 0 ? ( - { - router.replace("/apps/installed"); - }} - /> - ) : ( - { - if (useDefaultComponent) { - props = { - onClick: () => { - mutation.mutate({ type, variant, slug }); - }, - loading: mutation.isLoading, - }; - } - return ( - - ); - }} +
+ {hasImages && ( +
+ {images ? ( + images.map((img) => ( + {`Screenshot )) ) : ( - + )} - {price !== 0 && ( - - {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar} - {feeType === "monthly" && "/" + t("month")} - - )} - -
{body}
-

{t("pricing")}

- - {price === 0 ? ( - "Free" - ) : ( - <> - {Intl.NumberFormat("en-US", { - style: "currency", - currency: "USD", - useGrouping: false, - }).format(price)} - {feeType === "monthly" && "/" + t("month")} - - )} - - -

{t("learn_more")}

- -
- {t("every_app_published")} - - {t("report_app")} -
+ )} +
+
+
+
+ {name} +

{name}

+
+

+ + {categories[0]} + {" "} + • {t("published_by", { author })} +

+
+
+ {!appCredentials.isLoading ? ( + isGlobal || + (existingCredentials.length > 0 && allowedMultipleInstalls ? ( +
+ + {!isGlobal && ( + { + if (useDefaultComponent) { + props = { + onClick: () => { + mutation.mutate({ type, variant, slug }); + }, + loading: mutation.isLoading, + }; + } + return ( + + ); + }} + /> + )} +
+ ) : existingCredentials.length > 0 ? ( + { + router.replace("/apps/installed"); + }} + /> + ) : ( + { + if (useDefaultComponent) { + props = { + onClick: () => { + mutation.mutate({ type, variant, slug }); + }, + loading: mutation.isLoading, + }; + } + return ( + + ); + }} + /> + )) + ) : ( + + )} + {price !== 0 && ( + + {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar} + {feeType === "monthly" && "/" + t("month")} + + )} + +
{body}
+

{t("pricing")}

+ + {price === 0 ? ( + "Free" + ) : ( + <> + {Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD", + useGrouping: false, + }).format(price)} + {feeType === "monthly" && "/" + t("month")} + + )} + + +

{t("learn_more")}

+ +
+ {t("every_app_published")} + + {t("report_app")} +
- +
); }; @@ -311,8 +297,10 @@ export default function App(props: { isProOnly: AppType["isProOnly"]; images?: string[]; }) { + const { t } = useLocale(); + return ( - + {props.licenseRequired ? ( diff --git a/apps/web/pages/v2/apps/categories/[category].tsx b/apps/web/pages/v2/apps/categories/[category].tsx index 079cc2b7ca..be7872d538 100644 --- a/apps/web/pages/v2/apps/categories/[category].tsx +++ b/apps/web/pages/v2/apps/categories/[category].tsx @@ -18,21 +18,25 @@ export default function Apps({ apps }: InferGetStaticPropsType - -
- - - - {isLocaleReady ? t("app_store") : }{" "} - - - {category && ( - -  /  - {t("category_apps", { category: category[0].toUpperCase() + category?.slice(1) })} - - )} -
+ + + + {isLocaleReady ? t("app_store") : }{" "} + + + {category && ( + +  /  + {t("category_apps", { category: category[0].toUpperCase() + category?.slice(1) })} + + )} + + } + large>
{apps.map((app) => { diff --git a/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx index 21c637d22f..fc9088383a 100644 --- a/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx +++ b/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx @@ -294,7 +294,11 @@ export default function FormEditPage({ } FormEditPage.getLayout = (page: React.ReactElement) => { - return {page}; + return ( + + {page} + + ); }; export const getServerSideProps = async function getServerSideProps( diff --git a/packages/app-store/ee/routing-forms/pages/route-builder/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/route-builder/[...appPages].tsx index 28a85fa53b..426558aeea 100644 --- a/packages/app-store/ee/routing-forms/pages/route-builder/[...appPages].tsx +++ b/packages/app-store/ee/routing-forms/pages/route-builder/[...appPages].tsx @@ -456,7 +456,11 @@ export default function RouteBuilder({ } RouteBuilder.getLayout = (page: React.ReactElement) => { - return {page}; + return ( + + {page} + + ); }; export const getServerSideProps = async function getServerSideProps( diff --git a/packages/features/ee/workflows/pages/v2/workflow.tsx b/packages/features/ee/workflows/pages/v2/workflow.tsx index 8d666a90c8..e8cdff48b9 100644 --- a/packages/features/ee/workflows/pages/v2/workflow.tsx +++ b/packages/features/ee/workflows/pages/v2/workflow.tsx @@ -185,6 +185,7 @@ function WorkflowPage() { }); }}> diff --git a/packages/ui/v2/core/Shell.tsx b/packages/ui/v2/core/Shell.tsx index 8504fe7859..927bc113ca 100644 --- a/packages/ui/v2/core/Shell.tsx +++ b/packages/ui/v2/core/Shell.tsx @@ -575,16 +575,12 @@ function MobileNavigationContainer() { const MobileNavigation = () => { const isEmbed = useIsEmbed(); - const router = useRouter(); - const isSubNav = router.pathname.split("/").length > 3; return ( <>