chumi-technologies · jefn76 · Oct 9, 2022 · Oct 12, 2022 · Oct 12, 2022 · Oct 13, 2022
diff --git 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.
+ *     <iconpark-icon name="xxx" />
+ * include below type declaration in your project (don't forget to import React from 'react')
+ *
+ */
+declare global {
+  interface IconParkIconAttributes<T> extends React.HTMLAttributes<T> {
+    // 包含打包的图标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<IconParkIconAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
diff --git a/apps/happin-web/components/Header.tsx b/apps/happin-web/components/Header.tsx
@@ -3,13 +3,13 @@ import Link from 'next/link';
 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 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 }) {
   const { user, clearUser } = useUserState();
@@ -110,7 +110,7 @@ export default function Header({ children, checkingWhiteLable, whiteLabelLogo, w
               {({ open }) => (
                 <>
                   <Menu.Button className={classNames('p-2 rounded-full text-gray-300 hover:text-gray-50 hover:bg-gray-900', { 'bg-gray-800 text-gray-50 hover:bg-gray-800': open })}>
-                    <More theme="outline" size="24" fill="currentColor" />
+                    <IconPark name="more" size="24" />
                   </Menu.Button>
                   <Transition
                     show={open}
@@ -178,7 +178,7 @@ export default function Header({ children, checkingWhiteLable, whiteLabelLogo, w
               {({ open }) => (
                 <>
                   <Menu.Button as="div" className={classNames('header__menu', { 'active': open })}>
-                    <HamburgerButton theme="outline" size="22" fill="currentColor" />
+                    <IconPark name="hamburger-button" size="22" />
                     {!user && <Avatar size="sm" ml={2} bg="gray.600" ><span style={{background: '#fdf846', bottom: '25px', left: '25px' }} className="w-2 h-2 rounded-full absolute"></span></Avatar>}
                     {user && <Avatar size="sm" ml={2} src={user.photourl} name={user.displayname} />}
                   </Menu.Button>
@@ -196,13 +196,13 @@ export default function Header({ children, checkingWhiteLable, whiteLabelLogo, w
                       <div className="py-1">
                         <Menu.Item>
                           <a className="header__menu-link" onClick={clickHostEventHandler}>
-                            <International theme="outline" size="16" fill="currentColor" />
+                            <IconPark name="international" size="16" />
                             <span className="ml-2">Organizer Dashboard</span>
                           </a>
                         </Menu.Item>
                         <Menu.Item>
                           <a className="header__menu-link" onClick={()=>{ window.location.href = process.env.NEXT_PUBLIC_HAPPIN_APP_APPLE_STORE as string}}>
-                            <DownTwo theme="outline" size="16" fill="currentColor" />
+                            <IconPark name="down-two" size="16" />
                             <span className="ml-2">Download App</span>
                           </a>
                         </Menu.Item>

diff --git a/apps/happin-web/components/IconPark.tsx 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 (
+    <>
+      <Script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_20083_30.1d1880ee88baa8e3524e2b4e64e9b863.js" />
+      {/*// @ts-ignore*/}
+      <iconpark-icon {...props} name={name} color={color} />
+    </>
+  );
+};
+export default IconPark;
diff --git a/apps/happin-web/components/Layout.tsx b/apps/happin-web/components/Layout.tsx
@@ -159,7 +159,6 @@ const Layout = ({ children }: { children: any }) => {
         />
         <link rel="icon" href="/favicon.ico" key="favicon" />
       </Head>
-      {/*<Script src="https://maps.googleapis.com/maps/api/js?libraries=places" strategy="beforeInteractive" />*/}
       <main
         className={classnames("main-app", {
           production: isProduction,

diff --git a/apps/happin-web/components/SignInBar.tsx b/apps/happin-web/components/SignInBar.tsx
@@ -1,7 +1,7 @@
 import SvgIcon from '@components/SvgIcon';
-import { CloseSmall } from '@icon-park/react';
 import { useSSOState } from 'contexts/sso-state';
 import React, { useEffect } from 'react';
+import IconPark from '@components/IconPark';
 
 const SignInBar = ({ setIsFirstTimeVisitor }: any) => {
   const { dimmed, showSSO } = useSSOState();
@@ -13,7 +13,7 @@ const SignInBar = ({ setIsFirstTimeVisitor }: any) => {
       document.body.classList.remove("body-overflow-hidden");
     }
   }, [dimmed])
-  
+
   return (
     <div className="absolute top-0 w-full py-3 sm:py-2 px-6 sm:px-8 md:px-10 lg:px-14 z-30 bg-white text-gray-900">
       <div className="relative flex items-center flex-wrap justify-center">
@@ -23,7 +23,7 @@ const SignInBar = ({ setIsFirstTimeVisitor }: any) => {
         <div className="flex items-center justify-center absolute -right-4 w-8 h-8 rounded-full hover:text-rose-500 transition cursor-pointer" onClick={() => {
           setIsFirstTimeVisitor(false)
         }}>
-          <CloseSmall theme="outline" size="22" fill="currentColor" strokeWidth={3}/>
+          <IconPark name="close-small" size={22} />
         </div>
       </div>
     </div>

diff --git a/apps/happin-web/components/page_components/CheckoutPageComponents/BundleSidebar.tsx b/apps/happin-web/components/page_components/CheckoutPageComponents/BundleSidebar.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import SvgIcon from '@components/SvgIcon';
-import { Check, CloseSmall } from '@icon-park/react';
 import Merch from './Merch';
 import Select from '@components/reusable/Select';
 import NumberInput from '@components/reusable/NumberInput';
@@ -10,6 +9,7 @@ import { useCheckoutState } from 'contexts/checkout-state';
 import { useEffect } from 'react';
 import { increaseBundleTicketAmount } from './util/IncreseInput';
 import { currencyFormatter } from './util/currencyFormat';
+import IconPark from '@components/IconPark';
 
 
 type CheckoutSidebarProps = {
@@ -145,14 +145,16 @@ const BundleSidebar = (props: CheckoutSidebarProps) => {
             <div
               className="absolute -right-2 top-4 flex items-center justify-center w-8 h-8 rounded-full hover:text-rose-500 transition cursor-pointer"
               onClick={() => { onClose(); setInputValue(0); setSelectedProperties([]) }}>
-              <CloseSmall theme="outline" size="22" fill="currentColor" strokeWidth={3} />
+              <IconPark name="close-small" size={22} />
             </div>
           </div>
         </div>
         <div className="flex-1 h-0 web-scroll overflow-y-auto px-5 sm:px-6">
 
           <div className="flex items-center text-green-500 font-bold uppercase py-5">
-            <Check theme="outline" size="16" fill="currentColor" strokeWidth={6} />
+            <svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M43 11L16.875 37L5 25.1818" stroke="currentColor" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
             <span className="ml-2 text-sm">Bundle includes:</span>
           </div>
           {

diff --git a/apps/happin-web/components/page_components/CheckoutPageComponents/CheckoutHead.tsx b/apps/happin-web/components/page_components/CheckoutPageComponents/CheckoutHead.tsx
@@ -1,7 +1,6 @@
 import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { Popover, Dialog, Transition } from '@headlessui/react'
 import SvgIcon from '@components/SvgIcon';
-import { CloseSmall, Delete, Left } from '@icon-park/react';
 import NumberInput from '@components/reusable/NumberInput';
 import classNames from 'classnames';
 import moment from 'moment'
@@ -19,6 +18,7 @@ import { useUserState } from 'contexts/user-state';
 import { useSSOState } from 'contexts/sso-state';
 import jwt_decode from "jwt-decode";
 import Link from 'next/link';
+import IconPark from '@components/IconPark';
 
 
 const CheckoutHead = ({
@@ -295,7 +295,7 @@ const CheckoutHead = ({
               </div>
               <div onClick={() => { deleteTicketFromCart(getEdtingTicketListItem(t), t.quantity, dispatchTicketListAction, removeItem) }}
                 className="relative flex items-center justify-center w-8 h-8 text-gray-400 rounded-full cursor-pointer bg-gray-800 hover:bg-gray-700 hover:text-gray-50 transition">
-                <Delete theme="outline" size="14" fill="currentColor" />
+                <IconPark name="delete" size={14} />
               </div>
             </div>
           </div>
@@ -329,7 +329,7 @@ const CheckoutHead = ({
               </div>
               <div onClick={() => { deleteMerchFromCart(getEditingMerchListItem(m), m.quantity, m.property, dispatchMerchListAction, removeItem) }}
                 className="relative flex items-center justify-center w-8 h-8 text-gray-400 rounded-full cursor-pointer bg-gray-800 hover:bg-gray-700 hover:text-gray-50 transition">
-                <Delete theme="outline" size="14" fill="currentColor" />
+                <IconPark name="delete" size={14} />
               </div>
             </div>
           </div>
@@ -363,7 +363,7 @@ const CheckoutHead = ({
               </div>
               <div onClick={() => { bundleDeleteHandler(t) }}
                 className="relative flex items-center justify-center w-8 h-8 text-gray-400 rounded-full cursor-pointer bg-gray-800 hover:bg-gray-700 hover:text-gray-50 transition">
-                <Delete theme="outline" size="14" fill="currentColor" />
+                <IconPark name="delete" size={14} />
               </div>
             </div>
 
@@ -448,7 +448,7 @@ const CheckoutHead = ({
           <div className="flex items-center sm:flex-1 min-w-0">
             {!openInApp &&
               <button onClick={() => { router.back() }} className="btn inline-flex items-center text-gray-300 hover:text-gray-50 !px-0 mr-5 md:mr-7">
-                <Left theme="outline" size="24" fill="currentColor" />
+                <IconPark name="left" size={24} />
               </button>
             }
             <div className="flex-1 font-semibold min-w-0 hidden sm:block">
@@ -484,7 +484,7 @@ const CheckoutHead = ({
                         <div className="font-bold leading-none">My Cart</div>
                         <Popover.Button as={Fragment}>
                           <div className="flex items-center justify-center absolute right-3 w-9 h-9 rounded-full hover:bg-gray-700 hover:text-gray-50 transition cursor-pointer text-gray-300" onClick={closeModal}>
-                            <CloseSmall theme="outline" size="22" fill="currentColor" strokeWidth={3} />
+                            <IconPark name="close-small" size={22} />
                           </div>
                         </Popover.Button>
                       </div>
@@ -603,7 +603,7 @@ const CheckoutHead = ({
                     Please enter <span className="text-rose-500">Pre-Sale Code</span>
                   </Dialog.Title>
                   <div className="flex items-center justify-center absolute -right-2 w-10 h-10 rounded-full hover:bg-gray-700 hover:text-gray-50 transition cursor-pointer text-gray-300" onClick={closeModal}>
-                    <CloseSmall theme="outline" size="22" fill="currentColor" strokeWidth={3} />
+                    <IconPark name="close-small" size={22} />
                   </div>
                 </div>
                 <input value={presaleInput} onChange={onPresaleCodeChangeHandler} type="text" className="block w-full px-3 py-2 sm:py-3 border-2 border-solid border-gray-600 rounded-lg bg-gray-900 text-gray-50 text-center transition placeholder-gray-400 hover:border-gray-500 focus:bg-gray-900 font-bold text-xl sm:text-2xl" placeholder="Enter code" />

diff --git a/apps/happin-web/components/page_components/CheckoutPageComponents/Merch.tsx b/apps/happin-web/components/page_components/CheckoutPageComponents/Merch.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { CloseSmall, Left, Right } from '@icon-park/react';
 import classNames from 'classnames';
 import Slider from 'react-slick';
 import Lightbox, { ImagesListType } from 'react-spring-lightbox';
+import IconPark from '@components/IconPark';
 
 function Arrow(props: any) {
   const { className, onClick, children } = props;
@@ -27,8 +27,8 @@ export default function Merch({ imgList }: { imgList: ImagesListType }) {
     slidesToShow: 1,
     slidesToScroll: 1,
     draggable: false,
-    nextArrow: <Arrow><Right theme="outline" size="14" fill="currentColor" /></Arrow>,
-    prevArrow: <Arrow><Left theme="outline" size="14" fill="currentColor" /></Arrow>,
+    nextArrow: <Arrow><IconPark name="right" size={14} /></Arrow>,
+    prevArrow: <Arrow><IconPark name="left" size={14} /></Arrow>,
     customPaging: function paging(){ return <div className="slides-dot-item" />},
   };
 
@@ -62,17 +62,17 @@ export default function Merch({ imgList }: { imgList: ImagesListType }) {
         className="bg-black bg-opacity-70"
         renderHeader={() => (
           <div className="flex items-center justify-center absolute top-3 right-3 w-10 h-10 rounded-full hover:bg-gray-700 hover:text-white transition cursor-pointer text-gray-300 z-10 hover:bg-opacity-75" onClick={closeLightbox}>
-            <CloseSmall theme="outline" size="24" fill="currentColor" strokeWidth={3}/>
+            <IconPark name="close-small" size={24} />
           </div>
         )}
         renderPrevButton={() => (
           <div className={classNames('goto-btn prev', { disabled: currentImageIndex === 0 })} onClick={gotoPrevious}>
-            <Left theme="outline" size="24" fill="currentColor" />
+            <IconPark name="left" size={24} />
           </div>
         )}
         renderNextButton={() => (
           <div className={classNames('goto-btn next', { disabled: currentImageIndex === imgList.length - 1  })} onClick={gotoNext}>
-            <Right theme="outline" size="24" fill="currentColor" />
+            <IconPark name="right" size={24} />
           </div>
         )}
       />

diff --git a/apps/happin-web/components/page_components/CheckoutPageComponents/MerchSideBar.tsx b/apps/happin-web/components/page_components/CheckoutPageComponents/MerchSideBar.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import SvgIcon from '@components/SvgIcon';
-import { CloseSmall } from '@icon-park/react';
 import Merch from './Merch';
 import Select from '@components/reusable/Select';
 import NumberInput from '@components/reusable/NumberInput';
@@ -9,6 +8,7 @@ import { MerchItemDataProps } from 'lib/model/checkout';
 import { useState } from 'react';
 import { useCheckoutState } from 'contexts/checkout-state';
 import { increaseMerchAmount } from './util/IncreseInput';
+import IconPark from '@components/IconPark';
 
 type CheckoutSidebarProps = {
   isOpen: boolean;
@@ -67,7 +67,7 @@ const MerchSidebar = (props: CheckoutSidebarProps) => {
             <div
               className="absolute -right-2 top-4 flex items-center justify-center w-8 h-8 rounded-full hover:text-rose-500 transition cursor-pointer"
               onClick={()=>{onClose(); setInputValue(0); setSelectedPropertyIndex(0)}}>
-              <CloseSmall theme="outline" size="22" fill="currentColor" strokeWidth={3} />
+              <IconPark name="close-small" size={22} />
             </div>
           </div>
 

diff --git a/apps/happin-web/components/page_components/EventPageComponents/ActionSideBar.tsx b/apps/happin-web/components/page_components/EventPageComponents/ActionSideBar.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import Link from 'next/link';
 import { VStack, HStack } from '@chakra-ui/react';
-import { Like, ShareTwo, DownTwo, CloseSmall } from '@icon-park/react';
 import classNames from 'classnames';
 
 import {
@@ -20,6 +19,7 @@ import { useUserState } from 'contexts/user-state';
 import { useEffect } from 'react';
 import { getSavedEventTicketsList, saveOrUnsavedEvent } from 'lib/api';
 import { currencyFormatter } from '../CheckoutPageComponents/util/currencyFormat';
+import IconPark from '@components/IconPark';
 
 type ActionSideBarProps = {
   //isFavorite: boolean;
@@ -45,7 +45,7 @@ const ActionSideBar: React.FC<ActionSideBarProps> = (props) => {
       eventDescription = `@ ${moment(eventData.event.start_datetime).format('MMM DD, H:mm A')} in ${eventData.event.acInfo.venueName || eventData.event.acInfo.location}.`;
     } else if (eventData.event.acInfo.eventType === 'hybrid') {
       eventDescription = `@ ${moment(eventData.event.start_datetime).format('MMM DD, H:mm A')} in ${eventData.event.acInfo.venueName || eventData.event.acInfo.location} or watch livestream on our Happin App.`
-    } 
+    }
     return `${eventData.event.title} ${eventDescription} ${eventData.event.sourceUrl ? '' : `(prices from ${currencyFormatter(eventData.event.currency as string).format(eventData.event.min_price/100)})`} ${eventData.event.creator?.name ? '\nEvent organized by ' + eventData.event.creator?.name : ''} \n\nGet tickets now on `
   }
   const { user } = useUserState();
@@ -84,15 +84,15 @@ const ActionSideBar: React.FC<ActionSideBarProps> = (props) => {
   return (
     <div className="absolute right-4 top-4 sm:right-6 sm:top-6 lg:right-14 lg:top-14 z-20">
       <VStack>
-        {user && 
+        {user &&
         <div className={classNames('event-details__side-action', { 'favorite': isFavorite })}
           onClick={() => { saveOrUnsaved()}}>
-          <Like theme={isFavorite ? 'filled' : 'outline'} size="1em" fill="currentColor" strokeWidth={2} />
+          <IconPark name={isFavorite ? 'like-filled' : 'like-thin'} size="1em" />
         </div>}
 
         <div className="relative">
           <div className="event-details__side-action relative z-30" onClick={() => { setOpenShare(!openShare) }}>
-            <ShareTwo theme="outline" size="1em" fill="currentColor" strokeWidth={2} />
+            <IconPark name="share-two-thin" size="1em" />
           </div>
           {
             openShare && (
@@ -136,7 +136,7 @@ const ActionSideBar: React.FC<ActionSideBarProps> = (props) => {
             onClick={() => { setDownload(s => !s) }}
           >
             {
-              showDownload ? <CloseSmall theme="outline" size="1em" fill="currentColor" strokeWidth={2} /> : <DownTwo theme="outline" size="1em" fill="currentColor" strokeWidth={2} />
+              showDownload ? <IconPark name="close-small-thin" size="1em" /> : <IconPark name="down-two-thin" size="1em" />
             }
           </div>
           {