Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 1x 1x 3x 3x 3x 3x 3x 3x 3x 3x 1x 3x 1x 3x 1x 1x 3x | import { styled } from "@mui/material";
import Alert from "components/Alert";
import CenteredSpinner from "components/CenteredSpinner/CenteredSpinner";
import HtmlMeta from "components/HtmlMeta";
import MapAnimation from "components/MapAnimation";
import CouchersIntroduction from "features/landing/CouchersIntroduction";
import { useTranslation } from "i18n";
import { AUTH, GLOBAL } from "i18n/namespaces";
import { useRouter } from "next/router";
import { useIsNativeEmbed } from "platform/nativeLink";
import Sentry from "platform/sentry";
import { useEffect, useState } from "react";
import { signupRoute } from "routes";
import { service } from "service";
import isGrpcError from "service/utils/isGrpcError";
import stringOrFirstString from "utils/stringOrFirstString";
import { useAuthContext } from "../auth/AuthProvider";
import SignupFormContent from "../auth/signup/SignupFormContent";
const StyledContent = styled("div")(({ theme }) => ({
display: "flex",
flexDirection: "row",
width: "100%",
justifyContent: "space-between",
alignItems: "center",
padding: theme.spacing(4, 0),
[theme.breakpoints.down("md")]: {
flexDirection: "column",
},
}));
const StyledMobileEmbed = styled("div")(({ theme }) => ({
margin: theme.spacing(3),
}));
export default function HeroSection() {
const { t } = useTranslation([AUTH, GLOBAL]);
const router = useRouter();
const { authState, authActions } = useAuthContext();
const error = authState.error;
const urlToken = stringOrFirstString(router.query.token);
const isNativeEmbed = useIsNativeEmbed();
const [loading, setLoading] = useState(false);
useEffect(() => {
authActions.clearError();
}, [authActions]);
useEffect(() => {
Iif (authState.error) window.scroll({ top: 0, behavior: "smooth" });
}, [authState.error]);
useEffect(() => {
(async () => {
Iif (urlToken) {
setLoading(true);
try {
authActions.updateSignupState(
await service.auth.signupFlowEmailToken(urlToken),
);
} catch (err) {
Sentry.captureException(err, {
tags: {
component: "auth/signup/Signup",
},
});
authActions.authError(
isGrpcError(err) ? err.message : t("global:error.fatal_message"),
);
router.push(signupRoute);
return;
}
setLoading(false);
}
})();
// next-router-mock router isn't memoized, so putting router in the dependencies
// causes infinite looping in tests
}, [urlToken, authActions, t]); // eslint-disable-line react-hooks/exhaustive-deps
Iif (isNativeEmbed) {
return (
<StyledMobileEmbed>
{error && (
<Alert severity="error" sx={{ width: "100%" }}>
{error}
</Alert>
)}
{loading ? <CenteredSpinner /> : <SignupFormContent />}
</StyledMobileEmbed>
);
}
return (
<>
<HtmlMeta title={t("global:join_us")} />
<StyledContent>
<CouchersIntroduction />
<MapAnimation />
</StyledContent>
</>
);
}
|