{/* This is a sample theme package for MBC. Markup for the page is located in this file 'index.jsx' and styles are in 'index.css'. Theres is an option to add theme preview image as 'preview.jpg'. If one is present then it will be used in MBC settings, otherwise placeholder will be used. If using custom buttons put the markup (JSX) for them in a separate file - buttons.jsx. At parse time user.Buttons array is mapped to custom buttons - each one receives ButtonValue and ButtonName which can be used as you want. These names CANNOT be changed. Assets are located in the 'assets' folder. Routing between 'home' and 'about' pages is (usually) handled by Next.JS routing. The routes are as follows: - home - '/${ShortUrl}' - about - '/${ShortUrl}/about', MBC can also be displayed inside of a preview where routing is handled by local state and 'currentPage' prop indicates which page is currently selected. Because of that when displaying or hiding elements based on current page please take previews into consideration - check both Next.JS 'location' (router object) and 'currentPage' prop. Markup of the page uses React's JSX (https://reactjs.org/docs/introducing-jsx.html) to handle all data coming from JavaScript. Props passed to the MBC are as follows: User related: 1. uuid - string - user's unique id 2. FirstName - string 3. LastName - string 4. Title - string - user's job title 5. EmailAddress - string 6. CompanyName - string 7. CellPhoneNumber - string 8. JobAddress - string 9. AboutMeCopyTxt - string 10. FooterTxt - string 11. PhotoUrl - string 12. LogoUrl - string 13. FbUrl - string - facebook url 14. TwUrl - string - twitter url 15. IgUrl - string - instagram url 16. InUrl - string - linkedin url 17. MyWebsiteUrl - string 18. CashAppUrl - string 19. PayPalUrl - string 20. SnapchatUrl - string 21. TikTokUrl - string 22. VenmoUrl - string 23. YouTubeUrl - string 24. ZelleUrl - string 25. ExternalAboutMe - bool - indicates if 'AboutMeCopyTxt' is a link to external page or not 26. ShortUrl - string - 6 digit hash to shorten the url 27. AboutButton - string - user definable text for button to 'About me' page and 'About me' page header 28. PrimaryColor - string - user definable color, automatically applied to css variable --primary-color 29. ButtonColor - string - user definable color, automatically applied to css variable --button-color 30. LogoColor - string - user definable color, automatically applied to css variable --logo-color 31: Buttons - array - an array of custom buttons - objects like { name: '', value: '' } - each of them has a name (displayed to the user) and value (link to which the buttons leads) 32. LoadingScreenUrl - string - url to image that is used as loading screen 33. HeaderImageUrl - string - url for custom header image // 34. CURRENTLY NOT IN USE - Icons - array of strings - an array that defines which icons are to be shown to the user // (from 6 available: ['call', 'text', 'email', 'about', 'download', 'send']; min. 3 will always be selected) 35. ClubhouseUrl - string - clubhouse url 36. YelpUrl - string - yelp url 37. CalendlyUrl - string - calendly url 38. PodcastsUrl - string - apple podcasts url 39. CustomSocials - array - array of objects like { img: '', url: '' } for custom social buttons. Already handled by Socials component 40. Compliance - string 41. ExternalCompliance - bool - indicates if 'Compliance' is a link to external page or not 42. MobilePhoneNumber - string 43. street - string - is used to conditionally render location button Modal related: 1. onPhotoClick - function - onClick event handler for user photo, opens qrcode modal 2. openCorrectModal - function - sets isAlternativeModalOpen to true if user selected "Send with your number" in ShareCard™ settings otherwise sets isModalOpen to true 3. openConnect - function - opens connect modal 4. openMaps - function - opens native maps (iOS, MacOS, Android) or redirects to Google Maps (other platforms). Coordinates are based on user's address Preview related: 1. isInPreview - bool - indicates whether MBC is currently shown in a preview (eg. not shown as a separate page, but as a part of another) 2. onPhotoClick - function - onClick event handler for user photo in preview mode, by default handles upload of a new photo 3. onAboutClick - function - onClick event handler for 'About Me' button, used for switching between pages (bypassing Next.JS routing) 4. onBackButtonClick - function - onClick event handler for 'Back' button in header (used for going back from 'About' to 'Home' page) 5. currentPage - string - specifies current page (bypassing Next.JS routing), can be either 'home' or 'about' Theme preview link related: 1. previewGoBackUrl - string - url to go back from about page Other: 1. location - object - Next.JS router object (https://nextjs.org/docs/api-reference/next/router) 2. assetsUrl - string - base url for all your theme's assets 3. downloadCardUrl - string - url that triggers download of user's vcard (.vcf file with contact information) 4. date - object - standard JS date, created as 'new Date()' 5. mapButtonsToMarkup - function - function to call in place where custom buttons have to be rendered - it maps buttons to their markup defined in buttons.jsx 6. mapFirstButtonToMarkup - function - function to call in place where custom buttons hage to be rendered - it maps only first button to its markup defined in buttons.jsx You can also make use of components that are passed into JSX. They are as follows: 1. Link - Next.JS Link, used for navigating between 'home' and 'about' pages (https://nextjs.org/docs/api-reference/next/link) 2. SVG - component used for displaying inline SVGs - same attributes as standard img tag 3. InputMask - https://www.npmjs.com/package/react-input-mask 4. QRCode - component used for generating and displaying qr code - https://www.npmjs.com/package/react-qr-code 5. QRCodeModal - component used to show QRCode with gradient inside a modal - it accepts 2 parameters: primaryColor and secondaryColor. You can use it like this to change the gradient: 6. FormModal - Form inside modal that shows on send click if user selected "Send using our number 88500 (US only)" in ShareCard™ settings 7. AlternativeFormModal - Form inside modal that shows on send click if user selected "Send with your mobile number" in ShareCard™ settings 8. Socials - component used to show social icons. This component is highly customizable using parameter "socialsToShow". Here are some examples: - shows all social icons if urls are set - shows all social icons if urls are set - shows only PayPal and TikTok in that order if urls are set - shows only TikTok and PayPal in that order if urls are set - shows only YouTube if url is set When styling avoid applying any styles to html, body and #root as it may break the page when MBC is shown in preview mode. Aforementioned tags have this default styling applied: html, body, #root { width: 100%; height: 100%; margin: 0; padding: 0; scroll-behavior: smooth; } Additionally all elements have 'box-sizing' set to 'border-box'. If you are using 'background-image' in your CSS there's currently no way to do that directly in index.css as 'assetsUrl' cannot be passed there. Background images need to be applied using inline styles. All elements should have one wrapper, as otherwise the business card might not be rendered properly - in this case it is the

. */}

{/* Button below is a different element when shown in standard or preview mode. Normally it's a Next.JS 'Link' that takes care of proper routing, but when used in a preview it becomes a 'button' that changes 'currentPage' bypassing Next.js routing and not disrupting the page on which the preview is shown. */} {isInPreview && currentPage === "about" ? ( ) : null} {/* Next.JS Links now have to be in one line and have `a` as its direct and only child, otherwise it will throw errors. Also `to` has been changed `href` and there must be no spaces between tags inside of Link as it might throws errors. */} {location.pathname.includes("about") && !location.pathname.includes("preview") && ( <> {/* prettier-ignore */}

)} {location.pathname.includes("about") && location.pathname.includes("preview") && ( <> {/* prettier-ignore */}

)} {LogoUrl ? ( Company logo

) : null}

{/* Below section shows the 'background-image' workaround that was mentioned before. */}

{/* User photo in most cases shows the photo that user uploaded in their MBC settings. If no photo has been uploaded, it shows the 'upload' image overlayed on top of generic placeholder, otherwise it should show the uploaded photo. The 'onPhotoClick' function is used in preview mode to upload new user photos. If site is displayed normally it opens qrcode modal. */} User

{/* 'Upload' image is not longer needed as that functionality has been moved elsewhere in the panel {PhotoUrl ? null : ( )} */}

{/* custom button section */}

Save

{isEngageLite != 1 || isEngageLite != "1" ? (

Send

) : (

Send

)} {isEngageLite == 1 ? ( "" ) : (

Connect

)}

{/* custom button section */}

{`${FirstName} ${LastName}`}

{Title}

{/* User address is only shown on 'home' page */} {location.pathname.includes("about") || currentPage === "about" ? null : (

{JobAddress}

)} {/* 'About me' text is only shown on 'about' page, otherwise buttons are displayed */} {location.pathname.includes("about") || currentPage === "about" ? (

{AboutButton}

{/* As AboutMeCopyTxt is already parsed from markdown we don't need to worry about html tags getting through */}

) : ( (

{CellPhoneNumber ? (

Call

) : null} {MobilePhoneNumber ? (

Text

) : null} {EmailAddress ? (

) : null} {/* Button below is a different element when shown in standard or preview mode. Normally it's a Next.JS 'Link' that takes care of proper routing, but when used in a preview it becomes a 'button' that changes 'currentPage' bypassing Next.JS routing and not disrupting the page on which the preview is shown. */} {AboutMeCopyTxt ? (isInPreview && ExternalAboutMe && (

HouseMaster Home Inspectors

Send my ShareCard™

Send my ShareCard®

Scan my ShareCard®

Connect with HouseMaster Home Inspectors