diff --git a/apps/happin-web/alltypes.d.ts b/apps/happin-web/alltypes.d.ts index 384fc808..1bcc6447 100644 --- a/apps/happin-web/alltypes.d.ts +++ b/apps/happin-web/alltypes.d.ts @@ -1,3 +1,32 @@ declare module 'react-plx' declare module 'tim-js-sdk' declare module 'randomcolor' + +/** + * if you are using React JSX with typescript + * e.g. + * + * include below type declaration in your project (don't forget to import React from 'react') + * + */ +declare global { + interface IconParkIconAttributes extends React.HTMLAttributes { + // 包含打包的图标id + 'icon-id'?: string; + // 包含打包的图标标识 + name?: string; + size?: string; + width?: string; + height?: string; + color?: string; + stroke?: string; + fill?: string; + rtl?: string; + spin?: string; + } + namespace JSX { + interface IntrinsicElements { + 'iconpark-icon': React.DetailedHTMLProps, HTMLElement>; + } + } +} diff --git a/apps/happin-web/components/Foot.tsx b/apps/happin-web/components/Foot.tsx new file mode 100644 index 00000000..7959f4b4 --- /dev/null +++ b/apps/happin-web/components/Foot.tsx @@ -0,0 +1,131 @@ +import Link from 'next/link'; + +export default function Footer({ whiteLabelLogo }: { whiteLabelLogo?: any }) { + return ( +
+ {!whiteLabelLogo ? ( +
+
+ {/*
+

Product

+ +
*/} +
+

+ Happin +

+ +
+
+

+ Resources +

+
    +
  • + News +
    • +
  • + Contact Us +
    • +
  • + Terms Of Service +
    • +
  • + Privacy Policy +
    • +
+
+
+

+ Socials +

+ +
+
+

+ Apps Download +

+
+ + app-store + +
+
+ + app-store + +
+
+
+
+ © 2021 Happin. All rights reserved. +
+
+ ) : ( + <> +
+

POWERED BY Happin

+
+ + )} +
+ ); +} diff --git a/apps/happin-web/components/Footer.tsx b/apps/happin-web/components/Footer.tsx index dd421d13..7959f4b4 100644 --- a/apps/happin-web/components/Footer.tsx +++ b/apps/happin-web/components/Footer.tsx @@ -1,11 +1,12 @@ import Link from 'next/link'; export default function Footer({ whiteLabelLogo }: { whiteLabelLogo?: any }) { - return + ); } diff --git a/apps/happin-web/components/Header.tsx b/apps/happin-web/components/Header.tsx index 8f0a2537..1b54e08d 100644 --- a/apps/happin-web/components/Header.tsx +++ b/apps/happin-web/components/Header.tsx @@ -1,17 +1,27 @@ import React, { Fragment, useEffect, useRef, useState } from 'react'; import Link from 'next/link'; -import { useRouter } from 'next/router' +import { useRouter } from 'next/router'; import { Avatar, HStack, useToast } from '@chakra-ui/react'; -import { SearchIcon } from "@chakra-ui/icons"; -import { DownTwo, HamburgerButton, International, More, Search } from '@icon-park/react'; -import { Menu, Transition } from '@headlessui/react' +import { SearchIcon } from '@chakra-ui/icons'; +import { Menu, Transition } from '@headlessui/react'; import classNames from 'classnames'; import { useSSOState } from 'contexts/sso-state'; import { useUserState } from 'contexts/user-state'; import { exchangeDashboardEventHostToken } from 'lib/api'; import classnames from 'classnames'; +import IconPark from '@components/IconPark'; -export default function Header({ children, checkingWhiteLable, whiteLabelLogo, whiteLabelHome }: { children?: any, checkingWhiteLable: any, whiteLabelLogo: any, whiteLabelHome: any }) { +export default function Header({ + children, + checkingWhiteLable, + whiteLabelLogo, + whiteLabelHome, +}: { + children?: any; + checkingWhiteLable: any; + whiteLabelLogo: any; + whiteLabelHome: any; +}) { const { user, clearUser } = useUserState(); const { dimmed, showSSO, showSSOSignUp } = useSSOState(); /* const [showSearch, setSearch] = useState(false) @@ -20,97 +30,138 @@ export default function Header({ children, checkingWhiteLable, whiteLabelLogo, w const toast = useToast(); const [isWhiteLable, setIsWhiteLable] = useState(false); - useEffect(()=> { - if (window.location.hostname !== 'happin.app' && window.location.hostname !== 'localhost' && !window.location.hostname.includes('deploy-preview')) { - setIsWhiteLable(true) + useEffect(() => { + console.log(router); + if ( + window.location.hostname !== 'happin.app' && + window.location.hostname !== 'localhost' && + !window.location.hostname.includes('deploy-preview') + ) { + setIsWhiteLable(true); } - }, []) + }, []); //const searchRef = useRef(null!); - -/* useEffect(() => { - if (router.asPath.includes('/post/') || router.asPath.includes('/checkout/') || router.asPath.includes('/payment')) { - setIsEventPage(true); - } else { - setIsEventPage(false); - } - }, [router.asPath]) + /* useEffect(() => { + if (router.asPath.includes('/post/') || router.asPath.includes('/checkout/') || router.asPath.includes('/payment')) { + setIsEventPage(true); + } else { + setIsEventPage(false); + } + }, [router.asPath]) - useEffect(() => { - showSearch && searchRef.current.focus() - }, [showSearch]) */ + useEffect(() => { + showSearch && searchRef.current.focus() + }, [showSearch]) */ useEffect(() => { if (dimmed) { - document.body.classList.add("body-overflow-hidden"); + document.body.classList.add('body-overflow-hidden'); } else { - document.body.classList.remove("body-overflow-hidden"); + document.body.classList.remove('body-overflow-hidden'); } - }, [dimmed]) + }, [dimmed]); const clickHostEventHandler = async () => { if (!user) { generateToast('Please sign up as event organizer'); - showSSOSignUp('Organizer') - return + showSSOSignUp('Organizer'); + return; } if (!user.email) { generateToast('Please sign up as event organizer'); - return + return; } try { const res = await exchangeDashboardEventHostToken(); if (res.code !== 200) { - throw new Error(res.message) + throw new Error(res.message); } const sassToken = res.data.token; - window.location.href = `https://manage.happin.app/link-happin?t=${sassToken}` + window.location.href = `https://manage.happin.app/link-happin?t=${sassToken}`; } catch (err) { - console.log(err) + console.log(err); } - } + }; const generateToast = (message: string) => { toast({ title: message, position: 'top', isClosable: true, - }) - } + }); + }; return (
{children} -
+
{/* Mobile Search Form */} - {/*
+ {/*
*/} {/* Left Block */}
{/* Logo */} - {!checkingWhiteLable ? - whiteLabelLogo ? + {!checkingWhiteLable ? ( + whiteLabelLogo ? ( - { - if (whiteLabelHome) window.location.href = whiteLabelHome.startsWith('https://') ? whiteLabelHome : 'https://' + whiteLabelHome; - else router.push('/') - }} alt="Happin" /> - : + { + if (whiteLabelHome) + window.location.href = whiteLabelHome.startsWith( + 'https://', + ) + ? whiteLabelHome + : 'https://' + whiteLabelHome; + else router.push('/'); + }} + alt="Happin" + /> + + ) : ( - { router.push('/') }} alt="Happin" /> - { router.push('/') }} alt="Happin" /> - : <> - } + { + router.push('/'); + }} + alt="Happin" + /> + { + router.push('/'); + }} + alt="Happin" + /> + + ) + ) : ( + <> + )} {/* Mobile Left Menu */} {({ open }) => ( <> - - + + */} - {router.push('/submit-event')}}>Submit an Event/Experience + { + router.push('/submit-event'); + }} + > + Submit an Event/Experience +
@@ -144,6 +202,16 @@ export default function Header({ children, checkingWhiteLable, whiteLabelLogo, w )} {/* Left Menu */} + {router.asPath === '/' && ( +
+ + For designers + + + Blog + +
+ )} {/* Home @@ -156,31 +224,60 @@ export default function Header({ children, checkingWhiteLable, whiteLabelLogo, w {/* Central Block */} {/* Search */} -{/* {!isEventPage &&
+ {/* {!isEventPage &&
} */} - {/* Right Block */}
- {!isWhiteLable && { window.location.href = 'https://ticketing.happin.app'}}>Host events with Happin} + {/*{!isWhiteLable && ( + { + window.location.href = 'https://ticketing.happin.app'; + }} + > + Host events with Happin + + )}*/} {/*{!isWhiteLable && {router.push('/submit-event')}}>Submit a professional event}*/} - {/* {!isEventPage && } */} {/* User Profile */} - + {/* {({ open }) => ( <> - - - {!user && } - {user && } + + + {!user && ( + + + + )} + {user && ( + + )}
- - + + Organizer Dashboard - { window.location.href = process.env.NEXT_PUBLIC_HAPPIN_APP_APPLE_STORE as string}}> - + { + window.location.href = process.env + .NEXT_PUBLIC_HAPPIN_APP_APPLE_STORE as string; + }} + > + Download App @@ -211,23 +317,57 @@ export default function Header({ children, checkingWhiteLable, whiteLabelLogo, w {!user && ( <> - Log in + + Log in + - {showSSOSignUp('Fan')}}>Sign up + { + showSSOSignUp('Fan'); + }} + > + Sign up + )} {user && ( <> - - {router.push('/my-event-collections')}}>Event collection + + { + router.push('/my-event-collections'); + }} + > + Event collection + - {router.push('/my-events')}}>My events + { + router.push('/my-events'); + }} + > + My events + - {clearUser(); router.push('/')}}>Log out + { + clearUser(); + router.push('/'); + }} + > + Log out + )} @@ -236,11 +376,11 @@ export default function Header({ children, checkingWhiteLable, whiteLabelLogo, w )} -
+ */}
{/*
*/}
- ) + ); } diff --git a/apps/happin-web/components/IconPark.tsx b/apps/happin-web/components/IconPark.tsx new file mode 100644 index 00000000..08b39c58 --- /dev/null +++ b/apps/happin-web/components/IconPark.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import Script from 'next/script'; + +type IconParkProps = { + 'icon-id'?: string; + name: + | 'international' + | 'down-two' + | 'down-two-thin' + | 'hamburger-button' + | 'more' + | 'search' + | 'delete' + | 'left' + | 'check' + | 'right' + | 'like' + | 'share-two' + | 'share-two-thin' + | 'play-one' + | 'grinning-face-with-open-mouth' + | 'minus' + | 'plus' + | 'down' + | 'arrow-right' + | 'help' + | 'lightning' + | 'lightning-filled' + | 'stopwatch' + | 'switch' + | 'cosmetic-brush' + | 'up' + | 'close-small' + | 'close-small-thin' + | 'like-filled' + | 'like-thin'; + size?: string | number; + width?: string; + height?: string; + color?: string; + stroke?: string; + fill?: string; + rtl?: string; + spin?: string; + className?: string; + style?: CSSStyleDeclaration; +}; +const IconPark = (props: IconParkProps) => { + const { name, color = 'currentColor' } = props; + return ( + <> +