\n {\n handleColorChange(colorType, color);\n setPrimaryShowColorError(isLightError(color));\n }}\n showColorPicker={showPrimaryColorPicker}\n toggleColorPicker={togglePrimaryColorPicker}\n colorType=\"primaryColor\"\n showPrimaryColorError={showPrimaryColorError}\n />{\" \"}\n {\n handleColorChange(colorType, color);\n setSecondaryShowColorError(isLightError(color));\n }}\n showColorPicker={showSecondaryColorPicker}\n toggleColorPicker={toggleSecondaryColorPicker}\n colorType=\"secondaryColor\"\n showSecondaryColorError={showSecondaryColorError}\n />{\" \"}\n
\n \n );\n};\n\nconst ColorPicker = ({\n title,\n description,\n color,\n initialColor,\n toggleColorPicker,\n handleColorChange,\n showColorPicker,\n colorType,\n showPrimaryColorError,\n showSecondaryColorError\n}: {\n title: string;\n description: string;\n color: string;\n initialColor: string;\n toggleColorPicker: Function;\n handleColorChange: Function;\n showColorPicker: boolean;\n colorType: string;\n showPrimaryColorError?: boolean;\n showSecondaryColorError?: boolean;\n}) => {\n const colorSet = [\n \"#FF6900\",\n \"#EB144C\",\n \"#00D084\",\n \"#0693E3\",\n \"#9900EF\",\n \"#FCB900\",\n \"#F78DA7\",\n \"#7BDCB5\",\n \"#8ED1FC\",\n \"#ABB8C3\"\n ];\n\n const [colorValid, toggleColorValid] = useState(true);\n const [colorValue, setColorValue] = useState(color);\n\n const handleColorValue = (colour: string) => {\n setColorValue(colour);\n let isValid = /^#[0-9A-F]{6}$/i.test(colour);\n if (isValid) handleColorChange(colorType, colour);\n toggleColorValid(isValid);\n };\n\n return (\n \n handleColorValue(initialColor)}\n className=\"org-color-update-icon\"\n />\n
\n {((showPrimaryColorError && colorType === \"primaryColor\") ||\n (showSecondaryColorError && colorType === \"secondaryColor\")) && (\n {title}
\n{description}
\n\n
\n toggleColorPicker(!showColorPicker)}>\n handleColorValue(e.target.value.trim())}\n />{\" \"}\n
\n \n {\" \"}\n Light color will break the gallery\n
\n )}\n {showColorPicker && (\n \n toggleColorPicker(!showColorPicker)}\n >
\n \n
\n );\n};\n\nexport default PublishConfirmationAlert;\n","import React from \"react\";\nconst arrowIcon = require(\"./styles/arrow-icon.svg\");\nconst previewIcon = require(\"./styles/preview-icon.svg\");\nconst shareIcon = require(\"./styles/share-icon.svg\");\nconst copyIcon = require(\"./styles/copy-icon.svg\");\nconst tickIcon = require(\"./styles/tick-icon.svg\");\n\nexport const Navbar = ({\n landingPageURL,\n showShareGalleryPopup,\n embedGalleryURL,\n toggleColorsPanel,\n handleSaveAndPublish,\n showPageColors\n}: {\n landingPageURL: string;\n showShareGalleryPopup: () => void;\n embedGalleryURL: string;\n toggleColorsPanel: () => void;\n handleSaveAndPublish: (action: string) => void;\n showPageColors: boolean;\n}) => {\n const copyEmbedCode = () => {\n navigator.clipboard.writeText(\n ``\n );\n // @ts-ignore\n toastr.success(\"Embed code copied\");\n };\n\n return (\n \n
{\" \"}\n \n \n
\n \n \n {\" \"}\n Take a look{\" \"}\n \n
\n \n \n
\n Your changes have been published
\n\n \n 
\n Preview\n \n showShareGalleryPopup()}\n >\n 
Share event gallery\n \n \n \n 
Copy\n \n \n 
Copied\n {\" \"}\n embed code\n \n
\n );\n};\n","import React, { Component } from \"react\";\nimport OrganizationEvents, { Event, PageConfiguration } from \"./index\";\nimport CustomizeColors from \"./CustomizeColors\";\nimport PublishConfirmationAlert from \"./PublishConfirmationAlert\";\nimport ajax from \"superagent\";\nimport _, { lowerCase } from \"lodash\";\nimport ShareSocialPopup from \"../ShareSocialPopup/index\";\nimport { Navbar } from \"./Navbar\";\nimport { Cart } from \"./types\";\nimport Color from \"color\";\ninterface CustomizeLandingPageProps {\n eventsURL: string;\n completedEventsAvailable: boolean;\n upcomingEventsCount: Number;\n eventsView: string;\n organizerUserName: string;\n bulkRegisterCustomerLeadAPI: string;\n pageConfiguration: PageConfiguration;\n configurationPublishAPI: string;\n configurationSaveDraftAPI: string;\n updateEventCoverAPI: string;\n landingPageURL: string;\n organizationName: string;\n coversS3Bucket: string;\n bannerS3BasePath: string;\n eventCoverS3BasePath: string;\n showUpdateCoverOptionForEvent: number | null;\n isEventOrganizer: boolean;\n currentUser: {\n id: number;\n admin: boolean;\n };\n organizerId: number;\n embedGalleryURL: string;\n galleryURL: string;\n createEventURL: string;\n showCreateEventBanner: boolean;\n cartId: string;\n adminUser: boolean;\n selfieSearchS3Bucket: string;\n currentUserId: number;\n currentUserCountry: string;\n cart: Cart;\n photosAPI: string;\n addToCartAPI: string;\n removeFromCartAPI: string;\n organizationId: number;\n eventsAvailable: boolean;\n isAuthorizedForDirectDownloads: boolean;\n canManageTags: boolean;\n selfieSearchAvailable: boolean;\n}\n\ninterface CustomizeLandingPageState {\n showPageColors: boolean;\n pageConfiguration: PageConfiguration;\n previewImage: string;\n imageProcessing: boolean;\n showPrimaryColorPicker: boolean;\n showSecondaryColorPicker: boolean;\n showAccentColorPicker: boolean;\n showSuccessAlert: boolean;\n updateCoverForEvent: Event | null;\n showShareGalleryModal: boolean;\n cart: Cart;\n}\n\nexport interface OrganizationHeaderContextInterface {\n updateBanner: (url: string | null) => void;\n updateCroppedBanner: (url: string | null) => void;\n coversS3Bucket: string;\n bannerS3BasePath: string;\n eventCoverS3BasePath: string;\n currentUser: {\n id: number;\n admin: boolean;\n };\n}\n\nconst OrganizationHeaderContext =\n React.createContext\n CUSTOMISE PAGE\n
\n\n
\n \n \n More 
\n \n \n \n \n Page colors{\" \"}\n \n \n showShareGalleryPopup()}\n >\n Share event gallery{\" \"}\n \n \n \n \n \n Copy embed code \n \n \n \n
\n \n \n Save \n \n \n \n handleSaveAndPublish(\"save\")}>Save Draft \n \n \n handleSaveAndPublish(\"publish\")}\n className=\"gal-share-link\"\n >\n Save and Publish\n \n \n \n
\n \n \n handleSaveAndPublish(\"save\")}\n className=\"org-config-draft-btn\"\n >\n Save Draft\n \n handleSaveAndPublish(\"publish\")}\n className=\"org-config-save-btn\"\n >\n Save and Publish\n \n
\n \n \n this.setState({ showShareGalleryModal: true })\n }\n embedGalleryURL={this.props.embedGalleryURL}\n toggleColorsPanel={this.toggleColorsPanel}\n handleSaveAndPublish={this.handleSaveAndPublish}\n showPageColors={this.state.showPageColors}\n />\n this.setState({ showPageColors: false })}\n />\n {\n this.setState({ showSuccessAlert: false });\n }}\n />\n )}\n {this.state.showShareGalleryModal && (\n \n this.setState({ showShareGalleryModal: false })\n }\n text={\"Share with participants or just show off ;)\"}\n />\n )}\n
\n \n );\n }\n\n public updateBanner = (url: string) => {\n this.setState({\n pageConfiguration: {\n ...this.state.pageConfiguration,\n bannerUrl: url,\n croppedBannerURL: null\n }\n });\n };\n\n public updateCroppedBanner = (url: string) => {\n this.setState({\n pageConfiguration: {\n ...this.state.pageConfiguration,\n croppedBannerURL: url\n }\n });\n };\n\n public handleColorChange = (colorType: string, color: string) => {\n this.setState({\n pageConfiguration: {\n ...this.state.pageConfiguration,\n [colorType]: color\n }\n });\n };\n\n private toggleColorsPanel() {\n this.setState({\n showPageColors: !this.state.showPageColors\n });\n }\n\n private publish() {\n ajax\n .post(this.props.configurationPublishAPI)\n .send({\n landing_page_settings: this.state.pageConfiguration,\n organizer_id: this.props.organizerId\n })\n .then(res => {\n this.setState({ showSuccessAlert: true });\n })\n .catch(e => {\n // @ts-ignore\n toastr.error(\n \"Error publishing changes. Please try again later.\",\n null,\n { timeOut: 3000 }\n );\n });\n }\n\n private handleSaveAndPublish = (action: string) => {\n const { primaryColor, secondaryColor } = this.state.pageConfiguration;\n const allowedColors = [\"#c1ebed\"];\n\n const isColorLight = [primaryColor, secondaryColor].some(\n color =>\n !allowedColors.includes(color.toLowerCase()) &&\n (Color(color).darken(0.5).isLight() ||\n color.toLowerCase() === \"#ffffff\")\n );\n if (isColorLight) {\n // @ts-ignore\n toastr.error(\"Change color to a darker color to save\", null, {\n timeOut: 3000\n });\n } else if (action === \"save\") {\n this.saveDraft();\n } else if (action === \"publish\") {\n this.publish();\n }\n };\n\n private saveDraft() {\n ajax\n .post(this.props.configurationSaveDraftAPI)\n .send({\n landing_page_settings_draft: this.state.pageConfiguration,\n organizer_id: this.props.organizerId\n })\n .then(res => {\n // @ts-ignore\n toastr.success(\"Changes saved as draft\", null, { timeOut: 1000 });\n })\n .catch(e => {\n // @ts-ignore\n toastr.error(\"Error saving draft. Please try again later.\", null, {\n timeOut: 3000\n });\n });\n }\n}\n\nexport default CustomizeLandingPage;\n","import React, { useContext } from \"react\";\n\nconst NotifiedBellIcon = ({ color }: { color: string }) => {\n return (\n No photos uploaded yet
\n \n\n {coverPhotoInnerBlock()}\n
\n );\n};\nexport default EventCoverPhoto;\n","import React from \"react\";\nimport { Event, PageConfigurationContextConsumer } from \"./index\";\nimport ajax from \"superagent\";\nimport _ from \"lodash\";\nimport \"./styles/get-notified-popup.css\";\nimport * as EmailValidator from \"email-validator\";\n// @ts-ignore\nimport Pluralize from \"react-pluralize\";\nimport moment from \"moment\";\nimport BellIcon from \"./BellIcon\";\nimport ContrastForegroundUtility from \"../../utils/ContrastForegroundUtility\";\n\nconst closeIcon = require(\"./styles/remove.svg\");\n\nconst GetNotifiedPopup = ({\n events,\n bulkRegisterCustomerLeadAPI,\n clearSelection\n}: {\n events: Event[];\n bulkRegisterCustomerLeadAPI: string;\n clearSelection: () => void;\n}) => {\n const customerEmailField: any = React.createRef();\n\n const registerCustomerInterest = () => {\n const email = customerEmailField.current.value;\n if (EmailValidator.validate(email))\n ajax\n .post(bulkRegisterCustomerLeadAPI)\n .send({\n event_ids: _.map(events, \"id\"),\n email\n })\n .then(res => {\n clearSelection();\n // @ts-ignore\n toastr.success(\"You have subscribed to the event\");\n })\n .catch(e => {\n // @ts-ignore\n toastr.error(\"There was an error. Please try again.\");\n });\n // @ts-ignore\n else toastr.error(\"The email you entered is not valid\");\n };\n\n return (\n \n \n \n {\" \"}\n Cancel\n \n
\n {\" \"}\n \n \n )\n }\n \n
\n \n clearSelection()}\n className=\"get-notified-close-icon\"\n />\n
\n \n
\n Get Notified
\n\n Please enter your email to know when photos are uploaded to\n the following{\" \"}\n
\n {events.map(event => {\n return (\n
\n );\n })}\n \n \n
\n \n {event.day}\n
\n\n {event.month}\n
\n\n {event.year}\n
\n\n
\n {event.name}
\n\n {event.location}\n
\n\n \n {\" \"}\n Notify me{\" \"}\n \n
\n \n addPhotoToCart(e)}\n removePhotoFromCart={e => removePhotoFromCart(e)}\n loadMorePhotos={loadMorePhotos}\n isEmbed={embedMode}\n hasMorePhotos={hasMorePhotos}\n isAuthorizedForDirectDownloads={isAuthorizedForDirectDownloads}\n primaryColor={primaryColor}\n userId={userId}\n parentName={\"org-gallery-lightbox\"}\n />\n
\n );\n\n const AlbumsGallery = (galleryPhotos: Photo[], albumIndex: number) =>\n /Mobi/i.test(window.navigator.userAgent) ? (\n \n
\n );\n\n const noPhotoMatchingText = (\n filters: { tags: string | any[]; referenceImage: any } | undefined\n ) => {\n if (albumFilter) return \"No album found\";\n else if (filters) {\n if (filters.tags.length > 0 && filters.referenceImage)\n return \"No photos match the uploaded selfie and tag, please try with a different photo or tag.\";\n else if (filters.tags.length > 0)\n return \"No photos match the selected tag. Try searching with a different tag.\";\n } else\n return \"There are no photos matching the uploaded face image. Try with a different photo.\";\n };\n\n if (loadingPhotos) {\n return (\n \n
\n \n addPhotoToCart(e)}\n removePhotoFromCart={e => removePhotoFromCart(e)}\n loadMorePhotos={() => {\n ifLastAlbum(albumIndex) && loadMorePhotos();\n }}\n isEmbed={embedMode}\n isAuthorizedForDirectDownloads={isAuthorizedForDirectDownloads}\n primaryColor={primaryColor}\n userId={userId}\n />\n
\n \n 
\n
\n );\n } else if (photos.length === 0) {\n return (\n \n
\n );\n } else if (albumGrouping) {\n return (\n \n
\n \n 
\n
\n {noPhotoMatchingText(filters)}
\n\n \n 
\n
\n }\n >\n {uniqAlbums().map((album: Album, index: number) => (\n \n
\n ))}\n \n \n );\n } else\n return (\n \n
\n \n
\n {AlbumsGallery(albumPhotos(album.id), index + 1)}\n \n \n {album.event.name}\n \n
\n {album.name}\n {Gallery(photos)}
\n );\n};\n\nexport default PhotoGallery;\n","const createImage = url =>\n new Promise((resolve, reject) => {\n const image = new Image();\n image.addEventListener(\"load\", () => resolve(image));\n image.addEventListener(\"error\", error => reject(error));\n image.setAttribute(\"crossOrigin\", \"anonymous\"); // needed to avoid cross-origin issues on CodeSandbox\n image.src = url;\n });\n\nfunction getRadianAngle(degreeValue) {\n return (degreeValue * Math.PI) / 180;\n}\n\n/**\n * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop\n * @param {File} image - Image File url\n * @param {Object} pixelCrop - pixelCrop Object provided by react-easy-crop\n * @param {number} rotation - optional rotation parameter\n */\nexport default async function getCroppedImg(imageSrc, pixelCrop, rotation = 0) {\n const image = await createImage(imageSrc);\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n\n const maxSize = Math.max(image.width, image.height);\n const safeArea = 2 * ((maxSize / 2) * Math.sqrt(2));\n\n // set each dimensions to double largest dimension to allow for a safe area for the\n // image to rotate in without being clipped by canvas context\n canvas.width = safeArea;\n canvas.height = safeArea;\n\n // translate canvas context to a central location on image to allow rotating around the center.\n ctx.translate(safeArea / 2, safeArea / 2);\n ctx.rotate(getRadianAngle(rotation));\n ctx.translate(-safeArea / 2, -safeArea / 2);\n\n // draw rotated image and store data.\n ctx.drawImage(\n image,\n safeArea / 2 - image.width * 0.5,\n safeArea / 2 - image.height * 0.5\n );\n const data = ctx.getImageData(0, 0, safeArea, safeArea);\n\n // set canvas width to final desired crop size - this will clear existing context\n canvas.width = pixelCrop.width;\n canvas.height = pixelCrop.height;\n\n // paste generated rotate image with correct offsets for x,y crop values.\n ctx.putImageData(\n data,\n 0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x,\n 0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y\n );\n\n // As Base64 string\n // return canvas.toDataURL(\"image/jpeg\");\n\n // As a blob\n return new Promise(resolve => {\n canvas.toBlob(file => {\n resolve(file);\n }, \"image/jpeg\");\n });\n}\n","import React, { useState, useCallback } from \"react\";\nimport Cropper from \"react-easy-crop\";\nimport ajax from \"superagent\";\nimport { PageConfigurationContextConsumer } from \"./index\";\n// @ts-ignore\nimport getCroppedImg from \"./cropImage\";\nimport \"./styles/banner-crop.css\";\n\nconst HeaderBannerCropper = ({\n bannerURL,\n coversS3Bucket,\n bannerS3BasePath,\n cropFinished,\n cancelCrop\n}: {\n bannerURL: string;\n coversS3Bucket: string;\n bannerS3BasePath: string;\n cropFinished: (croppedBannerURL: string) => void;\n cancelCrop: () => void;\n}) => {\n const [crop, setCrop] = useState({ x: 0, y: 0 });\n const [zoom, setZoom] = useState(1);\n const [uploading, setUploading] = useState(false);\n const [croppedAreaPixels, setCroppedAreaPixels] = useState({});\n const onCropComplete = useCallback((_, areaPixels) => {\n setCroppedAreaPixels(areaPixels);\n }, []);\n\n const uploadAndSave = async () => {\n setUploading(true);\n ajax\n .post(\"/s3/upload_image\")\n .attach(\"file\", await getCroppedImg(bannerURL, croppedAreaPixels, 0))\n .field(\"bucket\", coversS3Bucket)\n .field(\n \"objectKey\",\n `${bannerS3BasePath}/cropped_${Math.random()\n .toString(36)\n .replace(/[^a-z]+/g, \"\")\n .substr(0, 5)}`\n )\n .then(response => {\n setUploading(false);\n cropFinished(response.body.url);\n })\n .catch(_ => {\n setUploading(false);\n // @ts-ignore\n toastr.error(\n \"There was an error saving your cropped banner. Please try again.\"\n );\n });\n };\n\n return (\n \n
\n )\n }\n \n
\n \n \n
\n \n \n ×\n \n
\n Adjust the banner image
\n\n {uploading && }\n
\n \n Click and drag to reposition and scroll to zoom\n
\n Min image size: 1200 x 250px\n
\n \n Min image size: 1200 x 250px\n
\n cancelCrop()}\n >\n Cancel\n \n uploadAndSave()}\n >\n {uploading ? (\n \n \n Applying\n \n ) : (\n \"Apply\"\n )}\n \n
\n \n \n context.updateBanner(null)}\n >\n Remove Banner\n \n\n setIsCropping(true)}\n >\n Adjust Banner\n \n
\n \n )}\n \n {\" \"}\n Banner only visible in desktop view\n
\n \n
\n ))\n }\n \n \n
\n RECOMMENDED SIZE 2400 x 500PX
\nMIN SIZE 1200 X 250PX
\n\n Banner only visible in desktop view\n
\n\n {bannerUrl && desktopScreen && (\n
\n )}\n {!embedMode && (\n \n
\n \n
\n )}\n \n );\n};\nexport default OrganizationHeader;\n","import React, { Fragment, Component } from \"react\";\nimport \"./styles/base.css\";\nimport { Cart, Tag } from \"./types\";\nimport ajax from \"superagent\";\nimport _ from \"lodash\";\nimport { Photo } from \"../MasterImageSearch/components/types\";\nimport PhotoGallery from \"./PhotoGallery\";\nimport { Filters } from \".\";\nimport { withCartIdParam } from \"../../utils/BrowserHelper\";\nimport { PageConfigurationContextConsumer } from \"./index\";\n\ninterface PhotosContainerProps {\n cart: Cart;\n filters: Filters;\n photosAPI: string;\n addToCartAPI: string;\n currentUserId: number;\n organizationId: number;\n organizationName: string;\n isEventOrganizer: boolean;\n removeFromCartAPI: string;\n embedMode: boolean;\n isAuthorizedForDirectDownloads: boolean;\n secureAccessToken: string | null;\n removeTag: Function;\n tagsValue: string | null;\n canManageTags: boolean;\n}\n\ninterface PhotosContainerState {\n cart: Cart;\n photos: Photo[];\n nextPage: number;\n totalCount: number;\n tagsApplied: boolean;\n imageUploaded: boolean;\n albumGrouping: boolean;\n loadingPhotos: boolean;\n eventNameFilter: string;\n locationFilter: string;\n}\n\nclass PhotosContainer extends Component<\n PhotosContainerProps,\n PhotosContainerState\n> {\n constructor(props: PhotosContainerProps) {\n super(props);\n this.state = {\n photos: [],\n nextPage: 0,\n totalCount: 0,\n cart: props.cart,\n albumGrouping: false,\n loadingPhotos: false,\n imageUploaded: !!props.filters.referenceImage,\n tagsApplied: props.filters.tags.length !== 0,\n eventNameFilter: props.filters.eventName,\n locationFilter: props.filters.location\n };\n }\n\n public componentDidMount() {\n this.loadPhotos(this.props.filters, true);\n }\n\n public componentWillReceiveProps(nextProps: PhotosContainerProps) {\n if (\n !_.isEqual(\n this.props.filters.referenceImage,\n nextProps.filters.referenceImage\n )\n ) {\n this.loadPhotos(nextProps.filters, true);\n }\n if (this.props.filters.eventName !== nextProps.filters.eventName) {\n this.setState({ eventNameFilter: nextProps.filters.eventName });\n }\n if (this.props.filters.location !== nextProps.filters.location) {\n this.setState({ locationFilter: nextProps.filters.location });\n }\n if (\n this.props.canManageTags &&\n this.props.tagsValue !== nextProps.tagsValue\n ) {\n this.loadPhotos(nextProps.filters, true);\n }\n }\n\n public render() {\n return (\n \n {isEventOrganizer &&
\n Events organised by
}\n{organizationName}
\n\n
\n )}\n \n {this.displayResultText()}\n {!this.state.tagsApplied && (\n \n \n this.setState({\n albumGrouping: !this.state.albumGrouping\n })\n }\n />\n \n Group photos by albums\n \n )}\n
\n \n \n {this.filteredPhotos().length} results found for{\" \"}\n \n {this.props.filters.tags.map((tag: Tag, index: number) => (\n
\n );\n }\n };\n}\n\nexport default PhotosContainer;\n","import React, { useState } from \"react\";\nimport { Event } from \"./index\";\nimport CompletedEventCard from \"./CompletedEventCard\";\nimport \"./styles/completed-events.css\";\nimport moment from \"moment\";\n\nconst CompletedEvents = ({\n events,\n showGetNotifiedPopup,\n editMode,\n eventPath,\n showUpdateEventCoverPopup\n}: {\n events: Event[];\n showGetNotifiedPopup: Function;\n editMode: boolean;\n eventPath: Function;\n showUpdateEventCoverPopup: Function;\n}) => {\n const isPastEvent = (startDate: Date) => moment(startDate) < moment();\n return (\n \n {tag.name}\n this.props.removeTag(index)}>×\n
\n ))}\n \n
\n );\n};\n\nexport default CompletedEvents;\n","import React, { useState, Fragment } from \"react\";\nimport moment, { Moment } from \"moment\";\nimport LocationIcon from \"./LocationIcon\";\nimport { Event, PageConfigurationContextConsumer } from \"./index\";\nconst selectedIcon = require(\"./styles/selected.svg\");\n\nconst UpcomingEventCard = ({\n event,\n handleEventSelection,\n isEventSelected\n}: {\n event: Event;\n handleEventSelection: Function;\n isEventSelected: Function;\n}) => {\n return (\n \n {events.map(event => (\n
\n \n
\n ))}\n {event.day}
\n{event.month}
\n{event.year}
\n \n\n
\n {event.name}
\n\n
\n \n
\n \n
\n \n {event.location}\n
\n{event.country}
\n\n handleEventSelection(e, event)}\n />\n \n {isEventSelected(event) && (\n 
\n )}\n
\n \n )\n }\n \n \n
\n \n
\n\n \n
\n \n {hasCompletedEvents && (\n \n \n )}\n Upcoming Events\n
\n \n
\n \n
\n \n Select Events and Get Notified\n
\n\n Get notified when new albums are uploaded to the selected\n events\n
\n\n \n setShowCustomerLeadsModal(true)}\n disabled={selectedEvents.length == 0}\n >\n Notify Me\n \n
\n \n\n \n {eventsToDisplay().map((event, _) => {\n return (\n
\n\n {selectedEvents.length ? (\n \n Get notified for{\" \"}\n
\n Select Events and Get Notified\n
\n )}\n\n \n \n {event.name}\n \n \n \n \n Latest\n \n
\n \n \n \n )\n }\n \n \n
\n \n
\n {event.day}
\n{event.month}
\n{event.year}
\n\n
\n \n
\n \n \n {event.location}\n \n \n {event.country}\n \n
\n \n \n \n Check it out\n \n
\n \n )\n }\n \n
\n \n \n \n Pick any event to be notified when photos are uploaded\n \n
\n \n \n setCoverPhotUrl(null)}\n >\n Remove Image\n \n \n ) : (\n
\n \n
\n \n \n
\n \n Upload a cover image\n
\n\n for{\" \"}\n {event.name},{\" \"}\n {event.location}\n
\n\n {coverPhotoUrl ? (\n \n \n
\n \n \n
\n )}\n Min size: 310px x 175px
\n\n \n Select from event photos{\" \"}\n \n \n
\n \n {\n updateEventCover(event.id, coverPhotoUrl);\n closePopup();\n }}\n >\n {\" \"}\n Update\n \n\n \n {\" \"}\n Cancel\n \n
\n \n \n \n \n )\n }\n \n window.location.assign(\"/dashboard/events/new/our\")}\n style={{ marginLeft: 20 }}\n >\n Create your first event\n \n \n
\n );\n\n previewGallery = () => {\n return (\n \n {\" \"}\n Create an event gallery to share and sell photos\n
\n\n
\n
\n \n 
\n 
\n \n
\n Create event
\n\n \n\n 
\n \n \n
\n Upload Photos
\n\n \n\n 
\n
\n Sell or share
\n\n
\n );\n };\n\n render() {\n if (this.props.editMode) return this.createGallery();\n else return this.previewGallery();\n }\n}\n\nexport default NoEventsView;\n","import React, { Component, Fragment } from \"react\";\nimport CompletedEvents from \"./CompletedEvents\";\nimport UpcomingEvents from \"./UpcomingEvents\";\nimport LatestEvent from \"./LatestEvent\";\nimport UpcomingEventBanner from \"./UpcomingEventBanner\";\nimport { Event } from \".\";\nimport { PageConfigurationContextConsumer, Filters } from \".\";\nimport ajax from \"superagent\";\nimport _ from \"lodash\";\nimport UpdateEventCoverPopup from \"./UpdateEventCoverPopup\";\nimport NoEventsView from \"./NoEventsView\";\nconst clearBtn = require(\"./images/clear-btn.svg\");\nconst geoLoader = require(\"./../../assets/gss-loader.gif\");\n\ninterface EventsContainerProps {\n eventsURL: string;\n completedEventsAvailable: boolean;\n upcomingEventsCount: Number;\n bulkRegisterCustomerLeadAPI: string;\n showGetNotifiedPopup: Function;\n eventPath: Function;\n editMode: boolean;\n showUpcomingEvents: () => void;\n upcomingEventsView: boolean;\n showCompletedEvents: () => void;\n keywordFilters: {\n eventName: string;\n location: string;\n };\n secureAccessToken: string | null;\n clearAllSearchFilters: () => void;\n updateEventCoverAPI: string;\n eventsAvailable: boolean;\n organizationName: string;\n organizationId: number;\n selfieSearchS3Bucket: string;\n}\n\ninterface EventsContainerState {\n loadingEvents: boolean;\n completedEvents: Event[];\n upcomingEvents: Event[];\n filteredEvents: Event[];\n nextPage: Number;\n resetEvents: boolean;\n totalCount: Number;\n addObserver: boolean;\n updateCoverForEvent: Event | null;\n}\n\nclass EventsContainer extends Component<\n EventsContainerProps,\n EventsContainerState\n> {\n private eventTopRef: React.RefObject\n {this.props.organizationName}\n \n 
\n \n
\n \n 
\n \n {this.props.organizationName} hasn't created any photo albums yet\n \n
\n \n \n Geosnapshot powers your photography\n \n \n Learn more about GeoSnapShot\n \n
\n \n {\n this.endMarkerEl = el;\n }}\n >
\n {this.footer()}\n \n );\n };\n\n showUpdateEventCoverPopup = (event: Event) => {\n this.setState({ updateCoverForEvent: event });\n };\n\n eventCoverPopupContainer = () => {\n if (this.state.updateCoverForEvent) {\n return (\n \n 
\n
\n );\n };\n\n public render() {\n if (!this.props.eventsAvailable)\n return (\n \n Search results\n
\n ) : (\n \n No search result found \n this.props.clearAllSearchFilters()}\n >\n 
\n CLEAR SEARCH\n
\n \n )}\n {this.eventsContainer(this.state.filteredEvents)}\n {this.eventCoverPopupContainer()}\n \n
\n \n );\n};\n\nexport default SearchOptions;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport photographer from \"./images/photographer.svg\";\nimport popup from \"./images/popup-bg.png\";\nimport \"./styles/style.css\";\nimport Telemetry from \"../../utils/rudderstackAnalytics\";\ndeclare global {\n interface Window {\n hbspt: {\n forms: {\n create: (options: {\n region: string;\n portalId: string;\n formId: string;\n target: string;\n }) => void;\n };\n };\n }\n}\n\nconst HubSpotForm = ({ activeForm }: { activeForm: string }) => {\n useEffect(() => {\n const script = document.createElement(\"script\");\n script.src = \"//js.hsforms.net/forms/embed/v2.js\";\n script.charset = \"utf-8\";\n script.type = \"text/javascript\";\n\n script.onload = () => {\n if (window.hbspt) {\n window.hbspt.forms.create({\n region: \"na1\",\n portalId: \"42524444\",\n formId:\n activeForm == \"ph\"\n ? \"638fb581-cec3-4fe6-814c-42c276602cf8\"\n : \"4773849e-0a16-4331-b136-853a9c94b27e\",\n target: \"#hubspotForm\",\n onFormSubmitted: () => {\n Telemetry.track(\n \"internal-referrals:org-gallery-sell-your-photos-referral-submitted\"\n );\n }\n });\n }\n };\n\n document.body.appendChild(script);\n\n return () => {\n document.body.removeChild(script);\n };\n }, [activeForm]);\n\n return ;\n};\n\nconst SellYourPhotos = ({\n handleCloseClick\n}: {\n handleCloseClick: Function;\n}) => {\n const popupRef = useRef\n toggleSelfieUploadPopup(),\n referenceImage: imageThumbnail,\n pageConfiguration: pageConfiguration\n }}\n >\n {selfieUploadPopup && (\n \n updateImageFilter(imageUrl, val)\n }\n closePopup={() => toggleSelfieUploadPopup()}\n hideUploadSelfie={false}\n />\n )}\n \n
\n \n
\n \n \n
\n \n \n
\n {selfieSearchAvailable && (\n \n \n
\n )}\n - \n
- No results found \n
- \n {loading ? (\n
- addTagToSearch(tag)}>\n {tag.name}\n \n ))\n )}\n
\n \n
\n ) : (\n matchingTags.length > 0 &&\n matchingTags.map((tag: any, index: number) => (\n \n {showSellYourPhotosBtn && (\n {\n Telemetry.track(\n \"internal-referrals:org-gallery-sell-your-photos-referral-clicked\"\n );\n openSellYourPhotos();\n }}\n >\n 
\n
\n )}\n Sell your photos
\n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n );\n};\n\nexport default SellYourPhotos;\n","import React, { Component, Fragment } from \"react\";\nimport OrganizationHeader from \"./OrganizationHeader\";\nimport GetNotifiedPopup from \"./GetNotifiedPopup\";\nimport \"./styles/base.css\";\nimport PhotosContainer from \"./PhotosContainer\";\nimport { Cart, Tag } from \"./types\";\nimport {\n getCookie,\n setCookie,\n getParameterByName,\n deleteCookie\n} from \"../../utils/BrowserHelper\";\nimport _ from \"lodash\";\nimport EventsContainer from \"./EventsContainer\";\nimport SearchOptions from \"./SearchOptions\";\nconst mobilePreview = require(\"./images/mobilePreview.png\");\nconst mobilePrev = require(\"./images/mobilePrev.svg\");\nconst desktopPrev = require(\"./images/DesktopPrev.svg\");\nimport LazyLoad from \"react-lazyload\";\nimport SellYourPhotos from \"../common/SellYourPhotosModal\";\n\nexport type Filters = {\n referenceImage: string | null;\n eventName: string;\n location: string;\n tags: Tag[];\n};\n\nexport type Event = {\n id: number;\n slug: string;\n name: string;\n startDate: Date;\n browsePhotosPath: string;\n coverPhoto: string;\n location: string;\n state: string;\n fullAdress: string;\n country: string;\n [key: string]: any;\n searchableAddress: string;\n bookedByUserId: number;\n passwordProtected: boolean;\n day: string;\n month: string;\n year: string;\n};\n\nexport type PageConfiguration = {\n showHeader: boolean;\n bannerUrl: string | null;\n croppedBannerURL: string | null;\n primaryColor: string;\n secondaryColor: string;\n accentColor: string;\n};\n\ninterface OrganizationEventsProps {\n customizePage: boolean;\n eventsURL: string;\n completedEventsAvailable: boolean;\n upcomingEventsCount: Number;\n organizerUserName: string;\n organizerEmail: string;\n bulkRegisterCustomerLeadAPI: string;\n pageConfiguration: PageConfiguration;\n editMode: boolean;\n eventsView: string;\n organizationName: string;\n embedMode: boolean;\n isEventOrganizer: boolean;\n createEventURL: string;\n showCreateEventBanner: boolean;\n cartId: string;\n adminUser: boolean;\n selfieSearchS3Bucket: string;\n currentUserId: number;\n currentUserCountry: string;\n cart: Cart;\n photosAPI: string;\n addToCartAPI: string;\n removeFromCartAPI: string;\n organizationId: number;\n secureAccessToken: string | null;\n isAuthorizedForDirectDownloads: boolean;\n landingPageURL?: string;\n eventsAvailable: boolean;\n updateEventCoverAPI: string;\n canManageTags: boolean;\n organizerId: number;\n selfieSearchAvailable: boolean;\n showSellYourPhotosModal: boolean;\n}\n\ninterface OrganizationEventsState {\n upcomingEventsView: boolean;\n customerSelectedEvent: Event | null;\n selfieUploadPopup: boolean;\n filters: Filters;\n clearSearch: boolean;\n previewMode: boolean;\n mobilePreview: boolean;\n desktopScreen: boolean;\n showSellYourPhotosPopup: boolean;\n}\n\nexport const PageConfigurationContext =\n React.createContext\n \n \n
\n \n
\n I am a
\n\n {\n Telemetry.track(\n \"internal-referrals:org-gallery-ph-referral-btn-clicked\"\n );\n setActiveForm(\"ph\");\n }}\n >\n Photographer\n \n {\n Telemetry.track(\n \"internal-referrals:org-gallery-club-referral-btn-clicked\"\n );\n setActiveForm(\"club\");\n }}\n >\n Club\n \n
\n \n Learn more about how GeoSnapShot takes your photo sales to the\n next level.\n \n \n
\n
\n \n
\n 
\n
\n );\n\n renderContainerLogic = () =>\n this.showMatchingPhotos() ? (\n \n \n
\n \n {this.state.previewMode && this.state.desktopScreen && (\n this.setMobilePreview()}\n >\n {\" \"}\n PREVIEW\n 
\n \n )}\n {this.state.mobilePreview\n ? this.renderMobilePreview()\n : this.renderOrgGalleryView()}\n
\n