\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default SvgRockporchLogo;\r\n","import React from \"react\";\r\n\r\n/**\r\n * \r\n * @param {{height:number,width:number}} props\r\n */\r\nconst RockporchMountainIcon = (props) => {\r\n return (\r\n \r\n \r\n )\r\n}\r\n\r\nexport default RockporchMountainIcon;","import React, { useState } from \"react\";\r\nimport LoadSpinner from \"components/LoadSpinner\";\r\nimport { Link } from \"react-router-dom\";\r\nimport RockporchLogo from \"icons/RockporchLogo\";\r\nimport RockporchMountainIcon from \"components/icons/RockporchMountainIcon\";\r\nimport FormInputField from \"components/FormInputField\";\r\nimport ActionButton from \"components/ActionButton\";\r\nimport { Popover, PopoverBody, PopoverHeader } from \"reactstrap\";\r\nimport { isValidUrl } from \"sharedUtils/validationUtils\";\r\nimport { useCallback } from \"react\";\r\nimport { useEffect, useRef } from \"react\";\r\n/**\r\n * \r\n * @param {{advance:Function,productUrl:string,handleInput:Function, isLoading:boolean, productNotFound:boolean, isModal:boolean}} props \r\n */\r\nconst LookupProductUrlForm = (props) => {\r\n\r\n let [showLearnMore, setLearnMore] = useState(false);\r\n let [showValidationMessage, setShowValidationMessage] = useState(false);\r\n\r\n const inputRef = useRef(null);\r\n\r\n useEffect(() => {\r\n if (inputRef && inputRef.current) {\r\n inputRef.current.focus();\r\n }\r\n }, [])\r\n\r\n useEffect(() => {\r\n let isValid = isValidUrl(props.productUrl);\r\n if (props.productUrl.length > 3 && (isValid === false)) {\r\n setShowValidationMessage(true);\r\n }\r\n else {\r\n setShowValidationMessage(false);\r\n }\r\n }, [props.productUrl])\r\n\r\n let isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);\r\n\r\n let buttonStyle = {\r\n background: \"#D2E3E0\"\r\n }\r\n\r\n function toggleShowLearnMore() {\r\n setLearnMore(true);\r\n setTimeout(() => {\r\n setLearnMore(false)\r\n }, 5000);\r\n }\r\n\r\n const advanceButtonDisabled = (url) => (isValidUrl(url) === false);\r\n\r\n let bookmarkUrl = `${window.location.origin}/addProductTool/addProductTool.js`;\r\n let bookmarkOrigin = window.location.origin;\r\n\r\n const displayValidationMessage = () => {\r\n if (showValidationMessage && advanceButtonDisabled) {\r\n return (\r\n \r\n\r\n Sorry, that doesn't look like a product URL. https://www.example.com/... \r\n\r\n
\r\n )\r\n }\r\n else {\r\n return \r\n {\r\n props.isLoading === true ? (\r\n <>\r\n
\r\n
Looking up product ...
\r\n \r\n ):
\r\n }\r\n\r\n {\r\n showValidationMessage === true ? (\r\n\r\n displayValidationMessage()\r\n \r\n ):
\r\n }\r\n \r\n\r\n {\r\n props.productNotFound === true ? (\r\n <>\r\n
\r\n {props.productNotFoundMessage !== \"\" ? \"Sorry!\" : \"\"}
\r\n
Click \r\n \r\n ) :
\r\n }\r\n
\r\n
\r\n {/*
*/}\r\n\r\n\r\n
\r\n
Add Product \r\n
Paste product URL here. All product URLs must be from a \r\n\r\n
\r\n\r\n {/*
*/}\r\n
\r\n
Add Product \r\n
\r\n\r\n\r\n\r\n
\r\n\r\n {\r\n showValidationMessage === true ? (\r\n\r\n displayValidationMessage()\r\n\r\n ) :
\r\n }\r\n\r\n {\r\n props.productNotFound === true ? (\r\n <>\r\n
\r\n Sorry! \r\n
\r\n
Click \r\n \r\n ) :
\r\n }\r\n\r\n
\r\n {\r\n props?.isModal !== false ?\r\n isMobileDevice ?\r\n (
\r\n
\r\n PRO TIP: When adding several products to your inventory, the process moves much faster on a desktop!\r\n
\r\n
)\r\n :\r\n (
\r\n
\r\n Drag the button below to your browser's bookmark bar. When on a merchant partner's product page, click the RockPorch bookmark to add the product to your Inventory.\r\n setLearnMore(false)}\r\n >\r\n \r\n You must be on an individual product page to add the product. The tool will not work if multiple products are on the current page.\r\n \r\n \r\n
\r\n\r\n
e.preventDefault()}\r\n >\r\n \r\n\r\n
) :
\r\n }\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n )\r\n}\r\n\r\nexport default TwitterIcon;","import React from \"react\"\r\n\r\nconst FacebookIcon = (props) => {\r\n const link = props.username == null || props.username == undefined ?\r\n \"https://www.facebook.com/sharer/sharer.php?u=\" + encodeURI(props.shareCode) :\r\n \"https://www.facebook.com/\" + props.username;\r\n\r\n return <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n}\r\n\r\nexport default FacebookIcon;","import React from \"react\"\r\n\r\nconst PhoneIcon = (props) => {\r\n return (\r\n \r\n \r\n ;\r\n );\r\n}\r\n\r\nexport default PhoneIcon;","import React from \"react\"\r\n\r\nimport PhoneIcon from \"components/icons/PhoneIcon\";\r\n\r\nconst MobileShare = (props) => {\r\n const handleOnClick = (e) => {\r\n e.preventDefault();\r\n if (navigator.share) {\r\n navigator\r\n .share({\r\n title: `RockPorch`,\r\n text: `Check out what I found on RockPorch: `,\r\n url: `${ props.shareCode }`,\r\n })\r\n .then(() => {\r\n })\r\n .catch(error => {\r\n console.error('Something went wrong sharing the blog', error);\r\n });\r\n }\r\n };\r\n\r\n if (navigator.share) {\r\n return (\r\n handleOnClick(e)}>\r\n \r\n );\r\n }\r\n return null;\r\n}\r\n\r\nexport default MobileShare;","import React from \"react\"\r\n\r\nconst MailIcon = (props) => {\r\n return (\r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default MailIcon;","import React from \"react\"\r\nimport { useState, useEffect } from \"react\";\r\nimport { getRequest } from \"sharedUtils/httpUtils\";\r\n\r\nimport TwitterIcon from \"components/icons/TwitterIcon\";\r\nimport FacebookIcon from \"components/icons/FacebookIcon\";\r\nimport MobileShare from \"components/MobileShare\";\r\nimport MailIcon from 'components/icons/MailIcon';\r\n\r\n\r\n/** \r\n * @param {{loggedInUser: Object, title:string, shareCode:string?, customStyle:Object, shareBlockStyle:Object}} props \r\n */\r\nconst ShareBlock = (props) => {\r\n\r\n const [showCopied, setCopiedText] = useState(false);\r\n const [showCopied2, setCopiedText2] = useState(false);\r\n const [showCopied3, setCopiedText3] = useState(false);\r\n const [showCopied4, setCopiedText4] = useState(false);\r\n const [renderDirect, setRenderDirect] = useState(false);\r\n\r\n const [postEmbedCode, setPostEmbedCode] = useState(null);\r\n const [lockerEmbedCode, setLockerEmbedCode] = useState(null);\r\n const [productEmbedCode, setProductEmbedCode] = useState(null);\r\n const [postEmbedBrandCode, setPostEmbedBrandCode] = useState(null);\r\n const [blogEmbedCode, setBlogEmbedCode] = useState(null);\r\n const [lockerEmbedBrandCode, setLockerEmbedBrandCode] = useState(null);\r\n const [productEmbedBrandCode, setProductEmbedBrandCode] = useState(null);\r\n const [profileEmbedCode, setProfileEmbedCode] = useState(null);\r\n const [referralShareCode, setReferralShareCode] = useState(null);\r\n const [shareCode, setShareCode] = useState(null);\r\n const [shareType, setShareType] = useState(\"\");\r\n\r\n useEffect(() => {\r\n setShareCode(props.shareCode);\r\n const isBrowse = !!(props.shareCode) && props.shareCode.toLowerCase().includes(\"b=1\");\r\n const isReferral = !!(props.shareCode) && props.shareCode.toLowerCase().includes(\"referraluser\");\r\n\r\n if (isReferral) {\r\n setReferralShareCode(props.shareCode)\r\n }\r\n\r\n let embedHost;\r\n let parsedShareCode;\r\n\r\n if (props.isUserMerchant) setRenderDirect(props.isUserMerchant);\r\n if (props.shareCode.includes(\".ch/\")) {\r\n embedHost = props.shareCode.slice(0, props.shareCode.indexOf(\".ch/\") + \".ch/\".length)\r\n } else if (props.shareCode.includes(\".com/\")) {\r\n embedHost = props.shareCode.slice(0, props.shareCode.indexOf(\".com/\") + \".com/\".length)\r\n } else if (props.shareCode.includes(\"44334/\")) {\r\n embedHost = props.shareCode.slice(0, props.shareCode.indexOf(\"44334/\") + \"44334/\".length)\r\n }\r\n\r\n parsedShareCode = props.shareCode.slice(props.shareCode.lastIndexOf(\"/\") + 1);\r\n if (parsedShareCode.includes(\"?\")) {\r\n parsedShareCode = parsedShareCode.slice(0, parsedShareCode.indexOf(\"?\"));\r\n }\r\n\r\n if (props.shareCode?.toLowerCase().includes(\"/p/\") || props.shareCode?.toLowerCase().includes(\"/plink/\")) {\r\n setShareType(\"Post\");\r\n\r\n let index = props.shareCode.toLowerCase().includes(\"/p/\") ? props.shareCode.toLowerCase().indexOf(\"/p/\") : props.shareCode.toLowerCase().indexOf(\"/plink/\");\r\n let embedUrl = props.shareCode.slice(0, index) + \"/embed\" + props.shareCode.slice(index);\r\n let brandUrl = embedUrl.slice(0, embedUrl.indexOf(\"/embed\") + \"/embed\".length) + \"/brand\" + embedUrl.slice(embedUrl.indexOf(\"/embed\") + \"/embed\".length);\r\n let iframe = ``;\r\n let brandIframe = ``;\r\n setPostEmbedCode(iframe);\r\n setPostEmbedBrandCode(brandIframe);\r\n } else if (props.shareCode?.toLowerCase().includes(\"/b/\") || props.shareCode?.toLowerCase().includes(\"/blink/\")) {\r\n setShareType(\"Blog\");\r\n\r\n let index = props.shareCode.toLowerCase().includes(\"/b/\") ? props.shareCode.toLowerCase().indexOf(\"/b/\") : props.shareCode.toLowerCase().indexOf(\"/blink/\");\r\n let embedUrl = props.shareCode.slice(0, index) + \"/embed\" + props.shareCode.slice(index);\r\n let iframe = ``;\r\n setBlogEmbedCode(iframe);\r\n } else if (props.shareCode?.toLowerCase().includes(\"/l/\") || props.shareCode?.toLowerCase().includes(\"/llink/\")) {\r\n setShareType(\"Locker\");\r\n\r\n let index = props.shareCode.toLowerCase().includes(\"/l/\") ? props.shareCode.toLowerCase().indexOf(\"/l/\") : props.shareCode.toLowerCase().indexOf(\"/llink/\");\r\n let embedUrl = props.shareCode.slice(0, index) + \"/embed\" + props.shareCode.slice(index);\r\n let brandUrl = embedUrl.slice(0, embedUrl.indexOf(\"/embed\") + \"/embed\".length) + \"/brand\" + embedUrl.slice(embedUrl.indexOf(\"/embed\") + \"/embed\".length);\r\n let iframe = ``;\r\n let brandIframe = ``;\r\n setLockerEmbedCode(iframe);\r\n setLockerEmbedBrandCode(brandIframe);\r\n } else if (props.shareCode?.toLowerCase().includes(\"/m/\") || props.shareCode?.toLowerCase().includes(\"/mlink/\")) {\r\n setShareType(\"Merchant\");\r\n\r\n addShareSubdomainMerchant(parsedShareCode)\r\n } else if (props.shareCode?.toLowerCase().includes(\"/prd/\")) {\r\n setShareType(\"Product\");\r\n\r\n addShareSubdomainProduct(parsedShareCode);\r\n let index = props.shareCode.toLowerCase().indexOf(\"/prd/\");\r\n let embedUrl = props.shareCode.slice(0, index) + \"/embed\" + props.shareCode.slice(index);\r\n\r\n let brandUrl = embedUrl.slice(0, embedUrl.indexOf(\"/embed\") + \"/embed\".length) + \"/brand\" + embedUrl.slice(embedUrl.indexOf(\"/embed\") + \"/embed\".length);\r\n let iframe = ``\r\n let brandIframe = ``;\r\n setProductEmbedCode(iframe);\r\n setProductEmbedBrandCode(brandIframe);\r\n } else if (props.shareCode?.toLowerCase().includes(\"/prdlink/\")) {\r\n setShareType(\"Product\");\r\n\r\n addShareSubdomainProduct(parsedShareCode);\r\n let index = props.shareCode.toLowerCase().indexOf(\"/prdlink/\");\r\n let embedUrl = props.shareCode.slice(0, index) + \"/embed\" + props.shareCode.slice(index);\r\n embedUrl = embedUrl.replace(\"/prdlink/\", \"/prd/\");\r\n\r\n let brandUrl = embedUrl.slice(0, embedUrl.indexOf(\"/embed\") + \"/embed\".length) + \"/brand\" + embedUrl.slice(embedUrl.indexOf(\"/embed\") + \"/embed\".length);\r\n let iframe = ``\r\n let brandIframe = ``;\r\n setProductEmbedCode(iframe);\r\n setProductEmbedBrandCode(brandIframe);\r\n }\r\n\r\n }, []);\r\n\r\n useEffect(() => {\r\n setShareCode(props.shareCode);\r\n\r\n if (props.shareCode?.toLowerCase().includes(\"/prf/\")) {\r\n setShareType(\"Profile\");\r\n\r\n let index = props.shareCode.toLowerCase().indexOf(\"/prf/\");\r\n let embedUrl = props.shareCode.slice(0, index) + \"/embed\" + props.shareCode.slice(index);\r\n let iframe = ``\r\n setProfileEmbedCode(iframe);\r\n }\r\n if (props.shareCode?.toLowerCase().includes(\"/prflink/\")) {\r\n setShareType(\"Profile\");\r\n\r\n let index = props.shareCode.toLowerCase().indexOf(\"/prflink/\");\r\n let embedUrl = props.shareCode.slice(0, index) + \"/embed\" + props.shareCode.slice(index);\r\n embedUrl = embedUrl.replace(\"/prflink/\", \"/prf/\");\r\n\r\n let iframe = ``\r\n setProfileEmbedCode(iframe);\r\n }\r\n }, [props.shareCode]);\r\n\r\n const addShareSubdomainMerchant = async (id) => {\r\n let route = '/api/Merchant/GetMerchant?id=' + id;\r\n\r\n let merchant = await getRequest(route);\r\n\r\n if (!!(merchant) && window.location.host.toLowerCase().includes(\"app.rockp\") && !!(merchant.shareSubdomain)) {\r\n let url = new URL(props.shareCode);\r\n url.hostname = `${merchant.shareSubdomain}.rockporch.com`;\r\n setShareCode(url.toString());\r\n }\r\n };\r\n\r\n const handleGoogleAnalytics4 = () => {\r\n window.gtag('event', 'Share_Modal_' + shareType, {\r\n send_to: 'G-9F2DZRE5FG',\r\n event_category: 'Button',\r\n event_label: `Share Modal ` + shareType,\r\n });\r\n console.log(\"Share Modal \" + shareType)\r\n }\r\n\r\n const addShareSubdomainProduct = async (shareCode) => {\r\n let route = '/api/Merchant/GetMerchantByProductShareCode?shareCode=' + shareCode;\r\n\r\n let merchant = await getRequest(route);\r\n\r\n if (!!(merchant) && window.location.host.toLowerCase().includes(\"app.rockp\") && !!(merchant.shareSubdomain)) {\r\n let url = new URL(props.shareCode);\r\n url.port = \"\";\r\n url.hostname = `${merchant.shareSubdomain}.rockporch.com`;\r\n setShareCode(url.toString());\r\n }\r\n }\r\n\r\n let renderCopiedText = () => {\r\n if (showCopied) {\r\n setTimeout(() => { setCopiedText(false) }, 500);\r\n return (\r\n
\r\n\r\n\r\n
Copy and Send the Personalized Link Below to Refer your Creator Friends to RockPorch \r\n
Get paid for referring new Creators! \r\n\r\n
\r\n When you refer a fellow passion-driven Creator to RockPorch, we'll pay you 2.5% of the sales they generate through RockPorch for 12 MONTHS (don't worry... it doesn't come out of their commissions!) \r\n
\r\n\r\n
\r\n { navigator.clipboard.writeText(referralShareCode); setCopiedText(true); handleGoogleAnalytics4(); }}>{renderCopiedText()} \r\n
\r\n \r\n
\r\n\r\n
\r\n
\r\n\r\n\r\n
Share it with the world! \r\n {\r\n postEmbedCode != null || lockerEmbedCode != null ?\r\n
Link \r\n : <>\r\n }\r\n
\r\n { navigator.clipboard.writeText(shareCode); setCopiedText(true); handleGoogleAnalytics4(); }}>{renderCopiedText()} \r\n
\r\n\r\n {props.children}\r\n\r\n {\r\n postEmbedCode != null ?\r\n <>\r\n
Embed Code \r\n\r\n
\r\n { navigator.clipboard.writeText(postEmbedCode); setCopiedText2(true); }}>{renderCopiedText2()} \r\n
\r\n : <>\r\n }\r\n\r\n {\r\n props.loggedInUser?.isAdmin && postEmbedBrandCode != null ?\r\n <>\r\n
ADMIN Embed Code \r\n\r\n
\r\n { navigator.clipboard.writeText(postEmbedBrandCode); setCopiedText4(true); }}>{renderCopiedText4()} \r\n
\r\n : <>\r\n }\r\n\r\n {\r\n blogEmbedCode != null ?\r\n <>\r\n
Embed Code \r\n\r\n
\r\n { navigator.clipboard.writeText(blogEmbedCode); setCopiedText2(true); }}>{renderCopiedText2()} \r\n
\r\n : <>\r\n }\r\n\r\n {\r\n lockerEmbedCode != null ?\r\n <>\r\n
Embed Code \r\n\r\n
\r\n { navigator.clipboard.writeText(lockerEmbedCode); setCopiedText2(true); }}>{renderCopiedText2()} \r\n
\r\n : <>\r\n }\r\n\r\n {\r\n props.loggedInUser?.isAdmin && lockerEmbedBrandCode != null ?\r\n <>\r\n
ADMIN Embed Code \r\n\r\n
\r\n { navigator.clipboard.writeText(lockerEmbedBrandCode); setCopiedText4(true); }}>{renderCopiedText4()} \r\n
\r\n : <>\r\n }\r\n\r\n {\r\n productEmbedBrandCode != null ?\r\n <>\r\n
Embed Code \r\n\r\n
\r\n { navigator.clipboard.writeText(productEmbedBrandCode); setCopiedText3(true); }}>{renderCopiedText3()} \r\n
\r\n : <>\r\n }\r\n\r\n {\r\n props.loggedInUser?.isAdmin && profileEmbedCode != null ?\r\n <>\r\n
ADMIN Embed Code \r\n\r\n
\r\n { navigator.clipboard.writeText(profileEmbedCode); setCopiedText4(true); }}>{renderCopiedText4()} \r\n
\r\n : <>\r\n }\r\n \r\n
\r\n
\r\n
\r\n\r\n
Unfollow - \r\n )\r\n } else {\r\n return (\r\n Follow + \r\n )\r\n }\r\n }\r\n }\r\n\r\n let renderMessageButton = () => {\r\n if (props.loggedInUser && props.messageAction && props.loggedInUser.id !== props.user.id) {\r\n return (\r\n \r\n Message\r\n \r\n )\r\n }\r\n }\r\n\r\n if (props.noDiv) {\r\n return (\r\n <>\r\n \r\n {props.user?.userName}\r\n \r\n \r\n\r\n {props.user?.tagLine}
\r\n\r\n \r\n {renderFollowButton()}\r\n {renderMessageButton()}\r\n
\r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n
\r\n {\r\n props.user?.imageUrl ?
:
\r\n }\r\n
\r\n {props.user?.userName}\r\n \r\n \r\n\r\n
{props.user?.tagLine}
\r\n\r\n
\r\n {renderFollowButton()}\r\n {renderMessageButton()}\r\n
\r\n
\r\n \r\n )\r\n }\r\n return null;\r\n}\r\n\r\nexport default BlueTickIconXY;","import React, { useState } from \"react\";\r\nimport ImageWrapper from \"components/ImageWrapper\";\r\nimport { NavLink } from \"react-router-dom\";\r\nimport BlueTickIconXY from \"components/icons/BlueTickIconXY\";\r\nimport { connect } from \"react-redux\";\r\n\r\n\r\n/**\r\n * \r\n * @param {{user:object,subtitle:any, showCheckMark:boolean, truncateUsername:boolean, style: object}} props\r\n */\r\nconst UserTileGeneral = (props) => {\r\n\r\n let { subtitle, truncateUsername } = props;\r\n\r\n let displayUserName = (userName) => {\r\n if (truncateUsername === true) {\r\n return userName.length > 13 ? userName.substring(0, 13) + \"..\" : userName;\r\n }\r\n else {\r\n return userName;\r\n }\r\n \r\n }\r\n\r\n const disableLink = (e) => {\r\n if (!!(props.disableLink)) {\r\n e.preventDefault();\r\n }\r\n }\r\n //let imageUrl = \"https://evolvedoutdoorsdev.blob.core.windows.net:443/users/100054/Profile/1fab44af-2b75-4c6a-b8ab-72a9d8ccd6e1.jpg\";\r\n\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction mapStateToProps(storeState, ownProps) {\r\n return { brandNavState: storeState.brandNavReducer.brandNavState }\r\n}\r\n\r\n\r\nexport default connect(mapStateToProps)(UserTileGeneral);","import React, { useState, useEffect } from \"react\";\r\nimport BlueTickIcon from \"./icons/BlueTickIcon\";\r\n//import ThreeDotsHorizontalIcon from \"./icons/ThreeDotsHorizontalIcon\";\r\nimport { Link } from \"react-router-dom\";\r\nimport UserTileGeneral from \"components/UserTileGeneral\";\r\nimport { connect } from \"react-redux\";\r\nimport {togglePostPageModal,toggleLockerPageModal, toggleBlogPageModal } from \"stateManagement/reducers/modalReducer\";\r\n/**\r\n * \r\n * @param {{post:Object,className:string,parentModal:{type:string,shareCode:string,parentState:object}}} props\r\n */\r\nconst ProductSlide = (props) => {\r\n const [url, setUrl] = useState(\"\");\r\n const [originalUrl, setOriginalUrl] = useState(\"\");\r\n\r\n useEffect(() => {\r\n setUrl(props.content?.filter(property => property?.role === 0 || property?.role === 8)[0]?.value + \"-PostGrid\" ?? \"images/blank-banner.png\");\r\n setOriginalUrl(props.content?.filter(property => property?.role === 0 || property?.role === 8)[0]?.value ?? \"images/blank-banner.png\");\r\n }, [props.content])\r\n\r\n let renderPost = () => {\r\n return (\r\n \r\n {props.content && props.content.length > 0 &&\r\n props.content.some(property => property.role === 0 || property.role === 8) ?\r\n
{\r\n if (url !== originalUrl) {\r\n setUrl(originalUrl);\r\n } else {\r\n e.target.onError = null\r\n e.target.src = \"images/blank-banner.png\"\r\n }\r\n }}\r\n />\r\n : props.content && props.content.length > 0 &&\r\n props.content.some(property => property?.role === 1) ?\r\n
\r\n property?.role === 1)[0].value.split('#')[0] + \"#t=0.001\"} alt=\"\" />\r\n \r\n :
}\r\n {props.post.type === 2 || props.post.type === 4 ?\r\n <>\r\n
{props.post.title} \r\n
\r\n Read more\r\n
\r\n
{props.post.productItems?.$values.length} product{props.post.productItems?.$values?.length > 1 ? \"s\" : \"\"} \r\n \r\n :\r\n <>\r\n}\r\n
\r\n
\r\n {renderPost()}\r\n {props.deviceSize === \"lg\" || props.deviceSize === \"xl\" || props.deviceSize === \"md\" ?\r\n
\r\n {\r\n /*\r\n * \r\n\r\n *
\r\n
\r\n
\r\n
\r\n {props.post.user.userName.substring(0,15)} \r\n \r\n
\r\n \r\n */\r\n\r\n }\r\n \r\n\r\n {renderContentCount(props.post.properties.$values.length)}\r\n
1/{count} \r\n \r\n \r\n \r\n )\r\n }\r\n */\r\n}\r\nexport default connect(null, { togglePostPageModal, toggleLockerPageModal, toggleBlogPageModal })(ProductSlide)","import React from \"react\"\r\n\r\n/**\r\n *\r\n * @param {{fill:string, width:string, height:string}} props\r\n */\r\nconst LikeIcon = (props) => {\r\n return (\r\n \r\n \r\n )\r\n}\r\n\r\nexport default LikeIcon;","import React from \"react\";\r\nimport RightArrowIcon from './icons/RightArrowIcon';\r\nimport LeftArrowIcon from './icons/LeftArrowIcon';\r\n\r\n/**\r\n * \r\n * @param {{images:string[]}} props \r\n */\r\nconst Carousel = (props) => {\r\n const mapImages = () => {\r\n return props.images.map((imgUrl, i) => {\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n Previous \r\n \r\n\r\n \r\n \r\n \r\n Next \r\n \r\n \r\n )\r\n }\r\n }\r\n return (\r\n \r\n
\r\n {mapImages()}\r\n
\r\n {carouselIcons()}\r\n
\r\n \r\n )\r\n}\r\n\r\nexport default CommentIcon;","import React from \"react\"\r\n\r\n/**\r\n * \r\n * @param {{fill:string}} props\r\n */\r\nconst BookmarkIcon = (props) => {\r\n return (\r\n \r\n \r\n )\r\n}\r\n\r\nexport default BookmarkIcon;","import React from \"react\"\r\n\r\n\r\n/**\r\n * \r\n * @param {{width:string,height:string, fill:string}} props\r\n */\r\nconst PlusIcon = (props) => {\r\n return (\r\n \r\n \r\n )\r\n}\r\n\r\nexport default PlusIcon","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { getRequest } from \"sharedUtils/httpUtils\";\r\nimport UserTileGeneral from \"components/UserTileGeneral\";\r\nimport StarRatingComponent from \"react-star-rating-component\";\r\nimport RatingIcon from \"components/icons/RatingIcon\";\r\nimport RatingIconHalf from \"components/icons/RatingIconHalf\";\r\nimport RatingIconEmpty from \"components/icons/RatingIconEmpty\";\r\nimport LoadSpinner from \"components/LoadSpinner\";\r\n\r\nclass ProductReviewUsersList extends React.Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n ratings: [],\r\n isLoading:true\r\n }\r\n }\r\n \r\n\r\n async componentDidMount() {\r\n let ratings = await this.fetchRatings();\r\n this.setState({ ratings, isLoading:false });\r\n }\r\n\r\n displayButtonText = (isFollowing) => {\r\n let smallDevices = [\"xs\", \"sm\"]\r\n if (smallDevices.includes(this.props.deviceSize)) {\r\n if (isFollowing) {\r\n return \"-\"\r\n }\r\n else {\r\n return \"+\"\r\n }\r\n }\r\n else {\r\n if (isFollowing) {\r\n return \"Unfollow -\"\r\n }\r\n else {\r\n return \"Follow +\"\r\n }\r\n }\r\n }\r\n\r\n displayRatings = () => {\r\n if (this.state.isLoading) {\r\n return \r\n\r\n
\r\n
\r\n\r\n {this.props.deviceSize === \"sm\" ?\r\n
\r\n {\r\n if (index <= value) {\r\n return ( :\r\n
\r\n {\r\n if (index <= value) {\r\n return ( }\r\n\r\n\r\n {\r\n rating.userId !== this.props.loggedInUser.id ? (\r\n
{\r\n if (rating.isFollowing) {\r\n //unfollow\r\n this.unfollowUser(rating.userId, i);\r\n }\r\n else {\r\n this.followUser(rating.userId, i);\r\n //follow\r\n }\r\n }}\r\n >\r\n {buttonText}\r\n \r\n \r\n ):null\r\n }\r\n \r\n\r\n \r\n
Ratings \r\n {this.displayRatings()}\r\n \r\n )\r\n }\r\n}\r\n\r\nProductReviewUsersList.propTypes = {\r\n merchantProductId: PropTypes.number,\r\n loggedInUser: PropTypes.object\r\n}\r\n\r\nexport default ProductReviewUsersList;","import React, { useState, useEffect, useCallback } from \"react\";\r\nimport LikeIcon from \"./icons/LikeIcon\";\r\nimport Carousel from \"./Carousel\";\r\nimport { Link } from \"react-router-dom\";\r\nimport CommentIcon from \"./icons/CommentIcon\";\r\nimport ShareIcon from \"./icons/ShareIcon\";\r\nimport BookmarkIcon from \"./icons/BookmarkIcon\";\r\nimport RatingIcon from \"./icons/RatingIcon\";\r\nimport RatingIconHalf from \"./icons/RatingIconHalf\";\r\nimport RatingIconEmpty from \"./icons/RatingIconEmpty\";\r\nimport SaleIcon from \"./icons/SaleIcon\";\r\n\r\nimport ShareBar from \"components/Share/ShareBar\";\r\nimport ProductReviewUsersList from \"components/ProductReviewUsers/ProductReviewUsersList\";\r\nimport { currencyFormat, titleCase } from \"sharedUtils/productUtils\";\r\n\r\nimport StarRatingComponent from 'react-star-rating-component';\r\n//import { Modal, ModalBody, ModalHeader } from \"reactstrap\";\r\n\r\nimport Modal from \"components/Modal\";\r\n\r\nimport AnchorLink from 'react-anchor-link-smooth-scroll'\r\nimport { TextareaAutosize } from \"@material-ui/core\";\r\n\r\n/**\r\n * \r\n * @param {{\r\n * product:object \r\n * rating:number, \r\n * loggedInUser:object,\r\n * starHover:Function,\r\n * starHoverOut:Function,\r\n * starClick:Function,\r\n * deviceSize:string,\r\n * buyAction:Function}} props\r\n */\r\nconst BrowseProductDetailSection = (props) => {\r\n let { imageUrl, manufacturer, merchant, name, ratingCount, likes, price, description } = props.product;\r\n\r\n const collapsedContentStyle = { textAlign: \"left\", marginTop: \"0em\", marginBottom: \"0px\", maxHeight: \"10rem\", textOverflow: \"ellipsis\", overflow: \"hidden\" };\r\n const expandedContentStyle = { textAlign: \"left\", marginTop: \"0em\", marginBottom: \"0px\" };\r\n\r\n const [contentStyle, setContentStyle] = useState(expandedContentStyle);\r\n const [merchantOverflow, setMerchantOverflow] = useState(false);\r\n const [showUserReviewList, setShowReviewList] = useState(false);\r\n\r\n const contentRef = React.createRef();\r\n\r\n const merchantRef = useCallback(node => {\r\n if (node !== null && !!(node.offsetHeight) && node.offsetHeight > 20) {\r\n setMerchantOverflow(true);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (props.collapsed) {\r\n setContentStyle(collapsedContentStyle);\r\n } else {\r\n setContentStyle(expandedContentStyle);\r\n }\r\n }, [props.collapsed]);\r\n\r\n let renderRatingIcons = () => {\r\n if (props.loadingPartial) {\r\n return \r\n Loading... \r\n
\r\n }\r\n if (props.loggedInUser) {\r\n return (\r\n \r\n {\r\n if (index <= value) {\r\n return (\r\n \r\n {props.renderThumbsUpOverlay(props.productInfo, true)}\r\n
\r\n \r\n )\r\n } else {\r\n let ratingIcons = [];\r\n let { rating } = props;\r\n for (let i = 0; i < 5; i++) {\r\n if (rating - i >= 1) {\r\n ratingIcons.push(\r\n \r\n );\r\n }\r\n }\r\n\r\n let displayTableRows = () => {\r\n if (!!(props.products) && props.products.length > 0) {\r\n const showMerchant = props.products.length > 1;\r\n return props.products.map((product, i) => {\r\n let url = buyAction(product.shareCode);\r\n let sale = product.sale && !!(product.salePrice);\r\n let btnStyle = props.deviceSize === \"sm\" ? { maxWidth: \"70px\", fontSize: \"12px\" } : { maxWidth: \"80px\", maxHeight: \"40px\", fontSize: \"12px\" }\r\n return (\r\n \r\n
\r\n
{\r\n e.target.onError = null\r\n e.target.src = \"images/blank-banner.png\"\r\n }} />\r\n
\r\n
\r\n {product.merchant}\r\n {product.sale && !!product.salePrice && \r\n {product.sale && !!(product.salePrice) ?
: \"\"}\r\n
\r\n
{currencyFormat(product.sale && !!(product.salePrice) && !!(product.originalPrice)? product.originalPrice : product.price)} \r\n \r\n
\r\n {product.sale && !!(product.salePrice) ?
${product.salePrice.toFixed(2)} : <>}\r\n \r\n
setShowReviewList(!showUserReviewList)}\r\n >\r\n\r\n \r\n )\r\n\r\n }\r\n\r\n return (\r\n \r\n {displayUserReviewList()}\r\n
\r\n
\r\n
\r\n
{\r\n e.target.onError = null\r\n e.target.src = \"images/blank-banner.png\"\r\n }} />\r\n \r\n
\r\n
\r\n\r\n {/*
*/}\r\n
\r\n
{displayManufacturer(manufacturer)} \r\n
{titleCase(concatMerchantProduct(manufacturer, merchant, name)).toUpperCase()} \r\n
\r\n {renderRatingIcons()}\r\n
\r\n \r\n {\r\n props.deviceSize !== \"sm\" && description?.toLowerCase() !== name?.toLowerCase() ? (\r\n <>\r\n
\r\n {displayTableRows()}\r\n
\r\n
\r\n {description}\r\n
\r\n \r\n ) : null\r\n }\r\n
\r\n\r\n {\r\n props.deviceSize === \"sm\" && description?.toLowerCase() !== name?.toLowerCase() ? (\r\n <>\r\n
\r\n {displayTableRows()}\r\n
\r\n
\r\n
\r\n {description}\r\n
\r\n
\r\n \r\n ) : null\r\n }\r\n
\r\n\r\n
\r\n )\r\n}\r\n\r\nexport default BrowseProductDetailSection","import React, { useState, useEffect } from \"react\";\r\nimport LikeIcon from \"./icons/LikeIcon\";\r\nimport Carousel from \"./Carousel\";\r\nimport { Link } from \"react-router-dom\";\r\nimport CommentIcon from \"./icons/CommentIcon\";\r\nimport ShareIcon from \"./icons/ShareIcon\";\r\nimport BookmarkIcon from \"./icons/BookmarkIcon\";\r\nimport RatingIcon from \"./icons/RatingIcon\";\r\nimport RatingIconHalf from \"./icons/RatingIconHalf\";\r\nimport RatingIconEmpty from \"./icons/RatingIconEmpty\";\r\nimport SaleIcon from \"./icons/SaleIcon\";\r\n\r\nimport ShareBar from \"components/Share/ShareBar\";\r\nimport ProductReviewUsersList from \"components/ProductReviewUsers/ProductReviewUsersList\";\r\nimport { currencyFormat, titleCase } from \"sharedUtils/productUtils\";\r\n\r\nimport StarRatingComponent from 'react-star-rating-component';\r\n//import { Modal, ModalBody, ModalHeader } from \"reactstrap\";\r\n\r\nimport Modal from \"components/Modal\";\r\n\r\nimport AnchorLink from 'react-anchor-link-smooth-scroll'\r\n\r\n/**\r\n * \r\n * @param {{\r\n * product:object \r\n * rating:number, \r\n * loggedInUser:object,\r\n * starHover:Function,\r\n * starHoverOut:Function,\r\n * starClick:Function,\r\n * deviceSize:string,\r\n * buyAction:Function}} props\r\n */\r\nconst ProductDetailSection = (props) => {\r\n let { imageUrl, manufacturer, merchant, name, ratingCount, likes, price, description } = props.product;\r\n\r\n const collapsedContentStyle = { textAlign: \"left\", marginTop: \"0em\", marginBottom: \"0px\", maxHeight: \"10rem\", textOverflow: \"ellipsis\", overflow: \"hidden\" };\r\n const expandedContentStyle = { textAlign: \"left\", marginTop: \"0em\", marginBottom: \"0px\" };\r\n\r\n const [contentStyle, setContentStyle] = useState(expandedContentStyle);\r\n const [showBuy, setShowBuy] = useState(false);\r\n const [showUserReviewList, setShowReviewList] = useState(false);\r\n\r\n const contentRef = React.createRef();\r\n\r\n useEffect(() => {\r\n if (props.collapsed) {\r\n setContentStyle(collapsedContentStyle);\r\n } else {\r\n setContentStyle(expandedContentStyle);\r\n }\r\n }, [props.collapsed]);\r\n\r\n let renderRatingIcons = () => {\r\n if (props.loadingPartial) {\r\n return
\r\n Loading... \r\n
\r\n }\r\n if (props.loggedInUser) {\r\n return (\r\n
\r\n {\r\n if (index <= value) {\r\n return (\r\n \r\n {props.renderThumbsUpOverlay(props.productInfo)}\r\n\r\n
\r\n )\r\n } else {\r\n let ratingIcons = [];\r\n let { rating } = props;\r\n for (let i = 0; i < 5; i++) {\r\n if (rating - i >= 1) {\r\n ratingIcons.push(
);\r\n }\r\n else if (rating - i <= 1 && rating - i > 0) {\r\n ratingIcons.push(
);\r\n }\r\n else {\r\n ratingIcons.push(
)\r\n }\r\n }\r\n return ratingIcons;\r\n }\r\n }\r\n\r\n let renderBuy = () => {\r\n const commissionable = !!(props.product.commission);\r\n\r\n if (props.loadingBuy) {\r\n let today = Date.now().toString();\r\n return (\r\n
\r\n \r\n \r\n Loading... \r\n
\r\n \r\n \r\n );\r\n } else {\r\n if (commissionable && props.product.integrated) {\r\n return (\r\n <>\r\n
props.handleGoogleAnalytics4BuyButton(false)} target={props.product.merchant + Date.now().toString()}>\r\n \r\n Buy Now\r\n \r\n \r\n
e.preventDefault()}>Commissionable link \r\n \r\n );\r\n }\r\n }\r\n }\r\n\r\n let concatMerchantProduct = (manufacturer, merchant, name) => {\r\n if (manufacturer && manufacturer.toLowerCase() === merchant.toLowerCase()) {\r\n if (name.toLowerCase().indexOf(manufacturer.toLowerCase()) === 0) {\r\n return name.slice(manufacturer.length - name.length).trim();\r\n }\r\n return name;\r\n } else {\r\n if (manufacturer && name.toLowerCase().indexOf(manufacturer.toLowerCase()) === 0) {\r\n return name;\r\n }\r\n return name;\r\n //return (manufacturer + ' ' + name).trimStart();\r\n }\r\n }\r\n\r\n let displayManufacturer = (manufacturer) => {\r\n if (manufacturer?.toLowerCase().includes(\"rcktemp_\")) {\r\n return \"\";\r\n }\r\n return manufacturer;\r\n }\r\n\r\n let displayUserReviewList = () => {\r\n return (\r\n
setShowReviewList(!showUserReviewList)}\r\n >\r\n\r\n \r\n )\r\n\r\n }\r\n\r\n let deviceSize = [\"sm\", \"md\"].includes(props.deviceSize);\r\n\r\n return (\r\n
\r\n {displayUserReviewList()}\r\n
\r\n
\r\n
\r\n
{\r\n e.target.onError = null\r\n e.target.src = \"images/blank-banner.png\"\r\n }} />\r\n
\r\n
\r\n\r\n
\r\n
\r\n
{displayManufacturer(manufacturer)} \r\n \r\n
{titleCase(concatMerchantProduct(manufacturer, merchant, name)).toUpperCase()}{props.product.sale ? \r\n
\r\n {props.product.sale && !!(props.product.salePrice) ? \"$\" + props.product.salePrice.toFixed(2) : <>} \r\n {currencyFormat(props.product.sale && !!(props.product.salePrice) && !!(props.product.originalPrice) ? props.product.originalPrice : props.product.price)} \r\n
\r\n
\r\n {renderRatingIcons()}\r\n
\r\n\r\n {renderBuy()}\r\n {\r\n props.deviceSize !== \"sm\" && description?.toLowerCase() !== name?.toLowerCase() ? (\r\n
\r\n {description}\r\n
\r\n ) : null\r\n }\r\n
\r\n\r\n {\r\n props.deviceSize === \"sm\" && description?.toLowerCase() !== name?.toLowerCase() ? (\r\n
\r\n
\r\n {description}\r\n
\r\n
\r\n ) : null\r\n } \r\n
\r\n\r\n
\r\n )\r\n}\r\n\r\nexport default ProductDetailSection","import React from \"react\";\r\nimport { MentionsInput, Mention } from \"react-mentions\";\r\nimport { getRequest } from \"sharedUtils/httpUtils\";\r\nimport { debounce } from \"throttle-debounce\"\r\n\r\n/**\r\n * @description: Component for posting comments\r\n * @param {{postComment:Function?,user: object, handleCommentInput:Function, commentText:string}} props\r\n */\r\nconst CommentForm = (props) => {\r\n\r\n const debounceFunc = React.useCallback(debounce(300, (query, callback) => fetchUsers(query, callback)), []);\r\n\r\n let renderButton = () => {\r\n if (props.commentText.length > 0 && !props.submittingComment) {\r\n return (
Post );\r\n } else {\r\n return (
Post );\r\n }\r\n }\r\n\r\n function fetchUsers (query, callback) {\r\n if (!query || query.length < 1) {\r\n return;\r\n }\r\n\r\n getRequest(`/api/Account/GetUserSuggestionsByUsername?username=${query}`)\r\n .then(res =>\r\n res?.map(user => ({ display: user.userName, id: user.id, name: user.name }))\r\n )\r\n .then(callback)\r\n }\r\n\r\n return (\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {renderButton()}\r\n
\r\n
\r\n
\r\n
\r\n\r\n )\r\n}\r\n\r\nexport default CommentForm;","import React from \"react\";\r\n\r\nexport let handleHashtags = (text) => {\r\n let hashTagCount = 0;\r\n\r\n if (typeof text === \"string\") {\r\n for (let i = 1; i < text.length; ++i) {\r\n if (text[i] === '#' && (text[i - 1] != '#' && text[i - 1] !== ' ' && text[i - 1] !== '\\n' && text[i - 1] != '\\r')) {\r\n ++hashTagCount;\r\n text = text.substring(0, i) + \" \" + text.substring(i);\r\n ++i;\r\n }\r\n }\r\n }\r\n return text;\r\n}\r\n\r\nexport let handleCommentMarkup = (text, onlyText = false, newTab = false) => {\r\n // This initial loop is to reformat \"dummy text\" from new comments that isn't being formatted server-side\r\n while (text?.match(/#!\\^\\(([^\\s]+?)\\)%~@\\(\\(\\((.*?)\\)\\)\\)/) != null) {\r\n const fullMatch = text?.match(/#!\\^\\(([^\\s]+?)\\)%~@\\(\\(\\((.*?)\\)\\)\\)/);\r\n const username = fullMatch[2];\r\n text = text.slice(0, fullMatch.index) + `#!^(` + username + `)%~@ ` + text.slice(fullMatch.index + fullMatch[0].length);\r\n }\r\n\r\n let result = [];\r\n let userName = [];\r\n\r\n let i = 0;\r\n while (userName = text?.match(/#!\\^\\(([^\\s]+?)\\)%~@/)) {\r\n ++i;\r\n if (userName.index > 0) {\r\n result.push(text?.slice(0, userName.index));\r\n }\r\n\r\n if (newTab) {\r\n result.push(
{\"@\" + userName[1]} )\r\n } else {\r\n result.push(
{\"@\" + userName[1]} )\r\n }\r\n text = text.slice(userName.index + userName[0].length);\r\n }\r\n\r\n result.push(handleHashtags(text));\r\n\r\n if (onlyText === true) {\r\n return result;\r\n } else {\r\n return (\r\n
\r\n {result}\r\n
\r\n );\r\n }\r\n \r\n}\r\n\r\n\r\n/**\r\n * \r\n * @param {string} text\r\n */\r\nexport const replaceUrls = (text) => {\r\n let urlRegex = /(https?:\\/\\/)([\\da-z\\.-]+)\\.([a-z]{2,6})([\\/\\w\\.-]*)*\\/?/\r\n let links = [];\r\n let result = [];\r\n\r\n let i = 0;\r\n\r\n while (links = text?.match(urlRegex)) {\r\n ++i;\r\n if (links.index > 0) {\r\n result.push(text?.slice(0, links.index));\r\n }\r\n\r\n result.push(\r\n
{links[0]} \r\n )\r\n\r\n text = text.slice(links.index + links[0].length); \r\n }\r\n\r\n result.push(text);\r\n return result;\r\n}","const { DateTime } = require(\"luxon\");\r\n\r\nfunction convert(dateTime, relative, options) {\r\n let now = DateTime.now().toUTC();\r\n\r\n // Check if dateTime is a Date object\r\n if (typeof dateTime.getMonth === 'function') {\r\n // Handle relative date\r\n if (relative) {\r\n let diff = now.diff(DateTime.fromISO(dateTime.toISOString()), \"second\");\r\n if (diff.seconds <= 1) {\r\n return \"now\";\r\n }\r\n return DateTime.fromISO(dateTime.toISOString()).toRelative();\r\n }\r\n\r\n // Attempt to format date with provided options\r\n try {\r\n return DateTime.fromISO(dateTime.toISOString()).toLocaleString(options);\r\n } catch (error) {\r\n console.error(\"Date conversion error:\", error);\r\n // Add default timeZone to options if it's missing\r\n const updatedOptions = { ...options, timeZone: 'America/Chicago' }; // Default to Central Time\r\n\r\n // Retry formatting with updated options\r\n return DateTime.fromISO(dateTime.toISOString()).toLocaleString(updatedOptions);\r\n }\r\n }\r\n\r\n // Handle ISO strings without a timezone indicator\r\n if (!dateTime.includes(\"Z\") && !dateTime.includes(\"+\") && !dateTime.includes(\"-\")) {\r\n dateTime += \"Z\";\r\n } else if (!dateTime.includes(\"Z\") && !dateTime.includes(\"+\") && dateTime.includes(\"-\") && dateTime.includes(\"T\")) {\r\n dateTime += \"Z\";\r\n }\r\n\r\n // Handle relative dates for ISO strings\r\n if (relative) {\r\n let diff = now.diff(DateTime.fromISO(dateTime), \"second\");\r\n if (diff.seconds <= 1) {\r\n return \"now\";\r\n }\r\n return DateTime.fromISO(dateTime).toRelative();\r\n }\r\n\r\n // Attempt to format date with provided options for ISO strings\r\n try {\r\n return DateTime.fromISO(dateTime).toLocaleString(options);\r\n } catch (error) {\r\n console.error(\"Date conversion error:\", error);\r\n // Add default timeZone to options if it's missing\r\n const updatedOptions = { ...options, timeZone: 'America/Chicago' }; // Default to Central Time\r\n\r\n // Retry formatting with updated options\r\n return DateTime.fromISO(dateTime).toLocaleString(updatedOptions);\r\n }\r\n}\r\n\r\n\r\nexport function getSecondsBetweenDates(startDate, endDate) {\r\n let diff = new Date(endDate).getTime() - new Date(startDate).getTime();\r\n return (diff / (1000));\r\n}\r\n\r\nexport function getMinutesBetweenDates(startDate, endDate) {\r\n let diff = new Date(endDate).getTime() - new Date(startDate).getTime();\r\n return (diff / (1000 * 60));\r\n}\r\n\r\nexport function getHoursBetweenDates(startDate, endDate) {\r\n let diff = new Date(endDate).getTime() - new Date(startDate).getTime();\r\n return (diff / (1000 * 60 * 60));\r\n}\r\n\r\nexport function getDaysBetweenDates(startDate, endDate) {\r\n let diff = new Date(endDate).getTime() - new Date(startDate).getTime();\r\n return (diff / (1000 * 60 * 60 * 24));\r\n}\r\n\r\n// Example: July 25, 2021\r\nexport function convertToLocaleDateTimeString(dateTime, relative = true) {\r\n let convertedDate = convert(dateTime, relative, DateTime.DATE_FULL);\r\n return convertedDate;\r\n}\r\n\r\n// Example: Jul 25\r\nexport function convertToAbbreviatedMonthAndDay(dateTime, relative = true) {\r\n let convertedDate = convert(dateTime, relative, { month: 'short', day: 'numeric' });\r\n return convertedDate;\r\n} \r\n\r\n// Example: Jul 25, 1:48 AM\r\nexport function convertToAbbreviatedMonthAndDayAndTime(dateTime) {\r\n let convertedDate = convert(dateTime, null, { month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' });\r\n return convertedDate;\r\n}\r\n\r\n// Example: Sun 1:48 AM\r\nexport function convertToNameOfWeekdayAndTime(dateTime) {\r\n let convertedDate = convert(dateTime, null, { weekday: 'short', hour: 'numeric', minute: 'numeric' });\r\n return convertedDate;\r\n}\r\n\r\n// Example: 7/25\r\nexport function convertToNumericMonthAndDay(dateTime, relative = true) {\r\n let convertedDate = convert(dateTime, relative, { month: 'numeric', day: 'numeric' });\r\n return convertedDate;\r\n}\r\n\r\n// Example: 7/25/2021\r\nexport function convertToNumericMonthAndDayAndYear(dateTime, relative = true) {\r\n let convertedDate = convert(dateTime, relative, { month: 'numeric', day: 'numeric', year: 'numeric',locale:\"en-us\" });\r\n return convertedDate;\r\n}\r\n\r\n// Example: 7/25/2021, 1:48 AM\r\nexport function convertToNumericMonthAndDayAndYearAndTime(dateTime, relative = true) {\r\n let convertedDate = convert(dateTime, relative, { month: 'numeric', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric' });\r\n return convertedDate;\r\n}\r\n\r\nexport function asDate(dateTime) {\r\n return dateTime.minus({ millisecond: dateTime.millisecond, second: dateTime.second, minute: dateTime.minute, hour: dateTime.hour });\r\n}","import React from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { handleCommentMarkup, replaceUrls } from \"sharedUtils/markupUtils\";\r\nimport ImageWrapper from \"components/ImageWrapper\";\r\nimport LikeIcon from \"./icons/LikeIcon\";\r\nimport { convertToLocaleDateTimeString } from \"sharedUtils/timeUtils\"\r\nimport { connect } from \"react-redux\";\r\n\r\n/**\r\n * Comment structure\r\n * @typedef {Object} Comment\r\n * @property {comment} text - comment string\r\n * @property {string} postedBy\r\n * @property {Date} postedTime\r\n * @property {number} likes\r\n * @property {string} profilePicture\r\n * @property {Array
} replies\r\n * @property {boolean} [isReply]\r\n */\r\n\r\n/**\r\n * @param {{comment: Object, loggedInUser: Object, likeAction: function, commentKey:Number}} props\r\n */\r\nconst CommentTile = (props) => {\r\n\r\n let renderReplies = () => {\r\n if (props.replies != null && props.replies.length > 0) {\r\n return props.replies.map((reply, i) => {\r\n return (\r\n
\r\n } else if (props.replyCount > 1) {\r\n return
\r\n }\r\n }\r\n\r\n let renderLikes = () => {\r\n if (props.loggedInUser) {\r\n return (\r\n \r\n \r\n \r\n );\r\n } else {\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n }\r\n\r\n let handleTextMarkup = (text) => {\r\n let urlHandled = replaceUrls(text);\r\n\r\n let markupHandled = urlHandled.map(retVal => {\r\n if (typeof retVal === 'string') {\r\n return handleCommentMarkup(retVal, true);\r\n }\r\n else {\r\n return retVal;\r\n }\r\n });\r\n\r\n return markupHandled;\r\n }\r\n\r\n let url = props.brandNavState ? \"/Profile/\" + props.comment.user?.userName + \"?showBrandNav=true\" : \"/Profile/\" + props.comment.user?.userName;\r\n\r\n return (\r\n <>\r\n \r\n
\r\n\r\n
\r\n\r\n \r\n ) : (\r\n \r\n \r\n {props.comment.user.userName}\r\n \r\n {\" \"}\r\n \r\n \r\n\r\n {handleTextMarkup(props.comment.text)}\r\n {/*handleCommentMarkup(props.comment.text)*/}\r\n \r\n {convertToLocaleDateTimeString(props.comment.createdOn)} \r\n \r\n
\r\n\r\n\r\n
\r\n {renderLikes()}\r\n \r\n
\r\n\r\n
\r\n\r\n {renderShowReplies()}\r\n
\r\n \r\n )\r\n}\r\n\r\nexport default RightArrowIconSmall;","import React from \"react\"\r\n/**\r\n * \r\n * @param {{callback:Function}} props \r\n */\r\nconst ShareIosIcon = (props) => {\r\n return (\r\n \r\n Svg Vector Icons : http://www.onlinewebfonts.com/icon \r\n \r\n \r\n )\r\n}\r\n\r\nexport default ShareIosIcon;","import React from \"react\";\r\nimport { getDaysBetweenDates, convertToNameOfWeekdayAndTime, convertToAbbreviatedMonthAndDayAndTime } from \"../../sharedUtils/timeUtils\"\r\nimport { handleCommentMarkup, replaceUrls } from \"sharedUtils/markupUtils\";\r\n\r\n\r\nclass MessageReply extends React.Component {\r\n\r\n divRef = React.createRef();\r\n\r\n state = {\r\n style : \"right\"\r\n }\r\n\r\n componentDidMount = () => {\r\n this.checkLines();\r\n }\r\n\r\n checkLines = () => {\r\n let computedStyle = window.getComputedStyle(this.divRef.current);\r\n let borderTopWidth = (computedStyle.borderTopWidth.replace(\"px\", \"\"));\r\n let borderBottomWidth = (computedStyle.borderBottomWidth.replace(\"px\", \"\"));\r\n let paddingTop = (computedStyle.paddingTop.replace(\"px\", \"\"));\r\n let paddingBottom = (computedStyle.paddingBottom.replace(\"px\", \"\"));\r\n let lineHeight = (computedStyle.lineHeight.replace(\"px\", \"\"));\r\n\r\n let lines = (this.divRef.current.offsetHeight - borderTopWidth - borderBottomWidth - paddingTop - paddingBottom) / lineHeight; \r\n\r\n if (lines > 1) {\r\n this.setState({ style: \"left\" } );\r\n } else {\r\n this.setState({ style: \"right\" });\r\n }\r\n }\r\n\r\n handleTextMarkup = (text) => {\r\n let urlHandled = replaceUrls(text);\r\n\r\n let markupHandled = urlHandled.map(retVal => {\r\n if (typeof retVal === 'string') {\r\n return handleCommentMarkup(retVal, true);\r\n }\r\n else {\r\n return retVal;\r\n }\r\n });\r\n\r\n return markupHandled;\r\n }\r\n\r\n render = () => {\r\n let message = this.props.message;\r\n \r\n return (\r\n \r\n {\r\n this.props.formattedDate ?\r\n
\r\n {this.props.formattedDate} \r\n
:\r\n <>\r\n }\r\n \r\n
\r\n
\r\n
{this.handleTextMarkup(message.text)}
\r\n
\r\n
\r\n
\r\n {\r\n showDate ?\r\n
\r\n {formattedDate} \r\n
:\r\n <>\r\n }\r\n\r\n
\r\n
\r\n {\r\n message.sender.imageUrl ?\r\n
:\r\n
\r\n }\r\n
{message.text}
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
this.props.onClickBack()} className=\"back-btn d-flex align-items-center justify-content-center mb-3 mb-md-4\">\r\n Back \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {this.renderMessageThread()}\r\n
\r\n
\r\n
\r\n
{props.children}
);\r\n}\r\n\r\nexport default SwipeableDiv;\r\n","import React from \"react\"\r\n\r\nconst GridIcon = (props) => {\r\n return (\r\n \r\n Svg Vector Icons : http://www.onlinewebfonts.com/icon \r\n \r\n )\r\n}\r\n\r\nexport default GridIcon;","import React from \"react\";\r\n\r\n/**\r\n * \r\n * @param {{fill:string,width:string, height:string, fillOpacity:string}} props\r\n */\r\nconst Tick = (props) => {\r\n return (\r\n \r\n \r\n )\r\n}\r\n\r\nexport default Tick;","import React from \"react\";\r\nimport ProfileInfoCard from \"../../components/ProfileInfoCard\";\r\nimport ProductSlide from '../../components/ProductSlide';\r\nimport BrowseProductDetailSection from '../../components/BrowseProductDetailSection';\r\nimport ProductDetailSection from '../../components/ProductDetailSection';\r\nimport CommentForm from '../../components/CommentForm';\r\nimport Modal from \"../../components/Modal\";\r\nimport ShareBlock from \"components/Share/ShareBlock\";\r\nimport CommentTile from '../../components/CommentTile';\r\nimport { Link, Redirect } from \"react-router-dom\";\r\nimport LoadSpinner from \"components/LoadSpinner\";\r\nimport ShareBar from \"components/Share/ShareBar\";\r\nimport { toggleShareModal, toggleProductPageModal, toggleFollowersFollowingModal } from \"stateManagement/reducers/modalReducer\";\r\n\r\nimport RightArrowIconSmall from \"../../components/icons/RightArrowIconSmall\";\r\n\r\nimport authService from \"../../components/api-authorization/AuthorizeService\";\r\n\r\nimport BookmarkIcon from \"components/icons/BookmarkIcon\";\r\nimport ShareIosIcon from \"components/icons/ShareIosIcon\";\r\n\r\nimport { getRequest, postRequest } from \"sharedUtils/httpUtils\";\r\n\r\nimport MessageDetails from \"../Account/MessageDetails\";\r\nimport UserTileSmall from \"components/UserTileSmall\";\r\nimport UserTileGeneral from \"components/UserTileGeneral\";\r\nimport { connect } from \"react-redux\";\r\nimport { closeAllModals } from \"stateManagement/reducers/modalReducer\";\r\nimport SwipeableDiv from \"components/SwipeableDiv\";\r\nimport { DateTime } from \"luxon\";\r\nimport { getProductShareLink } from \"../../sharedUtils/shareLinkPrefixes\"\r\nimport PlusIcon from \"components/icons/PlusIcon\";\r\nimport ThumbsUpIcon from \"../../components/icons/ThumbsUpGeneric\";\r\nimport Tick from \"components/icons/Tick\";\r\nimport { Helmet } from 'react-helmet';\r\n\r\nvar jsonref = require('jsonref');\r\n\r\nclass ProductPage extends React.Component {\r\n commentsTextArea = React.createRef();\r\n browse = false;\r\n noCommission = false;\r\n\r\n state = {\r\n redirect: false,\r\n loadingPartial: true,\r\n loading: true,\r\n loadingComments: false,\r\n loadingNextLinkedPosts: false,\r\n loadingPrevLinkedPosts: false,\r\n loadingBuy: false,\r\n commentInput: \"\",\r\n isFollowing: false,\r\n shareCode: \"\",\r\n linkedPostPage: 0,\r\n lastLinkedPostPage: 0,\r\n userDescriptionPage: 0,\r\n userDescriptions: [],\r\n productInfo: {\r\n userMerchantProductId: 0,\r\n userDescription: \"\",\r\n merchantProductId: 0,\r\n userRating: 0,\r\n rating: 0,\r\n displayRating: 0,\r\n ratingCount: 0,\r\n description: \"\",\r\n referalLink: {},\r\n manufacturer: \"\",\r\n name: \"\",\r\n price: 0,\r\n originalPrice: 0,\r\n salePrice: 0,\r\n sale: false,\r\n likes: 0,\r\n likedByUser: false,\r\n savedByUser: false,\r\n imageUrl: \"\",\r\n\r\n user: {\r\n name: \"\",\r\n userName: \"\",\r\n imageUrl: \"\",\r\n tagLine: \"\",\r\n bio: \"\",\r\n proStatusId: 0\r\n },\r\n comments: [],\r\n linkedPosts: []\r\n },\r\n modalOpen: false,\r\n showMessageDetails: false,\r\n hidePageExtras: false,\r\n submittingComment: false,\r\n shareLink: \"\",\r\n displayAddedToInventoryPrompt: false,\r\n isUserMerchant: false,\r\n redirectOccurred: false,\r\n rating: 0,\r\n products: [],\r\n browse: false,\r\n showRecommendedFlag: true\r\n }\r\n\r\n async componentDidMount() {\r\n let search = decodeURIComponent(this.props.location?.search);\r\n let params = new URLSearchParams(search);\r\n\r\n let pathname = decodeURIComponent(this.props.location?.pathname);\r\n\r\n let search2 = pathname.split('?');\r\n if (search == \"\" && search2.length > 0) {\r\n params = new URLSearchParams('?' + search2[1]);\r\n }\r\n\r\n let browse = params.get('b') === '1';\r\n let redirect = !this.props.isModal && (params.get('r') === '1' || params.get('r') == null);\r\n if (browse) {\r\n redirect = false;\r\n }\r\n this.browse = browse;\r\n //this.setState({ showRecommendedFlag: (!!(this.props.location?.search?.toLowerCase().includes(\"showrecommended=true\")) || this.props.isSearch || this.props.isBrowse) });\r\n\r\n if (redirect) {\r\n this.props.setShowTopNav(false);\r\n } else {\r\n if (this.props.setShowTopNav) {\r\n this.props.setShowTopNav(true, !!(window.location.search.toLowerCase().includes(\"showbrandnav=\")) ? this.props.showBrandNav(window.location.search) : true);\r\n }\r\n }\r\n\r\n if (this.props.isModal !== true) {\r\n this.props.closeAllModals()\r\n } else {\r\n this.setState({ hidePageExtras: false })\r\n }\r\n\r\n let shareCode = \"\";\r\n let productInfo = null;\r\n let loggedInUser = null;\r\n\r\n // feed\r\n if (this.props.match.params != undefined && this.props.match.params.product != undefined) {\r\n shareCode = this.props.match.params.product.shareCode;\r\n productInfo = this.props.match.params.product;\r\n productInfo.comments = [];\r\n productInfo.linkedPosts = [];\r\n loggedInUser = this.props.match.params.loggedInUser;\r\n // modal\r\n } else if (this.props.location.state != undefined && this.props.location.state.destinationState != undefined && this.props.location.state.destinationState.params &&\r\n this.props.location.state.destinationState.params.product != undefined) {\r\n shareCode = this.props.location.state.destinationState.params.product.shareCode;\r\n productInfo = this.props.location.state.destinationState.params.product;\r\n loggedInUser = this.props.location.state.destinationState.params.loggedInUser;\r\n // direct\r\n } else {\r\n shareCode = this.props.match.params.shareCode;\r\n loggedInUser = this.props.loggedInUser;\r\n }\r\n if (this.props.isBrowse && productInfo != null) {\r\n let merchantProductId = productInfo.merchantProductId;\r\n\r\n let products = await getRequest(`/Products/GetUserMerchantProductsWithMerchantProductId?merchantProductId=${merchantProductId}`);\r\n this.setState({ products });\r\n }\r\n\r\n shareCode = decodeURIComponent(shareCode).split('?')[0];\r\n\r\n await this.setState({ shareCode });\r\n\r\n if (redirect) {\r\n await this.populateData(true); // this will track the product view\r\n\r\n this.setState({ shareCode, redirect: true });\r\n\r\n return;\r\n };\r\n\r\n let shareLink = await getProductShareLink(shareCode, !!(this.props.isBrowse));\r\n\r\n await this.setState({ shareCode, productInfo, loggedInUser, shareLink, redirect, isUserMerchant: productInfo?.user?.id === this.props.loggedInUser?.id }, () => {\r\n this.populateData();\r\n });\r\n\r\n if (this.commentsTextArea?.current != null && this.props.isModal === true && this.props.isCommenting === true) {\r\n this.setState({ hidePageExtras: false }, () => {\r\n setTimeout(() => {\r\n this.commentsTextArea.current.scrollIntoView();\r\n this.commentsTextArea.current.focus();\r\n }, 500);\r\n\r\n });\r\n }\r\n }\r\n\r\n async componentDidUpdate(prevProps, prevState) {\r\n\r\n //for (const index in prevProps) {\r\n // if (prevProps[index] !== this.props[index]) {\r\n // console.log(index, this.props[index], '-->', prevProps[index]);\r\n // }\r\n //}\r\n\r\n if (this.props.match.params.shareCode != prevProps.match.params.shareCode) {\r\n this.setState({ loading: true });\r\n let isAuthenticated = this.state.loggedInUser ? true : await authService.isAuthenticated();\r\n\r\n let shareCode = this.props.match.params.shareCode;\r\n\r\n let product = this.props.location.state.destinationState.params.product;\r\n\r\n if (product == null || product == undefined) {\r\n\r\n product = await this.fetchProduct(shareCode);\r\n\r\n if (product == null || product == undefined) {\r\n this.props.history.push(\"/NotFound\");\r\n return -1;\r\n }\r\n else {\r\n await this.getLikes(isAuthenticated, product.userMerchantProductId);\r\n await this.getSavedByUser(product.userMerchantProductId);\r\n await this.getRating(isAuthenticated, product.userMerchantProductId);\r\n await this.loadUserDescriptions(product.userMerchantProductId, this.state.loggedInUser ? this.state.loggedInUser.id : -1);\r\n\r\n\r\n }\r\n }\r\n this.loadLinkedPosts(0);\r\n\r\n let products = [];\r\n\r\n this.setState({ productInfo: product, loading: false, isUserMerchant: product?.user?.id === this.props.loggedInUser?.id });\r\n }\r\n }\r\n\r\n fetchProduct = async (shareCode) => {\r\n let isAuthenticated = this.state.loggedInUser ? true : await authService.isAuthenticated();\r\n const browse = this.browse ? \"&browse=true\" : \"\";\r\n let baseUrl = isAuthenticated === true ? `/Products/GetProductAuthorized` : `/Products/Get`;\r\n let productUrl = `${baseUrl}?shareCode=${shareCode}&referrer=${document.referrer}${browse}`;\r\n let product = await getRequest(productUrl);\r\n\r\n\r\n return product;\r\n\r\n }\r\n\r\n async populateData(forRedirect = false) {\r\n var isAuthenticated = this.state.loggedInUser ? true : await authService.isAuthenticated();\r\n const browse = this.props.isBrowse || this.browse ? \"&browse=true\" : \"\";\r\n\r\n let baseUrl = isAuthenticated === true ? `/Products/GetProductAuthorized` : `/Products/Get`;\r\n let shareCode = this.props.match.params.shareCode ? this.props.match.params.shareCode : this.state.shareCode;\r\n let productUrl = `${baseUrl}?shareCode=${shareCode}&referrer=${document.referrer}${browse}&forRedirect=${forRedirect}`;\r\n\r\n var data;\r\n if (this.state.productInfo && this.state.productInfo.userMerchantProductId && this.state.productInfo.userMerchantProductId !== 0 && this.state.productInfo?.hasOwnProperty('commission')) {\r\n data = this.state.productInfo;\r\n this.noCommission = !(data.commission)\r\n let trackBaseUrl = isAuthenticated ? `/Products/TrackProductViewAuthorized` : `/Products/TrackProductView`\r\n let trackProductViewUrl = `${trackBaseUrl}?userMerchantProductId=${data.userMerchantProductId}&referrer=${document.referrer}${browse}`;\r\n getRequest(trackProductViewUrl);\r\n } else {\r\n data = await getRequest(productUrl);\r\n if (data == null) {\r\n data = await getRequest(`/Products/Get?shareCode=${shareCode}&referrer=${document.referrer}${browse}`)\r\n if (data == null) {\r\n this.props.history.push(\"/NotFound\");\r\n return;\r\n }\r\n }\r\n this.noCommission = !(data.commission);\r\n }\r\n\r\n let products = [];\r\n\r\n if (data === undefined || data === null) {\r\n this.setState({ productInfo: null });\r\n this.props.history.push(\"/NotFound\");\r\n return -1;\r\n } else if (!!(data) && (this.browse || this.props.isBrowse)) {\r\n let merchantProductId = data.merchantProductId;\r\n\r\n products = await getRequest(`/Products/GetUserMerchantProductsWithMerchantProductId?merchantProductId=${merchantProductId}`);\r\n }\r\n\r\n await this.setState({ productInfo: data, products, loading: false, isUserMerchant: data?.user?.id === this.props.loggedInUser?.id });\r\n\r\n // short circuit redirect as other data isn't needed\r\n if (data.integrated === true && forRedirect === true) {\r\n return;\r\n }\r\n\r\n if (data.inUserInventory == null || data.inUserInventory == undefined) {\r\n await this.getInUserInventory(isAuthenticated, data.merchantProductId);\r\n }\r\n\r\n if (data.likes == null || data.likes === 0) {\r\n this.getLikes(isAuthenticated, data.userMerchantProductId);\r\n }\r\n\r\n if (data.ratingAverage == null || data.ratingAverage === 0) {\r\n this.getRating(isAuthenticated, data.userMerchantProductId);\r\n }\r\n\r\n if (data.savedByUser == null) {\r\n this.getSavedByUser(data.userMerchantProductId);\r\n }\r\n\r\n this.loadUserDescriptions(data.userMerchantProductId, this.state.loggedInUser ? this.state.loggedInUser.id : -1);\r\n\r\n this.setState({ loadingPartial: false });\r\n\r\n if (data.comments?.length == 0) { this.loadPreviousComments(0, 3); }\r\n this.loadLinkedPosts(0);\r\n\r\n if (!!(this.state.loggedInUser)) {\r\n let isFollowing = await getRequest(`/api/Account/IsFollowing?id=${this.state.productInfo?.user?.id}`);\r\n this.setState({ isFollowing: isFollowing });\r\n }\r\n }\r\n\r\n addProductToInventory = async () => {\r\n let merchantProductId = this.state.productInfo.merchantProductId;\r\n\r\n let addModel = { MerchantProductId: merchantProductId };\r\n\r\n let updatedProductInfo = { ...this.state.productInfo };\r\n updatedProductInfo.inUserInventory = !updatedProductInfo.inUserInventory;\r\n\r\n this.setState({ productInfo: updatedProductInfo, displayAddedToInventoryPrompt: true });\r\n\r\n var url = \"/Products/AddProduct\";\r\n await postRequest(url, addModel);\r\n }\r\n\r\n onClickMessage = async () => {\r\n this.setState({ showMessageDetails: true });\r\n }\r\n\r\n onClickBack = async () => {\r\n this.setState({ showMessageDetails: false });\r\n }\r\n\r\n toggleModal = () => {\r\n let newModalOpen = !this.state.modalOpen;\r\n this.setState({ modalOpen: newModalOpen });\r\n }\r\n\r\n getInUserInventory = async (isAuthenticated, merchantProductId) => {\r\n if (isAuthenticated) {\r\n let url = `/Products/InInventory?merchantProductId=${merchantProductId}`;\r\n let prod = await getRequest(url);\r\n let productInfo = { ...this.state.productInfo };\r\n productInfo.inUserInventory = prod;\r\n this.setState({ productInfo });\r\n }\r\n }\r\n\r\n getLikes = async (isAuthenticated, userMerchantProductId) => {\r\n return;\r\n let url = isAuthenticated ? `/Products/GetLikesAuthorized/?userMerchantProductId=${userMerchantProductId}` : `/Products/GetLikes/?userMerchantProductId=${userMerchantProductId}`;\r\n\r\n var likes = await getRequest(url);\r\n let productInfo = { ...this.state.productInfo };\r\n productInfo.likes = likes?.count;\r\n productInfo.likedByUser = likes?.likedByUser;\r\n\r\n this.setState({ productInfo });\r\n }\r\n\r\n getRating = async (isAuthenticated, userMerchantProductId) => {\r\n let url = isAuthenticated ? `/Products/GetRatingAuthorized/${userMerchantProductId}` : `/Products/GetRating/${userMerchantProductId}`;\r\n\r\n var rating = await getRequest(url);\r\n if (rating == null) {\r\n rating = await getRequest(`/Products/GetRating/${userMerchantProductId}`);\r\n }\r\n let productInfo = { ...this.state.productInfo };\r\n productInfo.userRating = rating?.userRating;\r\n productInfo.rating = rating?.average;\r\n productInfo.ratingCount = rating?.count;\r\n productInfo.displayRating = rating?.average;\r\n\r\n this.setState({ productInfo });\r\n }\r\n\r\n likeCommentAction = async (comment) => {\r\n let like = comment.likedByUser ? -1 : 1;\r\n\r\n var index = this.state.productInfo.comments.findIndex((i) => { return i.id === comment.id });\r\n\r\n comment.likes += like;\r\n comment.likedByUser = !comment.likedByUser;\r\n\r\n var comments = [...this.state.productInfo.comments];\r\n comments[index] = comment;\r\n\r\n this.setState({ productInfo: { ...this.state.productInfo, ...{ comments } } });\r\n\r\n const token = await authService.getAccessToken();\r\n await fetch(\"/Products/LikeComment\",\r\n {\r\n headers: !token ? {} : { Authorization: `Bearer ${token}`, \"Content-Type\": \"application/json\" },\r\n method: \"POST\",\r\n body: JSON.stringify({ id: comment.id, likedByUser: !comment.likedByUser })\r\n });\r\n }\r\n\r\n followAction = async () => {\r\n const token = await authService.getAccessToken();\r\n\r\n let url = \"/api/Account/\"\r\n if (this.state.isFollowing) {\r\n url += \"Unfollow\"\r\n } else {\r\n url += \"Follow\"\r\n }\r\n url += \"?id=\" + this.state.productInfo.user.id;\r\n\r\n const response = await fetch(url,\r\n {\r\n headers: !token ? {} : { Authorization: `Bearer ${token}` },\r\n });\r\n\r\n if (response.ok) {\r\n this.setState({ isFollowing: !this.state.isFollowing });\r\n }\r\n }\r\n\r\n getSavedByUser = async (userMerchantProductId) => {\r\n let url = `/Products/IsSaved/${userMerchantProductId}`;\r\n let savedByUser = await getRequest(url);\r\n\r\n let productInfo = { ...this.state.productInfo };\r\n productInfo.savedByUser = savedByUser;\r\n\r\n this.setState({ productInfo });\r\n }\r\n\r\n saveAction = async () => {\r\n let productInfo = { ...this.state.productInfo };\r\n\r\n productInfo.savedByUser = !productInfo.savedByUser\r\n\r\n if (this.props.match && this.props.match.params && this.props.match.params.product) {\r\n this.props.match.params.product.savedByUser = productInfo.savedByUser;\r\n }\r\n\r\n this.setState({ productInfo: productInfo });\r\n\r\n const token = await authService.getAccessToken();\r\n\r\n let url = \"/Products/\"\r\n if (!productInfo.savedByUser) {\r\n url += \"Unsave\"\r\n } else {\r\n url += \"Save\"\r\n }\r\n url += \"?id=\" + this.state.productInfo.userMerchantProductId;\r\n\r\n const response = await fetch(url,\r\n {\r\n headers: !token ? {} : { Authorization: `Bearer ${token}` },\r\n });\r\n }\r\n\r\n likeAction = async () => {\r\n var like = this.state.productInfo.likedByUser ? -1 : 1;\r\n\r\n var newLike = {\r\n likeCount: this.state.productInfo.likes + like,\r\n likedByUser: !this.state.productInfo.likedByUser\r\n }\r\n\r\n if (this.props.match && this.props.match.params && this.props.match.params.product) {\r\n this.props.match.params.product.likedByUser = newLike.likedByUser;\r\n this.props.match.params.product.likes = newLike.likeCount;\r\n }\r\n\r\n this.state.productInfo.likes = newLike.likeCount;\r\n this.state.productInfo.likedByUser = newLike.likedByUser;\r\n\r\n this.setState({ productInfo: { ...this.state.productInfo } });\r\n\r\n const token = await authService.getAccessToken();\r\n const response = await fetch(\"/Products/Like?shareCode=\" + this.state.shareCode,\r\n {\r\n headers: !token ? {} : { Authorization: `Bearer ${token}` },\r\n method: \"POST\"\r\n });\r\n\r\n let toggle = await response.text();\r\n var like = parseInt(toggle);\r\n }\r\n\r\n starHover = () => {\r\n var productInfo = this.state.productInfo;\r\n productInfo.displayRating = productInfo.userRating || 0;\r\n\r\n this.setState({ productInfo: productInfo });\r\n }\r\n\r\n starHoverOut = () => {\r\n var productInfo = this.state.productInfo;\r\n productInfo.displayRating = productInfo.rating || 0;\r\n\r\n this.setState({ productInfo: productInfo });\r\n }\r\n\r\n starClick = async (nextValue, prevValue, name) => {\r\n var productInfo = this.state.productInfo;\r\n\r\n productInfo.displayRating = nextValue;\r\n productInfo.userRating = nextValue;\r\n\r\n this.setState({ productInfo })\r\n\r\n const token = await authService.getAccessToken();\r\n\r\n let url = \"/Products/Rate?id=\" + this.state.productInfo.userMerchantProductId + \"&rating=\" + nextValue\r\n\r\n const response = await fetch(url,\r\n {\r\n headers: !token ? {} : { Authorization: `Bearer ${token}` },\r\n });\r\n\r\n if (response.ok) {\r\n var productRating = await response.json();\r\n\r\n productInfo.rating = productRating.average;\r\n productInfo.ratingCount = productRating.count;\r\n\r\n this.setState({ productInfo });\r\n }\r\n\r\n }\r\n\r\n handleCommentInput = (e) => {\r\n this.setState({ commentInput: e.target.value });\r\n }\r\n\r\n postComment = async () => {\r\n this.setState({ submittingComment: true });\r\n\r\n let comment = {\r\n text: this.state.commentInput,\r\n likes: 0,\r\n likeByUser: false,\r\n createdOn: DateTime.now().toLocaleString(),\r\n user: this.props.loggedInUser\r\n }\r\n\r\n var comments = [...this.state.productInfo.comments];\r\n if (comments.length > 0) {\r\n comments[0].totalCount = comments[0].totalCount + 1;\r\n } else {\r\n comment.totalCount = 1;\r\n }\r\n\r\n comments = comments.concat(comment);\r\n\r\n if (this.props.match && this.props.match.params && this.props.match.params.product) {\r\n this.props.match.params.product.comments = [...comments];\r\n }\r\n\r\n this.setState({ productInfo: { ...this.state.productInfo, ...{ comments } }, commentInput: \"\" });\r\n\r\n const token = await authService.getAccessToken();\r\n\r\n const response = await fetch(\"/Products/PostComment?shareCode=\" + this.state.shareCode + \"&comment=\" + encodeURIComponent(comment.text),\r\n {\r\n headers: !token ? {} : { Authorization: `Bearer ${token}` },\r\n method: \"POST\"\r\n });\r\n this.setState({ submittingComment: false });\r\n }\r\n\r\n renderModal() {\r\n return (\r\n \r\n \r\n )\r\n }\r\n\r\n loadPreviousComments = async (skip = this.state.productInfo.comments.length, take = 25) => {\r\n this.setState({ loadingComments: true });\r\n\r\n let url = this.state.loggedInUser ? '/Products/GetCommentsAuthorized?shareCode=' : '/Products/GetComments?shareCode=';\r\n const token = await authService.getAccessToken();\r\n const response = await fetch(url + this.state.shareCode + \"&skip=\" + skip + \"&take=\" + take, {\r\n headers: !token ? {} : { Authorization: `Bearer ${token}` },\r\n });\r\n\r\n let data = await response.json();\r\n\r\n data = await jsonref.parse(data, { scope: window.location });\r\n\r\n let comments = [...this.state.productInfo.comments]\r\n comments = data.concat(comments);\r\n this.setState({ productInfo: { ...this.state.productInfo, ...{ comments } } });\r\n this.setState({ loadingComments: false });\r\n }\r\n\r\n renderLoadPreviousComments = () => {\r\n if (this.state.productInfo.comments.length > 0 && this.state.productInfo.comments.length < this.state.productInfo.comments[0].totalCount) {\r\n if (this.state.loadingComments) {\r\n return (\r\n \r\n
\r\n Loading... \r\n
\r\n
\r\n
\r\n );\r\n }\r\n }\r\n }\r\n\r\n renderComments = () => {\r\n return this.state.productInfo.comments.map((comment, i) => {\r\n return \r\n
{\r\n e.preventDefault();\r\n this.prevUserDescriptionPage();\r\n }}\r\n className=\"position-relative d-flex align-items-left\">\r\n
\r\n Previous\r\n
\r\n \r\n
{\r\n e.preventDefault();\r\n this.nextUserDescriptionPage();\r\n }}\r\n className=\"position-relative d-flex align-items-right\">\r\n
\r\n Next\r\n
\r\n \r\n
);\r\n }\r\n\r\n prevPage = () => {\r\n this.setState({ loadingPrevLinkedPosts: true });\r\n\r\n if (this.state.linkedPostPage > 0) {\r\n this.loadLinkedPosts(this.state.linkedPostPage - 1);\r\n } else {\r\n this.loadLinkedPosts(this.state.lastLinkedPostPage);\r\n }\r\n }\r\n\r\n nextPage = () => {\r\n this.setState({ loadingNextLinkedPosts: true });\r\n\r\n if (this.state.linkedPostPage < this.state.lastLinkedPostPage) {\r\n this.loadLinkedPosts(this.state.linkedPostPage + 1)\r\n } else {\r\n this.loadLinkedPosts(0);\r\n }\r\n }\r\n\r\n renderLinkedPostsPageCount = () => {\r\n if (this.state.lastLinkedPostPage > 0) {\r\n return (\r\n {`${this.state.linkedPostPage + 1}/${this.state.lastLinkedPostPage + 1}`}\r\n );\r\n }\r\n }\r\n\r\n renderLinkedPostsNextPage = () => {\r\n if (this.state.lastLinkedPostPage > 0) {\r\n return (\r\n
);\r\n }\r\n\r\n renderLinkedPosts = () => {\r\n let linkedPosts = [];\r\n let count = 4;\r\n\r\n for (var i = 0; i < count; ++i) {\r\n if (i < this.state.productInfo.linkedPosts.length) {\r\n linkedPosts.push( {\r\n if (this.props.loggedInUser) {\r\n e.preventDefault();\r\n this.saveAction(shareCode);\r\n } else {\r\n this.props.toggleSignUpModal();\r\n }\r\n\r\n }} style={{ cursor: \"pointer\", left: [\"sm\", \"md\"].includes(this.props.deviceSize) && this.browse ? \"20px\" : \"\" }}>\r\n );\r\n }\r\n\r\n renderShareOverlay = () => {\r\n return ( {\r\n this.toggleModal(this.state.shareLink);\r\n }} style={{ cursor: \"pointer\", left: [\"sm\", \"md\"].includes(this.props.deviceSize) && this.browse ? \"50px\" : \"\" }}>\r\n );\r\n }\r\n\r\n renderThumbsUpOverlay = (product, browse = false) => {\r\n const productId = !!(product.productId) ? product.productId : product.id;\r\n if (!(product.creatorCount) || product.creatorCount === 0) {\r\n return <>;\r\n }\r\n //return this.toggleCreatorsModal(productId)} style={{ top: this.props.isModal && this.props.isBrowse ? \"6px\" : this.props.isModal && this.props.deviceSize === \"xl\" ? \"11px\" : this.props.isModal ? \"6px\" : this.props.deviceSize === \"xl\" ? \"11px\" : \"6px\", left: \"83%\", width:\"50px\", cursor: \"pointer\" }}>\r\n if (this.state.showRecommendedFlag) {\r\n return (\r\n this.toggleCreatorsModal(productId)} style={{ marginBottom: this.browse || this.state.browse || this.props.isBrowse ? \"4px\" : \"5px\", width: !!(product.creatorCount) && product.creatorCount > 99 ? \"55px\" : \"50px\", cursor: \"pointer\", marginLeft: this.props.screenWidth < 576 ? \"\" : \"25px\", transform: \"translate(0px, 0px)\" }}>\r\n {!!(product.creatorCount) ? product.creatorCount : \"\"} \r\n \r\n )\r\n }\r\n return <>;\r\n }\r\n\r\n toggleCreatorsModal = (productId) => {\r\n const followersFollowing = \"creators\";\r\n this.props.toggleFollowersFollowingModal(!!(this.props.loggedInUser) ? this.props.loggedInUser.id : -1, followersFollowing, productId);\r\n }\r\n\r\n displayAddToInventory = () => {\r\n\r\n if (!this.props.isBrowse && this.props.loggedInUser && this.props.loggedInUser.proStatusId === 1 && !(this.state.productInfo.approvedCreatorsOnly)) {\r\n if (this.state.productInfo?.inUserInventory === false) {\r\n let prompt = \"\";\r\n switch (this.props.deviceSize) {\r\n case \"sm\": break;\r\n case \"md\": { prompt = \"Add\"; break; }\r\n default: { prompt = \"Add To Inventory\"; break; }\r\n }\r\n return (\r\n \r\n
{\r\n e.preventDefault();\r\n this.addProductToInventory();\r\n }\r\n }\r\n onTouchEnd={\r\n (e) => {\r\n e.preventDefault();\r\n this.addProductToInventory();\r\n }\r\n }>\r\n
\r\n {/*{*/}\r\n {/* prompt */}\r\n {/* }*/}\r\n \r\n
\r\n
\r\n )\r\n }\r\n else {\r\n return null;\r\n }\r\n }\r\n else {\r\n return null;\r\n }\r\n }\r\n\r\n getPageTitle = () => {\r\n ;\r\n let shareCode = this.props.match.params.shareCode;\r\n\r\n return \"RockPorch - Product: \" + shareCode;\r\n }\r\n\r\n handleGoogleAnalytics4BuyButton = (browse = false) => {\r\n window.gtag('event', 'Buy_Now', {\r\n send_to: 'G-9F2DZRE5FG',\r\n event_category: 'Button',\r\n event_label: `Buy Now`,\r\n value: browse ? \"Browse\" : \"Non-Browse\",\r\n });\r\n }\r\n\r\n productPageRedirectGoogleAnalytics4Tracking = () => {\r\n window.gtag('event', 'ProductPageRedirect', {\r\n send_to: 'G-9F2DZRE5FG',\r\n event_category: 'Redirect',\r\n event_label: `Product Page Redirect`,\r\n });\r\n }\r\n\r\n\r\n render() {\r\n if (this.state.redirect) {\r\n if (!this.state.redirectOccurred) {\r\n this.productPageRedirectGoogleAnalytics4Tracking();\r\n window.location.replace((this.props.loggedInUser ? \"/Products/BuyAuthorized\" : \"/Products/Buy\") + \"?shareCode=\" + this.state.shareCode + \"&referrer=\" + document.referrer + \"&browse=\" + this.browse + \"&noCommission=\" + this.noCommission); \r\n this.setState({ redirectOccurred: true });\r\n }\r\n const ogTitle = this.state.productInfo?.merchant || '';\r\n const ogDescription = this.state.productInfo?.name || this.state.productInfo?.merchant;\r\n const ogImage = this.state.productInfo?.logoUrl || this.state.productInfo?.imageUrl || '';\r\n return (\r\n <>\r\n <>\r\n \r\n {this.getPageTitle()}: \r\n \r\n \r\n \r\n )\r\n }\r\n\r\n if (this.state.loading) {\r\n return (\r\n <>\r\n < LoadSpinner />\r\n \r\n {this.getPageTitle()}: \r\n \r\n \r\n )\r\n }\r\n\r\n let { name, manufacturer, imageUrl, price, ratingCount, description, likes } = this.state.productInfo;\r\n let { deviceSize, isModal } = this.props;\r\n\r\n if (this.state.showMessageDetails) {\r\n return \r\n\r\n {\r\n !!(this.props.isModal) ?\r\n <>\r\n :\r\n \r\n {this.getPageTitle()}: \r\n \r\n }\r\n\r\n {this.renderModal()}\r\n {this.renderBookmarkOverlay()}\r\n {this.renderShareOverlay()}\r\n {this.displayAddToInventory()}\r\n {(this.browse || this.props.isBrowse) && this.state.products?.length > 0 ?\r\n \r\n
\r\n :\r\n <>\r\n\r\n \r\n {\r\n e.preventDefault();\r\n this.props.expandDialog();\r\n this.setState({ hidePageExtras: !this.state.hidePageExtras });\r\n\r\n }}\r\n className=\"mx-0\"\r\n style={{ color: \"#e55934\" }}\r\n >\r\n \r\n
\r\n ) : \r\n
\r\n
this.prevUserDescriptionPage()}\r\n onSwipedRight={() => this.nextUserDescriptionPage()}\r\n preventDefaultTouchmoveEvent={true}\r\n trackMouse={true}>\r\n \r\n
\r\n
\r\n
\r\n
\r\n Product Review\r\n
\r\n
\r\n
\r\n
\r\n {this.state.productInfo.userDescription}\r\n
\r\n {this.renderUserDescriptionPagination()}\r\n
\r\n
\r\n {this.state.productInfo?.linkedPosts?.length > 0 ? (<>
\r\n
Related posts
\r\n
\r\n {this.renderLinkedPostsPageCount()}\r\n {this.renderLinkedPostsPreviousPage()}\r\n {this.renderLinkedPostsNextPage()}\r\n this.prevPage()}\r\n onSwipedRight={() => this.nextPage()}\r\n preventDefaultTouchmoveEvent={true}\r\n trackMouse={true}>\r\n {this.renderLinkedPosts()}\r\n \r\n
) :
}\r\n
\r\n
\r\n
\r\n
\r\n\r\n {\r\n this.state.productInfo?.comments?.length === 0 ? \"No comments\" :\r\n this.state.productInfo?.comments?.length === 1 ? \"1 comment\" :\r\n this.state.productInfo?.comments?.length + \" of \" + this.state.productInfo.comments[0].totalCount + \" comments\"\r\n }\r\n
\r\n {this.renderLoadPreviousComments()}\r\n
\r\n {this.renderComments()}\r\n
\r\n
\r\n {this.renderPostComment()}\r\n
\r\n )\r\n }\r\n}\r\n\r\nfunction mapStateToProps(storeState, ownProps) {\r\n return { interactionState: storeState.interactionReducer }\r\n}\r\n\r\nexport default connect(mapStateToProps, { toggleShareModal, toggleProductPageModal, toggleFollowersFollowingModal, closeAllModals })(ProductPage);","import React from \"react\";\r\nimport Modal from \"../../components/Modal\";\r\nimport AddProductForm from \"components/AddProduct/AddProductForm\";\r\nimport LookupProductUrlForm from \"components/AddProduct/LookupProductUrlForm\";\r\nimport { connect } from \"react-redux\";\r\nimport { toggleAddProductModal, toggleProductPageModal } from \"stateManagement/reducers/modalReducer\";\r\nimport ShareBlock from \"components/Share/ShareBlock\";\r\nimport { getRequest } from \"sharedUtils/httpUtils\";\r\nimport { Link, Redirect } from \"react-router-dom\";\r\nimport ProductPage from \"views/Product/ProductPage\";\r\nimport { withRouter } from \"react-router\";\r\n\r\nclass AddProductModal extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showModal: false,\r\n stage: 1,\r\n productUrl: \"\",\r\n productDetails: {\r\n name: \"\"\r\n },\r\n isLoading: false,\r\n productShareCode: \"\",\r\n success: false,\r\n productNotFound: false,\r\n productNotFoundMessage:\"\",\r\n addedProductDetails: {},\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n document.querySelector(\"body\").style.overflow = \"\";\r\n }\r\n\r\n async componentDidMount() {\r\n \r\n if (this.props.isModal === false) {\r\n this.props.setShowTopNav(false);\r\n if(window.location.search.length>0)\r\n //if (this.props.match.params?.productUrl)\r\n {\r\n let productUrl = window.location.search.split(\"=\")[1];\r\n //let decodedUrl = decodeURIComponent(this.props.match.params.productUrl);\r\n let decodedUrl = decodeURIComponent(productUrl);\r\n await this.setState({ productUrl: decodedUrl });\r\n this.advanceStage();\r\n }\r\n //this.setState({ productUrl: document.referrer + document. });\r\n }\r\n } \r\n \r\n\r\n advanceStage = async () => {\r\n let newStage = this.state.stage + 1;\r\n let data = await this.fetchProductInformation(this.state.productUrl);\r\n if (this.state.isLoading && (data != null || data != undefined)) {\r\n this.setState({ productDetails: data, stage: newStage, isLoading: false, productNotFound:false })\r\n } \r\n }\r\n\r\n closeWindow = () => {\r\n window.close()\r\n //window.top.postMessage(\"productAdded\", \"*\");\r\n }\r\n\r\n\r\n finishedCreating = async (result) => {\r\n \r\n if (result != undefined || result != null) {\r\n let fullProduct = await getRequest(`/Products/GetProductAuthorized?shareCode=${result.shareCode}`);\r\n fullProduct.manufacturer = this.state.productDetails?.manufacturer;\r\n\r\n this.setState({ productShareCode: result.shareCode, success: true, addedProductDetails: fullProduct, productUrl: \"\", stage: this.props.isModal === true ? 1 : 2 });\r\n \r\n if (this.props.isModal === true) {\r\n this.toggleModal();\r\n this.props.history.push('/Account/Products')\r\n // this.props.toggleProductPageModal(fullProduct, this.props.loggedInUser);\r\n }\r\n\r\n // use local storage if we are executing from another tab\r\n if ('localStorage' in window && !this.props?.isModal) {\r\n localStorage.setItem('productAdded', new Date);\r\n } else {\r\n let event = new Event(\"_productAddedEvent\");\r\n document.dispatchEvent(event);\r\n }\r\n }\r\n }\r\n\r\n fetchProductInformation = async (url) => {\r\n let localUrl = url;\r\n this.setState({ isLoading: true });\r\n let encoded = encodeURIComponent(url.trim());\r\n let data = await getRequest(`/Products/GetProductByUrl?url=${encoded}`, true);\r\n // this request was cancelled so we can ignore\r\n if (localUrl !== this.state.productUrl) {\r\n return null;\r\n }\r\n if (this.state.isLoading && data.errorMessage) {\r\n this.setState({ productNotFound: true, productNotFoundMessage: data.errorMessage === \"no message\" ? \"\" : data.errorMessage, isLoading: false });\r\n return null;\r\n }\r\n return data;\r\n }\r\n\r\n inputUrl = (e) => {\r\n this.setState({ productUrl: e.target.value })\r\n }\r\n\r\n onKeypress = (e) => {\r\n if (e.key === 'Enter') this.advanceStage();\r\n }\r\n\r\n toggleModal = () => {\r\n document.querySelector(\"body\").style.overflow = \"\";\r\n this.setState({ stage: 1, productUrl: \"\" });\r\n this.props.toggleAddProductModal();\r\n this.setState({ productNotFound: false, isLoading: false })\r\n //let newState = !this.state.showModal;\r\n //this.setState({ showModal: newState, stage: 1 });\r\n }\r\n \r\n\r\n renderForm = () => {\r\n if (this.state.stage === 1) {\r\n return (\r\n \r\n {\r\n this.state.finishedCreating === true ?
\r\n {/*Show Modal */}\r\n 1 ? \"product\" : \"\"}\r\n showHeader={false}\r\n modalDialogCustomClass={this.state.stage === 2 ? \"modal-dialog-lg modal-dialog-md\" : \"\"}\r\n modalBodyCustomClass={this.state.stage === 2 ? \"modal-body pt-0 px-0 mt-3 mt-md-0\" : \"\"}\r\n >\r\n {this.renderForm()}\r\n \r\n\r\n
\r\n )\r\n }\r\n }\r\n}\r\n\r\nfunction mapStateToProps(storeState, ownProps) {\r\n return { showModal: storeState.modalReducer.showAddProductModal }\r\n}\r\n\r\nexport default withRouter(connect(mapStateToProps, { toggleAddProductModal, toggleProductPageModal })(AddProductModal));","import React from \"react\";\r\nimport { MentionsInput, Mention } from \"react-mentions\";\r\n\r\n\r\n/**\r\n * \r\n * @param {{\r\n * className:string,\r\n * value:any,\r\n * onChange:Function,\r\n * style:object?, \r\n * allowSuggestionsAboveCursor:boolean?,\r\n * data:Function,\r\n * placeholder:string?\r\n * }} props\r\n */\r\nconst MentionsInputTextArea = (props) => {\r\n return (\r\n \r\n `@${display}`}\r\n markup=\"#!^(__id__)%~@(((__display__)))\"\r\n renderSuggestion={(entry, search, highlightedDisplay, index, focused) => {\r\n return @{entry.display} {entry.name}
\r\n ;\r\n\r\nconst SvgFile = \r\n ;\r\n\r\nconst SvgInstagram = \r\n ;\r\n\r\nconst SvgUnauthorized = \r\n ;\r\n\r\nconst SvgYoutube = \r\n ;\r\n\r\nconst SvgTikTok = \r\n ;\r\n\r\nconst SourceItem = (props) => {\r\n const { id, isActive, sourceIcon, authorizeIcon, userProfile, onSourceSelected, onLogin, onLogout } = props;\r\n\r\n function handleLinkClick(e) {\r\n e.preventDefault();\r\n\r\n let link = $(e.target).parents('.icon-group');\r\n let idAttr = link.attr('id');\r\n if (idAttr) {\r\n let index = idAttr.replace('source-', '');\r\n let i = parseInt(index);\r\n onSourceSelected(i);\r\n }\r\n }\r\n\r\n function handleLoginClick(e) {\r\n e.preventDefault();\r\n onLogin(e);\r\n }\r\n\r\n function handleLogoutClick(e) {\r\n e.preventDefault();\r\n onLogout(e);\r\n }\r\n\r\n return isActive\r\n ? (\r\n \r\n \r\n {sourceIcon}\r\n \r\n\r\n {\r\n // ig, fb, yt\r\n !!authorizeIcon ?\r\n\r\n // active\r\n (isActive) ?\r\n <>\r\n \r\n
\r\n \r\n \r\n {authorizeIcon}\r\n \r\n \r\n \r\n :\r\n\r\n // not active\r\n <>\r\n \r\n {authorizeIcon}\r\n \r\n \r\n \r\n \r\n : <>\r\n }\r\n \r\n )\r\n\r\n // not active\r\n : (\r\n \r\n \r\n {sourceIcon}\r\n \r\n {\r\n // ig, fb, yt\r\n !!authorizeIcon ?\r\n <>\r\n \r\n
\r\n \r\n \r\n {authorizeIcon}\r\n \r\n \r\n \r\n : <>\r\n }\r\n \r\n );\r\n}\r\n\r\nSourceItem.propTypes = {\r\n id: PropTypes.string.isRequired,\r\n isActive: PropTypes.bool.isRequired,\r\n sourceIcon: PropTypes.node.isRequired,\r\n authorizeIcon: PropTypes.node,\r\n userProfile: PropTypes.object,\r\n onSourceSelected: PropTypes.func.isRequired,\r\n onLogin: PropTypes.func,\r\n onLogout: PropTypes.func\r\n};\r\n\r\nexport const Sources = (props) => {\r\n const { onSourceChanged, onLogin, onLogout } = props;\r\n const authIcons = [null, SvgUnauthorized, SvgUnauthorized, SvgUnauthorized, SvgUnauthorized];\r\n const icons = [SvgFile, SvgInstagram, SvgFacebook, SvgYoutube, SvgTikTok];\r\n\r\n return <>\r\n {\r\n props.context?.data && props.context.data.map((item, index) => {\r\n return \r\n \r\n {props.title} \r\n \r\n\r\n \r\n )\r\n}\r\n\r\nexport default FormTextArea;","import React, { useEffect, useRef, useState } from 'react';\r\nimport { debounce } from \"throttle-debounce\"\r\nimport { MentionsInput, Mention } from \"react-mentions\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport UserTileGeneral from \"components/UserTileGeneral\";\r\nimport { convertToLocaleDateTimeString } from \"sharedUtils/timeUtils\"\r\nimport PostBanner from \"components/PostBanner\";\r\nimport FormTextArea from \"components/FormTextArea\";\r\n\r\nimport { getRequest } from \"sharedUtils/httpUtils\";\r\n\r\n\r\nconst PreviewCard = (props) => {\r\n const { post } = props;\r\n const [mediaIndex, setMediaIndex] = useState(-1);\r\n const [captionInput, setCaptionInput] = useState(\"\");\r\n\r\n const debounceFunc = React.useCallback(debounce(300, (query, callback) =>\r\n fetchUsers(query,callback)),[]);\r\n\r\n const handleMounted = async () => {\r\n if (post?.media?.length > 0) {\r\n setMediaIndex(0);\r\n setCaptionInput(props.post.content);\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n handleMounted();\r\n }, []);\r\n\r\n let content = post?.content ?? post?.title;\r\n\r\n function getProperties() {\r\n let properties = {};\r\n\r\n let values = props.post.media\r\n .map((media, i) => {\r\n if (media?.children?.length > 0) {\r\n return { parentId: i, value: media.children[0].thumbnailLink }\r\n } else {\r\n return { parentId: null, value: media.imageLink || media.videoLink }\r\n }\r\n });\r\n\r\n properties.$values = values;\r\n return properties;\r\n }\r\n\r\n async function fetchUsers(query,callback) {\r\n if (!query || query.length < 1) {\r\n return;\r\n }\r\n\r\n let url = `/api/Account/GetUserSuggestionsByUsername?username=${query}`;\r\n getRequest(url)\r\n .then(res => {\r\n return res.map(user => ({ display: user.userName, id: user.id, name: user.name }))\r\n })\r\n .then(callback);\r\n }\r\n\r\n let webLayouts = [\"md\", \"lg\", \"xl\"];\r\n\r\n let postImages =\r\n post.platformName === \"youtube\" || post.platformName === \"tiktok\" ?\r\n props.post.media\r\n .map((media, i) => {\r\n return {\r\n url: post.link,\r\n role: 3,\r\n id: i,\r\n height: media.height,\r\n width: media.width\r\n }\r\n }) :\r\n props.post.media\r\n .map((media, i) => {\r\n return {\r\n url: !!media.imageLink ? media.imageLink : media.videoLink,\r\n role: !!media.imageLink ? 0 : 1,\r\n id: i\r\n }\r\n });\r\n\r\n return (\r\n \r\n\r\n {props.deviceSize === \"sm\" ?\r\n () : null}\r\n\r\n \r\n\r\n
\r\n\r\n {\r\n webLayouts.includes(props.deviceSize) ? (\r\n
\r\n\r\n
\r\n {\r\n !!(props.blog) ?\r\n <>\r\n
\r\n Title \r\n \r\n
{post.title}
\r\n \r\n :\r\n <>\r\n }\r\n \r\n\r\n
\r\n {!!(props.blog) ? \"Description\" : \"Caption\"} \r\n \r\n\r\n
{\r\n setCaptionInput(e.target.value);\r\n props.handleContentInput(e.target.value)}\r\n }\r\n style={{ height: \"auto\" }}\r\n allowSuggestionsAboveCursor={true}\r\n >\r\n `@${display}`}\r\n markup=\"#!^(__id__)%~@(((__display__)))\"\r\n renderSuggestion={(entry, search, highlightedDisplay, index, focused) => {\r\n return @{entry.display} {entry.name}
\r\n\r\n ) : null\r\n }\r\n\r\n {\r\n props.deviceSize === \"sm\" ? (\r\n <>\r\n {\r\n !!(props.blog) ?\r\n <>\r\n
{post.title} \r\n \r\n :\r\n <>\r\n }\r\n
\r\n
\r\n {content} \r\n
\r\n
\r\n \r\n ) : null\r\n }\r\n\r\n
\r\n );\r\n}\r\n\r\nPreviewCard.propTypes = {\r\n userName: PropTypes.string,\r\n profilePicture: PropTypes.node,\r\n post: PropTypes.object,\r\n loggedInUser: PropTypes.object,\r\n handleContentInput: PropTypes.func,\r\n captionValue: PropTypes.string\r\n}\r\n\r\nexport default PreviewCard;\r\n","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from \"prop-types\";\r\nimport ImageWrapper from \"components/ImageWrapper\";\r\n\r\nconst ShareCard = (props) => {\r\n const {post, onSelected} = props;\r\n const [mediaIndex, setMediaIndex] = useState(-1);\r\n const [postState, setPostState] = useState(post)\r\n\r\n let standard = postState?.raw?.playlistItem?.snippet?.thumbnails?.standard?.url;\r\n let high = postState?.raw?.playlistItem?.snippet?.thumbnails?.high?.url;\r\n let medium = postState?.raw?.playlistItem?.snippet?.thumbnails?.medium?.url;\r\n let defaultThumbnail = postState?.raw?.playlistItem?.snippet?.thumbnails?.default?.url;\r\n\r\n const [imageLink, setImageLink] = useState(!!(standard) ? standard : !!(high) ? high : !!(medium) ? medium : defaultThumbnail);\r\n const [altImageLink, setAltImageLink] = useState(post?.media[0]?.children[0]?.thumbnailLink);\r\n const [postId, setPostId] = useState(!!(post?.id) ? post.id : null);\r\n\r\n const handleMounted = async () => {\r\n if (post?.media?.length > 0) {\r\n setMediaIndex(0);\r\n }\r\n }\r\n\r\n const handleSelected = async (e) => {\r\n e.preventDefault();\r\n onSelected(postId);\r\n }\r\n\r\n useEffect(() => {\r\n handleMounted();\r\n }, []);\r\n\r\n useEffect(() => {\r\n setPostState(post);\r\n setPostId(post.id)\r\n\r\n standard = post.raw?.playlistItem?.snippet?.thumbnails?.standard?.url;\r\n high = post.raw?.playlistItem?.snippet?.thumbnails?.high?.url;\r\n medium = post.raw?.playlistItem?.snippet?.thumbnails?.medium?.url;\r\n defaultThumbnail = post.raw?.playlistItem?.snippet?.thumbnails?.default?.url;\r\n\r\n setImageLink(!!(standard) ? standard : !!(high) ? high : !!(medium) ? medium : defaultThumbnail);\r\n setAltImageLink(post.media[0]?.children[0]?.thumbnailLink);\r\n }, [post]);\r\n\r\n\r\n function prevPicture() {\r\n if (mediaIndex > 0) {\r\n let newMedia = mediaIndex;\r\n setMediaIndex(--newMedia);\r\n } else {\r\n setMediaIndex(post?.media.length - 1);\r\n }\r\n }\r\n\r\n function nextPicture() {\r\n if (mediaIndex < post?.media.length - 1) {\r\n let newMedia = mediaIndex;\r\n setMediaIndex(++newMedia);\r\n } else {\r\n setMediaIndex(0);\r\n }\r\n }\r\n\r\n let currentImage = post?.media[mediaIndex];\r\n\r\n let content = post?.content ?? post?.title;\r\n\r\n let src = currentImage?.imageLink ? currentImage?.imageLink : currentImage?.children[0]?.thumbnailLink || currentImage?.thumbnailLink || !!(imageLink) ? imageLink : altImageLink;\r\n\r\n if (!(postId)) {\r\n return <>\r\n };\r\n\r\n return (\r\n \r\n
\r\n {!!currentImage || imageLink || altImageLink\r\n ? \r\n {`${post.media.length}`}\r\n \r\n \r\n\r\n ) : null\r\n }\r\n
\r\n\r\n
\r\n {content}\r\n
\r\n\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default CameraIcon;","import React from \"react\";\r\nimport { getRequest } from \"../../../sharedUtils/httpUtils\";\r\nimport CameraIcon from \"components/icons/CameraIcon\";\r\n\r\nclass CreateNativePost extends React.Component {\r\n /**\r\n * \r\n * @param {{\r\n * selectedSectors:Array,\r\n * setNativePostMedia:Function,\r\n * setNativePostMediaUrls:Function,\r\n * setNativePostCaption:Function,\r\n * nativePostCaption:string,\r\n * addSector:Function,\r\n * removeSector:Function\r\n * }} props\r\n */\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n content: \"\",\r\n selectedFilesRaw: [],\r\n selectedFilesUrls: [],\r\n currentDisplayImageIndex: 0,\r\n sectors: [],\r\n sectorFilterInput: \"\"\r\n }\r\n }\r\n\r\n componentDidMount = async () => {\r\n let sectors = await this.fetchSectors();\r\n sectors = sectors.sort((a, b) => { if (a.name < b.name) return -1; });\r\n this.setState({ sectors })\r\n }\r\n\r\n activateFileInput = () => {\r\n document.getElementById(\"uploadPostMedia\").click();\r\n }\r\n\r\n displaySectors = () => {\r\n return this.state.sectors.map((sector, i) => {\r\n let sectorIsSelected = this.props.selectedSectors.findIndex(sec => sec.sectorId === sector.sectorId);\r\n let selectedClass = sectorIsSelected >= 0 ? \"active\" : \"\";\r\n if (sector.name.toLowerCase().includes(this.state.sectorFilterInput.toLowerCase())) {\r\n return (\r\n {\r\n if (sectorIsSelected >= 0) {\r\n this.props.removeSector(sectorIsSelected);\r\n }\r\n else {\r\n this.props.addSector(sector);\r\n }\r\n }}\r\n key={i}>\r\n {sector.name}\r\n \r\n )\r\n }\r\n\r\n\r\n })\r\n }\r\n\r\n displayBanner = () => {\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n )\r\n }\r\n\r\n fetchSectors = async () => {\r\n let url = `api/Sector/GetSectors`;\r\n let sectors = await getRequest(url);\r\n if (sectors === undefined) {\r\n return [];\r\n }\r\n else {\r\n return sectors;\r\n }\r\n }\r\n\r\n handleInput = (e) => this.props.setNativePostCaption(e.target.value)\r\n\r\n selectMediaToUpload = (e) => {\r\n e.preventDefault();\r\n\r\n let urls = [];\r\n let files = [];\r\n\r\n for (let i = 0; i < e.target.files.length; i++) {\r\n let urlDetails = {\r\n role: e.target.files[i].type.includes(\"image/\") ? 0 : 1,\r\n url: URL.createObjectURL(e.target.files[i])\r\n }\r\n urls.push(urlDetails);\r\n files.push(e.target.files[i]);\r\n }\r\n\r\n this.props.setNativePostMedia(files);\r\n this.props.setNativePostMediaUrls(urls);\r\n\r\n this.setState({ selectedFilesRaw: files, selectedFilesUrls: urls });\r\n e.target.files = null;\r\n e.target.value = null;\r\n }\r\n\r\n render() {\r\n let whiteBg = this.state.selectedFilesUrls.length > 0 ? \"bg-white\" : \"\"\r\n return (\r\n \r\n\r\n {this.displayBanner()}\r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default CreateNativePost;","import React from \"react\";\r\n\r\n/**\r\n * \r\n * @param {{fill:string}} props\r\n */\r\nconst GearIcon = (props) => {\r\n return (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t \r\n\t\t \r\n )\r\n}\r\n\r\nexport default GearIcon;\r\n","import InfiniteScroll from \"react-infinite-scroll-component\";\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport { useHistory } from \"react-router-dom\";\r\nimport PropTypes from 'prop-types';\r\nimport { Popover, PopoverBody, PopoverHeader, Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\r\nimport RPModal from \"components/Modal\";\r\nimport { Redirect } from \"react-router-dom\";\r\n//import $ from 'jquery';\r\n//import 'jquery.iframetracker';\r\nimport authService from '../../api-authorization/AuthorizeService';\r\nimport { ClientRequest } from '../../api-social/clientRequest';\r\nimport instagram from './Instagram';\r\nimport tiktok from './TikTok';\r\nimport facebook from './Facebook';\r\nimport youtube from './Youtube';\r\nimport { Sources } from './Sources';\r\nimport PreviewCard from './PreviewCard';\r\nimport ShareCard from './ShareCard';\r\nimport CreateNativePost from \"components/Post/Create/CreateNativePost\";\r\nimport \"../post.css\";\r\nimport { getRequest, postRequest } from \"sharedUtils/httpUtils\"\r\nimport LoadSpinner from \"components/LoadSpinner\";\r\nimport ActionButton from \"components/ActionButton\";\r\nimport GearIcon from \"components/icons/GearIcon\"\r\nimport StackTrace from \"stacktrace-js\";\r\n\r\n\r\nconst ENABLE_AUDIT_MESSAGES = false;\r\n\r\nlet _coordinatorLoadStatus = 0;\r\n\r\nexport const Coordinator = (props) => {\r\n const { id, showModal, onModalClosed, loggedInUser } = props;\r\n const [isPreviewMode, setPreviewMode] = useState(false);\r\n const [isReady, setReady] = useState(false);\r\n const [redirect, setRedirect] = useState(false);\r\n const [error, setError] = useState(false);\r\n const history = useHistory();\r\n\r\n const [state, setState] = useState({\r\n sources: {\r\n data: [\r\n {\r\n authorization: null,\r\n name: 'file',\r\n userProfile: {\r\n name: '',\r\n channels: {\r\n data: [\r\n {\r\n id: 0,\r\n name: 'local file system',\r\n posts: {\r\n data: [\r\n { id: '' }\r\n ],\r\n selectedIndex: -1,\r\n isFullyLoaded: false\r\n }\r\n }],\r\n selectedIndex: 0,\r\n isFullyLoaded: false\r\n }\r\n }\r\n },\r\n { name: 'instagram' },\r\n { name: 'facebook' },\r\n { name: 'youtube' },\r\n { name: 'tiktok'},\r\n ],\r\n selectedIndex: 0\r\n }\r\n });\r\n const componentDidUpdateRef = useRef(false);\r\n\r\n const [postCaption, setPostCaption] = useState(\"\");\r\n const [nativePostMedia, setNativePostMedia] = useState([]);\r\n const [nativePostSectors, setNativePostSectors] = useState([]);\r\n const [nativePostMediaUrls, setNativePostMediaUrls] = useState([]);\r\n const [loading, setLoading] = useState(false);\r\n const [showRemoveAccess, setShowRemoveAccess] = useState(false);\r\n //\r\n // audit\r\n /**/\r\n useEffect(() => {\r\n if (!!ENABLE_AUDIT_MESSAGES)\r\n console.log(new Date(), Coordinator.name, '::showModal', showModal);\r\n }, [showModal]);\r\n useEffect(() => {\r\n if (!!ENABLE_AUDIT_MESSAGES)\r\n console.log(new Date(), Coordinator.name, '::isReady', isReady);\r\n }, [isReady]);\r\n useEffect(() => {\r\n if (!!ENABLE_AUDIT_MESSAGES)\r\n console.log(new Date(), Coordinator.name, '::state', state);\r\n }, [state]);\r\n // */\r\n\r\n useEffect(() => {\r\n document.querySelector(\"body\").style.overflow = \"hidden\";\r\n return () => {\r\n document.querySelector(\"body\").style.overflow = \"\";\r\n }\r\n }, [isPreviewMode]);\r\n\r\n useEffect(() => {\r\n const data = state.sources.data;\r\n const selectedIndex = state.sources.selectedIndex;\r\n setShowRemoveAccess(data[selectedIndex].name.toLowerCase() === \"youtube\" &&\r\n !!(data[selectedIndex].authorization?.access_token) &&\r\n data[selectedIndex].authorization.access_token.length > 0)\r\n }, [state])\r\n\r\n const doLoad = async () => {\r\n let accessToken = await authService.getAccessToken();\r\n if (accessToken == null)\r\n return;\r\n\r\n let headers = { headers: !accessToken ? {} : { Authorization: `Bearer ${accessToken}` } };\r\n let config = await ClientRequest.get('api/post/getCreate', null, false, headers);\r\n if (config == null)\r\n return;\r\n\r\n let igResult = {};\r\n let instagramInit = instagram.init(config?.instagram?.appId, headers)\r\n .then(\r\n (val) => {\r\n igResult = val;\r\n },\r\n (err) => console.error('Initializing Instagram', err)\r\n );\r\n\r\n let fbResult = {};\r\n let facebookInit = facebook.init(config?.facebook?.appId, config?.facebook?.version, headers)\r\n .then(\r\n (val) => fbResult = val,\r\n (err) => console.error('Initializing Facebook', err)\r\n );\r\n\r\n let ytResult = {};\r\n let youtubeInit = youtube.init(config?.youtube?.appId, config?.youtube?.apiKey, headers)\r\n .then(\r\n (val) => ytResult = val,\r\n (err) => console.error('Initializing Youtube', err)\r\n );\r\n\r\n let ttResult = {};\r\n let tiktokInit = tiktok.init(config?.tikTok?.clientKey, headers)\r\n .then(\r\n (val) => ttResult = val,\r\n (err) => console.error('Initializing TikTok', err)\r\n );\r\n\r\n await instagramInit;\r\n await facebookInit;\r\n await youtubeInit;\r\n await tiktokInit;\r\n\r\n let initialState = {\r\n ...headers,\r\n sources: {\r\n data: [\r\n {\r\n authorization: headers.headers,\r\n name: 'file',\r\n loginComplete: true,\r\n userProfile: {\r\n name: '',\r\n channels: {\r\n data: [\r\n {\r\n id: 0,\r\n name: 'local file system',\r\n posts: {\r\n data: [\r\n { id: '' }\r\n ],\r\n selectedIndex: -1,\r\n isFullyLoaded: true\r\n }\r\n }],\r\n selectedIndex: 0,\r\n isFullyLoaded: true\r\n }\r\n }\r\n },\r\n { name: 'instagram', ...igResult, loginComplete: true },\r\n { name: 'facebook', ...fbResult, loginComplete: true },\r\n { name: 'youtube', ...ytResult, loginComplete: true },\r\n { name: 'tiktok', ...ttResult, loginComplete: true },\r\n ],\r\n selectedIndex: 0\r\n }\r\n };\r\n\r\n setState(initialState);\r\n setReady(true);\r\n }\r\n\r\n //\r\n // componentDidMount\r\n //\r\n //useEffect(() => {\r\n // if (!!ENABLE_AUDIT_MESSAGES)\r\n // console.log('handle mounted');\r\n\r\n // let loadStatus = _coordinatorLoadStatus++;\r\n // if (loadStatus === 0) {\r\n // doLoad();\r\n // } else {\r\n // setReady(true);\r\n // }\r\n //}, []);\r\n\r\n useEffect(() => {\r\n if (props.showModal) {\r\n if (!!ENABLE_AUDIT_MESSAGES)\r\n console.log('handle mounted');\r\n\r\n let loadStatus = _coordinatorLoadStatus++;\r\n if (loadStatus === 0) {\r\n doLoad();\r\n } else {\r\n setReady(true);\r\n }\r\n }\r\n }, [props.showModal]);\r\n\r\n //\r\n // componentDidUpdate (after update for DOM work)\r\n //\r\n useEffect(() => {\r\n if (componentDidUpdateRef.current) {\r\n if (!!ENABLE_AUDIT_MESSAGES)\r\n console.log('handle after render');\r\n\r\n\r\n } else {\r\n componentDidUpdateRef.current = true;\r\n }\r\n });\r\n\r\n const encodeHtml = (txt) => {\r\n var el = document.createElement('textarea');\r\n el.innerText = txt\r\n return el.innerHTML;\r\n }\r\n\r\n //const decodeHtml = (html) => {\r\n // var el = document.createElement('textarea');\r\n // el.innerHTML = html;\r\n // return el.value;\r\n //}\r\n\r\n const doLoadChannelsAsync = async (model) => {\r\n let activeSource = getSelectedSource(model);\r\n\r\n if (!(activeSource.api))\r\n return;\r\n if (!(activeSource.userProfile)) return;\r\n let userProfile = activeSource.userProfile;\r\n await activeSource.api.getChannelsFor(userProfile)\r\n .then(\r\n async (val) => {\r\n try {\r\n if (!(userProfile.channels)) {\r\n userProfile.channels = {\r\n data: [],\r\n isFullyLoaded: true,\r\n selectedIndex: -1\r\n };\r\n }\r\n let targetList = userProfile.channels;\r\n let targetData = targetList.data;\r\n let sourceData = val.data;\r\n userProfile.channels.raw = val;\r\n for (let i = 0; i < sourceData.length; i++) {\r\n let item = sourceData[i];\r\n let found = false;\r\n for (let i = 0; i < targetData.length; i++) {\r\n if (item.id === targetData[i].id) {\r\n found = true;\r\n break;\r\n }\r\n }\r\n if (!found) {\r\n targetData.push(item);\r\n }\r\n }\r\n\r\n if (targetData.length > 0 && targetList.selectedIndex < 0) {\r\n await doSelectChannelAsync(model, 0);\r\n }\r\n\r\n if (!!(val.paging)) {\r\n targetList.paging = val.paging;\r\n targetList.isFullyLoaded = false;\r\n } else {\r\n targetList.isFullyLoaded = true;\r\n if (!!(targetList.paging)) {\r\n delete targetList.paging;\r\n }\r\n }\r\n }\r\n catch (ex) {\r\n activeSource.authorization = null;\r\n }\r\n },\r\n (err) => {\r\n activeSource.authorization = null;\r\n }\r\n );\r\n };\r\n\r\n const doLoadPostsAsync = async (model) => {\r\n let activeSource = getSelectedSource(model);\r\n\r\n let activeChannel = getSelectedChannel(model);\r\n if (!activeChannel?.posts?.isFullyLoaded) {\r\n await activeSource.api.getPostsFor(activeChannel)\r\n .then(\r\n async (val) => {\r\n try {\r\n if (!(activeChannel.posts)) {\r\n activeChannel.posts = {\r\n data: [],\r\n isFullyLoaded: false,\r\n selectedIndex: -1,\r\n };\r\n }\r\n let targetList = activeChannel.posts;\r\n let targetData = targetList.data;\r\n let sourceData = val.data;\r\n\r\n for (let i = 0; i < sourceData.length; i++) {\r\n let sourceItem = sourceData[i];\r\n targetData.push(sourceItem);\r\n }\r\n\r\n if (!!(val.paging)) {\r\n targetList.paging = val.paging;\r\n } else {\r\n\r\n targetList.isFullyLoaded = true;\r\n if (!!(targetList.paging)) {\r\n delete targetList.paging;\r\n }\r\n }\r\n }\r\n catch (ex) {\r\n activeSource.authorization = null;\r\n setError(true)\r\n let modelString = (activeSource !== undefined && activeSource !== null) ? JSON.stringify(activeSource) : 'activeSource is undefined or null';\r\n\r\n postRequest('/api/ErrorLogger/LogError', { error: ex.toString(), stack: \"Coordinator.jsx doLoadPostsAsync() Try Catch - model - \" + modelString});\r\n }\r\n },\r\n (ex) => {\r\n activeSource.authorization = null;\r\n setError(true);\r\n let modelString = (activeSource !== undefined && activeSource !== null) ? JSON.stringify(activeSource) : 'activeSource is undefined or null';\r\n\r\n postRequest('/api/ErrorLogger/LogError', { error: ex.toString(), stack: \"Coordinator.jsx doLoadPostsAsync() .Then Catch - model - \" + modelString });\r\n }\r\n );\r\n }\r\n };\r\n\r\n const doLoginAsync = async (model) => {\r\n let activeSource = getSelectedSource(model);\r\n activeSource.loginComplete = false;\r\n\r\n await setState({ ...model });\r\n\r\n if (!!(activeSource?.api)) {\r\n await activeSource.api.login()\r\n .then(\r\n (authorization) => {\r\n activeSource.authorization = authorization;\r\n let modelString = (activeSource !== undefined && activeSource !== null) ? JSON.stringify(activeSource) : 'activeSource is undefined or null';\r\n console.log(modelString);\r\n },\r\n (error) => {\r\n activeSource.authorization = null;\r\n setError(true);\r\n\r\n let modelString = (activeSource !== undefined && activeSource !== null) ? JSON.stringify(activeSource) : 'activeSource is undefined or null';\r\n postRequest('/api/ErrorLogger/LogError', { error: error.toString(), stack: \"Coordinator.jsx doLoginAync() .Then Catch - model - \" + modelString });\r\n }\r\n )\r\n if (activeSource.authorization) {\r\n await activeSource.api.getUserProfile()\r\n .then(\r\n (userProfile) => {\r\n activeSource.userProfile = userProfile;\r\n },\r\n (ex) => {\r\n activeSource.userProfile = null;\r\n activeSource.authorization = null;\r\n setError(true);\r\n\r\n let modelString = (activeSource !== undefined && activeSource !== null) ? JSON.stringify(activeSource) : 'activeSource is undefined or null';\r\n postRequest('/api/ErrorLogger/LogError', { error: ex.toString(), stack: \"Coordinator.jsx doLoginAync() .Then Catch - model - \" + modelString });\r\n }\r\n );\r\n }\r\n activeSource.loginComplete = true;\r\n }\r\n }\r\n\r\n const doLogoutAsync = async (model) => {\r\n let activeSource = getSelectedSource(model);\r\n\r\n await activeSource.api.logout()\r\n .then(\r\n async (val) => {\r\n delete activeSource.userProfile;\r\n delete activeSource.authorization;\r\n },\r\n (err) => {\r\n delete activeSource.userProfile;\r\n delete activeSource.authorization;\r\n console.error(err);\r\n }\r\n );\r\n }\r\n\r\n const handleRevokeAccess = async (e) => {\r\n handleLogoutAsync();\r\n }\r\n\r\n const doClearPostSelection = async (model) => {\r\n if (!(model?.sources?.data)) return;\r\n for (let i = 0; i < model.sources.data.length; i++) {\r\n let source = model.sources.data[i];\r\n let userProfile = source.userProfile;\r\n if (!(userProfile?.channels?.data)) continue;\r\n for (let j = 0; j < userProfile.channels.data.length; j++) {\r\n let channel = userProfile.channels.data[j];\r\n if (!(channel?.posts?.data)) continue;\r\n channel.posts.selectedIndex = -1;\r\n }\r\n }\r\n }\r\n\r\n const doSelectChannelAsync = async (model, selectedIndex) => {\r\n let activeSource = getSelectedSource(model);\r\n if (selectedIndex >= activeSource.userProfile.channels.data.length) {\r\n selectedIndex = activeSource.userProfile.channels.data.length - 1;\r\n }\r\n let previousSelectedIndex = activeSource.userProfile.channels.selectedIndex;\r\n if (previousSelectedIndex === selectedIndex) return;\r\n activeSource.userProfile.channels.selectedIndex = selectedIndex;\r\n let activeChannel = getSelectedChannel(model);\r\n if (!(activeChannel === activeSource.userProfile.channels.data[selectedIndex])) {\r\n }\r\n if (!(activeChannel?.posts)) {\r\n await doLoadPostsAsync(model);\r\n }\r\n doClearPostSelection(model);\r\n };\r\n\r\n const doSelectPost = async (model, selectedIndex) => {\r\n let activeChannel = getSelectedChannel(model);\r\n activeChannel.posts.selectedIndex = selectedIndex;\r\n\r\n let activePost = getSelectedPost(state);\r\n setPostCaption(activePost.content);\r\n setPreviewMode(selectedIndex >= 0);\r\n }\r\n\r\n const doSelectSourceAsync = async (model, selectedIndex) => {\r\n let sources = model.sources;\r\n if (selectedIndex !== sources.selectedIndex) {\r\n sources.selectedIndex = selectedIndex;\r\n doClearPostSelection(model);\r\n\r\n let activeSource = getSelectedSource(model);\r\n if (!(activeSource?.userProfile)) {\r\n await doLoginAsync(model);\r\n }\r\n if (!!(activeSource?.userProfile) && !(activeSource?.userProfile?.channels)) {\r\n await doLoadChannelsAsync(model);\r\n }\r\n } else {\r\n // not authorized\r\n if ((state.sources.data[selectedIndex].api?.isAuthorized ?? true) == false) {\r\n await doLoginAsync(model);\r\n await doLoadChannelsAsync(model);\r\n }\r\n }\r\n }\r\n\r\n const getSelectedChannel = (model) => {\r\n let selectedChannel = null;\r\n let selectedUserProfile = getSelectedUserProfile(model);\r\n if (!!(selectedUserProfile)) {\r\n let channels = selectedUserProfile.channels;\r\n if (!!channels) {\r\n let i = channels.selectedIndex;\r\n if (i >= 0) {\r\n selectedChannel = channels.data[i];\r\n }\r\n }\r\n }\r\n return selectedChannel;\r\n };\r\n\r\n const getSelectedPost = (model) => {\r\n let selectedPost = null;\r\n let activeChannel = getSelectedChannel(model);\r\n if (!!(activeChannel)) {\r\n let posts = activeChannel.posts;\r\n if (!!posts) {\r\n let i = posts.selectedIndex;\r\n if (i >= 0) {\r\n selectedPost = posts.data[i];\r\n }\r\n }\r\n }\r\n return selectedPost;\r\n }\r\n\r\n const getSelectedSource = (model) => {\r\n let selectedSource = null;\r\n if (!!(model?.sources)) {\r\n let sourceIndex = model.sources.selectedIndex;\r\n if (sourceIndex >= 0) {\r\n selectedSource = model.sources.data[sourceIndex];\r\n }\r\n }\r\n return selectedSource;\r\n };\r\n\r\n const getSelectedUserProfile = (model) => {\r\n let selectedSource = getSelectedSource(model);\r\n return selectedSource?.userProfile;\r\n };\r\n\r\n const handleLoadPostsAsync = async () => {\r\n let newState = { ...state };\r\n await doLoadPostsAsync(newState);\r\n setState(newState);\r\n }\r\n\r\n const handleLoginAsync = async (e) => {\r\n let newState = { ...state };\r\n await doLoginAsync(newState);\r\n await handleSelectSourceAsync(state.sources.selectedIndex);\r\n setState(newState);\r\n }\r\n\r\n const handleLogoutAsync = async (e) => {\r\n let newState = { ...state };\r\n await doLogoutAsync(newState);\r\n setState(newState);\r\n }\r\n\r\n const handleModalClosed = async () => {\r\n let newState = { ...state };\r\n\r\n // clear channels\r\n if (newState.sources.data[1].userProfile != null) {\r\n newState.sources.data[1].userProfile.channels = null;\r\n }\r\n\r\n if (newState.sources.data[2].userProfile != null) {\r\n newState.sources.data[2].userProfile.channels = null;\r\n }\r\n\r\n if (newState.sources.data[3].userProfile != null) {\r\n newState.sources.data[3].userProfile.channels = null;\r\n }\r\n\r\n if (newState.sources.data[4].userProfile != null) {\r\n newState.sources.data[4].userProfile.channels = null;\r\n }\r\n\r\n setState(newState);\r\n\r\n _coordinatorLoadStatus = 0;\r\n onModalClosed();\r\n }\r\n\r\n const handleSavePost = async () => {\r\n const route = '/api/post/insertSocialPost';\r\n let selectedPost = { ...getSelectedPost(state) };\r\n selectedPost.content = postCaption;\r\n\r\n selectedPost.raw = JSON.stringify(selectedPost.raw);\r\n\r\n if (selectedPost.embed !== undefined) {\r\n selectedPost.embeddedHtml = selectedPost.embed;\r\n delete selectedPost.embed;\r\n }\r\n setLoading(true);\r\n let data = await postRequest(route, selectedPost);\r\n _coordinatorLoadStatus = 0;\r\n setPreviewMode(!isPreviewMode);\r\n setLoading(false);\r\n\r\n history.push(`/Post/PostPageAuthor/${data.shareCode}`, { state: { justCreated: true } });\r\n }\r\n\r\n const handleSaveNativePost = async () => {\r\n //todo: make post\r\n let payload = {\r\n content: postCaption,\r\n status: 0,\r\n type: 3,\r\n user: {\r\n id: loggedInUser.id\r\n }\r\n }\r\n\r\n let sectorModels = [];\r\n for (let i = 0; i < nativePostSectors.length; i++) {\r\n nativePostSectors[i].id = nativePostSectors[i].sectorId;\r\n let model = { sector: nativePostSectors[i] };\r\n sectorModels.push(model);\r\n }\r\n\r\n payload.sectors = sectorModels;\r\n\r\n let url = `api/Post/CreateNativePost`;\r\n\r\n setLoading(true);\r\n\r\n let createdPost = await postRequest(url, payload);\r\n\r\n let postId = createdPost.id;\r\n\r\n //todo: upload post media\r\n let formData = new FormData();\r\n\r\n for (let i = 0; i < nativePostMedia.length; i++) {\r\n formData.append(`postImage${i}`, nativePostMedia[i])\r\n }\r\n\r\n let mediaUploadUrl = `api/Locker/uploadMedia?postId=${postId}&postUserId=${createdPost.user.id}`;\r\n let newProperties = await postRequest(mediaUploadUrl, formData, null, false);\r\n\r\n if (newProperties != null) {\r\n _coordinatorLoadStatus = 0;\r\n setPreviewMode(!isPreviewMode);\r\n history.push(`/Post/PostPageAuthor/${createdPost.shareCode}`, { state: { justCreated: true }});\r\n } else {\r\n let url = `/api/Locker/DeleteLocker`;\r\n await postRequest(url, createdPost);\r\n setError(true);\r\n }\r\n\r\n _coordinatorLoadStatus = 0;\r\n setLoading(false); \r\n }\r\n\r\n const handleSelectChannelAsync = async (e) => {\r\n e.preventDefault();\r\n let selectedIndex = parseInt(e.target.id.replace('channel-', ''));\r\n let newState = { ...state };\r\n await doSelectChannelAsync(newState, selectedIndex);\r\n setState(newState);\r\n }\r\n\r\n const handleSelectPostAsync = (id) => {\r\n let newState = { ...state };\r\n let i = -1;\r\n var posts = getSelectedChannel(newState)?.posts;\r\n if (!!posts) {\r\n for (let j = 0; j < posts.data.length; j++) {\r\n let post = posts.data[j];\r\n if (post.id === id) {\r\n i = j;\r\n break;\r\n }\r\n }\r\n }\r\n\r\n doSelectPost(newState, i);\r\n setState(newState);\r\n }\r\n\r\n const handleSelectSourceAsync = async (selectedIndex) => {\r\n let newState = { ...state };\r\n await doSelectSourceAsync(newState, selectedIndex);\r\n setState(newState);\r\n }\r\n\r\n const handleTogglePreview = (e) => {\r\n setError(false);\r\n setPreviewMode(!isPreviewMode);\r\n setNativePostMedia([]);\r\n }\r\n\r\n const removeNativePostSector = (i) => {\r\n let updated = [...nativePostSectors];\r\n updated.splice(i, 1)\r\n setNativePostSectors(updated);\r\n }\r\n\r\n const addNativePostSector = (sector) => {\r\n let updated = [...nativePostSectors];\r\n updated.push(sector);\r\n setNativePostSectors(updated);\r\n }\r\n\r\n const handleSelectNativePostMedia = (files) => {\r\n setNativePostMedia(files);\r\n setPreviewMode(true);\r\n }\r\n //\r\n // render\r\n //\r\n let activeChannel = getSelectedChannel(state);\r\n let activePost = getSelectedPost(state);\r\n let activeSource = getSelectedSource(state);\r\n let activeUserProfile = activeSource?.userProfile;\r\n\r\n let clientId = !id ? 'post' : id;\r\n let hideModal = (showModal === undefined || showModal === null) ? false : !showModal;\r\n let searchClientId = `${clientId}-search`;\r\n let previewClientId = `${clientId}-preview`;\r\n\r\n let channels = activeUserProfile?.channels;\r\n let channelsData = channels?.data;\r\n\r\n let sources = state?.sources;\r\n\r\n let userImage = activeUserProfile?.imageUrl;\r\n\r\n const renderChannels = () => {\r\n let retVal = <>;\r\n if (!!channelsData && channelsData.length > 1) {\r\n retVal = <>\r\n \r\n
\r\n
\r\n
{activeChannel?.name} \r\n
\r\n {\r\n channelsData.map((channel, i) => {\r\n return
{channel.name} ;\r\n })\r\n }\r\n
\r\n
\r\n
\r\n
{ setPostCaption(val); }}\r\n />\r\n })\r\n : postData.map((post, i) => {\r\n return setPostCaption(val)}\r\n post={postPreviewData}\r\n loggedInUser={props.loggedInUser}\r\n deviceSize={props.deviceSize}\r\n captionValue={postCaption}\r\n />\r\n }\r\n }\r\n };\r\n\r\n const renderShareCards = (shareCards) => {\r\n return shareCards && shareCards.map((shareCard, i) => {\r\n return ({shareCard}
)\r\n });\r\n }\r\n\r\n const renderPosts = () => {\r\n let activeSource = getSelectedSource(state);\r\n let activeChannel = getSelectedChannel(state);\r\n let postsData = activeChannel?.posts?.data;\r\n\r\n let platformName = activeSource?.name ?? '';\r\n\r\n if (platformName === \"instagram\" ||\r\n platformName === \"facebook\" ||\r\n platformName === \"youtube\" ||\r\n platformName === \"tiktok\") {\r\n\r\n let shareCards = !!postsData && renderPostCards(postsData);\r\n\r\n return (\r\n \r\n \r\n {renderShareCards(shareCards)}\r\n
\r\n\r\n );\r\n } \r\n\r\n return (\r\n } ignoreClickAway={true}>\r\n {renderPreviewPost()}\r\n \r\n Cancel \r\n {!error ?\r\n \r\n Next\r\n : null}\r\n \r\n \r\n \r\n );\r\n }\r\n return retVal;\r\n }\r\n\r\n const renderRedirect = () => {\r\n let retVal = <>;\r\n if (!!redirect) {\r\n retVal = \r\n \r\n
\r\n
\r\n
\r\n
Share a Post \r\n \r\n {renderChannels()}\r\n {renderGear()}\r\n
\r\n
\r\n
\r\n {\r\n if (e.target === e.currentTarget) {\r\n setPreviewMode(false);\r\n }\r\n }}>\r\n
\r\n
\r\n
\r\n {renderPosts()}\r\n
\r\n
\r\n \r\n Cancel \r\n \r\n \r\n );\r\n }\r\n return retVal;\r\n }\r\n\r\n return <>\r\n
\r\n {renderPreviewModal()}\r\n {renderSearchModal()}\r\n {error ?\r\n { setError(false); } }>\r\n \r\n Error\r\n \r\n \r\n Sorry an unexpected error occurred. Please try again.\r\n \r\n \r\n : null}\r\n \r\n}\r\n\r\nCoordinator.propTypes = {\r\n id: PropTypes.string,\r\n showModal: PropTypes.bool,\r\n onModalClosed: PropTypes.func.isRequired\r\n};","import React, { useState } from 'react';\r\nimport { Coordinator } from 'components/Post/Create/Coordinator'\r\n\r\nexport const Create = () => {\r\n const [showModal, setShowModal] = useState(false);\r\n\r\n const handleHideModal = () => {\r\n setShowModal(false);\r\n }\r\n\r\n const handleShowModal = () => {\r\n setShowModal(true);\r\n }\r\n\r\n return <>\r\n Share Social Post \r\n removeTag(alreadySelected)}>\r\n {suggestion.name}\r\n \r\n )\r\n }\r\n else {\r\n return (\r\n addTag(suggestion)} key={i}>\r\n {suggestion.name}\r\n \r\n )\r\n }\r\n\r\n })\r\n }\r\n }\r\n\r\n function removeTag(location) {\r\n let newTags = [...formState.interests];\r\n newTags.splice(location, 1);\r\n let newFormState = { ...formState, interests: newTags }\r\n setTagInput(\"\");\r\n setFormState(newFormState);\r\n }\r\n\r\n let createButtonDisabled = (formState.name.length === 0 || formState.description.length === 0) ? true : false;\r\n\r\n return (\r\n \r\n {\r\n finishedCreating === true && lockerShareCode.length > 0 ? (\r\n
\r\n ) :
\r\n }\r\n
\r\n\r\n
Create Locker \r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n Description \r\n \r\n
setFormState({ ...formState, description: e.target.value })}\r\n style={{ backgroundColor: \"#e9ecef\",height:\"auto\" }}\r\n value={formState.description}\r\n data={debounceFunc}\r\n placeholder=\"Tell us about your locker and the purpose of its contents\"\r\n className=\"caption-textarea\"\r\n />\r\n\r\n \r\n
\r\n {mapTagSuggestionsAlternate()}\r\n
\r\n
\r\n
\r\n Cancel\r\n \r\n\r\n
\r\n Next\r\n \r\n\r\n \r\n\r\n
\r\n
\r\n \r\n )\r\n}\r\n\r\nfunction mapStateToProps(storeState, ownProps) {\r\n return { showModal: storeState.modalReducer.showCreateLockerModal }\r\n}\r\n\r\nconst mapDispatch = {\r\n toggleModal: toggleCreateLockerModal\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatch)(CreateLockerModal);","import React from \"react\";\r\nimport { getRequest } from \"sharedUtils/httpUtils\";\r\nimport UserTileGeneral from \"components/UserTileGeneral\";\r\nimport InfiniteScroll from \"react-infinite-scroll-component\";\r\n\r\n\r\nclass FollowersFollowingRender extends React.Component {\r\n follow = (userId, followUnfollow) => {\r\n let followersOrFollowing = this.props.followersOrFollowing;\r\n let users = this.props.users;\r\n\r\n users.forEach((user, i) => {\r\n if (user.id === userId) {\r\n let isFollowingChange = !user?.isFollowing;\r\n user.isFollowing = isFollowingChange;\r\n }\r\n })\r\n\r\n this.props.setUsers(users);\r\n\r\n let url = followUnfollow === \"follow\" ? \"api/Account/Follow\" : \"api/Account/Unfollow\";\r\n url += `?id=${userId}`;\r\n\r\n let req = getRequest(url);\r\n\r\n if (this.props.followersOrFollowing !== \"creators\" && !this.props.fetchFollowing) this.props.toggleFetchFollowing();\r\n }\r\n\r\n mapUsers = () => {\r\n let users = !!(this.props.users) ? this.props.users : [];\r\n \r\n return users?.map((user, i) => {\r\n let buttonText = user.isFollowing === true ? \"Unfollow -\" : \"Follow +\";\r\n return (\r\n \r\n {\r\n if (!(this.props.loggedInUser)) {\r\n window.open(window.location.origin + \"/Identity/Account/Register?returnUrl=/profile/\" + user.userName);\r\n } else if (user.isFollowing === true) {\r\n this.follow(user.id, \"unfollow\")\r\n }\r\n else {\r\n this.follow(user.id, \"follow\")\r\n }\r\n }}\r\n >\r\n {buttonText}\r\n : <>\r\n }\r\n
\r\n )\r\n })\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
{this.props.heading} \r\n \r\n {this.mapUsers()}\r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default FollowersFollowingRender;\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { getRequest } from \"sharedUtils/httpUtils\";\r\nimport FollowersFollowingRender from \"./FollowersFollowingRender\";\r\nimport { toggleFetchFollowing } from \"stateManagement/reducers/modalReducer\";\r\n\r\n\r\nclass FollowersFollowingList extends React.Component {\r\n\r\n /**\r\n * \r\n * @param {{loggedInUser:object,userId:any,followersOrFollowing:string}} props\r\n */\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n followers: [],\r\n following: [],\r\n finishedFetchingFollowers: false,\r\n finishedFetchingFollowing: false\r\n }\r\n }\r\n\r\n async componentDidMount() {\r\n if (this.props.loggedInUser !== undefined && this.props.userId !== null) {\r\n if (this.props.followersOrFollowing === \"followers\") {\r\n let users = await this.fetchFollowers(this.props.userId, 0, 10);\r\n this.setState({ followers: users });\r\n }\r\n else if (this.props.followersOrFollowing === \"following\") {\r\n let users = await this.fetchFollowing(this.props.userId, 0, 10)\r\n this.setState({ following: users });\r\n }\r\n }\r\n }\r\n\r\n fetchFollowers = async (userId, skip, take) => {\r\n var users = await getRequest(`api/Account/GetFollowers?userId=${userId}&skip=${skip}&take=${take}`);\r\n return users;\r\n }\r\n\r\n fetchFollowing = async (userId, skip, take) => {\r\n var users = await getRequest(`api/Account/GetLeaders?userId=${userId}&skip=${skip}&take=${take}`);\r\n return users;\r\n }\r\n\r\n fetchMore = async () => {\r\n let { followersOrFollowing } = this.props;\r\n let { followers, following } = this.state;\r\n let users;\r\n if (followersOrFollowing === \"followers\") {\r\n users = await this.fetchFollowers(this.props.userId, followers.length, 10);\r\n if (users === undefined || users === null || users.length === 0) {\r\n this.setState({ finishedFetchingFollowers: true });\r\n }\r\n else {\r\n let updated = [...this.state.followers, ...users];\r\n this.setState({ followers: updated })\r\n }\r\n }\r\n\r\n else {\r\n users = await this.fetchFollowing(this.props.userId, following.length, 10);\r\n if (users === undefined || users === null || users.length === 0) {\r\n this.setState({ finishedFetchingFollowing: true });\r\n }\r\n else {\r\n let updated = [...this.state.following, ...users];\r\n this.setState({ following: updated })\r\n }\r\n }\r\n }\r\n\r\n setUsers = (users) => {\r\n if (this.props.followersOrFollowing === \"followers\") {\r\n this.setState({ followers: users });\r\n }\r\n else {\r\n this.setState({ following: users });\r\n }\r\n }\r\n\r\n render() {\r\n\r\n let { followersOrFollowing } = this.props;\r\n\r\n\r\n return (\r\n props.toggleModal(null)}>\r\n \r\n )\r\n }\r\n return (\r\n props.toggleModal(null)}>\r\n \r\n\r\n )\r\n}\r\n\r\nfunction mapStateToProps(storeState) {\r\n return {\r\n showModal: storeState.modalReducer.followersFollowing.showFollowersFollowing,\r\n userId: storeState.modalReducer.followersFollowing.userId,\r\n productId: storeState.modalReducer.followersFollowing.productId,\r\n followersFollowing: storeState.modalReducer.followersFollowing.followersFollowing\r\n }\r\n}\r\n\r\nconst mapDispatch = {\r\n toggleModal: toggleFollowersFollowingModal\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatch)(FollowersFollowingModal);","import React from \"react\";\r\n\r\n\r\n/**\r\n * \r\n * @param {{width:number,height:number}} props\r\n */\r\nconst CommentIconPlusSign = (props) => {\r\n return (\r\n \r\n \r\n\r\n )\r\n}\r\n\r\nexport default CommentIconPlusSign;\r\n","import React from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport CommentIcon from \"components/icons/CommentIcon\";\r\nimport ImageWrapper from \"components/ImageWrapper\";\r\nimport { connect } from \"react-redux\";\r\nimport { toggleProductPageModal } from \"stateManagement/reducers/modalReducer\";\r\nimport CommentIconPlusSign from \"components/icons/CommentIconPlusSign\";\r\nimport SaleIcon from \"./icons/SaleIcon\";\r\n\r\n/**\r\n * \r\n * @param {{\r\n * product:{coupon:string, id:Number,product:{imageUrl:string, name:string}}\r\n * productKey:Number,\r\n * post:object\r\n * showDescription:Function,\r\n * comment:string,\r\n * isEditing:boolean,\r\n * parentModal:{type:string,shareCode:string,parentState:object}\r\n * }} props\r\n */\r\nconst PostPageProduct = (props) => {\r\n function displayIcon() {\r\n if (props.locker && props.comment?.length > 0) {\r\n return (\r\n 0 ? \"45px\" : \"\", cursor: \"pointer\", paddingRight: \"2px\" }} href=\"/\" className=\"product-comment-locker-page position-absolute\" onClick={(e) => {\r\n e.preventDefault()\r\n props.showDescription(props.productKey)\r\n }}>\r\n \r\n )\r\n }\r\n else if (props.post?.type === 2 && props.comment?.length > 0) {\r\n return (\r\n {\r\n e.preventDefault()\r\n props.showDescription(props.productKey)\r\n }}>\r\n \r\n )\r\n }\r\n }\r\n\r\n const renderSaleOverlay = (sale) => {\r\n if (!props.saleIconNever && sale && [\"sm\", \"md\"].includes(props.deviceSize)) {\r\n return (\r\n \r\n \r\n );\r\n }\r\n }\r\n\r\n let url = \"/Product/ProductPage/\" + props.product.shareCode;\r\n url += props.brandEmbed ? \"?r=0&b=1&showBrandNav=true\" : \"?r=1\";\r\n //url = props.disableRedirects ? \"https://\" + window.location.host + \"/browse\" : url;\r\n\r\n return (\r\n <>\r\n {renderSaleOverlay(props.product.sale)}\r\n \r\n \r\n\r\n {displayIcon()}\r\n\r\n {/*props.post?.type === 2 && props.comment?.length > 0 ?\r\n ( {\r\n e.preventDefault()\r\n props.showDescription(props.productKey)\r\n }}>\r\n {props.deviceSize === \"sm\" ? ) : null\r\n */}\r\n \r\n )\r\n}\r\n\r\nexport default connect(null, { toggleProductPageModal })(PostPageProduct);","let blankFeedPost = {\r\n id: 0,\r\n content: \"\",\r\n postedOn: \"\",\r\n shareCode: \"\",\r\n title: \"\",\r\n status: 1,\r\n type: 1,\r\n likedByUser: false,\r\n savedByUser:false,\r\n user: {\r\n name: \"\",\r\n imageUrl: \"\",\r\n userName: \"\",\r\n merchantProducts: {\r\n values: []\r\n }\r\n },\r\n proStatusId: 1,\r\n productItems: {\r\n $values: [\r\n {\r\n comment: \"\",\r\n id: 0,\r\n ordinal: 0,\r\n type: 1,\r\n userMerchantProduct: {\r\n id: 0,\r\n product: {\r\n merchant: {\r\n id: 0,\r\n name: \"\",\r\n hostname: \"\",\r\n integrated: false\r\n },\r\n product: {\r\n id: 0,\r\n manufacturer: {\r\n id: 0,\r\n name: \"\"\r\n },\r\n productCode: \"\"\r\n },\r\n name: \"\",\r\n description: \"\",\r\n url: \"\",\r\n imageUrl: \"\",\r\n merchantProductCode: \"\",\r\n price: 0\r\n },\r\n coupon: \"\"\r\n }\r\n }\r\n ]\r\n },\r\n likes: {\r\n values: []\r\n },\r\n comments: {\r\n values: []\r\n },\r\n commentCount: 0,\r\n likeCount:0,\r\n properties: {\r\n $type: \"\",\r\n $values: [\r\n {\r\n $id: \"\",\r\n userPost: {\r\n $ref: \"\"\r\n },\r\n role: 0,\r\n reference: \"\",\r\n id: 0\r\n }\r\n ]\r\n },\r\n flags: {\r\n values: []\r\n },\r\n sectors: {\r\n $values: []\r\n }\r\n}\r\n\r\nexport default blankFeedPost","import React from \"react\";\r\nimport { Link, NavLink, Redirect } from \"react-router-dom\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport ProfileInfoCard from \"components/ProfileInfoCard\";\r\nimport ShareBar from \"components/Share/ShareBar\";\r\nimport CommentForm from \"components/CommentForm\";\r\nimport CommentTile from \"components/CommentTile\";\r\nimport PostBanner from \"components/PostBanner\";\r\nimport ShareBlock from \"components/Share/ShareBlock\";\r\nimport Modal from \"components/Modal\";\r\nimport PostPageProduct from \"components/PostPageProduct\";\r\nimport LoadSpinner from \"components/LoadSpinner\";\r\nimport ImageWrapper from \"components/ImageWrapper\";\r\nimport UserTileSmall from \"components/UserTileSmall\";\r\nimport UserTileGeneral from \"components/UserTileGeneral\";\r\nimport MessageDetails from \"../Account/MessageDetails\";\r\nimport BlueTickIconXY from \"../../components/icons/BlueTickIconXY\";\r\n\r\nimport { toggleShareModal, toggleProductPageModal, toggleFollowersFollowingModal, closeAllModals } from \"stateManagement/reducers/modalReducer\";\r\n\r\nimport BookmarkIcon from \"components/icons/BookmarkIcon\";\r\nimport ShareIosIcon from \"components/icons/ShareIosIcon\";\r\nimport SaleIcon from \"components/icons/SaleIcon\";\r\nimport ThumbsUpIcon from \"components/icons/ThumbsUpGeneric\";\r\n\r\nimport blankFeedPost from \"../../sharedUtils/blankFeedPost\";\r\nimport { getProperties } from \"sharedUtils/postFunctions\";\r\nimport { getAuthorizedUserData } from \"sharedUtils/authUtils\";\r\nimport { getRequest, postRequest } from \"sharedUtils/httpUtils\";\r\nimport { convertToLocaleDateTimeString } from \"sharedUtils/timeUtils\"\r\nimport { handleCommentMarkup, replaceUrls } from \"sharedUtils/markupUtils\";\r\nimport { trimProductsArray } from \"sharedUtils/postFunctions\";\r\n//import createHistory from \"history/createBrowserHistory\";\r\nimport { getPostShareLink } from \"../../sharedUtils/shareLinkPrefixes\"\r\nimport InformationIcon from \"../../components/icons/InformationIcon\";\r\nimport { Helmet } from 'react-helmet';\r\n\r\nclass PostPage extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showMessageDetails: false,\r\n likes: {\r\n count: 0,\r\n likedByUser: false\r\n },\r\n loggedInUser: null,\r\n isAuthorized: false,\r\n commentInput: \"\",\r\n shareCode: \"\",\r\n post: blankFeedPost,\r\n showDescriptionModal: false,\r\n selectedProduct: 0,\r\n isLoading: true,\r\n loadingComments: false,\r\n productPage: 0,\r\n submittingComment: false,\r\n shareLink: \"\",\r\n savedByUser: false,\r\n collapsed: true,\r\n contentStyle: this.notOverflowedContentStyle,\r\n contentOverflowed: false,\r\n maxHeight: \"41px\",\r\n }\r\n }\r\n\r\n commentsTextArea = React.createRef();\r\n contentRef = React.createRef();\r\n bioRef = React.createRef();\r\n titleRef = React.createRef();\r\n picRef = React.createRef();\r\n userTileRef = React.createRef();\r\n editPostButtonRef = React.createRef();\r\n\r\n collapsedContentStyle = { marginTop: \"0em\", maxHeight: \"42px\", textOverflow: \"ellipsis\", overflow: \"hidden\" };\r\n notOverflowedContentStyle = { marginTop: \"0em\", marginBottom: \"0.5em\", maxHeight: \"42px\", textOverflow: \"ellipsis\", overflow: \"hidden\" };\r\n expandedContentStyle = { marginTop: \"0em\" };\r\n\r\n async componentDidMount() {\r\n if (this.props.setShowTopNav) {\r\n this.props.setShowTopNav(true, !!(window.location.search.toLowerCase().includes(\"showbrandnav=\")) ? this.props.showBrandNav(window.location.search) : true);\r\n }\r\n\r\n let shareCode = \"\";\r\n let post = null;\r\n let loggedInUser = null;\r\n\r\n let scrollOptions = {\r\n left: 0,\r\n top: 0,\r\n behavior: 'auto',\r\n lockerNotFound: true\r\n }\r\n\r\n if (this.props.isModal !== true) {\r\n window.scrollTo(scrollOptions);\r\n this.props.closeAllModals();\r\n }\r\n\r\n // from feed\r\n if (this.props.match.params != undefined && this.props.match.params.post != undefined) {\r\n shareCode = this.props.match.params.post.shareCode;\r\n post = this.props.match.params.post;\r\n loggedInUser = this.props.match.params.loggedInUser;\r\n // from modal\r\n } else if (this.props.location.state != undefined && this.props.location.state.destinationState != undefined && this.props.location.state.destinationState.params != undefined &&\r\n this.props.location.state.destinationState.params.post != undefined) {\r\n\r\n shareCode = this.props.location.state.destinationState.params.post.shareCode;\r\n post = { ...this.props.location.state.destinationState.params.post, comments: [] };\r\n loggedInUser = this.props.location.state.destinationState.params.loggedInUser;\r\n\r\n // from direct\r\n } else {\r\n shareCode = this.props.match.params.shareCode;\r\n loggedInUser = this.props.loggedInUser;\r\n }\r\n\r\n let shareLink = await getPostShareLink(shareCode);\r\n\r\n if (loggedInUser == undefined) {\r\n let data = await this.fetchPost(shareCode, false);\r\n if (data == undefined || data == null) {\r\n this.props.history.push(\"/NotFound\");\r\n //window.location.href = window.location.origin + \"/NotFound\";\r\n //this.setState({ post: \"notFound\", isLoading: false, shareCode, shareLink })\r\n } else {\r\n this.setState({ post: data, isLoading: false, shareCode, shareLink });\r\n }\r\n } else {\r\n if (post == undefined) {\r\n let data = await this.fetchPost(shareCode, true);\r\n if (data == undefined || data == null) {\r\n this.props.history.push(\"/NotFound\");\r\n //this.setState({ post: \"notFound\", isLoading: false, loggedInUser, shareCode, shareLink })\r\n } else {\r\n let isFollowing = await this.fetchIsFollowing(data.user?.id);\r\n this.setState({ post: data, isFollowing, isLoading: false, loggedInUser, shareCode, shareLink });\r\n\r\n this.fetchComments(0, 3);\r\n }\r\n } else {\r\n let trackBaseUrl = this.state.loggedInUser !== undefined ? `api/Post/TrackPostViewAuthorized` : `api/Post/TrackPostView`\r\n let trackPostViewUrl = `${trackBaseUrl}?userPostId=${post.id}&referrer=${document.referrer}`;\r\n\r\n getRequest(trackPostViewUrl);\r\n\r\n if (post.comments == undefined || post.comments.length == undefined) {\r\n post.comments = [];\r\n };\r\n await this.setState({ post: post, isLoading: false, loggedInUser, shareCode, shareLink });\r\n\r\n let isFollowing = await this.fetchIsFollowing(post.user?.id);\r\n this.setState({ isFollowing });\r\n if (post.comments.length === 0) {\r\n this.fetchComments(0, 3);\r\n }\r\n }\r\n }\r\n\r\n if (this.commentsTextArea?.current != null && this.props.isModal === true && this.props.isCommenting === true) {\r\n this.commentsTextArea.current.scrollIntoView();\r\n this.commentsTextArea.current.focus();\r\n }\r\n\r\n\r\n const savedByUser = this.props?.match?.params?.post?.savedByUser;\r\n this.setState({ savedByUser });\r\n\r\n // THIS IS LOGIC TO CALCULATE THE HEIGHT OF THE CONTENT FOR 'SEE MORE'\r\n // FOR DEVICE SIZES THAT ARE NOT SMALL - it determines if height of ProfileInfoCard \r\n // is less than the expanded < p > and then puts it in contentOverflowed as well as \r\n // calculate the height of the of the 'SEE MORE'
based on it's expanded size vs.\r\n // the size of the ProfileInfoCard and applies it to the styling.\r\n\r\n // SMALL DEVICES SET HEIGHT TO 2 LINES OF TEXT WHICH IS ~40px\r\n let contentOverflowed = false;\r\n\r\n const picHeight = this.picRef?.current?.offsetHeight;\r\n const userTileHeight = this.userTileRef?.current?.offsetHeight;\r\n const editButtonHeight = this.editPostButtonRef?.current?.offsetHeight;\r\n\r\n if (this.props.deviceSize === \"sm\" && this.contentRef?.current?.offsetHeight > 40) {\r\n this.setState({ contentOverflowed: true, contentStyle: this.collapsedContentStyle })\r\n }\r\n\r\n this.setState({ contentStyle: this.expandedContentStyle });\r\n const bioHeight = this.bioRef?.current?.offsetHeight;\r\n const contentHeight = this.contentRef?.current?.offsetHeight;\r\n const titleHeight = this.titleRef?.current?.offsetHeight;\r\n\r\n this.setState({ contentStyle: this.notOverflowedContentStyle })\r\n\r\n const largeScreenContentHeight = editButtonHeight == undefined && editButtonHeight == null ? userTileHeight + titleHeight : userTileHeight + editButtonHeight + titleHeight;\r\n\r\n if (this.props.deviceSize !== \"sm\" && picHeight < largeScreenContentHeight) {\r\n const overflow = largeScreenContentHeight - picHeight;\r\n const maxHeight = contentHeight - overflow > 80 ? Math.floor((contentHeight - overflow) / 20) * 20 - 60 + \"px\" : \"41px\";\r\n\r\n this.setState({ contentOverflowed: true, maxHeight, contentStyle: this.collapsedContentStyle })\r\n }\r\n\r\n this.collapsedContentStyle = { marginTop: \"0em\", maxHeight: this.props.deviceSize === \"sm\" ? \"42px\" : this.state.maxHeight, textOverflow: \"ellipsis\", overflow: \"hidden\" };\r\n this.notOverflowedContentStyle = { marginTop: \"0em\", marginBottom: \"0.5em\", maxHeight: this.props.deviceSize === \"sm\" ? \"42px\" : this.state.maxHeight, textOverflow: \"ellipsis\", overflow: \"hidden\" };\r\n this.expandedContentStyle = { marginTop: \"0em\" };\r\n\r\n if (this.state.contentOverflowed) {\r\n this.setState({ contentStyle: this.collapsedContentStyle });\r\n } else if (!contentOverflowed && this.props.deviceSize !== \"sm\") {\r\n this.setState({ contentStyle: this.expandedContentStyle })\r\n }\r\n }\r\n\r\n\r\n async componentDidUpdate(prevProps, prevState) {\r\n if (this.props?.match?.params?.shareCode != prevProps?.match?.params?.shareCode) {\r\n this.setState({ isLoading: true });\r\n\r\n let shareCode = this.props.match.params.shareCode;\r\n let isAuthorized = this.props.loggedInUser !== null;\r\n let post = !!(this.props.location?.state?.destinationState?.params?.post) ? this.props.location.state.destinationState?.params?.post : null;\r\n\r\n if (post == null || post == undefined) {\r\n post = await this.fetchPost(shareCode, isAuthorized);\r\n\r\n if (post == null || post == undefined) {\r\n this.props.history.push(\"/NotFound\");\r\n return -1\r\n }\r\n else {\r\n let isFollowing = await this.fetchIsFollowing(post.user?.id);\r\n\r\n await this.fetchLikes(shareCode, isAuthorized);\r\n await this.fetchComments(0, 25);\r\n this.setState({ isFollowing });\r\n }\r\n }\r\n \r\n \r\n\r\n this.setState({ post, isLoading:false });\r\n }\r\n }\r\n\r\n removeCommentUsername = text => {\r\n const regex = /#!\\^.*?\\)\\)\\)/g;\r\n return text.replace(regex, '');\r\n }\r\n\r\n fetchIsFollowing = async (userId) => {\r\n let url = `/api/Account/IsFollowing?id=${userId}`;\r\n let data = await getRequest(url);\r\n return data;\r\n //this.setState({ isFollowing: data });\r\n }\r\n\r\n // obsolete\r\n fetchLikes = async (shareCode, isAuthorized) => {\r\n let baseUrl = isAuthorized === true ? `/api/post/getLikesAuthorized` : `/api/post/getLikes`;\r\n let url = `${baseUrl}?shareCode=${shareCode}`;\r\n let data = await getRequest(url);\r\n this.setState({ likes: data });\r\n }\r\n\r\n fetchPost = async (shareCode, isAuthorized) => {\r\n let baseUrl = isAuthorized === true ? \"/api/post/getPostAuthorized\" : \"/api/post/getPost\";\r\n let url = `${baseUrl}?shareCode=${shareCode}&referrer=${document.referrer}`\r\n let data = await getRequest(url);\r\n\r\n return data;\r\n //this.setState({ post: data });\r\n }\r\n\r\n followAction = async () => {\r\n this.setState({ isFollowing: !this.state.isFollowing })\r\n\r\n let endpoint = this.state.isFollowing === true ? 'unfollow' : 'follow';\r\n let url = `/api/account/${endpoint}?id=${this.state.post.user.id}`\r\n let data = await getRequest(url);\r\n }\r\n\r\n fetchComments = async (skip = this.state.post.comments.length, take = 25) => {\r\n return;\r\n this.setState({ loadingComments: true });\r\n let baseUrl = this.state.loggedInUser !== undefined ? `/api/post/getCommentsAuthorized` : `/api/post/getComments`;\r\n let url = `${baseUrl}?shareCode=${this.state.shareCode}&skip=${skip}&take=${take}`;\r\n let data = await getRequest(url);\r\n let newState = { ...this.state };\r\n newState.post.comments = [...data, ...this.state.post.comments];\r\n\r\n this.setState({ ...newState, loadingComments: false });\r\n }\r\n\r\n handleCommentInput = (e) => {\r\n this.setState({ commentInput: e.target.value });\r\n }\r\n\r\n handleTextMarkup = (text) => {\r\n let urlHandled = replaceUrls(text);\r\n\r\n let markupHandled = urlHandled.map(retVal => {\r\n if (typeof retVal === 'string') {\r\n return handleCommentMarkup(retVal,true);\r\n }\r\n else {\r\n return retVal;\r\n }\r\n });\r\n\r\n return markupHandled;\r\n }\r\n\r\n likePost = async (shareCode) => {\r\n let num = this.state.post.likedByUser === true ? -1 : 1;\r\n let newLikes = {\r\n likeCount: this.state.post.likeCount + num,\r\n likedByUser: !this.state.post.likedByUser\r\n }\r\n let newPost = { ...this.state.post, ...newLikes };\r\n\r\n if (this.props.match && this.props.match.params && this.props.match.params.post) {\r\n this.props.match.params.post.likedByUser = newLikes.likedByUser;\r\n this.props.match.params.post.likeCount = newLikes.likeCount;\r\n }\r\n\r\n this.setState({ post: newPost }, async () => {\r\n let url = `/api/post/likePost?shareCode=${shareCode}`\r\n let data = await postRequest(url);\r\n });\r\n }\r\n\r\n likeComment = async (comment, key) => {\r\n let num = this.state.post.comments[key].likedByUser === true ? -1 : 1;\r\n let newState = { ...this.state };\r\n newState.post.comments[key].likes += num;\r\n newState.post.comments[key].likedByUser = !newState.post.comments[key].likedByUser;\r\n\r\n this.setState(newState, async () => {\r\n let requestObject = {\r\n id: comment.id,\r\n likedByUser: num < 0\r\n }\r\n\r\n let url = `/api/post/likeComment`;\r\n let data = await postRequest(url, requestObject);\r\n });\r\n\r\n }\r\n\r\n savePost = async (shareCode) => {\r\n let reqBody = { shareCode };\r\n\r\n let route = this.state.post.savedByUser === false ? `/api/post/savePost` : `/api/post/removeSavedPost`;\r\n let data = await postRequest(route, reqBody);\r\n\r\n let newPost = { ...this.state.post };\r\n newPost.savedByUser = !this.state.post.savedByUser\r\n\r\n if (this.props.match && this.props.match.params && this.props.match.params.post) {\r\n this.props.match.params.post.savedByUser = newPost.savedByUser;\r\n }\r\n\r\n this.setState({ post: newPost });\r\n }\r\n\r\n renderBookmarkOverlay = () => {\r\n const shareCode = this.props?.match?.params?.post?.shareCode;\r\n return (\r\n {\r\n if (this.props.loggedInUser) {\r\n e.preventDefault();\r\n let savedByUser = !this.state.savedByUser;\r\n this.setState({ savedByUser });\r\n this.savePost(shareCode);\r\n } else {\r\n this.props.toggleSignUpModal();\r\n }\r\n\r\n }} style={{ cursor: \"pointer\" }}>\r\n );\r\n }\r\n\r\n renderShareOverlay = () => {\r\n return ( {\r\n this.props.toggleShareModal(this.state.shareLink)\r\n }} style={{ cursor: \"pointer\" }}>\r\n );\r\n }\r\n\r\n renderSaleOverlay = (sale) => {\r\n if (sale && [\"sm\", \"md\"].includes(this.props.deviceSize)) {\r\n return (\r\n \r\n \r\n );\r\n }\r\n }\r\n\r\n onClickMessage = async () => {\r\n this.setState({ showMessageDetails: true });\r\n }\r\n\r\n onClickBack = async () => {\r\n this.setState({ showMessageDetails: false });\r\n }\r\n\r\n postComment = async () => {\r\n this.setState({ submittingComment: true });\r\n\r\n let dataToPost = {\r\n text: this.state.commentInput\r\n }\r\n let shareCode = this.state.post.shareCode;\r\n let url = `/api/post/postComment?shareCode=${shareCode}&postType=${this.state.post.type}`;\r\n\r\n var createdOn = new Date();\r\n createdOn.setSeconds(createdOn.getSeconds() - 1);\r\n let dummyComment = {\r\n likedByUser: false,\r\n likes: 0,\r\n replyCount: 0,\r\n text: this.state.commentInput,\r\n user: this.state.loggedInUser,\r\n createdOn: new Date()\r\n };\r\n\r\n let comments = [...this.state.post.comments];\r\n comments.push(dummyComment);\r\n\r\n let newState = { ...this.state };\r\n newState.commentInput = \"\";\r\n newState.post.comments = comments;\r\n newState.post.commentCount += 1;\r\n\r\n if (this.props.match && this.props.match.params && this.props.match.params.post) {\r\n this.props.match.params.post.comments = [...newState.post.comments];\r\n this.props.match.params.post.commentCount = newState.post.commentCount;\r\n this.props.match.params.post.totalCount = newState.post.totalCount;\r\n }\r\n\r\n this.setState(newState, async () => {\r\n var response = await postRequest(url, dataToPost);\r\n this.setState({ submittingComment: false });\r\n });\r\n }\r\n\r\n prevPage = () => {\r\n let page = this.state.productPage - 1;\r\n if (page < 0) {\r\n page = Math.floor(this.state.post.productItems?.$values?.length / 4);\r\n }\r\n\r\n this.setState({ productPage: page });\r\n }\r\n\r\n nextPage = () => {\r\n let page = this.state.productPage + 1;\r\n if (page * 4 > this.state.post.productItems?.$values?.length) {\r\n page = 0;\r\n }\r\n\r\n this.setState({ productPage: page });\r\n }\r\n\r\n renderProductPagination = () => {\r\n if (this.state.post.productItems?.$values?.length > 4) {\r\n return (\r\n <>\r\n {\r\n e.preventDefault();\r\n this.prevPage()\r\n }}>\r\n \r\n {\"<\"}\r\n \r\n \r\n\r\n \r\n {this.state.post.productItems?.$values?.length}\r\n \r\n\r\n {\r\n e.preventDefault();\r\n this.nextPage()\r\n }}>\r\n \r\n {\">\"}\r\n \r\n \r\n \r\n );\r\n }\r\n }\r\n\r\n toTitleCase = (string) => {\r\n return string.toLowerCase().replace(/(?:^|\\s|-)\\w/g, function (match) {\r\n return match.toUpperCase();\r\n });\r\n } \r\n\r\n renderInfoOverlay = (product) => {\r\n return {\r\n this.props.toggleProductPageModal(product, this.props.loggedInUser, false, () => null)\r\n }} style={{ cursor: \"pointer\" }}>\r\n \r\n }\r\n\r\n renderThumbsUpOverlay = (product) => {\r\n const productId = !!(product.productId) ? product.productId : product.id;\r\n\r\n if (!(product.creatorCount) || product.creatorCount === 0) {\r\n return <>;\r\n }\r\n\r\n return (\r\n this.toggleCreatorsModal(productId)} style={{ cursor: \"pointer\", top: \"15px\" }}>\r\n {!!(product.creatorCount) ? product.creatorCount : \"\"} \r\n \r\n )\r\n\r\n }\r\n\r\n toggleCreatorsModal = (productId) => {\r\n const followersFollowing = \"creators\";\r\n this.props.toggleFollowersFollowingModal(!!(this.props.loggedInUser) ? this.props.loggedInUser.id : -1, followersFollowing, productId);\r\n }\r\n\r\n renderProductImages = () => {\r\n return trimProductsArray(this.state.post.productItems?.$values)?.sort(function (a, b) {\r\n return a.ordinal - b.ordinal;\r\n }).map((val, i) => {\r\n return (\r\n
\r\n
\r\n
\r\n {this.renderInfoOverlay(val)}\r\n {this.renderThumbsUpOverlay(val)}\r\n
this.toggleDescriptionModal(i)}\r\n post={this.state.post}\r\n loggedInUser={this.state.loggedInUser}\r\n parentModal={this.props.isModal === true ? { type: \"post\", shareCode: this.props.match.params?.post?.shareCode, parentState: { ...this.state.post } } : null}\r\n />\r\n \r\n
\r\n
\r\n
{val.manufacturer?.toLowerCase().includes(\"rcktemp\") ? val.merchant : val.manufacturer}{val.sale && !!(val.salePrice) && ![\"sm\", \"md\"].includes(this.props.deviceSize) ?
\r\n
\r\n
\r\n
\r\n \r\n
\r\n {this.toTitleCase(val.name)}\r\n
\r\n
\r\n
\r\n
\r\n
{val.sale && !!(val.salePrice) ? \"$\" + val.salePrice.toFixed(2) : <>}
${val.sale && !!(val.salePrice) && !!(val.originalPrice) ? val.originalPrice.toFixed(2) : val.price.toFixed(2)}
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n {this.state.post.productItems?.$values[this.state.selectedProduct].comment}
\r\n \r\n )\r\n }\r\n }\r\n\r\n renderCommentForm = () => {\r\n if (this.state.loggedInUser) {\r\n return (\r\n \r\n )\r\n }\r\n }\r\n\r\n renderCommentSectionHeading = () => {\r\n let commentCount = this.state.post.comments.length;\r\n let totalComments = this.state.post.commentCount;\r\n if (commentCount === 0) {\r\n return \"No Comments\";\r\n }\r\n else if (commentCount === 1) {\r\n return `${commentCount} comment`\r\n }\r\n else {\r\n return `${commentCount} of ${totalComments} comments`\r\n }\r\n }\r\n\r\n renderSectors = () => {\r\n return this.state.post.sectors?.$values?.map((sector, i) => {\r\n return (\r\n \r\n {sector.sector.name}\r\n \r\n )\r\n });\r\n }\r\n\r\n contentSection = () => {\r\n if (!this.state.contentOverflowed) {\r\n return (\r\n \r\n
\r\n {this.handleTextMarkup(this.state.post?.content)}\r\n
\r\n
\r\n
\r\n
\r\n {this.handleTextMarkup(this.state.post?.content)}\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {this.handleTextMarkup(this.state.post?.content)}\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n {handleCommentMarkup(this.state.post.content, true)}\r\n
\r\n )\r\n } else {\r\n if (this.state.collapsed) {\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n \r\n {handleCommentMarkup(this.state.post.content, true)}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n {handleCommentMarkup(this.state.post.content, true)}\r\n
\r\n
\r\n
\r\n
{\r\n if (this.props.loggedInUser) {\r\n this.followAction()\r\n } else {\r\n this.props.toggleSignUpModal();\r\n }\r\n }}\r\n className=\"btn modal-follow-btn\">{this.state.isFollowing ? \"Unfollow -\" : \"Follow +\"} \r\n )\r\n }\r\n }\r\n\r\n truncateContentForTitle(str) {\r\n if (str.length <= 20) {\r\n return str;\r\n } else {\r\n return str.substr(0, 20) + \"...\";\r\n }\r\n }\r\n\r\n getPageTitle = () => {\r\n const shareCode = this.props.match?.params?.shareCode;\r\n\r\n return \"RockPorch - Post: \" + shareCode;\r\n };\r\n\r\n\r\n render() {\r\n if (this.state.post === \"notFound\") {\r\n return Post not found \r\n }\r\n\r\n let commentCount = this.state.post?.comments?.length;\r\n let postImages = getProperties(this.state.post?.properties)\r\n .filter(property => property?.parentId == null && (property?.role === 0 || property?.role === 1 || property?.role === 3))\r\n .map(property => {\r\n return {\r\n url: property?.value,\r\n role: property?.role,\r\n id: property?.id,\r\n width: property?.width,\r\n height: property?.height\r\n }\r\n });\r\n\r\n let { userName, imageUrl } = this.state.post?.user;\r\n let webLayouts = [\"md\", \"lg\", \"xl\"];\r\n let { deviceSize, isModal } = this.props;\r\n\r\n if (this.state.isLoading === true) {\r\n return (\r\n <>\r\n < LoadSpinner />\r\n {\r\n !!(this.props.isModal) ?\r\n <>\r\n :\r\n \r\n {this.getPageTitle()} \r\n \r\n }\r\n \r\n )\r\n }\r\n\r\n let parsedDate = convertToLocaleDateTimeString(new Date(this.state.post?.postedOn), false)\r\n\r\n if (this.state.showMessageDetails) {\r\n return (\r\n <>\r\n \r\n {this.getPageTitle()} \r\n \r\n }\r\n \r\n )\r\n }\r\n\r\n //if the post isn't published, redirect to HomeFeed\r\n if ([0, 2, 6].includes(this.state.post.status) === true && this.state.post.user.id !== this.state.loggedInUser?.id && this.props.isModal !== true) {\r\n return (\r\n <>\r\n \r\n {this.getPageTitle()} \r\n \r\n }\r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n {\r\n !!(this.props.isModal) ?\r\n <>\r\n :\r\n \r\n {this.getPageTitle()} \r\n \r\n }\r\n {this.renderDescriptionModal()}\r\n\r\n {\r\n this.props.deviceSize === \"sm\" ? (\r\n \r\n\r\n
\r\n
\r\n
\r\n {this.renderFollowButton()}\r\n
\r\n
\r\n
\r\n {this.renderBookmarkOverlay()}\r\n {this.renderShareOverlay()}\r\n
\r\n\r\n\r\n
\r\n\r\n {\r\n webLayouts.includes(this.props.deviceSize) ? (\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {this.renderFollowButton()}\r\n
\r\n
\r\n {\r\n this.state.loggedInUser?.id === this.state.post.user.id ? (\r\n
\r\n \r\n \r\n Edit Post\r\n \r\n \r\n \r\n
\r\n\r\n ) :
\r\n }\r\n\r\n {this.contentSection()}\r\n
\r\n\r\n ) : null\r\n }\r\n
\r\n
\r\n\r\n {\r\n this.props.deviceSize === \"sm\" ? (\r\n
\r\n
\r\n {this.contentSectionSmall()}\r\n
\r\n
\r\n
\r\n\r\n ) : null\r\n }\r\n\r\n {\r\n this.state.post?.productItems?.$values?.length > 0 ? (\r\n
\r\n
= 4 ? \" justify-content-left\" : \"justify-content-center\"} px-0 position-relative mt-2`}>\r\n {this.renderProductImages()}\r\n
\r\n
\r\n\r\n ) : null\r\n }\r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapDispatch = {\r\n toggleShareModal: toggleShareModal,\r\n closeAllModals: closeAllModals,\r\n toggleProductPageModal, toggleProductPageModal,\r\n toggleFollowersFollowingModal: toggleFollowersFollowingModal,\r\n}\r\n\r\nexport default connect(null, mapDispatch)(PostPage);","import React, { useEffect } from \"react\";\r\nimport Modal from \"components/Modal\";\r\nimport PostPage from \"views/Post/PostPage\";\r\nimport { connect } from \"react-redux\";\r\nimport { togglePostPageModal,toggleProductPageModal } from \"stateManagement/reducers/modalReducer\";\r\n\r\n\r\n/**\r\n * \r\n * @param {{post:object,loggedInUser:object,showModal:boolean, deviceSize:string, parentModal:{type:string,parentState:object}}} props\r\n */\r\nconst PostPageModal = (props) => {\r\n let paramProps = {\r\n params: {\r\n post: props.post,\r\n loggedInUser: props.loggedInUser,\r\n setPost: props.setPost\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (props.showModal) {\r\n document.querySelector(\"body\").style.overflow = \"hidden\";\r\n } else {\r\n document.querySelector(\"body\").style.overflow = \"\";\r\n }\r\n }, [props.showModal]);\r\n\r\n return (\r\n {\r\n\r\n if (props.parentModal !== null) {\r\n switch (props.parentModal?.type) {\r\n case \"product\": {\r\n props.toggleProductModal(props.parentModal.parentState, props.loggedInUser, false, null, null);\r\n break;\r\n }\r\n default: {\r\n props.toggleModal(props.post, props.loggedInUser, false, props.setPost);\r\n break;\r\n }\r\n }\r\n }\r\n else {\r\n props.toggleModal(props.post, props.loggedInUser, false, props.setPost)\r\n }\r\n \r\n }}\r\n showHeader={true}\r\n showThreeDotMenu={props.loggedInUser ? true : false}\r\n loggedInUser={props.loggedInUser}\r\n post={props.post}\r\n modalDialogCustomClass=\"modal-dialog-md\"\r\n modalHeaderRedirect={`/Post/PostPage/${props.post?.shareCode}`}\r\n state={paramProps}\r\n >\r\n \r\n {\r\n props.isSelected === true ? (\r\n\r\n \r\n \r\n );\r\n }\r\n }\r\n\r\n return (\r\n {\r\n e.preventDefault();\r\n if (props.isExisting === false) {\r\n props.select(props.product);\r\n }\r\n }}\r\n className=\"custom-cards d-block w-100\"\r\n >\r\n \r\n {displayCheckBox()}\r\n
\r\n \r\n\r\n
\r\n
{props.product.name}
\r\n
\r\n Estimated Commission* \r\n\r\n {/*\r\n \r\n \r\n\r\n \r\n Commissions are estimated based on factors including merchant rates, pricing, attribution methods (e.g., Mod1 or other), and fees at the time of a consumer's purchase. \r\n \r\n */}\r\n
\r\n
\r\n Price \r\n {\r\n props.product.sale && !!(props.product.salePrice) ?\r\n
{props.product.sale && !!(props.product.salePrice) ? \"$\" + props.product.salePrice.toFixed(2) : <>}
${props.product.sale && !!(props.product.salePrice) && !!(props.product.originalPrice) ? props.product.originalPrice.toFixed(2) : props.product.price.toFixed(2)}
\r\n \r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default ProductSelectCard;","import React, { useState, useEffect } from \"react\";\r\nimport { getRequest } from \"sharedUtils/httpUtils\";\r\nimport { getAuthorizedUserData } from \"sharedUtils/authUtils\";\r\nimport ProductSelectCard from \"components/ProductSelectCard\";\r\nimport LoadSpinner from \"components/LoadSpinner\";\r\nimport InfiniteScroll from \"react-infinite-scroll-component\";\r\n\r\n/**\r\n * \r\n * @param {{postShareCode:string, existingProducts:object[], selectProduct:Function, selectedProducts:object[], searchFilter:string, deviceSize:string}} props\r\n */\r\nconst ProductsSelectorForm = (props) => {\r\n let [products, setProducts] = useState([]);\r\n let [filteredProducts, setFilteredProducts] = useState([]);\r\n let [loggedInUser, setUser] = useState({});\r\n let [loading, setLoading] = useState(true);\r\n let [loadingMore, setLoadingMore] = useState(false);\r\n let [take, setTake] = useState(100);\r\n let [searchProp, setSearchProp] = useState(\"\");\r\n let [finishedFetchingProducts, setFinishedFetchingProducts] = useState(false);\r\n useEffect(() => {\r\n loadData(0,take);\r\n }, [])\r\n\r\n useEffect(() => {\r\n if (props.searchFilter.length !== 0 || searchProp !== props.searchFilter) {\r\n loadSearch(props.searchFilter);\r\n }\r\n setSearchProp(props.searchFilter);\r\n }, [props.searchFilter])\r\n\r\n const loadSearch = async () => {\r\n await fetchProductsForSearch(0);\r\n }\r\n\r\n function concatMerchantProduct(product) {\r\n if (product.name.toLowerCase().indexOf(product.manufacturer.toLowerCase()) === 0) {\r\n return product.name;\r\n }\r\n return (product.manufacturer + ' ' + product.name).trim();\r\n }\r\n\r\n async function loadData(skip, take) {\r\n let user = await fetchUser();\r\n let products = await fetchProducts(user.userName, skip, take);\r\n\r\n setUser(user);\r\n setProducts(products);\r\n setFilteredProducts(products);\r\n }\r\n\r\n async function fetchUser() {\r\n let user = await getAuthorizedUserData();\r\n return user;\r\n }\r\n\r\n async function fetchProducts(userName, skip, take) {\r\n let data = await getRequest(`/Products/GetUserMerchantProducts/?userName=${userName}&skip=${skip}&take=${take}&searchTerm=${props.searchFilter}`);\r\n let products = data?.map((product) => {\r\n return { ...product, name: concatMerchantProduct(product) }\r\n });\r\n setFinishedFetchingProducts(products?.length < take || products == null || products == undefined);\r\n setLoading(false);\r\n return !!(products) ? products : [];\r\n }\r\n\r\n const fetchProductsForSearch = async (skip) => {\r\n setLoading(true);\r\n setProducts([]);\r\n setFilteredProducts([]);\r\n\r\n let products = await fetchProducts(loggedInUser.userName, skip, take);\r\n\r\n setProducts(products);\r\n setFilteredProducts(products);\r\n }\r\n\r\n const fetchMore = async () => {\r\n setLoadingMore(true);\r\n let skip = filteredProducts.length;\r\n\r\n let products = await fetchProducts(loggedInUser.userName, skip, take);\r\n\r\n const totalProducts = [...filteredProducts, ...products];\r\n\r\n setProducts(totalProducts);\r\n setFilteredProducts(totalProducts);\r\n\r\n setLoadingMore(false);\r\n }\r\n\r\n function handleSelect(product) {\r\n props.selectProduct(product);\r\n }\r\n\r\n function isProductSelected(productShareCode) {\r\n let found = props.selectedProducts.find((product) => {\r\n return product.shareCode === productShareCode\r\n });\r\n if (found === undefined) {\r\n return false;\r\n } else {\r\n return true;\r\n }\r\n }\r\n\r\n function isProductExisting(productShareCode) {\r\n var existing = props.existingProducts.find((prod) => prod.userMerchantProduct?.coupon === productShareCode);\r\n if (existing === undefined) {\r\n return false\r\n }\r\n else {\r\n return true;\r\n }\r\n }\r\n\r\n function mapProducts() {\r\n if (products.length > 0) {\r\n\r\n return filteredProducts.map((product, i) => {\r\n\r\n return (\r\n \r\n )\r\n\r\n })\r\n }\r\n }\r\n\r\n if (loading) {\r\n return \r\n
\r\n
\r\n
\r\n
\r\n \r\n No products in your inventory match your search criteria. Try again with a new search.\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n Looks like you haven't added any products yet! Click here to get started and products from our partners that you can include in posts and lockers\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {props.selectedProducts.length} {text}\r\n
\r\n )\r\n }\r\n else {\r\n return null\r\n }\r\n }\r\n\r\n return (\r\n \r\n
\r\n {displayCount()}\r\n {\r\n props.selectedProducts.length === 0 ? (\r\n
\r\n
\r\n Estimated Commission\r\n * \r\n \r\n
\r\n \r\n Commissions are estimated based on factors including merchant rates, pricing, attribution methods (e.g., Mod1 or other), and fees at the time of consumer's purchase\r\n \r\n \r\n
\r\n ):
\r\n \r\n }\r\n
{\r\n setIsAdding(true);\r\n await props.addToLocker(props.selectedProducts)\r\n setIsAdding(false);\r\n }}>\r\n Add\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n Are you sure you want to delete the product?
\r\n Cancel \r\n props.confirmDelete(props.coupon)}>Confirm \r\n \r\n )\r\n}\r\n\r\n\r\nexport default DeleteProductConfirm;","import React, { useState } from \"react\";\r\nimport FormTextArea from \"components/FormTextArea\";\r\nimport ActionButton from \"components/ActionButton\";\r\n\r\n/**\r\n * \r\n * @param {{productComment:string,cancel:Function,save:Function}} props\r\n */\r\nconst EditProductCommentForm = (props) => {\r\n let [formInput, setFormInput] = useState(props.productComment);\r\n let [isSaving, setIsSaving] = useState(false);\r\n return (\r\n \r\n
\r\n
Product Notes \r\n\r\n
\r\n
setFormInput(e.target.value)}\r\n type=\"textarea\"\r\n value={formInput}\r\n rows={4}\r\n inputStyle={{ backgroundColor: \"#e9ecef\" }}\r\n placeholder=\"Explain why this product is relevant to the locker (e.g., what is it used for, why is it included, how does it make this pursuit easier, etc.)\"\r\n />\r\n\r\n \r\n
\r\n Cancel\r\n \r\n\r\n\r\n
{\r\n setIsSaving(true);\r\n await props.save(formInput);\r\n setIsSaving(false);\r\n }}\r\n isLoading={isSaving}\r\n isDisabled={!formInput.length > 0}\r\n >\r\n Add Note\r\n \r\n\r\n\r\n
\r\n
\r\n
FOR 'SEE MORE'\r\n // FOR DEVICE SIZES THAT ARE NOT SMALL - it determines if height of ProfileInfoCard \r\n // is less than the expanded < p > and then puts it in contentOverflowed as well as \r\n // calculate the height of the of the 'SEE MORE'
based on it's expanded size vs.\r\n // the size of the ProfileInfoCard and applies it to the styling.\r\n\r\n // SMALL DEVICES SET HEIGHT TO 2 LINES OF TEXT WHICH IS ~40px\r\n let contentOverflowed = false;\r\n let bioHeight;\r\n let titleHeight;\r\n let contentHeight;\r\n\r\n if (this.props?.deviceSize === \"sm\") {\r\n if (this.contentRef?.current?.offsetHeight > 40) {\r\n contentOverflowed = true;\r\n }\r\n } else {\r\n bioHeight = this.bioRef?.current?.offsetHeight;\r\n\r\n this.setState({ contentStyle: this.expandedContentStyle });\r\n\r\n titleHeight = this.titleRef?.current?.scrollHeight;\r\n\r\n if (bioHeight < titleHeight) {\r\n contentOverflowed = true;\r\n }\r\n this.setState({ contentStyle: this.notOverflowedContentStyle })\r\n }\r\n\r\n if (this.props?.deviceSize !== \"sm\" && contentOverflowed) {\r\n this.setState({ contentStyle: this.expandedContentStyle })\r\n const overflow = titleHeight - bioHeight;\r\n\r\n contentHeight = this.contentRef?.current?.offsetHeight;\r\n\r\n const maxHeight = contentHeight - overflow > 40 ? Math.floor((contentHeight - overflow) / 20) * 20 - 20 + \"px\" : \"41px\";\r\n\r\n this.setState({ maxHeight, contentStyle: this.notOverflowedContentStyle })\r\n }\r\n\r\n this.collapsedContentStyle = { marginTop: \"0em\", maxHeight: this.props.deviceSize === \"sm\" ? \"42px\" : this.state.maxHeight, textOverflow: \"ellipsis\", overflow: \"hidden\" };\r\n this.notOverflowedContentStyle = { marginTop: \"0em\", marginBottom: \"0.5em\", maxHeight: this.props.deviceSize === \"sm\" ? \"42px\" : this.state.maxHeight, textOverflow: \"ellipsis\", overflow: \"hidden\" };\r\n this.expandedContentStyle = { marginTop: \"0em\", fontWeight: 500 };\r\n\r\n if (contentOverflowed) {\r\n this.setState({ contentOverflowed: contentOverflowed, contentStyle: this.collapsedContentStyle });\r\n } else if (!contentOverflowed && this.props.deviceSize !== \"sm\") {\r\n this.setState({ contentStyle: this.expandedContentStyle })\r\n }\r\n }\r\n\r\n async componentDidUpdate(prevProps, prevState) {\r\n if (prevProps.loggedInUser != this.props.loggedInUser) {\r\n this.setState({ loggedInUser: this.props.loggedInUser })\r\n }\r\n if (this.props?.match?.params?.shareCode != prevProps?.match?.params?.shareCode) {\r\n\r\n this.setState({ isLoading: true });\r\n\r\n let shareCode = this.props.match.params.shareCode;\r\n let isAuthorized = this.props.loggedInUser !== null;\r\n let post = this.props.location?.state?.destinationState?.params?.post\r\n\r\n if (post == null || post == undefined) {\r\n post = await this.getPageData(shareCode, isAuthorized);\r\n\r\n if (post == null || post == undefined) {\r\n this.props.history.push(\"/NotFound\");\r\n return -1\r\n }\r\n else {\r\n let isFollowing = await this.fetchIsFollowing(post.user?.id);\r\n\r\n this.setState({ isFollowing });\r\n }\r\n }\r\n\r\n this.setState({ locker: post, isLoading: false });\r\n }\r\n this.updatePosition();\r\n\r\n // Add event listener for the resize event\r\n window.addEventListener('resize', this.updatePosition);\r\n }\r\n\r\n componentWillUnmount() {\r\n // Remove the event listener when the component is unmounted\r\n window.removeEventListener('resize', this.updatePosition);\r\n }\r\n\r\n updatePosition = () => {\r\n if (!!(this.contentRef.current) && !!(this.blogTitleRef.current) && !!(this.blogPageRef.current)) {\r\n // Get the bounding rectangle of the contentRef relative to the component\r\n const contentRect = this.contentRef.current.getBoundingClientRect();\r\n const componentRect = this.blogPageRef.current.getBoundingClientRect();\r\n\r\n // Calculate the left position of the contentRef within the component\r\n const left = contentRect.left - componentRect.left;\r\n\r\n // Use the left position to position the elementToPosition within the component\r\n const elementToPosition = this.blogTitleRef.current;\r\n elementToPosition.style.left = `${left}px`;\r\n elementToPosition.style.marginRight = `${left}px`;\r\n }\r\n };\r\n\r\n removeCommentUsername = text => {\r\n const regex = /#!\\^.*?\\)\\)\\)/g;\r\n return text.replace(regex, '');\r\n }\r\n\r\n fetchIsFollowing = async (userId) => {\r\n let url = `/api/Account/IsFollowing?id=${userId}`;\r\n let data = await getRequest(url);\r\n return data;\r\n //this.setState({ isFollowing: data });\r\n }\r\n\r\n componentWillUnmount() {\r\n document.removeEventListener(\"_productAddedEvent\", this.refreshLocker);\r\n window.removeEventListener(\"storage\", () => { });\r\n }\r\n\r\n followAction = async () => {\r\n this.setState({ isFollowing: !this.state.isFollowing })\r\n\r\n let endpoint = this.state.isFollowing === true ? 'unfollow' : 'follow';\r\n let url = `/api/account/${endpoint}?id=${this.state.locker.user.id}`\r\n let data = await getRequest(url);\r\n }\r\n\r\n renderFollowButton() {\r\n if (this.state.isFollowing != undefined && this.state.isFollowing != null && (this.props.loggedInUser == null || this.props.loggedInUser.id !== this.state.locker.user.id)) {\r\n return (\r\n {\r\n if (this.props.loggedInUser) {\r\n this.followAction()\r\n } else {\r\n this.props.toggleSignUpModal();\r\n }\r\n }}\r\n className=\"btn modal-follow-btn\">{this.state.isFollowing ? \"Unfollow -\" : \"Follow +\"} \r\n )\r\n }\r\n }\r\n\r\n renderInfoOverlay = (product) => {\r\n return {\r\n this.props.toggleProductPageModal(product, this.props.loggedInUser, false, () => null)\r\n }} style={{ cursor: \"pointer\" }}>\r\n \r\n }\r\n\r\n renderThumbsUpOverlay = (product) => {\r\n const productId = !!(product.productId) ? product.productId : product.id;\r\n if (!(product.creatorCount) || product.creatorCount === 0) {\r\n return <>;\r\n }\r\n\r\n return (\r\n this.toggleCreatorsModal(productId)} style={{ cursor: \"pointer\", top: \"15px\" }}>\r\n {!!(product.creatorCount) ? product.creatorCount : \"\"} \r\n \r\n )\r\n\r\n }\r\n\r\n toggleCreatorsModal = (productId) => {\r\n const followersFollowing = \"creators\";\r\n this.props.toggleFollowersFollowingModal(!!(this.props.loggedInUser) ? this.props.loggedInUser.id : -1, followersFollowing, productId);\r\n }\r\n\r\n addProductsToLocker = async (products) => {\r\n let newState = { ...this.state };\r\n products.forEach((prod) => prod.coupon = prod.shareCode);\r\n let productMap = products.map((prod) => {\r\n return {\r\n userMerchantProduct: { ...prod, product: prod }\r\n }\r\n });\r\n newState.locker.productItems.$values = [...this.state.locker.productItems?.$values, ...productMap];\r\n\r\n this.setState({ locker: newState.locker });\r\n\r\n var userMerchantProductIds = products.map((prod) => prod.userMerchantProductId);\r\n var added = await postRequest(`/api/Post/addPostProducts?shareCode=${this.state.locker.shareCode}`, userMerchantProductIds);\r\n\r\n await this.getPageData(this.state.locker.shareCode, true);\r\n }\r\n\r\n toTitleCase = (string) => {\r\n return string.toLowerCase().replace(/(?:^|\\s|-)\\w/g, function (match) {\r\n return match.toUpperCase();\r\n });\r\n }\r\n\r\n displayProductImages = () => {\r\n return trimProductsArray(this.state.locker.productItems?.$values)?.sort(function (a, b) {\r\n return a.ordinal - b.ordinal;\r\n }).map((val, i) => {\r\n if (this.state.isEditingProducts === true) {\r\n return (\r\n \r\n \r\n this.setState({ deletingProduct: { isDeleting: true, coupon: val.userMerchantProduct.coupon } })}\r\n >\r\n × \r\n \r\n
\r\n \r\n
\r\n
\r\n
this.toggleDescriptionModal(i)}\r\n post={this.state.locker}\r\n loggedInUser={this.state.loggedInUser}\r\n locker={true}\r\n />\r\n \r\n
\r\n
\r\n
{val.manufacturer?.toLowerCase().includes(\"rcktemp\") ? val.merchant : val.manufacturer}{val.sale && !!(val.salePrice) && ![\"sm\", \"md\"].includes(this.props.deviceSize) ?
\r\n
\r\n
\r\n
\r\n \r\n
\r\n {this.toTitleCase(val.name)}\r\n
\r\n
\r\n
\r\n
\r\n
{val.sale && !!(val.salePrice) ? \"$\" + val.salePrice.toFixed(2) : <>}
${val.sale && !!(val.salePrice) && !!(val.originalPrice) ? val.originalPrice.toFixed(2) : val.price.toFixed(2)}
\r\n
\r\n
\r\n
\r\n
\r\n )\r\n } else {\r\n return (\r\n
\r\n
\r\n
\r\n {this.renderInfoOverlay(val)}\r\n {this.renderThumbsUpOverlay(val)}\r\n
this.toggleDescriptionModal(i)}\r\n post={this.state.locker}\r\n locker={true}\r\n parentModal={this.props.isModal === true ? { type: \"locker\", shareCode: this.props.match.params?.post?.shareCode, parentState: { ...this.state.locker } } : null}\r\n />\r\n \r\n
\r\n
\r\n
{val.manufacturer?.toLowerCase().includes(\"rcktemp\") ? val.merchant : val.manufacturer}{val.sale && !!(val.salePrice) && ![\"sm\", \"md\"].includes(this.props.deviceSize) ?
\r\n
\r\n
\r\n
\r\n \r\n
\r\n {this.toTitleCase(val.name)}\r\n
\r\n
\r\n
\r\n
\r\n
{val.sale && !!(val.salePrice) ? \"$\" + val.salePrice.toFixed(2) : <>}
${val.sale && !!(val.salePrice) && !!(val.originalPrice) ? val.originalPrice.toFixed(2) : val.price.toFixed(2)}
\r\n
\r\n
\r\n
\r\n
Edit Blog \r\n \r\n )\r\n }\r\n }\r\n\r\n displayBanner = () => {\r\n const redirectUrl = getProperties(this.state.locker?.properties).filter(property => property.role === 6)[0]?.value;\r\n\r\n let postImages = getProperties(this.state.locker?.properties)\r\n .filter(property => property?.parentId == null && (property?.role === 0 || property?.role === 1 || property?.role === 3))\r\n .map(property => {\r\n return {\r\n url: property?.value,\r\n role: property?.role,\r\n id: property?.id,\r\n width: property?.width,\r\n height: property?.height\r\n }\r\n });\r\n return (\r\n \r\n
window.open(redirectUrl)}\r\n imageStyle={{ cursor: \"pointer\" }}\r\n />\r\n {\r\n this.props.deviceSize === \"sm\" ?\r\n {this.state.locker.title} \r\n :\r\n {this.state.locker.title} \r\n }\r\n {\r\n if (this.props.loggedInUser) {\r\n e.preventDefault();\r\n let savedByUser = !this.state.savedByUser;\r\n this.setState({ savedByUser });\r\n this.saveLocker(shareCode);\r\n } else {\r\n this.props.toggleSignUpModal();\r\n }\r\n\r\n }} style={{ cursor: \"pointer\" }} >\r\n );\r\n }\r\n\r\n renderShareOverlay = () => {\r\n return ( {\r\n this.props.toggleShareModal(this.state.shareLink)\r\n }} style={{ cursor: \"pointer\", }}>\r\n );\r\n }\r\n\r\n displayProductEditButtons = () => {\r\n if (this.state.loggedInUser?.id === this.state.locker?.user?.id && this.props.modal === false) {\r\n return (\r\n \r\n
\r\n \r\n\r\n
{\r\n let isEditing = !this.state.isEditingProducts;\r\n this.setState({ isEditingProducts: isEditing })\r\n }}>\r\n \r\n
\r\n {tag.sector.name}\r\n \r\n )\r\n })\r\n }\r\n\r\n getPageData = async (shareCode, isAuthorized) => {\r\n let url = isAuthorized === true ? `/api/post/getPostAuthorized?shareCode=${shareCode}&referrer=${document.referrer}` : `/api/post/getPost?shareCode=${shareCode}&referrer=${document.referrer}`;\r\n let response = await getRequest(url);\r\n return response;\r\n //this.setState({ locker: response });\r\n }\r\n\r\n fetchComments = async (skip = this.state.locker.comments.length, take = 25) => {\r\n return;\r\n this.setState({ loadingComments: true });\r\n let baseUrl = this.state.loggedInUser !== undefined ? `/api/post/getCommentsAuthorized` : `/api/post/getComments`;\r\n let url = `${baseUrl}?shareCode=${this.state.shareCode}&skip=${skip}&take=${take}`;\r\n let data = await getRequest(url);\r\n let newState = { ...this.state };\r\n newState.locker.comments = [...data, ...this.state.locker.comments];\r\n\r\n this.setState({ ...newState, loadingComments: false });\r\n }\r\n\r\n likeLocker = async (shareCode) => {\r\n let num = this.state.locker.likedByUser === true ? -1 : 1;\r\n let newLikes = {\r\n likeCount: this.state.locker.likeCount + num,\r\n likedByUser: !this.state.locker.likedByUser\r\n }\r\n let newLocker = { ...this.state.locker, ...newLikes };\r\n\r\n if (this.props.match && this.props.match.params && this.props.match.params.post) {\r\n this.props.match.params.post.likedByUser = newLocker.likedByUser;\r\n this.props.match.params.post.likeCount = newLocker.likeCount;\r\n }\r\n\r\n this.setState({ locker: newLocker }, async () => {\r\n let url = `/api/post/likePost?shareCode=${shareCode}`\r\n let data = await postRequest(url);\r\n });\r\n }\r\n\r\n likeComment = async (comment, key) => {\r\n let num = this.state.locker.comments[key].likedByUser === true ? -1 : 1;\r\n let newState = { ...this.state };\r\n newState.locker.comments[key].likes += num;\r\n newState.locker.comments[key].likedByUser = !newState.locker.comments[key].likedByUser;\r\n\r\n this.setState(newState, async () => {\r\n let requestObject = {\r\n id: comment.id,\r\n likedByUser: num < 0\r\n }\r\n let url = `/api/post/likeComment`;\r\n let data = await postRequest(url, requestObject);\r\n });\r\n }\r\n\r\n messageUser() {\r\n alert(\"message user clicked...\");\r\n }\r\n\r\n handleTextMarkup = (text) => {\r\n let urlHandled = replaceUrls(text);\r\n\r\n let markupHandled = urlHandled.map(retVal => {\r\n if (typeof retVal === 'string') {\r\n return handleCommentMarkup(retVal, true);\r\n }\r\n else {\r\n return retVal;\r\n }\r\n });\r\n\r\n return markupHandled;\r\n }\r\n\r\n postComment = async () => {\r\n this.setState({ submittingComment: true });\r\n\r\n let dataToPost = { text: this.state.comment };\r\n let shareCode = this.state.locker.shareCode;\r\n let url = `/api/post/postComment?shareCode=${shareCode}&postType=${this.state.locker.type}`;\r\n\r\n let today = (new Date()).toLocaleString(Date.now());\r\n\r\n let dummyComment = {\r\n likedByUser: false,\r\n likes: 0,\r\n replyCount: 0,\r\n text: this.state.comment,\r\n user: this.state.loggedInUser,\r\n createdOn: today\r\n };\r\n\r\n let comments = [...this.state.locker.comments];\r\n comments.push(dummyComment);\r\n\r\n let newState = { ...this.state };\r\n newState.comment = \"\";\r\n newState.locker.comments = comments;\r\n newState.locker.totalCount += 1;\r\n newState.locker.commentCount += 1;\r\n\r\n if (this.props.match && this.props.match.params && this.props.match.params.post) {\r\n this.props.match.params.post.comments = [...newState.locker.comments];\r\n this.props.match.params.post.commentCount = newState.locker.commentCount;\r\n this.props.match.params.post.totalCount = newState.locker.totalCount;\r\n }\r\n\r\n this.setState(newState, async () => {\r\n await postRequest(url, dataToPost);\r\n this.setState({ submittingComment: false });\r\n });\r\n }\r\n\r\n refreshLocker = async () => {\r\n if (this.state.locker.user.id === this.props.loggedInUser?.id) {\r\n let shareCode = this.state.locker.shareCode;\r\n let isAuthorized = this.props.loggedInUser === undefined ? false : true;\r\n let locker = await this.getPageData(shareCode, isAuthorized);\r\n if (locker) {\r\n this.setState({ locker });\r\n }\r\n }\r\n }\r\n\r\n removeProductFromLocker = async (coupon) => {\r\n let updatedLocker = { ...this.state.locker };\r\n let location = updatedLocker.productItems.$values.findIndex(prod => prod.userMerchantProduct.coupon === coupon);\r\n let product = updatedLocker.productItems.$values.find(prod => prod.userMerchantProduct.coupon === coupon);\r\n if (location > -1) {\r\n updatedLocker.productItems.$values.splice(location, 1);\r\n }\r\n\r\n this.setState({ locker: updatedLocker, deletingProduct: { isDeleting: false, coupon: \"\" } })\r\n\r\n let payload = {\r\n user: {\r\n id: this.state.locker.user?.id\r\n }\r\n };\r\n\r\n await postRequest(`/api/Locker/DeleteLockerProduct?userPostUserMerchantProductId=${product.id}`, payload);\r\n await this.getPageData(this.state.locker.shareCode, true);\r\n //alert(\"are you sure you want to delete this product?\")\r\n }\r\n\r\n renderDescriptionModal = () => {\r\n if (this.state.showDescriptionModal === true) {\r\n let description = this.state.locker.productItems?.$values[this.state.selectedProduct]?.comment || this.state.locker.productItems?.$values[this.state.selectedProduct]?.userMerchantProduct.userDescription;\r\n if (this.state.isEditingProducts === true) {\r\n return (\r\n \r\n \r\n {\r\n this.saveDescriptionChange(this.state.selectedProduct, description)\r\n this.toggleDescriptionModal()\r\n }} />\r\n
\r\n \r\n )\r\n }\r\n else {\r\n return (\r\n \r\n \r\n
\r\n
{description}
\r\n
\r\n )\r\n }\r\n\r\n }\r\n }\r\n\r\n renderProductPagination = () => {\r\n if (this.state.locker.productItems?.$values?.length > 4) {\r\n return (\r\n <>\r\n {\r\n e.preventDefault();\r\n this.prevPage()\r\n }}>\r\n \r\n {\"<\"}\r\n \r\n \r\n\r\n \r\n {this.state.locker.productItems?.$values?.length}\r\n \r\n\r\n {\r\n e.preventDefault();\r\n this.nextPage()\r\n }}>\r\n \r\n {\">\"}\r\n \r\n \r\n \r\n );\r\n }\r\n }\r\n\r\n saveDescriptionChange = async (productIndex, description) => {\r\n let locker = { ...this.state.locker };\r\n locker.productItems.$values[productIndex].comment = description;\r\n //locker.productItems.$values[productIndex].product.userDescription = description;\r\n this.setState({ locker });\r\n\r\n let product = locker.productItems.$values[productIndex];\r\n let payload = {\r\n id: product.id,\r\n comment: product.comment,\r\n userPostId: locker.id,\r\n userPostProductItemTypeId: locker.productItems.$values[productIndex].type,\r\n userMerchantProductId: locker.productItems.$values[productIndex].userMerchantProduct.id,\r\n ordinal: locker.productItems.$values[productIndex].ordinal\r\n }\r\n\r\n let url = `api/Locker/UpdateLockerProductDescription?comment=${product.comment}&userPostUserMerchantProductId=${product.id}`;\r\n\r\n var update = await postRequest(url, payload);\r\n //make api call to update product\r\n }\r\n\r\n saveLocker = async (shareCode) => {\r\n let reqBody = { shareCode };\r\n\r\n let route = this.state.locker.savedByUser === false ? `/api/post/savePost` : `/api/post/removeSavedPost`;\r\n let data = await postRequest(route, reqBody);\r\n\r\n let newPost = { ...this.state.locker };\r\n newPost.savedByUser = !this.state.locker.savedByUser\r\n\r\n if (this.props.match && this.props.match.params && this.props.match.params.post) {\r\n this.props.match.params.post.savedByUser = newPost.savedByUser;\r\n }\r\n\r\n this.setState({ locker: newPost });\r\n }\r\n\r\n toggleModal = () => {\r\n if (this.props.isModal === true) {\r\n //this.props.handleAddProducts();\r\n } else {\r\n this.props.toggleProductSelectModal();\r\n }\r\n\r\n }\r\n\r\n toggleDescriptionModal = (shareCode) => {\r\n let productIndex = this.state.locker?.productItems?.$values.findIndex(locker => locker.userMerchantProduct.coupon === shareCode);\r\n\r\n this.setState({ showDescriptionModal: !this.state.showDescriptionModal, selectedProduct: productIndex })\r\n }\r\n\r\n prevPage = () => {\r\n let page = this.state.productPage - 1;\r\n if (page < 0) {\r\n page = Math.floor(this.state.locker.productItems?.$values?.length / 4);\r\n }\r\n\r\n this.setState({ productPage: page });\r\n }\r\n\r\n nextPage = () => {\r\n let page = this.state.productPage + 1;\r\n if (page * 4 > this.state.locker.productItems?.$values?.length) {\r\n page = 0;\r\n }\r\n\r\n this.setState({ productPage: page });\r\n }\r\n contentSection = () => {\r\n const redirectUrl = getProperties(this.state.locker?.properties).filter(property => property.role === 6)[0]?.value;\r\n return (\r\n \r\n\r\n {/**Bio Text, pulled from state or redux state */}\r\n
\r\n {this.handleTextMarkup(this.state.locker?.content)}\r\n
\r\n
\r\n
\r\n\r\n {/**Bio Text, pulled from state or redux state */}\r\n
\r\n {this.handleTextMarkup(this.state.locker?.content)}\r\n
\r\n
\r\n
\r\n
\r\n
{this.state.locker.title} \r\n\r\n {/**Bio Text, pulled from state or redux state */}\r\n
\r\n {this.handleTextMarkup(this.state.locker?.content)}\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{this.state.locker.title} \r\n\r\n {/**Bio Text, pulled from state or redux state */}\r\n
\r\n {this.handleTextMarkup(this.state.locker?.content)}\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
Locker not found \r\n \r\n {this.getPageTitle()} \r\n \r\n }\r\n \r\n )\r\n }\r\n\r\n let commentCount = this.state.locker.comments.length;\r\n let parsedDate = this.state.locker.postedOn ? convertToLocaleDateTimeString(new Date(this.state.locker?.postedOn), false) : \"\";\r\n let { deviceSize } = this.props;\r\n\r\n //if the post isn't published, redirect to HomeFeed\r\n if ([0, 2, 6].includes(this.state.locker.status) === true && this.state.locker.user.id !== this.state.loggedInUser?.id && this.props.isModal !== true) {\r\n return \r\n {\r\n !!(this.props.isModal) ?\r\n <>\r\n :\r\n \r\n {this.getPageTitle()} \r\n \r\n }\r\n {this.renderDescriptionModal()}\r\n this.setState({ deletingProduct: { isDeleting: false, coupon: \"\" } })}\r\n />\r\n {\r\n this.props.deviceSize === \"sm\" ? (\r\n \r\n
\r\n
\r\n
\r\n {this.renderFollowButton()}\r\n
\r\n
\r\n\r\n
\r\n
\r\n {this.renderBookmarkOverlay()}\r\n {this.renderShareOverlay()}\r\n {this.displayBanner()}\r\n {this.displayEditLockerLink()}\r\n
\r\n
\r\n
\r\n \r\n {this.contentSection()}\r\n \r\n {/*Mini profile section */}\r\n {\r\n this.props.deviceSize !== \"sm\" ? (\r\n
\r\n
\r\n
\r\n {this.renderFollowButton()}\r\n
\r\n
\r\n ) :
\r\n }\r\n\r\n
\r\n\r\n \r\n\r\n
0 ? \"pb-0 mb-3\" : \"pb-0 border border-0\"}`}>\r\n
= 4 ? \"justify-content-left\" : \"justify-content-center\"} px-0 position-relative mt-2`}>\r\n {this.displayProductEditButtons()}\r\n {this.displayProductImages()}\r\n
\r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapDispatch = {\r\n toggleProductSelectModal: toggleProductSelectModal,\r\n toggleProductPageModal: toggleProductPageModal,\r\n toggleShareModal: toggleShareModal,\r\n toggleFollowersFollowingModal: toggleFollowersFollowingModal,\r\n closeAllModals: closeAllModals\r\n}\r\n\r\nexport default connect(null, mapDispatch)(BlogPage);","import React, { useEffect } from \"react\";\r\nimport Modal from \"components/Modal\";\r\nimport BlogPage from \"views/Blog/BlogPage\";\r\nimport { connect } from \"react-redux\";\r\nimport { toggleBlogPageModal, toggleProductPageModal } from \"stateManagement/reducers/modalReducer\";\r\n\r\n\r\n/**\r\n * \r\n * @param {{post:object,loggedInUser:object,showModal:boolean, deviceSize:string, parentModal:{type:string,parentState:object}}} props\r\n */\r\nconst BlogPageModal = (props) => {\r\n let paramProps = {\r\n params: {\r\n post: props.post,\r\n loggedInUser: props.loggedInUser,\r\n setPost: props.setPost\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (props.showModal) {\r\n document.querySelector(\"body\").style.overflow = \"hidden\";\r\n } else {\r\n document.querySelector(\"body\").style.overflow = \"\";\r\n }\r\n }, [props.showModal]);\r\n\r\n return (\r\n {\r\n\r\n if (props.parentModal !== null) {\r\n switch (props.parentModal?.type) {\r\n case \"product\": {\r\n props.toggleProductModal(props.parentModal.parentState, props.loggedInUser, false, null, null);\r\n break;\r\n }\r\n default: {\r\n props.toggleModal(props.post, props.loggedInUser, false, props.setPost);\r\n break;\r\n }\r\n }\r\n }\r\n else {\r\n props.toggleModal(props.post, props.loggedInUser, false, props.setPost)\r\n }\r\n\r\n }}\r\n showHeader={true}\r\n showThreeDotMenu={props.loggedInUser ? true : false}\r\n loggedInUser={props.loggedInUser}\r\n post={props.post}\r\n modalDialogCustomClass=\"modal-dialog-md\"\r\n modalHeaderRedirect={`/Blog/BlogPage/${props.post?.shareCode}`}\r\n state={paramProps}\r\n >\r\n FOR 'SEE MORE'\r\n // FOR DEVICE SIZES THAT ARE NOT SMALL - it determines if height of ProfileInfoCard \r\n // is less than the expanded < p > and then puts it in contentOverflowed as well as \r\n // calculate the height of the of the 'SEE MORE'
based on it's expanded size vs.\r\n // the size of the ProfileInfoCard and applies it to the styling.\r\n\r\n // SMALL DEVICES SET HEIGHT TO 2 LINES OF TEXT WHICH IS ~40px\r\n let contentOverflowed = false;\r\n let bioHeight;\r\n let titleHeight;\r\n let contentHeight;\r\n\r\n if (this.props?.deviceSize === \"sm\") {\r\n if (this.contentRef?.current?.offsetHeight > 40) {\r\n contentOverflowed = true;\r\n }\r\n } else {\r\n bioHeight = this.bioRef?.current?.offsetHeight;\r\n\r\n this.setState({ contentStyle: this.expandedContentStyle });\r\n\r\n titleHeight = this.titleRef?.current?.scrollHeight;\r\n\r\n if (bioHeight < titleHeight) {\r\n contentOverflowed = true;\r\n }\r\n this.setState({ contentStyle: this.notOverflowedContentStyle })\r\n }\r\n\r\n if (this.props?.deviceSize !== \"sm\" && contentOverflowed) {\r\n this.setState({ contentStyle: this.expandedContentStyle })\r\n const overflow = titleHeight - bioHeight;\r\n\r\n contentHeight = this.contentRef?.current?.offsetHeight;\r\n\r\n const maxHeight = contentHeight - overflow > 40 ? Math.floor((contentHeight - overflow) / 20) * 20 - 20 + \"px\" : \"41px\";\r\n\r\n this.setState({ maxHeight, contentStyle: this.notOverflowedContentStyle })\r\n }\r\n\r\n this.collapsedContentStyle = { marginTop: \"0em\", maxHeight: this.props.deviceSize === \"sm\" ? \"42px\" : this.state.maxHeight, textOverflow: \"ellipsis\", overflow: \"hidden\" };\r\n this.notOverflowedContentStyle = { marginTop: \"0em\", marginBottom: \"0.5em\", maxHeight: this.props.deviceSize === \"sm\" ? \"42px\" : this.state.maxHeight, textOverflow: \"ellipsis\", overflow: \"hidden\" };\r\n this.expandedContentStyle = { marginTop: \"0em\" };\r\n\r\n if (contentOverflowed) {\r\n this.setState({ contentOverflowed: contentOverflowed, contentStyle: this.collapsedContentStyle });\r\n } else if (!contentOverflowed && this.props.deviceSize !== \"sm\") {\r\n this.setState({ contentStyle: this.expandedContentStyle })\r\n }\r\n }\r\n\r\n async componentDidUpdate(prevProps, prevState) {\r\n if (prevProps.loggedInUser != this.props.loggedInUser) {\r\n this.setState({ loggedInUser: this.props.loggedInUser })\r\n }\r\n if (this.props?.match?.params?.shareCode != prevProps?.match?.params?.shareCode) {\r\n\r\n this.setState({ isLoading: true });\r\n\r\n let shareCode = this.props.match.params.shareCode;\r\n let isAuthorized = this.props.loggedInUser !== null;\r\n let post = this.props.location?.state?.destinationState?.params?.post\r\n\r\n if (post == null || post == undefined) {\r\n post = await this.getPageData(shareCode, isAuthorized);\r\n\r\n if (post == null || post == undefined) {\r\n this.props.history.push(\"/NotFound\");\r\n return -1\r\n }\r\n else {\r\n let isFollowing = await this.fetchIsFollowing(post.user?.id);\r\n\r\n this.setState({ isFollowing });\r\n }\r\n }\r\n\r\n this.setState({ locker: post, isLoading: false });\r\n }\r\n }\r\n\r\n removeCommentUsername = text => {\r\n const regex = /#!\\^.*?\\)\\)\\)/g;\r\n return text.replace(regex, '');\r\n } \r\n\r\n fetchIsFollowing = async (userId) => {\r\n let url = `/api/Account/IsFollowing?id=${userId}`;\r\n let data = await getRequest(url);\r\n return data;\r\n //this.setState({ isFollowing: data });\r\n }\r\n\r\n componentWillUnmount() {\r\n document.removeEventListener(\"_productAddedEvent\", this.refreshLocker);\r\n window.removeEventListener(\"storage\", () => { });\r\n }\r\n\r\n followAction = async () => {\r\n this.setState({ isFollowing: !this.state.isFollowing })\r\n\r\n let endpoint = this.state.isFollowing === true ? 'unfollow' : 'follow';\r\n let url = `/api/account/${endpoint}?id=${this.state.locker.user.id}`\r\n let data = await getRequest(url);\r\n }\r\n\r\n renderFollowButton() {\r\n if (this.state.isFollowing != undefined && this.state.isFollowing != null && (this.props.loggedInUser == null || this.props.loggedInUser.id !== this.state.locker.user.id)) {\r\n return (\r\n {\r\n if (this.props.loggedInUser) {\r\n this.followAction()\r\n } else {\r\n this.props.toggleSignUpModal();\r\n }\r\n }}\r\n className=\"btn modal-follow-btn\">{this.state.isFollowing ? \"Unfollow -\" : \"Follow +\"} \r\n )\r\n }\r\n }\r\n\r\n renderInfoOverlay = (product) => {\r\n return {\r\n this.props.toggleProductPageModal(product, this.props.loggedInUser, false, () => null)\r\n }} style={{ cursor: \"pointer\" }}>\r\n \r\n }\r\n\r\n renderThumbsUpOverlay = (product) => {\r\n const productId = !!(product.productId) ? product.productId : product.id;\r\n if (!(product.creatorCount) || product.creatorCount === 0) {\r\n return <>;\r\n }\r\n\r\n return (\r\n this.toggleCreatorsModal(productId)} style={{ cursor: \"pointer\", top: \"15px\" }}>\r\n {!!(product.creatorCount) ? product.creatorCount : \"\"} \r\n \r\n )\r\n\r\n }\r\n\r\n toggleCreatorsModal = (productId) => {\r\n const followersFollowing = \"creators\";\r\n this.props.toggleFollowersFollowingModal(!!(this.props.loggedInUser) ? this.props.loggedInUser.id : -1, followersFollowing, productId);\r\n }\r\n\r\n addProductsToLocker = async (products) => {\r\n let newState = { ...this.state };\r\n products.forEach((prod) => prod.coupon = prod.shareCode);\r\n let productMap = products.map((prod) => {\r\n return {\r\n userMerchantProduct: { ...prod, product: prod }\r\n }\r\n });\r\n newState.locker.productItems.$values = [...this.state.locker.productItems.$values, ...productMap];\r\n\r\n this.setState({ locker: newState.locker });\r\n\r\n var userMerchantProductIds = products.map((prod) => prod.userMerchantProductId);\r\n var added = await postRequest(`/api/Post/addPostProducts?shareCode=${this.state.locker.shareCode}`, userMerchantProductIds);\r\n\r\n await this.getPageData(this.state.locker.shareCode, true);\r\n }\r\n\r\n toTitleCase = (string) => {\r\n if (!!(string)) {\r\n return string.toLowerCase().replace(/(?:^|\\s|-)\\w/g, function (match) {\r\n return match.toUpperCase();\r\n });\r\n }\r\n return string;\r\n } \r\n\r\n displayProductImages = () => {\r\n return trimProductsArray(this.state.locker.productItems?.$values)?.sort(function (a, b) {\r\n return a.ordinal - b.ordinal;\r\n }).map((val, i) => {\r\n if (this.state.isEditingProducts === true) {\r\n return (\r\n \r\n \r\n this.setState({ deletingProduct: { isDeleting: true, coupon: val.userMerchantProduct.coupon } })}\r\n >\r\n × \r\n \r\n
\r\n \r\n
\r\n
\r\n
this.toggleDescriptionModal(i)}\r\n post={this.state.locker}\r\n loggedInUser={this.state.loggedInUser}\r\n locker={true}\r\n />\r\n \r\n
\r\n
\r\n
{val.manufacturer?.toLowerCase().includes(\"rcktemp\") ? val.merchant : val.manufacturer}{val.sale && !!(val.salePrice) && ![\"sm\", \"md\"].includes(this.props.deviceSize) ?
\r\n
\r\n
\r\n
\r\n \r\n
\r\n {this.toTitleCase(val.name)}\r\n
\r\n
\r\n
\r\n
\r\n
{val.sale && !!(val.salePrice) ? \"$\" + val.salePrice.toFixed(2) : <>}
${val.sale && !!(val.salePrice) && !!(val.originalPrice) ? val.originalPrice.toFixed(2) : val.price.toFixed(2)}
\r\n
\r\n
\r\n
\r\n
\r\n )\r\n } else {\r\n return (\r\n
\r\n
\r\n
\r\n {this.renderInfoOverlay(val)}\r\n {this.renderThumbsUpOverlay(val)}\r\n
this.toggleDescriptionModal(i)}\r\n post={this.state.locker}\r\n locker={true}\r\n parentModal={this.props.isModal === true ? { type: \"locker\", shareCode: this.props.match.params?.post?.shareCode, parentState: { ...this.state.locker } } : null}\r\n />\r\n \r\n
\r\n
\r\n
{val.manufacturer?.toLowerCase().includes(\"rcktemp\") ? val.merchant : val.manufacturer}{val.sale && !!(val.salePrice) && ![\"sm\", \"md\"].includes(this.props.deviceSize) ?
\r\n
\r\n
\r\n
\r\n \r\n
\r\n {this.toTitleCase(val.name)}\r\n
\r\n
\r\n
\r\n
\r\n
{val.sale && !!(val.salePrice) ? \"$\" + val.salePrice.toFixed(2) : <>}
${val.sale && !!(val.salePrice) && !!(val.originalPrice) ? val.originalPrice.toFixed(2) : val.price.toFixed(2)}
\r\n
\r\n
\r\n
\r\n
Edit Locker \r\n \r\n )\r\n }\r\n }\r\n\r\n displayBanner = () => {\r\n let properties = this.state.locker?.properties?.$values;\r\n let imageSrc = properties?.length > 0 ? properties[0].value : \"images/blank-banner.png\"\r\n return (\r\n <>\r\n {\r\n if (this.props.loggedInUser) {\r\n e.preventDefault();\r\n let savedByUser = !this.state.savedByUser;\r\n this.setState({ savedByUser });\r\n this.saveLocker(shareCode);\r\n } else {\r\n this.props.toggleSignUpModal();\r\n }\r\n\r\n }} style={{ cursor: \"pointer\" }}>\r\n );\r\n }\r\n\r\n renderShareOverlay = () => {\r\n return ( {\r\n this.props.toggleShareModal(this.state.shareLink)\r\n }} style={{ cursor: \"pointer\" }}>\r\n );\r\n }\r\n\r\n displayProductEditButtons = () => {\r\n if (this.state.loggedInUser?.id === this.state.locker?.user?.id && this.props.modal === false) {\r\n return (\r\n \r\n
\r\n \r\n\r\n
{\r\n let isEditing = !this.state.isEditingProducts;\r\n this.setState({ isEditingProducts: isEditing })\r\n }}>\r\n \r\n
\r\n {tag.sector.name}\r\n \r\n )\r\n })\r\n }\r\n\r\n getPageData = async (shareCode, isAuthorized) => {\r\n let url = isAuthorized === true ? `/api/post/getPostAuthorized?shareCode=${shareCode}&referrer=${document.referrer}` : `/api/post/getPost?shareCode=${shareCode}&referrer=${document.referrer}`;\r\n let response = await getRequest(url);\r\n return response;\r\n //this.setState({ locker: response });\r\n }\r\n\r\n fetchComments = async (skip = this.state.locker.comments.length, take = 25) => {\r\n return;\r\n this.setState({ loadingComments: true });\r\n let baseUrl = this.state.loggedInUser !== undefined ? `/api/post/getCommentsAuthorized` : `/api/post/getComments`;\r\n let url = `${baseUrl}?shareCode=${this.state.shareCode}&skip=${skip}&take=${take}`;\r\n let data = await getRequest(url);\r\n let newState = { ...this.state };\r\n newState.locker.comments = [...data, ...this.state.locker.comments];\r\n\r\n this.setState({ ...newState, loadingComments: false });\r\n }\r\n\r\n likeLocker = async (shareCode) => {\r\n let num = this.state.locker.likedByUser === true ? -1 : 1;\r\n let newLikes = {\r\n likeCount: this.state.locker.likeCount + num,\r\n likedByUser: !this.state.locker.likedByUser\r\n }\r\n let newLocker = { ...this.state.locker, ...newLikes };\r\n\r\n if (this.props.match && this.props.match.params && this.props.match.params.post) {\r\n this.props.match.params.post.likedByUser = newLocker.likedByUser;\r\n this.props.match.params.post.likeCount = newLocker.likeCount;\r\n }\r\n\r\n this.setState({ locker: newLocker }, async () => {\r\n let url = `/api/post/likePost?shareCode=${shareCode}`\r\n let data = await postRequest(url);\r\n });\r\n }\r\n\r\n likeComment = async (comment, key) => {\r\n let num = this.state.locker.comments[key].likedByUser === true ? -1 : 1;\r\n let newState = { ...this.state };\r\n newState.locker.comments[key].likes += num;\r\n newState.locker.comments[key].likedByUser = !newState.locker.comments[key].likedByUser;\r\n\r\n this.setState(newState, async () => {\r\n let requestObject = {\r\n id: comment.id,\r\n likedByUser: num < 0\r\n }\r\n let url = `/api/post/likeComment`;\r\n let data = await postRequest(url, requestObject);\r\n });\r\n }\r\n\r\n messageUser() {\r\n alert(\"message user clicked...\");\r\n }\r\n\r\n handleTextMarkup = (text) => {\r\n let urlHandled = replaceUrls(text);\r\n\r\n let markupHandled = urlHandled.map(retVal => {\r\n if (typeof retVal === 'string') {\r\n return handleCommentMarkup(retVal, true);\r\n }\r\n else {\r\n return retVal;\r\n }\r\n });\r\n\r\n return markupHandled;\r\n }\r\n\r\n postComment = async () => {\r\n this.setState({ submittingComment: true });\r\n\r\n let dataToPost = { text: this.state.comment };\r\n let shareCode = this.state.locker.shareCode;\r\n let url = `/api/post/postComment?shareCode=${shareCode}&postType=${this.state.locker.type}`;\r\n\r\n let today = (new Date()).toLocaleString(Date.now());\r\n\r\n let dummyComment = {\r\n likedByUser: false,\r\n likes: 0,\r\n replyCount: 0,\r\n text: this.state.comment,\r\n user: this.state.loggedInUser,\r\n createdOn: today\r\n };\r\n\r\n let comments = [...this.state.locker.comments];\r\n comments.push(dummyComment);\r\n\r\n let newState = { ...this.state };\r\n newState.comment = \"\";\r\n newState.locker.comments = comments;\r\n newState.locker.totalCount += 1;\r\n newState.locker.commentCount += 1;\r\n\r\n if (this.props.match && this.props.match.params && this.props.match.params.post) {\r\n this.props.match.params.post.comments = [...newState.locker.comments];\r\n this.props.match.params.post.commentCount = newState.locker.commentCount;\r\n this.props.match.params.post.totalCount = newState.locker.totalCount;\r\n }\r\n\r\n this.setState(newState, async () => {\r\n await postRequest(url, dataToPost);\r\n this.setState({ submittingComment: false });\r\n });\r\n }\r\n\r\n refreshLocker = async () => {\r\n if (this.state.locker.user.id === this.props.loggedInUser?.id) {\r\n let shareCode = this.state.locker.shareCode;\r\n let isAuthorized = this.props.loggedInUser === undefined ? false : true;\r\n let locker = await this.getPageData(shareCode, isAuthorized);\r\n if (locker) {\r\n this.setState({ locker });\r\n }\r\n }\r\n }\r\n\r\n removeProductFromLocker = async (coupon) => {\r\n let updatedLocker = { ...this.state.locker };\r\n let location = updatedLocker.productItems.$values.findIndex(prod => prod.userMerchantProduct.coupon === coupon);\r\n let product = updatedLocker.productItems.$values.find(prod => prod.userMerchantProduct.coupon === coupon);\r\n if (location > -1) {\r\n updatedLocker.productItems.$values.splice(location, 1);\r\n }\r\n\r\n this.setState({ locker: updatedLocker, deletingProduct: { isDeleting: false, coupon: \"\" } })\r\n\r\n let payload = {\r\n user: {\r\n id: this.state.locker.user?.id\r\n }\r\n };\r\n\r\n await postRequest(`/api/Locker/DeleteLockerProduct?userPostUserMerchantProductId=${product.id}`, payload);\r\n await this.getPageData(this.state.locker.shareCode, true);\r\n //alert(\"are you sure you want to delete this product?\")\r\n }\r\n\r\n renderDescriptionModal = () => {\r\n if (this.state.showDescriptionModal === true) {\r\n let description = this.state.locker.productItems?.$values[this.state.selectedProduct]?.comment || this.state.locker.productItems?.$values[this.state.selectedProduct]?.userMerchantProduct.userDescription;\r\n if (this.state.isEditingProducts === true) {\r\n return (\r\n \r\n \r\n {\r\n this.saveDescriptionChange(this.state.selectedProduct, description)\r\n this.toggleDescriptionModal()\r\n }} />\r\n
\r\n \r\n )\r\n }\r\n else {\r\n return (\r\n \r\n \r\n
\r\n
{description}
\r\n
\r\n )\r\n }\r\n\r\n }\r\n }\r\n\r\n renderProductPagination = () => {\r\n if (this.state.locker.productItems?.$values?.length > 4) {\r\n return (\r\n <>\r\n {\r\n e.preventDefault();\r\n this.prevPage()\r\n }}>\r\n \r\n {\"<\"}\r\n \r\n \r\n\r\n \r\n {this.state.locker.productItems?.$values?.length}\r\n \r\n\r\n {\r\n e.preventDefault();\r\n this.nextPage()\r\n }}>\r\n \r\n {\">\"}\r\n \r\n \r\n \r\n );\r\n }\r\n }\r\n\r\n saveDescriptionChange = async (productIndex, description) => {\r\n let locker = { ...this.state.locker };\r\n locker.productItems.$values[productIndex].comment = description;\r\n //locker.productItems.$values[productIndex].product.userDescription = description;\r\n this.setState({ locker });\r\n\r\n let product = locker.productItems.$values[productIndex];\r\n let payload = {\r\n id: product.id,\r\n comment: product.comment,\r\n userPostId: locker.id,\r\n userPostProductItemTypeId: locker.productItems.$values[productIndex].type,\r\n userMerchantProductId: locker.productItems.$values[productIndex].userMerchantProduct.id,\r\n ordinal: locker.productItems.$values[productIndex].ordinal\r\n }\r\n\r\n let url = `api/Locker/UpdateLockerProductDescription?comment=${product.comment}&userPostUserMerchantProductId=${product.id}`;\r\n\r\n var update = await postRequest(url, payload);\r\n //make api call to update product\r\n }\r\n\r\n saveLocker = async (shareCode) => {\r\n let reqBody = { shareCode };\r\n\r\n let route = this.state.locker.savedByUser === false ? `/api/post/savePost` : `/api/post/removeSavedPost`;\r\n let data = await postRequest(route, reqBody);\r\n\r\n let newPost = { ...this.state.locker };\r\n newPost.savedByUser = !this.state.locker.savedByUser\r\n\r\n if (this.props.match && this.props.match.params && this.props.match.params.post) {\r\n this.props.match.params.post.savedByUser = newPost.savedByUser;\r\n }\r\n\r\n this.setState({ locker: newPost });\r\n }\r\n\r\n toggleModal = () => {\r\n if (this.props.isModal === true) {\r\n //this.props.handleAddProducts();\r\n } else {\r\n this.props.toggleProductSelectModal();\r\n }\r\n\r\n }\r\n\r\n toggleDescriptionModal = (shareCode) => {\r\n let productIndex = this.state.locker?.productItems?.$values.findIndex(locker => locker.userMerchantProduct.coupon === shareCode);\r\n\r\n this.setState({ showDescriptionModal: !this.state.showDescriptionModal, selectedProduct: productIndex })\r\n }\r\n\r\n prevPage = () => {\r\n let page = this.state.productPage - 1;\r\n if (page < 0) {\r\n page = Math.floor(this.state.locker.productItems?.$values?.length / 4);\r\n }\r\n\r\n this.setState({ productPage: page });\r\n }\r\n\r\n nextPage = () => {\r\n let page = this.state.productPage + 1;\r\n if (page * 4 > this.state.locker.productItems?.$values?.length) {\r\n page = 0;\r\n }\r\n\r\n this.setState({ productPage: page });\r\n }\r\n contentSection = () => {\r\n if (!this.state.contentOverflowed) {\r\n return (\r\n \r\n
{this.state.locker.title} \r\n\r\n {/**Bio Text, pulled from state or redux state */}\r\n
\r\n {this.handleTextMarkup(this.state.locker?.content)}\r\n
\r\n\r\n
\r\n
\r\n
{this.state.locker.title} \r\n\r\n {/**Bio Text, pulled from state or redux state */}\r\n
\r\n {this.handleTextMarkup(this.state.locker?.content)}\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{this.state.locker.title} \r\n\r\n {/**Bio Text, pulled from state or redux state */}\r\n
\r\n {this.handleTextMarkup(this.state.locker?.content)}\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
Locker not found \r\n \r\n {this.getPageTitle()} \r\n \r\n }\r\n \r\n ) \r\n }\r\n\r\n let commentCount = this.state.locker.comments.length;\r\n let parsedDate = this.state.locker.postedOn ? convertToLocaleDateTimeString(new Date(this.state.locker?.postedOn), false) : \"\";\r\n let { deviceSize } = this.props;\r\n\r\n //if the post isn't published, redirect to HomeFeed\r\n if ([0, 2, 6].includes(this.state.locker.status) === true && this.state.locker.user.id !== this.state.loggedInUser?.id && this.props.isModal !== true) {\r\n return \r\n {\r\n !!(this.props.isModal) ?\r\n <>\r\n :\r\n \r\n {this.getPageTitle()} \r\n \r\n }\r\n {this.renderDescriptionModal()}\r\n this.setState({ deletingProduct: { isDeleting: false, coupon: \"\" } })}\r\n />\r\n {\r\n this.props.deviceSize === \"sm\" ? (\r\n \r\n
\r\n
\r\n
\r\n {this.renderFollowButton()}\r\n
\r\n
\r\n\r\n
\r\n
\r\n {this.renderBookmarkOverlay()}\r\n {this.renderShareOverlay()}\r\n {this.displayBanner()}\r\n {this.displayEditLockerLink()}\r\n
\r\n
\r\n
\r\n \r\n {this.contentSection()}\r\n\r\n {/*Mini profile section */}\r\n {\r\n this.props.deviceSize !== \"sm\" ? (\r\n
\r\n
\r\n
\r\n {this.renderFollowButton()}\r\n
\r\n
\r\n ) :
\r\n }\r\n\r\n
\r\n\r\n \r\n\r\n
0 ? \"pb-0 mb-3\" : \"pb-0 border border-0\"}`}>\r\n
= 4 ? \"justify-content-left\" : \"justify-content-center\"} px-0 position-relative mt-2`}>\r\n {this.displayProductEditButtons()}\r\n {this.displayProductImages()}\r\n
\r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapDispatch = {\r\n toggleProductSelectModal: toggleProductSelectModal,\r\n toggleProductPageModal: toggleProductPageModal,\r\n toggleShareModal: toggleShareModal,\r\n toggleFollowersFollowingModal: toggleFollowersFollowingModal,\r\n closeAllModals: closeAllModals\r\n}\r\n\r\nexport default connect(null, mapDispatch)(LockerPage);","import React, { useState, useEffect } from \"react\";\r\nimport Modal from \"components/Modal\";\r\nimport { connect } from \"react-redux\";\r\nimport LockerPage from \"views/Locker/LockerPage\";\r\nimport { toggleLockerPageModal, toggleProductPageModal } from \"stateManagement/reducers/modalReducer\";\r\nimport { Redirect } from \"react-router-dom\";\r\n\r\n/**\r\n * \r\n * @param {{loggedInUser:object, shareCode:string, showModal:boolean, parentModal:{type:string,parentState:object}}} props\r\n */\r\nconst LockerPageModal = (props) => {\r\n let paramProps = {\r\n params: {\r\n post: props.post,\r\n loggedInUser: props.loggedInUser,\r\n setPost: props.setPost\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (props.showModal) {\r\n document.querySelector(\"body\").style.overflow = \"hidden\";\r\n } else {\r\n document.querySelector(\"body\").style.overflow = \"\";\r\n }\r\n }, [props.showModal]);\r\n\r\n let [isAddingProducts, setIsAddingProducts] = useState(false);\r\n\r\n let goToPage = () => setIsAddingProducts(true);\r\n\r\n if (isAddingProducts === true) {\r\n return {\r\n if (props.parentModal !== null) {\r\n switch (props.parentModal?.type) {\r\n case \"product\": {\r\n props.toggleProductModal(props.parentModal.parentState,props.loggedInUser,false,null,null);\r\n break;\r\n }\r\n default: {\r\n props.toggleModal(props.post, props.loggedInUser, false, props.setPost);\r\n break;\r\n }\r\n }\r\n }\r\n else {\r\n props.toggleModal(props.post, props.loggedInUser, false, props.setPost)\r\n }\r\n \r\n }}\r\n showHeader={true}\r\n showThreeDotMenu={props.loggedInUser ? true : false} \r\n loggedInUser={props.loggedInUser}\r\n post={props.post}\r\n modalDialogCustomClass=\"modal-dialog-md\"\r\n modalHeaderRedirect={`/Locker/LockerPage/${props.post?.shareCode}`}\r\n state={paramProps}\r\n >\r\n {\r\n setDialogExpanded(false);\r\n if (props.parentModal != null) {\r\n switch (props.parentModal?.type) {\r\n case \"locker\": {\r\n props.toggleLockerModal(props.parentModal.parentState, props.loggedInUser, false, null);\r\n break;\r\n }\r\n case \"post\": {\r\n props.togglePostModal(props.parentModal.parentState, props.loggedInUser,false,null);\r\n break;\r\n }\r\n default: {\r\n props.toggleModal(props.product, props.loggedInUser, false, props.setProduct, null);\r\n break;\r\n }\r\n }\r\n }\r\n else {\r\n props.toggleModal(props.product, props.loggedInUser, false, props.setProduct, null);\r\n }\r\n \r\n }}\r\n state={paramProps}\r\n >\r\n {\r\n setDialogExpanded(!modalDialogExpanded);\r\n }}\r\n toggleSignUpModal={props.toggleSignUpModal}\r\n toggleShareModal={props.toggleShareModal}\r\n screenWidth={props.screenWidth}\r\n brandNav={props.brandNav}\r\n />\r\n \r\n )\r\n}\r\n\r\nfunction mapStateToProps(storeState) {\r\n return {\r\n showModal: storeState.modalReducer.productPageModal.showProductPageModal,\r\n shareCode: storeState.modalReducer.productPageModal.shareCode,\r\n product: storeState.modalReducer.productPageModal.product,\r\n loggedInUser: storeState.modalReducer.productPageModal.loggedInUser,\r\n isCommenting: storeState.modalReducer.productPageModal.isCommenting,\r\n setProduct: storeState.modalReducer.productPageModal.setProduct,\r\n parentModal: storeState.modalReducer.productPageModal.parentModal,\r\n isBrowse: storeState.modalReducer.productPageModal.isBrowse,\r\n isSearch: storeState.modalReducer.productPageModal.isSearch,\r\n }\r\n}\r\n\r\nconst mapDispatch = {\r\n toggleModal: toggleProductPageModal,\r\n toggleLockerModal: toggleLockerPageModal,\r\n togglePostModal: togglePostPageModal\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatch)(ProductPageModal);","import React, { useState } from \"react\";\r\nimport ActionButton from \"components/ActionButton\";\r\nimport { isValidUrl } from \"sharedUtils/validationUtils\";\r\nimport { useEffect, useRef } from \"react\";\r\nimport { getRequest } from \"sharedUtils/httpUtils\";\r\n\r\n/**\r\n * \r\n * @param {{advance:Function,productUrl:string,handleInput:Function, isLoading:boolean, productNotFound:boolean, isModal:boolean}} props \r\n */\r\nconst ShareABlogLookupUrlForm = (props) => {\r\n\r\n const inputRef = useRef(null);\r\n const [urlInput, setUrlInput] = useState(\"\");\r\n const [invalidUrl, setInvalidUrl] = useState(true);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [showError, setShowError] = useState(false);\r\n const [errorMessage, setErrorMessage] = useState(\"Blog URL will not process. Try again.\");\r\n\r\n useEffect(() => {\r\n if (inputRef && inputRef.current) {\r\n inputRef.current.focus();\r\n }\r\n if (!!(props.validUrl)) {\r\n setUrlInput(props.validUrl);\r\n setInvalidUrl(false);\r\n }\r\n }, [])\r\n\r\n const fetchLinkPreview = async () => {\r\n const url = \"/api/LinkPreview/Get?url=\" + encodeURIComponent(urlInput);\r\n const linkPreview = await getRequest(url);\r\n setIsLoading(false);\r\n if (!(linkPreview)) {\r\n setShowError(true);\r\n } else {\r\n props.handleUrlSubmit(linkPreview, urlInput);\r\n }\r\n }\r\n\r\n const handleOnChange = (event) => {\r\n let url = event.target.value;\r\n setUrlInput(url);\r\n\r\n let isValid = url.length > 0 ? isValidUrl(url) : false;\r\n if (isValid) {\r\n setInvalidUrl(false);\r\n } else {\r\n setInvalidUrl(true);\r\n }\r\n }\r\n\r\n const handleSubmit = () => {\r\n setIsLoading(true);\r\n fetchLinkPreview();\r\n }\r\n\r\n const handleKeypress = (e) => {\r\n if (e.key === 'Enter') {\r\n handleSubmit();\r\n }\r\n }\r\n\r\n\r\n return (\r\n \r\n
\r\n\r\n
\r\n
Share a Blog Article \r\n
Paste blog URL here. \r\n\r\n
\r\n\r\n
handleOnChange(e)}\r\n onKeyPress={handleKeypress}\r\n style={{ backgroundColor: \"#e9ecef\", border: \"none\" }}\r\n />\r\n Submit \r\n \r\n\r\n {\r\n showError ? (\r\n
\r\n
\r\n Sorry! \r\n
\r\n
\r\n ) :
\r\n }\r\n\r\n
\r\n\r\n
\r\n
props.setPostCaption(val)}\r\n post={props.post}\r\n loggedInUser={props.loggedInUser}\r\n deviceSize={props.deviceSize}\r\n captionValue={props.postCaption}\r\n blog={true}\r\n />\r\n )\r\n };\r\n\r\n return (\r\n } ignoreClickAway={true}>\r\n {renderPreviewPost()}\r\n \r\n Cancel \r\n {true ?\r\n \r\n Next\r\n : null}\r\n\r\n \r\n \r\n )\r\n\r\n\r\n}\r\n\r\n\r\nexport default ShareABlogPreview;","import React, { useState } from \"react\";\r\nimport Modal from \"components/Modal\";\r\nimport { connect } from \"react-redux\";\r\nimport { toggleShareBlogModal } from \"stateManagement/reducers/modalReducer\";\r\nimport ShareABlogLookupUrlForm from \"components/ShareABlog/ShareABlogLookupUrlForm\"\r\nimport ShareABlogPreview from \"components/ShareABlog/ShareABlogPreview\"\r\n\r\nimport PreviewCard from 'components/Post/Create/PreviewCard';\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { postRequest } from \"sharedUtils/httpUtils\";\r\n\r\n/**\r\n * \r\n * @param {{loggedInUser:object, userId:any,followersFollowing:string, setLoggedInUser:Function}} props\r\n */\r\nconst ShareABlogModal = (props) => {\r\n const history = useHistory();\r\n const blankPost = {\r\n title: \"\",\r\n content: \"\",\r\n platformName: \"blogShare\",\r\n type: 4,\r\n id: null,\r\n media: [\r\n {\r\n imageLink: \"\",\r\n isExternalReference: true,\r\n children: [\r\n {\r\n resourceLink: \"\",\r\n }\r\n ],\r\n },\r\n ],\r\n }\r\n\r\n const [validUrl, setValidUrl] = useState(\"\");\r\n const [loading, setLoading] = useState(false);\r\n\r\n const [post, setPost] = useState(blankPost);\r\n const [actionLevel, setActionLevel] = useState(1);\r\n const [postCaption, setPostCaption] = useState(\"\");\r\n\r\n if (props.showModal) {\r\n document.querySelector(\"body\").style.overflow = \"hidden\";\r\n } else {\r\n document.querySelector(\"body\").style.overflow = \"\";\r\n }\r\n\r\n const uuidv4 = () => {\r\n return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>\r\n (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)\r\n );\r\n };\r\n\r\n const handleUrlSubmit = (lp, url) => {\r\n setValidUrl(url);\r\n\r\n const newPost = { ...post };\r\n newPost.id = uuidv4();\r\n newPost.title = !!(lp.title) ? lp.title : \"\";\r\n newPost.content = !!(lp.description) ? lp.description : \"\";\r\n\r\n newPost.media[0].imageLink = lp.image;\r\n newPost.media[0].children[0].resourceLink = url;\r\n\r\n setPost(newPost);\r\n advanceLevel();\r\n }\r\n\r\n const advanceLevel = () => {\r\n setActionLevel(actionLevel + 1);\r\n }\r\n\r\n const reduceLevel = () => {\r\n setActionLevel(actionLevel - 1);\r\n setPost({ ...blankPost });\r\n setValidUrl(\"\");\r\n }\r\n\r\n const handleNext = async () => {\r\n const route = '/api/post/InsertBlogPost';\r\n let selectedPost = {...post};\r\n selectedPost.content = !!(postCaption) ? postCaption : selectedPost.content;\r\n\r\n setLoading(true);\r\n let data = await postRequest(route, selectedPost);\r\n setLoading(false);\r\n setPost({ ...blankPost });\r\n setValidUrl(\"\");\r\n setActionLevel(actionLevel - 1);\r\n history.push(`/Blog/NewBlogPage/${data.shareCode}`, { state: { justCreated: true } });\r\n }\r\n\r\n return (\r\n props.toggleModal(null)}>\r\n {\r\n actionLevel === 1 ?\r\n \r\n\r\n )\r\n}\r\n\r\nfunction mapStateToProps(storeState) {\r\n return {\r\n showModal: storeState.modalReducer.shareBlogModal.showShareBlogModal,\r\n }\r\n}\r\n\r\nconst mapDispatch = {\r\n toggleModal: toggleShareBlogModal\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatch)(ShareABlogModal);","import React, { useState, useEffect } from \"react\";\r\nimport Modal from \"components/Modal\";\r\nimport { connect } from \"react-redux\";\r\nimport { toggleShareBlogModal, toggleShareDeepLinkModal } from \"stateManagement/reducers/modalReducer\";\r\nimport { Link } from \"react-router-dom\";\r\n\r\nimport { getRequest, postRequest } from \"sharedUtils/httpUtils\";\r\nimport { isValidUrl } from \"sharedUtils/validationUtils\";\r\nimport ActionButton from \"components/ActionButton\";\r\n\r\n/**\r\n * \r\n * @param {{loggedInUser:object, userId:any,followersFollowing:string, setLoggedInUser:Function}} props\r\n */\r\nconst ShareDeepLinkModal = (props) => {\r\n\r\n const [showCopied2, setCopiedText2] = useState(false);\r\n const [validUrl, setValidUrl] = useState(true);\r\n const [merchantExists, setMerchantExists] = useState(true);\r\n const [merchantId, setMerchantId] = useState(0);\r\n const [redirectUrl, setRedirectUrl] = useState(\"\");\r\n const [urlInput, setUrlInput] = useState(\"\");\r\n const [loading, setLoading] = useState(false);\r\n\r\n const resetParams = () => {\r\n setRedirectUrl(\"\");\r\n setMerchantExists(true);\r\n setValidUrl(true);\r\n setUrlInput(\"\");\r\n setMerchantId(0);\r\n }\r\n \r\n useEffect(() => {\r\n if (props.showModal === false) {\r\n resetParams();\r\n }\r\n }, [props.showModal])\r\n\r\n useEffect(() => {\r\n let isValid = isValidUrl(urlInput, true);\r\n if (urlInput.length > 3 && (isValid === false)) {\r\n setValidUrl(false);\r\n }\r\n else {\r\n setValidUrl(true);\r\n }\r\n }, [urlInput])\r\n\r\n const fetchMerchantByUrl = async (url) => {\r\n let route = '/api/Merchant/GetMerchantByHostname?url=' + url;\r\n\r\n setLoading(true);\r\n let merchant = await getRequest(route);\r\n setLoading(false);\r\n\r\n return merchant;\r\n }\r\n\r\n let renderCopiedText2 = () => {\r\n if (showCopied2) {\r\n setTimeout(() => { setCopiedText2(false) }, 500);\r\n return (\r\n\r\n Sorry, that doesn't look like a the URL to one of our Merchant Partners. https://www.example.com... \r\n\r\n
\r\n )\r\n }\r\n else {\r\n return \r\n
\r\n Sorry! \r\n
\r\n
Click \r\n
props.toggleModal(null)}>\r\n {\r\n \r\n
\r\n\r\n
\r\n
Share a Deep Link \r\n
Share a link to a page from one of RockPorch's many \r\n {/*
Share a Link to a Product or Page from one of RockPorch's many Merchants! */}\r\n {/*
0 && isValidUrl && !merchantExists ? \"\" : \"none\" }}>Merchant is not yet integrated yet with RockPorch.
*/}\r\n\r\n\r\n
\r\n\r\n {displayValidationMessage()}\r\n {displayMerchantNotIntegratedMessage()\r\n \r\n}\r\n\r\n
0 ? \"\" : \"none\" }}>\r\n { navigator.clipboard.writeText(redirectUrl); setCopiedText2(true); }}>{renderCopiedText2()} \r\n
\r\n
Reset \r\n\r\n
\r\n
\r\n
\r\n\r\n )\r\n}\r\n\r\nfunction mapStateToProps(storeState) {\r\n return {\r\n showModal: storeState.modalReducer.shareDeepLinkModal.showShareDeepLinkModal,\r\n }\r\n}\r\n\r\nconst mapDispatch = {\r\n toggleModal: toggleShareDeepLinkModal\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatch)(ShareDeepLinkModal);","import React, { useState, useEffect, useRef } from \"react\";\r\nimport Modal from \"components/Modal\";\r\nimport { connect } from \"react-redux\";\r\nimport { toggleAddProductOrDeepLinkModal } from \"stateManagement/reducers/modalReducer\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { Popover, PopoverBody, UncontrolledPopover } from \"reactstrap\";\r\nimport RockporchMountainIcon from \"components/icons/RockporchMountainIcon\";\r\nimport InformationIcon from \"components/icons/InformationIcon\";\r\nimport CloseIcon from \"components/icons/CloseIcon\";\r\n\r\nimport { getRequest, postRequest } from \"sharedUtils/httpUtils\";\r\nimport { isValidUrl } from \"sharedUtils/validationUtils\";\r\nimport ActionButton from \"components/ActionButton\";\r\nimport SaleIcon from \"components/icons/SaleIcon\";\r\nimport { currencyFormat, titleCase } from \"sharedUtils/productUtils\";\r\nimport { DateTime } from \"luxon\";\r\n\r\n/**\r\n * \r\n * @param {{loggedInUser:object, userId:any,followersFollowing:string, setLoggedInUser:Function}} props\r\n * productOrDeepLinkObject.resultType: 1 = Product, 2 = DeepLink, 3 = MerchantNotIntegrated\r\n */\r\nconst AddProductOrDeepLinkModal = (props) => {\r\n const [showCopied2, setCopiedText2] = useState(false);\r\n const [validUrl, setValidUrl] = useState(true);\r\n const [merchantExists, setMerchantExists] = useState(true);\r\n const [merchantId, setMerchantId] = useState(0);\r\n const [merchantName, setMerchantName] = useState(0);\r\n const [merchantLink, setMerchantLink] = useState(null);\r\n const [resultType, setResultType] = useState(0);\r\n const [redirectUrl, setRedirectUrl] = useState(\"\");\r\n const [urlInput, setUrlInput] = useState(\"\");\r\n const [loading, setLoading] = useState(false);\r\n const [loadingDeepLinkDetails, setLoadingDeepLinkDetails] = useState(false);\r\n const [product, setProduct] = useState(null);\r\n const [showLearnMore, setLearnMore] = useState(false);\r\n const [doDeepLinkDetails, setDoDeepLinkDetails] = useState(false);\r\n const [deepLinkDetailsFailed, setDeepLinkDetailsFailed] = useState(false);\r\n const [doAddDeepLinkData, setDoAddDeepLinkData] = useState(false);\r\n const [manufacturer, setManufacturer] = useState('');\r\n const [name, setName] = useState('');\r\n const [price, setPrice] = useState(''); // You can set an initial value if needed\r\n const [savedDeepLinkReturnObject, setSavedDeepLinkReturnObject] = useState(null);\r\n const [deepLinkPopoverOpen, setDeepLinkPopoverOpen] = useState(false);\r\n\r\n\r\n const inputRef = useRef(null);\r\n\r\n\r\n let isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);\r\n let bookmarkOrigin = window.location.origin;\r\n let buttonStyle = {\r\n background: \"#D2E3E0\"\r\n }\r\n const resetParams = (resetUrlInput = true) => {\r\n setRedirectUrl(\"\");\r\n setDoDeepLinkDetails(false);\r\n setDoAddDeepLinkData(false);\r\n setMerchantExists(true);\r\n setValidUrl(true);\r\n setMerchantId(0);\r\n setMerchantName(\"\");\r\n setMerchantLink(null);\r\n setManufacturer('');\r\n setName('');\r\n setPrice('');\r\n setDeepLinkDetailsFailed(false);\r\n setDeepLinkPopoverOpen(false);\r\n setSavedDeepLinkReturnObject(null);\r\n\r\n setResultType(0);\r\n setProduct(null);\r\n if (resetUrlInput) {\r\n setUrlInput(\"\");\r\n }\r\n if (!!(inputRef) && !!(inputRef.current)) {\r\n inputRef.current.focus();\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (props.isModal === false) {\r\n props.setShowTopNav(false);\r\n if (window.location.search.length > 0)\r\n {\r\n let productUrl = window.location.search.split(\"=\")[1];\r\n let decodedUrl = decodeURIComponent(productUrl);\r\n setUrlInput(decodedUrl);\r\n handleLogic(decodedUrl);\r\n handleGoogleAnalytics4Bookmark();\r\n }\r\n }\r\n }, [])\r\n\r\n useEffect(() => {\r\n if ((props.isModal == undefined || props.isModal == null || props.isModal == true) && props.showModal === false) {\r\n resetParams(true);\r\n }\r\n }, [props.showModal])\r\n\r\n useEffect(() => {\r\n let isValid = isValidUrl(urlInput, true);\r\n if (urlInput.length > 3 && (isValid === false)) {\r\n setValidUrl(false);\r\n }\r\n else {\r\n setValidUrl(true);\r\n }\r\n }, [urlInput])\r\n\r\n useEffect(() => {\r\n if (redirectUrl === \"\" && merchantId === 0 && !!(inputRef) && !!(inputRef.current)) {\r\n resetParams(true);\r\n }\r\n }, [redirectUrl])\r\n\r\n const resetMerchantLinkData = () => {\r\n setMerchantLink(null);\r\n setPrice(\"\");\r\n setName(\"\");\r\n setManufacturer(\"\");\r\n setDeepLinkDetailsFailed(false);\r\n setDoAddDeepLinkData(false);\r\n }\r\n\r\n const fetchProductOrDeepLinkByUrl = async (url) => {\r\n let route = \"/Products/GetProductOrDeepLinkByUrl\";\r\n let requestData = { url: url.trim() };\r\n setLoading(true);\r\n let merchant = await postRequest(route, requestData);\r\n setLoading(false);\r\n\r\n return merchant;\r\n }\r\n\r\n let renderCopiedText2 = () => {\r\n if (showCopied2) {\r\n setTimeout(() => { setCopiedText2(false) }, 500);\r\n return (\r\n\r\n Sorry, that doesn't look like a the URL to one of our Merchant Partners. https://www.example.com... \r\n\r\n
\r\n )\r\n }\r\n else {\r\n return \r\n
\r\n Sorry! \r\n
\r\n
Click \r\n
\r\n \r\n The product was successfully added to Saved Links!\r\n \r\n
\r\n )\r\n } else if (!!(savedDeepLinkReturnObject) && resultType === 2) {\r\n return (\r\n \r\n \r\n The link was successfully added to Saved Links!\r\n \r\n
\r\n )\r\n }\r\n else {\r\n return \r\n \r\n The product was successfully added to Saved Links!\r\n \r\n
\r\n )\r\n } else if (resultType === 1) {\r\n return (\r\n \r\n \r\n The product was successfully added to Saved Links!\r\n \r\n
\r\n )\r\n }\r\n else {\r\n return \r\n
Save Link Details \r\n
Add FAILED. Check data and try again.
\r\n\r\n
\r\n
Link
\r\n
\r\n
\r\n
\r\n
\r\n
Retailer
\r\n
setManufacturer(e.target.value)}\r\n style={{ backgroundColor: \"white\", border: \"none\", marginTop: \"\" }}\r\n readOnly\r\n />\r\n \r\n
\r\n
Brand Name
\r\n
0 ? manufacturer : \"\"}\r\n id=\"manufacturer\"\r\n placeholder={manufacturer.length === 0 ? \"Enter brand name if any\" : manufacturer}\r\n onChange={(e) => setManufacturer(e.target.value)}\r\n style={{ backgroundColor: \"#e9ecef\", border: \"none\", marginTop: \"\" }}\r\n autoFocus\r\n />\r\n \r\n\r\n
\r\n
Description*
\r\n
0 ? name : \"\"}\r\n id=\"name\"\r\n placeholder={name.length === 0 ? \"Enter link description\" : name}\r\n onChange={(e) => setName(e.target.value)}\r\n style={{ backgroundColor: \"#e9ecef\", border: \"none\", marginTop: \"\" }}\r\n />\r\n \r\n\r\n
\r\n
Retail Price
\r\n
setPrice(e.target.value)}\r\n style={{ backgroundColor: \"#e9ecef\", border: \"none\", marginTop: \"\" }}\r\n />\r\n \r\n\r\n
* Required field
\r\n\r\n
Save Link\r\n \r\n
Your commissionable link is in the box above!
\r\n
You can save this link and add details by pressing the button below .
\r\n
\r\n
\r\n Save Link\r\n \r\n \r\n
\r\n\r\n
\r\n
\r\n
\r\n
{\r\n e.target.onError = null\r\n e.target.src = \"images/blank-banner.png\"\r\n }} />\r\n
\r\n
\r\n\r\n
\r\n {\r\n props.deviceSize === \"sm\" ?\r\n <>\r\n
{displayManufacturer(product?.manufacturer)} \r\n\r\n
{product?.name.toUpperCase()} \r\n
{currencyFormat(product.price)}{product?.sale && !!(product?.salePrice) && !!(product?.originalPrice) ? currencyFormat(product?.originalPrice) : <>} {product?.sale && !!(product?.salePrice) ? \r\n\r\n
\r\n Estimated Commission\r\n \r\n \r\n\r\n \r\n Commissions are estimated based on factors including merchant rates, pricing, attribution methods (e.g., Mod1 or other), and fees at the time of a consumer's purchase. \r\n \r\n\r\n \r\n
{currencyFormat(product?.estimatedCommission || 0)} \r\n \r\n :\r\n <>\r\n
{displayManufacturer(product?.manufacturer)} \r\n\r\n
{product?.name.toUpperCase()} \r\n
{currencyFormat(product.price)}{product?.sale && !!(product?.salePrice) && !!(product?.originalPrice) ? currencyFormat(product?.originalPrice) : <>} {product?.sale && !!(product?.salePrice) ? \r\n\r\n
\r\n Estimated Commission\r\n \r\n \r\n\r\n \r\n Commissions are estimated based on factors including merchant rates, pricing, attribution methods (e.g., Mod1 or other), and fees at the time of a consumer's purchase. \r\n \r\n\r\n \r\n
{currencyFormat(product?.estimatedCommission || 0)} \r\n \r\n }\r\n \r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n {\r\n props.deviceSize === \"sm\" ?\r\n <>\r\n
{\r\n e.target.onError = null\r\n e.target.src = `images/blank-banner.png`\r\n }} />\r\n
{merchantLink?.referralUrl} \r\n \r\n :\r\n <>\r\n
{\r\n e.target.onError = null\r\n e.target.src = `images/blank-banner.png`\r\n }} />\r\n
{merchantLink?.referralUrl} \r\n \r\n }\r\n\r\n
\r\n
\r\n
\r\n
props.toggleModal(null)}>\r\n {\r\n \r\n
\r\n\r\n
\r\n
Create a Commissionable Link \r\n
0 ? \"none\" : \"\" }}>Paste URL from a merchant web page here. All URLs must be from a \r\n {/*
Share a Link to a Product or Page from one of RockPorch's many Merchants! */}\r\n {/*
0 && isValidUrl && !merchantExists ? \"\" : \"none\" }}>Merchant is not yet integrated yet with RockPorch.
*/}\r\n\r\n\r\n
\r\n\r\n
0 ? \"\" : \"none\" }}>\r\n { navigator.clipboard.writeText(redirectUrl); setCopiedText2(true); }}>{renderCopiedText2()} \r\n
\r\n\r\n {displayProductData()}\r\n\r\n {displayValidationMessage()}\r\n {displayMerchantNotIntegratedMessage()}\r\n {displayProductAddedMessage()}\r\n {displayLinkSavedMessage()}\r\n {displaySavedLinkData()}\r\n\r\n
0 ? \"\" : \"none\" }} className=\"btn btn-outline-brand btn-block\">Create another link \r\n\r\n
\r\n {\r\n props?.isModal !== false ?\r\n isMobileDevice ?\r\n (
\r\n
\r\n\r\n
\r\n PRO TIP: When adding several products to your inventory, the process moves much faster on a desktop!\r\n
\r\n
)\r\n :\r\n
\r\n :\r\n
\r\n }\r\n
\r\n
\r\n {\r\n props.isModal === false ?\r\n\r\n \r\n
\r\n\r\n
\r\n
Create a Commissionable Link \r\n
0 || (urlInput.length > 0 && isValidUrl && !merchantExists) ? \"none\" : \"\" }}>Paste URL from a merchant web page here. All URLs must be from a \r\n {/*
Share a Link to a Product or Page from one of RockPorch's many Merchants! */}\r\n {/*
0 && isValidUrl && !merchantExists ? \"\" : \"none\" }}>Merchant is not yet integrated yet with RockPorch.
*/}\r\n\r\n\r\n
\r\n\r\n
0 ? \"\" : \"none\" }}>\r\n { navigator.clipboard.writeText(redirectUrl); setCopiedText2(true); }}>{renderCopiedText2()} \r\n
\r\n\r\n {displayProductData()}\r\n {displayValidationMessage()}\r\n {displayMerchantNotIntegratedMessage()}\r\n {displayProductAddedMessage()}\r\n {displayLinkSavedMessage()}\r\n {displaySavedLinkData()}\r\n
\r\n \r\n
\r\n
\r\n \r\n )\r\n}\r\n\r\nfunction mapStateToProps(storeState, ownProps) {\r\n return {\r\n showModal: storeState.modalReducer.showShareModal,\r\n shareUrl: storeState.modalReducer.shareLink\r\n }\r\n}\r\n\r\nlet mapDispatch = {\r\n toggleModal: toggleShareModal\r\n}\r\nexport default connect(mapStateToProps,mapDispatch)(ShareModal);","import React from \"react\";\r\nimport Modal from \"components/Modal\";\r\nimport { Link } from \"react-router-dom\";\r\n\r\nconst SignUpModal = (props) => {\r\n React.useEffect(() => {\r\n if (props.showModal) {\r\n document.querySelector(\"body\").style.overflow = \"hidden\";\r\n } else {\r\n document.querySelector(\"body\").style.overflow = \"\";\r\n } \r\n }, [props]);\r\n\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Tell Your Story. Share in the Adventure. Sign up today. \r\n
\r\n
{ props.toggleSignUpModal() }}>Sign Up \r\n \r\n
\r\n
\r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default SignUpModal;\r\n","import React from \"react\";\r\n\r\nconst ThreeDotsVerticalIcon = () => {\r\n return (\r\n \r\n \r\n\r\n )\r\n}\r\n\r\nexport default ThreeDotsVerticalIcon;","import React, { useEffect, useState} from \"react\";\r\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\r\nimport SafariShareIcon from \"components/icons/SafariShareIcon\";\r\nimport ThreeDotsHorizontalIcon from \"components/icons/ThreeDotsHorizontalIcon\";\r\nimport ThreeDotsVerticalIcon from \"components/icons/ThreeDotsVerticalIcon\";\r\nimport { Link } from \"react-router-dom\";\r\nimport RockporchIcon from \"components/icons/RockporchMountainIcon\";\r\n\r\n/**\r\n * \r\n * @param {{isIOS:boolean,showPrompt:boolean, closePrompt:function}} props\r\n */\r\nconst AddToHomeScreenIOS = (props) => {\r\n const [modalOpen, setModalOpen] = useState(true);\r\n\r\n function toggleModal() {\r\n setModalOpen(!modalOpen);\r\n }\r\n\r\n\r\n function showIosMessage() {\r\n if (props.isIOS) {\r\n return Tap
\r\n }\r\n else {\r\n\r\n return (\r\n \r\n Tap \r\n \r\n and select \"Add To Homescreen\"\r\n
\r\n )\r\n }\r\n }\r\n\r\n function doNotRemind() {\r\n //const optOutKey = \"rockporch.InstallPrompt.OptOut\";\r\n //localStorage.setItem(optOutKey, true);\r\n props.closePrompt(); \r\n\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n {\r\n props.closePrompt()\r\n doNotRemind()\r\n }\r\n }>\r\n × \r\n \r\n\r\n \r\n Add RockPorch to your homescreen.
\r\n {showIosMessage()}\r\n \r\n \r\n )\r\n}\r\n\r\nexport default AddToHomeScreenIOS;","import React, { Component } from 'react';\r\nimport BrandNavMenu from './BrandNavMenu';\r\nimport NavMenu from './NavMenu';\r\nimport { connect } from \"react-redux\";\r\nimport { toggle } from \"../stateManagement/reducers/modalReducer\";\r\nimport { setBrandNavState } from \"../stateManagement/reducers/brandNavReducer\";\r\nimport AddProductModal from \"views/Product/AddProductModal\";\r\nimport CreateLockerModal from \"components/CreateLocker/CreateLockerModal\";\r\nimport FollowersFollowingModal from \"components/FollowersFollowing/FollowersFollowingModal\";\r\nimport PostPageModal from \"components/PostPageModal/PostPageModal\";\r\nimport BlogPageModal from \"components/BlogPageModal/BlogPageModal\";\r\nimport LockerPageModal from \"components/LockerPageModal/LockerPageModal\";\r\nimport ProductPageModal from \"components/ProductPageModal/ProductPageModal\";\r\nimport ShareABlogModal from \"components/ShareABlog/ShareABlogModal\";\r\nimport ShareDeepLinkModal from \"components/ShareDeepLink/ShareDeepLinkModal\";\r\nimport AddProductOrDeepLinkModal from \"components/AddProductOrDeepLink/AddProductOrDeepLinkModal\";\r\nimport ShareModal from \"components/Share/ShareModal\";\r\nimport SignUpModal from \"components/SignUpModal\";\r\nimport { Coordinator } from 'components/Post/Create/Coordinator';\r\nimport { toggleSharePostModal } from \"stateManagement/reducers/modalReducer\";\r\nimport { getRequest } from \"sharedUtils/httpUtils\";\r\n\r\nimport AddToHomeScreenIOS from './AddToHomescreenIOS';\r\n\r\nclass Layout extends Component {\r\n static displayName = Layout.name;\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showModal: false,\r\n }\r\n }\r\n\r\n toggleShowModal = () => {\r\n let newModal = !this.state.showModal;\r\n this.setState({ showModal: newModal })\r\n }\r\n\r\n componentDidUpdate = async (prevProps) => {\r\n if (prevProps.brandNav !== this.props.brandNav) {\r\n await this.props.setBrandNavState(this.props.brandNav);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n\r\n //\r\n
\r\n\r\n {this.props.brandNav ? \r\n
\r\n :\r\n
\r\n }\r\n\r\n
\r\n \r\n\t : <>\r\n\t */}\r\n\t {this.props.children}\r\n \r\n\r\n \r\n \r\n )}\r\n}\r\n\r\nfunction mapStateToProps(storeState, ownProps) {\r\n return { modalState: storeState.modalReducer, brandNavState: storeState.brandNavReducer.brandNavState }\r\n}\r\n\r\n\r\nexport default connect(mapStateToProps, { toggleModal: toggle, toggleSharePostModal: toggleSharePostModal, setBrandNavState })(Layout);\r\n","import React from \"react\";\r\nimport { Redirect } from \"react-router-dom\";\r\n\r\n/**\r\n * \r\n * @param {{loggedInUser:object}} props\r\n */\r\nconst AuthorizedLanding = (props) => {\r\n if (props.loggedInUser?.proStatusId === 1) {\r\n return
\r\n } else {\r\n return
\r\n }\r\n}\r\n\r\nexport default AuthorizedLanding;","import React from 'react'\r\nimport { Component } from 'react'\r\nimport { Route, Redirect } from 'react-router-dom'\r\nimport { ApplicationPaths, QueryParameterNames } from './ApiAuthorizationConstants'\r\nimport authService from './AuthorizeService'\r\nimport LoadSpinner from \"components/LoadSpinner\";\r\nimport { escapeLeadingUnderscores } from 'typescript'\r\n\r\nexport default class AuthorizeRoute extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n ready: false,\r\n authenticated: false,\r\n popUpAuthentication: {\r\n finished: false,\r\n jsxVal: Loading ...
}})\r\n var interval = setInterval(async () => {\r\n let isAuthenticated = await authService.isAuthenticated();\r\n if (authPopup) {\r\n\r\n if (isAuthenticated === true) {\r\n authPopup.close();\r\n jsx = Login unsuccessful } });\r\n clearInterval(interval);\r\n }\r\n\r\n }\r\n }, 3000);\r\n\r\n //return jsx;\r\n\r\n }\r\n\r\n render() {\r\n const { ready, authenticated } = this.state;\r\n \r\n\r\n let link = document.location;\r\n const returnUrl = `${link.pathname}${link.search}${link.hash}`;\r\n const redirectUrl = `${ApplicationPaths.Login}?${QueryParameterNames.ReturnUrl}=${returnUrl}`\r\n\r\n if (!ready) {\r\n return
;\r\n }\r\n else if (this.props.navRedirect != undefined && this.props.navRedirect != null) {\r\n return (\r\n \r\n
Waiting for login ... \r\n \r\n )\r\n }\r\n }*/\r\n else {\r\n const { component: Component, componentProps, ...rest } = this.props;\r\n return {\r\n if (authenticated) {\r\n return
\r\n }\r\n else {\r\n if (loggedInUser?.isAdmin == true) {\r\n return \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
Tell Your Story. Share in the Adventure. \r\n
\r\n
\r\n
\r\n
\r\n
Logging in ... \r\n
\r\n
Please wait while we log you in.
\r\n
{this.state.message}
\r\n
\r\n
\r\n
\r\n
\r\n
);\r\n default:\r\n throw new Error(`Invalid action '${action}'`);\r\n }\r\n }\r\n\r\n async login(returnUrl) {\r\n const state = { returnUrl };\r\n const result = await authService.signIn(state);\r\n switch (result.status) {\r\n case AuthenticationResultStatus.Redirect:\r\n break;\r\n case AuthenticationResultStatus.Success:\r\n await this.setIsLoggedInCookie();\r\n await this.navigateToReturnUrl(returnUrl);\r\n break;\r\n case AuthenticationResultStatus.Fail:\r\n this.setState({ message: result.message });\r\n break;\r\n default:\r\n throw new Error(`Invalid status result ${result.status}.`);\r\n }\r\n }\r\n\r\n async setIsLoggedInCookie() {\r\n let todayEpoch = Date.now();\r\n let today = todayEpoch.toLocaleString();\r\n let todayDate = new Date();\r\n let exDate = new Date(todayDate.getFullYear() + 50, todayDate.getMonth(), todayDate.getDay());\r\n \r\n let hostname = window.location.hostname;\r\n let domain = hostname === \"localhost\" ? hostname : hostname.substring(hostname.indexOf(\".\"));\r\n\r\n document.cookie = `_Rockporch.App.LoggedIn=${today};domain=${domain};expires=${exDate.toISOString()}`;\r\n }\r\n\r\n async processLoginCallback() {\r\n const url = window.location.href;\r\n const result = await authService.completeSignIn(url);\r\n switch (result.status) {\r\n case AuthenticationResultStatus.Redirect:\r\n // There should not be any redirects as the only time completeSignIn finishes\r\n // is when we are doing a redirect sign in flow.\r\n throw new Error('Should not redirect.');\r\n case AuthenticationResultStatus.Success:\r\n await this.navigateToReturnUrl(this.getReturnUrl(result.state));\r\n break;\r\n case AuthenticationResultStatus.Fail:\r\n this.setState({ message: result.message });\r\n break;\r\n default:\r\n throw new Error(`Invalid authentication result status '${result.status}'.`);\r\n }\r\n }\r\n\r\n getReturnUrl(state) {\r\n const params = new URLSearchParams(window.location.search);\r\n const fromQuery = params.get(QueryParameterNames.ReturnUrl);\r\n return (state && state.returnUrl) || fromQuery || `${window.location.origin}/`;\r\n }\r\n\r\n redirectToRegister() {\r\n this.redirectToApiAuthorizationPath(`${ApplicationPaths.IdentityRegisterPath}?${QueryParameterNames.ReturnUrl}=${encodeURI(ApplicationPaths.Login)}`);\r\n }\r\n\r\n redirectToProfile() {\r\n this.redirectToApiAuthorizationPath(ApplicationPaths.IdentityManagePath);\r\n }\r\n\r\n redirectToApiAuthorizationPath(apiAuthorizationPath) {\r\n const redirectUrl = `${window.location.origin}${apiAuthorizationPath}`;\r\n // It's important that we do a replace here so that when the user hits the back arrow on the\r\n // browser he gets sent back to where it was on the app instead of to an endpoint on this\r\n // component.\r\n window.location.replace(redirectUrl);\r\n }\r\n\r\n navigateToReturnUrl(returnUrl) {\r\n // It's important that we do a replace here so that we remove the callback uri with the\r\n // fragment containing the tokens from the browser history.\r\n window.location.replace(returnUrl);\r\n }\r\n}\r\n","import React from 'react'\r\nimport { Component } from 'react';\r\nimport authService from './AuthorizeService';\r\nimport { AuthenticationResultStatus } from './AuthorizeService';\r\nimport { QueryParameterNames, LogoutActions, ApplicationPaths } from './ApiAuthorizationConstants';\r\n\r\n// The main responsibility of this component is to handle the user's logout process.\r\n// This is the starting point for the logout process, which is usually initiated when a\r\n// user clicks on the logout button on the LoginMenu component.\r\nexport class Logout extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n message: undefined,\r\n isReady: false,\r\n authenticated: false,\r\n showLogin: false\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n const action = this.props.action;\r\n switch (action) {\r\n case LogoutActions.Logout:\r\n this.setState({ message: \"Please wait. Logging you out.\" });\r\n this.logout(this.getReturnUrl()); \r\n break;\r\n case LogoutActions.LogoutCallback:\r\n this.setState({ message: \"Logging you out. Almost done.\" });\r\n this.processLogoutCallback();\r\n break;\r\n case LogoutActions.LoggedOut:\r\n this.setState({ isReady: true, message: \"You have been successfully logged out.\" });\r\n break;\r\n default:\r\n throw new Error(`Invalid action '${action}'`);\r\n }\r\n\r\n this.populateAuthenticationState();\r\n }\r\n\r\n renderLoggedOut = (showLogin) => {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
Tell Your Story. Share in the Adventure. \r\n
\r\n
\r\n
\r\n
\r\n
Thanks for visiting. See you next time! \r\n
\r\n
{this.state.message}
\r\n {showLogin ?
Click here to login.
: <>}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n }\r\n\r\n const action = this.props.action;\r\n switch (action) {\r\n case LogoutActions.Logout:\r\n return (this.renderLoggedOut(false));\r\n case LogoutActions.LogoutCallback:\r\n return (this.renderLoggedOut(false));\r\n case LogoutActions.LoggedOut:\r\n return (this.renderLoggedOut(true));\r\n default:\r\n throw new Error(`Invalid action '${action}'`);\r\n }\r\n }\r\n\r\n async logout(returnUrl) {\r\n const state = { returnUrl };\r\n const isauthenticated = await authService.isAuthenticated();\r\n if (isauthenticated) {\r\n const result = await authService.signOut(state);\r\n switch (result.status) {\r\n case AuthenticationResultStatus.Redirect:\r\n break;\r\n case AuthenticationResultStatus.Success:\r\n await this.navigateToReturnUrl(returnUrl);\r\n break;\r\n case AuthenticationResultStatus.Fail:\r\n this.setState({ message: result.message });\r\n break;\r\n default:\r\n throw new Error(\"Invalid authentication result status.\");\r\n }\r\n } else {\r\n this.setState({ message: \"You successfully logged out!\" });\r\n }\r\n }\r\n\r\n async processLogoutCallback() {\r\n const url = window.location.href;\r\n const result = await authService.completeSignOut(url);\r\n switch (result.status) {\r\n case AuthenticationResultStatus.Redirect:\r\n // There should not be any redirects as the only time completeAuthentication finishes\r\n // is when we are doing a redirect sign in flow.\r\n throw new Error('Should not redirect.');\r\n case AuthenticationResultStatus.Success:\r\n await this.navigateToReturnUrl(this.getReturnUrl(result.state));\r\n break;\r\n case AuthenticationResultStatus.Fail:\r\n this.setState({ message: result.message });\r\n break;\r\n default:\r\n throw new Error(\"Invalid authentication result status.\");\r\n }\r\n }\r\n\r\n async populateAuthenticationState() {\r\n const authenticated = await authService.isAuthenticated();\r\n this.setState({ isReady: true, authenticated });\r\n }\r\n\r\n getReturnUrl(state) {\r\n const params = new URLSearchParams(window.location.search);\r\n const fromQuery = params.get(QueryParameterNames.ReturnUrl);\r\n if (fromQuery && !fromQuery.startsWith(`${window.location.origin}/`)) {\r\n // This is an extra check to prevent open redirects.\r\n throw new Error(\"Invalid return url. The return url needs to have the same origin as the current page.\")\r\n }\r\n return (state && state.returnUrl) ||\r\n fromQuery ||\r\n `${window.location.origin}${ApplicationPaths.LoggedOut}`;\r\n }\r\n\r\n navigateToReturnUrl(returnUrl) {\r\n return window.location.replace(returnUrl);\r\n }\r\n}\r\n","import React, { Component, Fragment } from 'react';\r\nimport { Route } from 'react-router';\r\nimport { Login } from './Login'\r\nimport { Logout } from './Logout'\r\nimport { ApplicationPaths, LoginActions, LogoutActions } from './ApiAuthorizationConstants';\r\n\r\nexport default class ApiAuthorizationRoutes extends Component {\r\n\r\n render () {\r\n return(\r\n \r\n loginAction(LoginActions.Login)} />\r\n loginAction(LoginActions.LoginFailed)} />\r\n loginAction(LoginActions.LoginCallback)} />\r\n loginAction(LoginActions.Profile)} />\r\n loginAction(LoginActions.Register)} />\r\n logoutAction(LogoutActions.Logout)} />\r\n logoutAction(LogoutActions.LogoutCallback)} />\r\n logoutAction(LogoutActions.LoggedOut)} />\r\n );\r\n }\r\n}\r\n\r\nfunction loginAction(name){\r\n return (\r\n
\r\n
\r\n
\r\n
\r\n \r\n {showBreadcrumb()}\r\n \r\n \r\n {props.children}\r\n
\r\n
\r\n
\r\n
\r\n \r\n )\r\n}\r\n\r\nexport default AnalyticsIcon;","import * as React from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport AccountBanner from \"../../components/AccountBanner\";\r\nimport AnalyticsIcon from \"components/icons/AnalyticsIcon\";\r\nimport { Helmet } from 'react-helmet';\r\nimport LightningIcon from \"components/icons/LightningIcon\";\r\n\r\nconst breadCrumbList = [{ link: '/Account/Dashboard', text: 'Account' }];\r\n\r\nconst AccountIndex = (props) => {\r\n\r\n React.useEffect(() => {\r\n let scrollOptions = {\r\n left: 0,\r\n top: 0,\r\n behavior: 'auto'\r\n }\r\n window.scrollTo(scrollOptions);\r\n }, []);\r\n\r\n const renderGoPro = () => {\r\n if (props?.loggedInUser?.proStatusId === 0) {\r\n return (\r\n \r\n
\r\n
\r\n \r\n
Apply as Creator \r\n \r\n
\r\n \r\n RockPorch - Account Dashboard \r\n \r\n \r\n Account \r\n Manage account and stay connected
\r\n \r\n\r\n \r\n \r\n
\r\n\r\n
\r\n
\r\n
\r\n \r\n
Account Settings \r\n \r\n
\r\n {renderGoPro()}\r\n\r\n
\r\n
\r\n
\r\n \r\n \r\n
My Saves \r\n \r\n
\r\n\r\n
\r\n
\r\n
\r\n Icon For Flag \r\n \r\n
Interests \r\n \r\n
\r\n\r\n\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default AccountIndex;\r\n","import * as React from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport AccountBanner from \"../../components/AccountBanner\";\r\nimport AnalyticsIcon from \"components/icons/AnalyticsIcon\";\r\nimport { Helmet } from 'react-helmet';\r\n\r\nconst breadCrumbList = [{ link: '/Account/CreatorDashboard', text: 'Creator Dashboard' }];\r\n\r\nconst CreatorDashboard = (props) => {\r\n\r\n React.useEffect(() => {\r\n let scrollOptions = {\r\n left: 0,\r\n top: 0,\r\n behavior: 'auto'\r\n }\r\n window.scrollTo(scrollOptions);\r\n }, []);\r\n\r\n const renderDrafts = () => {\r\n if (props?.loggedInUser?.proStatusId === 1) {\r\n return (\r\n \r\n
\r\n
\r\n \r\n
Drafts \r\n \r\n
\r\n
\r\n
\r\n \r\n
My Products \r\n \r\n
\r\n
\r\n
\r\n \r\n\r\n
Merchant Partners \r\n \r\n
\r\n
\r\n
\r\n \r\n
Creator Settings \r\n \r\n
\r\n
\r\n
\r\n
Analytics \r\n \r\n
\r\n
\r\n
\r\n
Analytics \r\n \r\n
\r\n \r\n RockPorch - Creator Dashboard \r\n \r\n \r\n Dashboard \r\n Tools for Creators
\r\n \r\n\r\n \r\n \r\n
\r\n {renderAnalytics()}\r\n {renderProducts()}\r\n {renderPartners()}\r\n {renderProSettings()}\r\n {renderDrafts()}\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default CreatorDashboard;\r\n","import React from \"react\"\r\n\r\n\r\nconst PenIcon = (props) => {\r\n return (\r\n \r\n \r\n )\r\n}\r\n\r\nexport default PenIcon;","import * as React from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport ImageWrapper from \"components/ImageWrapper\";\r\nimport ActionButton from \"components/ActionButton\";\r\nimport PenIcon from \"components/icons/PenIcon\";\r\nimport { postRequest } from \"sharedUtils/httpUtils\";\r\nimport { Popover, PopoverHeader, PopoverBody } from \"reactstrap\";\r\n\r\nclass CreatorDashboardHeader extends React.Component {\r\n\r\n state = {\r\n loggedInUser: null,\r\n profilePicUpdate: false,\r\n profilePicUploadError: false,\r\n uploadingImage: false,\r\n }\r\n\r\n componentDidMount = async () => {\r\n let scrollOptions = {\r\n left: 0,\r\n top: 0,\r\n behavior: 'auto'\r\n }\r\n window.scrollTo(scrollOptions);\r\n\r\n if (!!(this.props.loggedInUser)) {\r\n this.setState({ loggedInUser: this.props.loggedInUser })\r\n }\r\n }\r\n\r\n componentDidUpdate = (prevProps) => {\r\n if (prevProps.loggedInUser !== this.props.loggedInUser) {\r\n this.setState({ loggedInUser: this.props.loggedInUser })\r\n }\r\n }\r\n\r\n setSelectedFile = async (e) => {\r\n e.preventDefault();\r\n\r\n if (e.target.files?.length > 0 && e.target.files[0].type?.startsWith('image/')) {\r\n const file = e.target.files[0];\r\n\r\n const loggedInUser = { ...this.state.loggedInUser }\r\n loggedInUser.imageUrl = URL.createObjectURL(file);\r\n\r\n this.setState({ uploadingImage: true, loggedInUser });\r\n \r\n const formData = new FormData();\r\n formData.append('File', file);\r\n\r\n let uploadProfilePicUrl = '/api/Account/UploadProfilePic';\r\n\r\n postRequest(uploadProfilePicUrl, formData, null, false)\r\n .then((user) => {\r\n \r\n this.props.setLoggedInUser(user);\r\n\r\n this.setState({ profilePicUpdated: true })\r\n setTimeout(() => this.setState({ profilePicUpdated: false }), 3000);\r\n })\r\n .catch((error) => {\r\n console.error(\"Error uploading profile pic:\", error);\r\n });\r\n\r\n this.setState({ uploadProfilePicUrl: false })\r\n e.target.value = null;\r\n } else {\r\n this.setState({ profilePicUploadError: true })\r\n }\r\n };\r\n\r\n onClickImageUpload = (event) => {\r\n event.preventDefault();\r\n document.getElementById(\"profilePicInput\").click();\r\n };\r\n\r\n\r\n render() {\r\n const imageUrl = this.state.loggedInUser?.imageUrl;\r\n const userName = this.state.loggedInUser?.userName;\r\n\r\n const avatarStyle = this.props.deviceSize === \"sm\" ? { width: \"75px\", height: \"75px\" } : {};\r\n return (\r\n \r\n { this.setSelectedFile(e); }}\r\n />\r\n \r\n
\r\n\r\n
\r\n
\r\n
\r\n {imageUrl?.length > 0 ? < ImageWrapper src={imageUrl} size=\"Profile\" alt=\"\" /> : < ImageWrapper src=\"/images/avatar2.svg\" alt=\"\" style={avatarStyle} />}\r\n
{ this.onClickImageUpload(e) }} style={{ position: \"relative\", left: \"-5px\", cursor: \"pointer\", zIndex: 99 }} />\r\n this.setState({ profilePicUploadError: false })} placement=\"left\" isOpen={this.state.profilePicUploadError} target=\"changeProfilePic\">\r\n \r\n Make sure to select a single image file\r\n \r\n \r\n this.setState({ profilePicUpdated: false })}\r\n >\r\n Profile Picture Updated \r\n {/**/}\r\n {/* {*/}\r\n {/* this.props.history.push(`/Profile/${props.loggedInUser.userName}`);*/}\r\n {/* }}>*/}\r\n {/* Go to profile
*/}\r\n {/* {*/}\r\n {/* this.setDefaultProfilePicture();*/}\r\n {/* }}>*/}\r\n {/*
*/}\r\n {/* */}\r\n\r\n \r\n \r\n
\r\n {\r\n this.props.deviceSize === \"sm\" ?\r\n
{userName} \r\n\r\n :\r\n {userName} \r\n }\r\n \r\n
\r\n
\r\n
\r\n {\r\n this.props.deviceSize !== \"sm\" ?\r\n
\r\n
Schedule a Strategy Call \r\n
:\r\n <>\r\n\r\n }\r\n {/*
*/}\r\n {/*
Schedule a Strategy Call */}\r\n {/*
*/}\r\n
\r\n
Schedule a Strategy Call \r\n
\r\n );\r\n\r\n }\r\n\r\n};\r\n\r\nexport default withRouter(CreatorDashboardHeader);","import React from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport { Form, FormGroup, Input, CustomInput } from \"reactstrap\";\r\nimport ActionButton from \"../../components/ActionButton\";\r\nimport { getRequest, postRequest } from \"sharedUtils/httpUtils\";\r\nimport toast, { Toaster } from 'react-hot-toast';\r\n\r\n/**\r\n * \r\n * @param {{userInformation:object}} props\r\n */\r\nclass CreatorSettings extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n editMode: false,\r\n persistanceUpdated: false,\r\n paymentEmail: \"\",\r\n validEmail: true,\r\n userInformation: {\r\n address: \"\",\r\n city: \"\",\r\n state: \"\",\r\n postalCode: \"\",\r\n country: \"\",\r\n },\r\n paymentEmailPopover: false,\r\n isLoadingSaleMade: false,\r\n ucp: null,\r\n }\r\n }\r\n\r\n componentDidMount = () => {\r\n this.parseUserInfo();\r\n this.fetchUserCommunicationPreference();\r\n }\r\n\r\n componentDidUpdate = (prevProps, prevState) => {\r\n if (prevProps.paymentEmail !== this.props.paymentEmail) {\r\n this.setState({ paymentEmail: this.props.paymentEmail })\r\n }\r\n if (this.state.userInformation !== prevState.userInformation) {\r\n this.props.updateUserInformation(this.state.userInformation);\r\n }\r\n if (this.props.cancelEdit) {\r\n this.parseUserInfo();\r\n this.setState({ paymentEmail: this.props.persistentPaymentEmail ?? \"\" })\r\n this.props.resetCancelEdit();\r\n }\r\n }\r\n\r\n fetchUserCommunicationPreference = async () => {\r\n this.setState({ isLoadingSaleMade: true});\r\n\r\n const url = `api/Account/GetUserCommunicationPreference`\r\n const ucp = await getRequest(url);\r\n if (ucp != undefined && ucp != null) {\r\n this.setState({ ucp });\r\n }\r\n\r\n this.setState({ isLoadingSaleMade: false });\r\n };\r\n\r\n updateSettings = async (ucpInit) => {\r\n this.setState({ isLoadingSaleMade: true });\r\n\r\n const ucpObject = {\r\n paymentEmail: ucpInit.paymentEmail,\r\n salesEmail: ucpInit.salesEmail,\r\n }\r\n\r\n const userCommunicationPreferenceUrl = `api/Account/UpdateUserCommunicationPreference`;\r\n await postRequest(userCommunicationPreferenceUrl, ucpObject);\r\n\r\n this.setState({ isLoadingSaleMade: false });\r\n }\r\n\r\n checkEmailCriteria = (email) => {\r\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\r\n let validEmail = emailRegex.test(email);\r\n console.log(email, validEmail);\r\n this.setState({ validEmail })\r\n }\r\n\r\n onInputChange = (e) => {\r\n let formKey = e.target.name;\r\n let newData = e.target.value;\r\n\r\n if (formKey === 'paymentEmail') {\r\n this.checkEmailCriteria(newData.trim());\r\n\r\n this.setState({ paymentEmail: newData.trim() });\r\n this.props.updatePaymentEmail(newData.trim());\r\n }\r\n const userInformation = this.state.userInformation;\r\n userInformation[formKey] = newData;\r\n\r\n this.setState({ userInformation });\r\n this.props.updateUserInformation(userInformation);\r\n };\r\n\r\n onUcpInputChange = async (e) => {\r\n let name = e.target.name;\r\n let value = e.target.value;\r\n\r\n const ucp = { ...this.state.ucp };\r\n ucp[name] = !ucp[name];\r\n this.updateSettings(ucp);\r\n this.setState({ ucp });\r\n }\r\n\r\n parseUserInfo = () => {\r\n if (!!(this.props.userInformation)) {\r\n const propsUserInformation = this.state.persistanceUpdated && !!(this.props.persistentUserInformation) ? this.props.persistentUserInformation : this.props.userInformation;\r\n\r\n const userInformation = {\r\n address: propsUserInformation.address ?? \"\",\r\n city: propsUserInformation.city ?? \"\",\r\n state: propsUserInformation.state ?? \"\",\r\n postalCode: propsUserInformation.postalCode ?? \"\",\r\n country: propsUserInformation.country ?? \"\",\r\n };\r\n this.setState({ userInformation });\r\n }\r\n }\r\n\r\n \r\n render() {\r\n return (\r\n \r\n
\r\n
Personal Information \r\n\r\n
\r\n
\r\n
\r\n Address \r\n
\r\n {\r\n this.props.editMode ?\r\n
\r\n this.onInputChange(e)}\r\n disabled={this.props.isSaving}\r\n value={this.state.userInformation.address}\r\n />\r\n :\r\n
{this.state.userInformation.address}
\r\n }\r\n
\r\n
\r\n\r\n
\r\n\r\n
\r\n
\r\n
\r\n City \r\n
\r\n {\r\n this.props.editMode ?\r\n
\r\n this.onInputChange(e)}\r\n disabled={this.props.isSaving}\r\n value={this.state.userInformation.city}\r\n />\r\n :\r\n
{this.state.userInformation.city}
\r\n }\r\n
\r\n
\r\n
\r\n State \r\n
\r\n {\r\n this.props.editMode ?\r\n
\r\n this.onInputChange(e)}\r\n disabled={this.props.isSaving}\r\n value={this.state.userInformation.state}\r\n />\r\n :\r\n
{this.state.userInformation.state}
\r\n }\r\n
\r\n
\r\n
\r\n Zip Code \r\n
\r\n {\r\n this.props.editMode ?\r\n
\r\n this.onInputChange(e)}\r\n disabled={this.props.isSaving}\r\n value={this.state.userInformation.postalCode}\r\n />\r\n :\r\n
{this.state.userInformation.postalCode}
\r\n }\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n Country \r\n
\r\n {\r\n this.props.editMode ?\r\n
\r\n this.onInputChange(e)}\r\n disabled={this.props.isSaving}\r\n value={this.state.userInformation.country}\r\n />\r\n :\r\n
{this.state.userInformation.country}
\r\n }\r\n
\r\n
\r\n\r\n
Commissions & Payments \r\n
\r\n
\r\n
Connect Your PayPal Account \r\n Enter the email address associated with your PayPal account to get paid \r\n \r\n {\r\n this.props.editMode ?\r\n
\r\n PayPal Email Address
\r\n \r\n
this.onInputChange(e)}\r\n disabled={this.props.isSaving}\r\n value={this.state.paymentEmail}\r\n />\r\n \r\n
{\r\n toast.success(\r\n \r\n
Payment Email Updated \r\n
You're not done! We've sent an email to the address you provided. You need to click the \"Verify\" link in that email to confirm this change.
\r\n
Email must be in the correct format ie. name@company.com
\r\n\r\n :\r\n <>\r\n
PayPal Email Account:
\r\n
{!!(this.state.paymentEmail) && this.state.paymentEmail.trim().length > 0 ? this.state.paymentEmail : \"No Paypal Email Address On File\"}
\r\n \r\n }\r\n
\r\n
\r\n\r\n
\r\n
\r\n\r\n \r\n\r\n \r\n )\r\n}\r\n\r\nexport default InstagramIcon;","import React from \"react\";\r\n\r\nconst FacebookIconNoLink = () => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default FacebookIconNoLink;","import React from \"react\"\r\n\r\nconst TikTokIcon = (props) => {\r\n return <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n}\r\n\r\nexport default TikTokIcon;","import React from \"react\"\r\n\r\nconst StravaIcon = (props) => {\r\n const link = \"https://www.strava.com/athletes/\" + props.username;\r\n\r\n return (\r\n\t\t<>\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t \r\n\t\t\t\t \r\n\t\t\t \r\n\t\t\r\n\t)\r\n}\r\n\r\nexport default StravaIcon;\r\n\r\n","import React from \"react\";\r\nimport { Form, Button, Spinner } from \"reactstrap\";\r\nimport { isValidPassword } from \"sharedUtils/validationUtils\";\r\nimport { postRequest } from \"../../sharedUtils/httpUtils\";\r\nimport FormInputField from \"../../components/FormInputField\";\r\n\r\nclass ChangePasswordForm extends React.Component {\r\n minLengthMessage = 'Minimum 8 characters';\r\n doesNotMatchMessage = 'Password does not match';\r\n requiredCharactersMessage = 'Password must contain one uppercase letter, one lowercase letter, and one number';\r\n\r\n state = {\r\n formData: {\r\n password: \"\",\r\n newPassword: \"\",\r\n confirmPassword: \"\"\r\n },\r\n minLengthMessage: \"\",\r\n doesNotMatchMessage: \"\",\r\n requiredCharactersMessage: \"\",\r\n saving: false,\r\n passwordMessage: \"\",\r\n passwordMessageStyle: \"\"\r\n };\r\n\r\n onInputChange = (e) => {\r\n const { name, value } = e.target;\r\n const formData = { ...this.state.formData, [name]: value };\r\n\r\n // Set password validation messages\r\n if (name === \"newPassword\") {\r\n if (value.length < 8 && value.length > 0) {\r\n this.setState({ minLengthMessage: this.minLengthMessage, requiredCharactersMessage: \"\" });\r\n } else if (!isValidPassword(value)) {\r\n this.setState({ requiredCharactersMessage: this.requiredCharactersMessage, minLengthMessage: \"\" });\r\n } else {\r\n this.setState({ minLengthMessage: \"\", requiredCharactersMessage: \"\" });\r\n }\r\n }\r\n\r\n // Set password match message\r\n if (name === \"confirmPassword\" || name === \"newPassword\") {\r\n if (formData.newPassword !== formData.confirmPassword) {\r\n this.setState({ doesNotMatchMessage: this.doesNotMatchMessage });\r\n } else {\r\n this.setState({ doesNotMatchMessage: \"\" });\r\n }\r\n }\r\n\r\n this.setState({ formData });\r\n };\r\n\r\n onSubmit = async (event) => {\r\n event.preventDefault();\r\n this.setState({ saving: true });\r\n\r\n const { password, newPassword } = this.state.formData;\r\n const userUrl = '/api/Account/UpdatePassword';\r\n\r\n let result = await postRequest(userUrl, { password, newPassword });\r\n\r\n if (result) {\r\n this.setState({ passwordMessageStyle: \"text-success\", passwordMessage: \"Password updated successfully\" });\r\n } else {\r\n this.setState({ passwordMessageStyle: \"form-text-alert\", passwordMessage: \"Unable to update password. Please try again.\" });\r\n this.props.handlePasswordError();\r\n }\r\n this.setState({ saving: false });\r\n };\r\n\r\n renderSubmitButton = () => {\r\n const { password, newPassword, confirmPassword } = this.state.formData;\r\n const isValid = isValidPassword(password) && isValidPassword(newPassword);\r\n const canSubmit = password && newPassword.length >= 8 && confirmPassword === newPassword && isValid;\r\n\r\n return (\r\n \r\n {this.state.saving ? \r\n );\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default ChangePasswordForm;\r\n","import React from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport { getRequest } from \"sharedUtils/httpUtils\";\r\nimport InstagramIcon from \"components/icons/InstagramIcon\";\r\nimport FacebookIcon from \"components/icons/FacebookIconNoLink\";\r\nimport TikTokIcon from \"components/icons/TikTokIcon\";\r\nimport StravaIcon from \"components/icons/StravaIcon\";\r\nimport YoutubeIcon from \"components/icons/YoutubeIcon\";\r\nimport LoadSpinner from \"components/LoadSpinner\";\r\nimport { FormGroup, Input } from \"reactstrap\";\r\nimport CloseIcon from \"components/icons/CloseIcon\";\r\nimport ActionButton from \"components/ActionButton\";\r\nimport Modal from \"components/Modal\";\r\nimport ChangePasswordForm from \"views/Admin/ChangePasswordForm\";\r\n\r\nclass CreatorDashboardProfile extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n sectors: [],\r\n allSectors: [],\r\n stillAvailableSectors: [],\r\n fetchingSectors: true,\r\n editMode: false,\r\n toggleAdditionalCategories: false,\r\n showChangePasswordForm: false,\r\n userInformation: {\r\n id: 0,\r\n name: \"\",\r\n email: \"\",\r\n address: \"\",\r\n city: \"\",\r\n state: \"\",\r\n country: \"\",\r\n website: \"\",\r\n postalCode: \"\",\r\n phoneNumber: \"\",\r\n tagLine: \"\",\r\n bio: \"\",\r\n userName: \"\",\r\n googleUsername: \"\",\r\n facebookUsername: \"\",\r\n instagramUsername: \"\",\r\n tikTokUsername: \"\",\r\n stravaUsername: \"\",\r\n },\r\n };\r\n }\r\n\r\n componentDidMount = () => {\r\n this.parseUserInfo();\r\n this.getSectors();\r\n }\r\n\r\n componentDidUpdate = (prevProps, prevState) => {\r\n if (this.state.userInformation !== prevState.userInformation) {\r\n this.props.updateUserInformation(this.state.userInformation);\r\n }\r\n if (this.props.cancelEdit) {\r\n this.parseUserInfo();\r\n this.setPersistentSectors();\r\n this.props.resetCancelEdit();\r\n }\r\n }\r\n\r\n setPersistentSectors = () => {\r\n if (!!(this.props.persistentSectors)) {\r\n const sectors = this.props.persistentSectors;\r\n\r\n const stillAvailableSectors = this.state.allSectors.filter((allSector) => {\r\n return !sectors.find((sector) => {\r\n return allSector.sectorId === sector.sectorId\r\n })\r\n });\r\n\r\n this.setState({ sectors, stillAvailableSectors });\r\n }\r\n }\r\n\r\n addUserSector = (sector) => {\r\n const sectors = [...this.state.sectors, sector];\r\n const stillAvailableSectors = this.state.stillAvailableSectors.filter(s => s.sectorId !== sector.sectorId)\r\n this.setState({ sectors, stillAvailableSectors });\r\n this.props.updateSectors(sectors);\r\n }\r\n\r\n deleteUserSector = (sector) => {\r\n const sectors = this.state.sectors.filter(s => s.sectorId !== sector.sectorId)\r\n this.setState({ sectors, stillAvailableSectors: [sector, ...this.state.stillAvailableSectors] });\r\n this.props.updateSectors(sectors);\r\n }\r\n\r\n parseUserInfo = () => {\r\n if (!!(this.props.userInformation)) {\r\n const propsUserInformation = !!(this.props.persistentUserInformation) ? this.props.persistentUserInformation : this.props.userInformation;\r\n\r\n const userInformation = {\r\n name: propsUserInformation.name ?? \"\",\r\n email: propsUserInformation.email ?? \"\",\r\n address: propsUserInformation.address ?? \"\",\r\n website: propsUserInformation.website ?? \"\",\r\n phoneNumber: propsUserInformation.phoneNumber ?? \"\",\r\n tagLine: propsUserInformation.tagLine ?? \"\",\r\n bio: propsUserInformation.bio ?? \"\",\r\n userName: propsUserInformation.userName ?? \"\",\r\n\r\n googleUsername: propsUserInformation.googleUsername ?? \"\",\r\n facebookUsername: propsUserInformation.facebookUsername ?? \"\",\r\n instagramUsername: propsUserInformation.instagramUsername ?? \"\",\r\n tikTokUsername: propsUserInformation.tikTokUsername ?? \"\",\r\n stravaUsername: propsUserInformation.stravaUsername ?? \"\",\r\n };\r\n this.setState({ userInformation })\r\n }\r\n }\r\n\r\n getSectors = async () => {\r\n let sectors = await getRequest('/api/Sector/GetSectors') ?? [];\r\n let userSectors = await getRequest(`/api/Sector/GetSectorsByUser?userid=${this.props.userInformation.id}`) ?? [];\r\n let activeSectors = [];\r\n\r\n for (var i = 0; i < userSectors.length; ++i) {\r\n for (var j = 0; j < sectors.length; ++j) {\r\n if (userSectors[i].sectorId === sectors[j].sectorId) {\r\n activeSectors.push(sectors[j]);\r\n break;\r\n }\r\n }\r\n }\r\n\r\n const stillAvailableSectors = sectors.filter(s => !activeSectors.includes(s));\r\n\r\n this.setState({\r\n allSectors: sectors,\r\n sectors: activeSectors,\r\n stillAvailableSectors,\r\n fetchingSectors: false,\r\n toggleAdditionalCategories: activeSectors?.length === 0 ? true : this.state.toggleAdditionalCategories,\r\n });\r\n this.props.setSectors(activeSectors, sectors);\r\n }\r\n\r\n renderSectors = () => {\r\n const { fetchingSectors, sectors } = this.state;\r\n\r\n if (fetchingSectors === true) {\r\n return None
\r\n }\r\n else\r\n {\r\n return sectors.map((sector, i) => {\r\n return {sector.name} \r\n });\r\n }\r\n }\r\n\r\n toggleResetPasswordModal = () => {\r\n this.setState({ showChangePasswordForm: !this.state.showChangePasswordForm });\r\n }\r\n\r\n displayChangePasswordForm = () => {\r\n return (\r\n \r\n \r\n )\r\n\r\n }\r\n\r\n\r\n onInputChange = (e) => {\r\n let formKey = e.target.name;\r\n let newData = e.target.value;\r\n\r\n if (formKey === 'bio') {\r\n e.target.style.height = 'inherit';\r\n e.target.style.height = `${e.target.scrollHeight}px`;\r\n }\r\n const userInformation = this.state.userInformation;\r\n userInformation[formKey] = newData;\r\n\r\n this.setState({ userInformation });\r\n this.props.updateUserInformation(userInformation);\r\n };\r\n\r\n displaySocials() {\r\n const { userInformation } = this.state;\r\n const { instagramUsername } = userInformation;\r\n const normalizedInstagram = userInformation?.instagramUsername?.startsWith(\"@\") === true ? instagramUsername.substring(1) : instagramUsername;\r\n const socials = [\r\n {\r\n text: \"Facebook\",\r\n name: userInformation?.facebookUsername || null,\r\n icon: \r\n
\r\n {social.text} \r\n
\r\n
\r\n \r\n
\r\n
\r\n
this.onInputChange(e)}\r\n disabled={this.props.isSaving}\r\n value={this.state.userInformation[social.userInformationField]}\r\n style={{ marginLeft: \"-18px\" }}\r\n />\r\n \r\n
\r\n \r\n )\r\n }\r\n\r\n upwardChevron = () => {\r\n return (\r\n \r\n \r\n )\r\n }\r\n\r\n renderEditSectors = () => {\r\n return (\r\n \r\n
What are you most passionate about?
\r\n\r\n
My Passion List \r\n
\r\n
\r\n
this.setState({ toggleAdditionalCategories: !this.state.toggleAdditionalCategories })}>\r\n
Additional Categories \r\n {this.state.toggleAdditionalCategories ? this.upwardChevron() : this.downwardChevron()}\r\n \r\n
\r\n
\r\n
\r\n\r\n {this.displayChangePasswordForm()}\r\n\r\n
\r\n
\r\n
\r\n
\r\n Name \r\n
\r\n {\r\n this.props.editMode ?\r\n
\r\n this.onInputChange(e)}\r\n disabled={this.props.isSaving}\r\n value={this.state.userInformation.name}\r\n />\r\n :\r\n
{this.state.userInformation.name}
\r\n }\r\n
\r\n
\r\n
\r\n Email \r\n
\r\n {\r\n this.props.editMode ?\r\n
\r\n this.onInputChange(e)}\r\n disabled={this.props.isSaving}\r\n value={this.state.userInformation.email}\r\n />\r\n :\r\n
{this.state.userInformation.email}
\r\n }\r\n
\r\n
\r\n
\r\n Phone Number \r\n
\r\n {\r\n this.props.editMode ?\r\n
\r\n this.onInputChange(e)}\r\n value={this.state.userInformation.phoneNumber}\r\n disabled={this.props.isSaving}\r\n />\r\n :\r\n
{this.state.userInformation.phoneNumber}
\r\n }\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n Personal Website \r\n
\r\n {\r\n this.props.editMode ?\r\n
\r\n \r\n
\r\n
\r\n
this.onInputChange(e)}\r\n disabled={this.props.isSaving}\r\n value={this.state.userInformation.website}\r\n style={{ marginLeft: \"-18px\" }}\r\n />\r\n :\r\n
\r\n {this.state.userInformation.website}
\r\n }\r\n
\r\n
\r\n {\r\n this.props.editMode ?\r\n
\r\n
{ this.setState({ showChangePasswordForm: true }) }} style={{ borderRadius: \"3px\", bottom: \"5px\", width: [\"md\", \"sm\"].includes(this.props.deviceSize) ? \" 100%\" : \"\" }} className=\"btn btn-outline-brand\">Change Password \r\n
:\r\n <>}\r\n
\r\n
\r\n\r\n {this.props.editMode ?\r\n
\r\n
\r\n Tagline \r\n
\r\n
\r\n this.onInputChange(e)}\r\n value={this.state.userInformation.tagLine}\r\n disabled={this.props.isSaving}\r\n />\r\n \r\n
\r\n :\r\n this.state.userInformation?.tagLine == undefined || this.state.userInformation?.tagLine == null || this.state.userInformation?.tagLine === \"\" ?\r\n <>\r\n :\r\n
\r\n
\r\n Tagline \r\n
\r\n
{this.state.userInformation.tagLine}
\r\n
\r\n }\r\n\r\n {this.props.editMode ?\r\n
\r\n
\r\n Bio \r\n
\r\n
\r\n this.onInputChange(e)}\r\n value={this.state.userInformation.bio}\r\n style={{ overflow: \"hidden\" }}\r\n disabled={this.props.isSaving}\r\n />\r\n \r\n
\r\n :\r\n this.state.userInformation?.bio == undefined || this.state.userInformation?.bio == null || this.state.userInformation?.bio === \"\" ? \r\n <>\r\n :\r\n
\r\n
\r\n Bio \r\n
\r\n
{this.state.userInformation.bio}
\r\n
\r\n }\r\n\r\n
\r\n {this.displaySocials()}\r\n
\r\n\r\n {\r\n this.props.editMode ?\r\n this.renderEditSectors()\r\n :\r\n this.state.sectors == undefined || this.state.sectors == null || this.state.sectors == {} ?\r\n <> :\r\n
\r\n
\r\n
What are you most passionate about?
\r\n
My Passions
\r\n
\r\n
\r\n {this.renderSectors()}\r\n
\r\n
\r\n }\r\n
\r\n
setIsOpen(!isOpen)} className={`${props.forMobile ? \"mt-2\" : \"\"}`}>\r\n \r\n Action\r\n \r\n\r\n \r\n props.toggleShareModal(props.product, props.isUserMerchant ? props.isUserMerchant : false)}>\r\n Share\r\n \r\n\r\n \r\n Edit\r\n \r\n\r\n \r\n Delete\r\n \r\n \r\n\r\n \r\n\r\n )\r\n}\r\n\r\n\r\nexport default MyProductsItemDropdown;","import * as React from \"react\";\r\n\r\nfunction SvgCheckIconBlack(props) {\r\n return (\r\n \r\n \r\n \r\n \r\n\r\n
\r\n
{ if (!!product.shareCode) { window.open(redirectUrl, '_blank') } } }\r\n />\r\n\r\n \r\n
\r\n {product.manufacturer}\r\n
\r\n\r\n
{ if (!!product.shareCode) { window.open(redirectUrl, '_blank') } }}>\r\n {product.name}\r\n
\r\n\r\n
\r\n Retailer : {product.merchant}\r\n
\r\n\r\n
\r\n Price : {product.sale && !!(product.salePrice) ? ${product.salePrice.toFixed(2)} : <>} {currencyFormat(product.sale && !!(product.salePrice) && !!(product.originalPrice) ? product.originalPrice : product.price)} {props.product.sale && !!(props.product.salePrice) ? \r\n
\r\n\r\n
\r\n {props.analytics ? \"Estimated\" : \"Est.\"} Commission \r\n * \r\n : {currencyFormat(product.estimatedCommission)} \r\n
\r\n
\r\n
\r\n Get Link\r\n \r\n\r\n {\r\n props.analytics ?\r\n <>\r\n :\r\n \r\n\r\n
setIsOpen(!isOpen)} className={`${props.forMobile ? \"mt-2\" : \"\"}`}>\r\n \r\n Action\r\n \r\n\r\n \r\n props.toggleShareModal(getUrl())}>\r\n Share\r\n \r\n\r\n \r\n Edit\r\n \r\n\r\n props.hideClick(props.link)} className=\"p-1\">\r\n Delete\r\n \r\n \r\n\r\n \r\n\r\n )\r\n}\r\n\r\n\r\nexport default LinkItemDropdown;","import React, { useState } from \"react\";\r\nimport ActionButton from \"components/ActionButton\";\r\nimport LinkItemDropdown from \"views/Account/LinkItemDropdown\";\r\nimport ImageWrapper from \"components/ImageWrapper\";\r\n\r\nimport { currencyFormat } from \"sharedUtils/productUtils\";\r\n\r\n/**\r\n * \r\n * @param {{product:object,edit:Function, toggleProductModal:Function, toggleShareModal:Function}} props\r\n */\r\nconst LinkRowMobile = (props) => {\r\n let { link } = props;\r\n let pstyle = { fontFamily: \"Archivo\", fontSize: \"12px\", width: \"96%\" }\r\n\r\n const createMerchantLinkUrl = () => {\r\n let getLinkUrl = \"https://\";\r\n\r\n if (window.location.host.includes(\"app.rockp\") && !!link.shareSubdomain) {\r\n getLinkUrl += link.shareSubdomain + \".rockporch.com\";\r\n } else {\r\n getLinkUrl += window.location.host;\r\n }\r\n\r\n getLinkUrl = getLinkUrl + \"/mlink/\" + link.merchantId + \"?userId=\" + props.loggedInUser.id + \"&redirectUrl=\" + encodeURIComponent(link.referralUrl);\r\n return getLinkUrl;\r\n }\r\n\r\n const handleGetLink = async () => { \r\n props.handleGetLink(createMerchantLinkUrl());\r\n }\r\n\r\n const redirectUrl = \"https://\" + window.location.host + \"/mlink/\" + link.merchantId + \"?userId=\" + props.loggedInUser.id + \"&redirectUrl=\" + link.referralUrl;\r\n\r\n return (\r\n \r\n\r\n
\r\n
{ window.open(redirectUrl, '_blank') }}\r\n />\r\n\r\n \r\n
\r\n { window.open(redirectUrl, '_blank') }}>{link.brand} \r\n
\r\n\r\n
\r\n { window.open(redirectUrl, '_blank') }}>{!!(link?.description?.trim()) ? link?.description?.trim() : createMerchantLinkUrl()?.substring(0,35) + \"...\"} \r\n
\r\n\r\n
\r\n { window.open(redirectUrl, '_blank') }} style={{ cursor: \"pointer\" }}>Retailer : {link.merchantName} \r\n
\r\n\r\n
\r\n { window.open(redirectUrl, '_blank') }} style={{ cursor: \"pointer\" }}> { window.open(redirectUrl, '_blank') }} style={{ cursor: \"pointer\" }}>Price : {currencyFormat(link.price || 0)} \r\n
\r\n\r\n
\r\n { window.open(redirectUrl, '_blank') }} style={{ cursor: \"pointer\" }}>{props.analytics ? \"Estimated\" : \"Est.\"} Commission \r\n * \r\n : {currencyFormat(link.estimatedCommission || 0)} \r\n
\r\n
\r\n
\r\n Get Link\r\n \r\n\r\n {\r\n props.analytics ?\r\n <>\r\n :\r\n \r\n\r\n
)=>void,\r\n * saveSectorChanges:()=>void,\r\n * updateProductRating:(rating:Number)=>void\r\n * }} props\r\n */\r\nconst EditProductModal = (props) => {\r\n const [description, setDescription] = useState('');\r\n const [sectors, setSectors] = useState([]);\r\n const [sectorFilter, setSectorFilter] = useState(\"\");\r\n const [productRating, setProductRating] = useState(0);\r\n const [product, setProduct] = useState({});\r\n const [saving, setSaving] = useState(false);\r\n\r\n useEffect(() => {\r\n if (!saving) {\r\n setDescription(props.product?.userDescription || \"\");\r\n setSectors(props.sectors);\r\n setProductRating(props.product?.rating || 0);\r\n setProduct(props.product);\r\n }\r\n }, [props.product]);\r\n\r\n function removeSector(sectorId) {\r\n let productSectors = [...props.product.sectorIds];\r\n let location = productSectors.findIndex(secId => secId === sectorId);\r\n productSectors.splice(location, 1);\r\n props.updateSectors(productSectors);\r\n }\r\n\r\n function addSector(sectorId) {\r\n let productSectors = [...props.product.sectorIds];\r\n productSectors.push(sectorId);\r\n props.updateSectors(productSectors)\r\n }\r\n\r\n function displaySectors() {\r\n return sectors.filter(sector => sector.name.toLowerCase().includes(sectorFilter.toLowerCase()))\r\n .map((sector, i) => {\r\n if (props.product?.sectorIds?.includes(sector.sectorId)) {\r\n return (\r\n { removeSector(sector.sectorId); setSectorFilter(\"\"); }} key={i}>\r\n {sector.name}\r\n \r\n )\r\n }\r\n else {\r\n return (\r\n {addSector(sector.sectorId); setSectorFilter(\"\");}} key={i}>\r\n {sector.name}\r\n \r\n )\r\n }\r\n });\r\n }\r\n\r\n function startHover(nextValue, prevValue, name) {\r\n setProductRating(nextValue);\r\n }\r\n\r\n function startHoverOut(nextValue, prevValue, name) {\r\n setProductRating(product.rating || 0);\r\n }\r\n\r\n function displayRating() {\r\n return {\r\n if (index <= value) {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
setDescription(e.target.value)}\r\n type=\"textarea\"\r\n value={description}\r\n placeholder=\"\"\r\n inputStyle={{ backgroundColor: \"#e9ecef\" }}\r\n />\r\n\r\n setSectorFilter(e.target.value)}\r\n placeholder=\"Search for interests...\"\r\n inputStyle={{ backgroundColor: \"#e9ecef\" }}\r\n />\r\n\r\n \r\n \r\n Rating \r\n \r\n \r\n \r\n {displaySectors()}\r\n
\r\n\r\n \r\n\r\n
\r\n Cancel\r\n \r\n\r\n
{\r\n setSaving(true);\r\n await props.saveDescription(description);\r\n await props.saveSectorChanges();\r\n await props.submitRating(productRating, product);\r\n await props.updateProductsAndLinks();\r\n setSaving(false);\r\n props.toggleModal();\r\n props.goToSavedLinks();\r\n }\r\n }\r\n isLoading={saving}\r\n >\r\n Save\r\n \r\n\r\n
\r\n
\r\n
\r\n
\r\n\r\n )\r\n}\r\n\r\n\r\nexport default EditProductModal;","import React, { useState, useEffect } from \"react\";\r\nimport { Modal } from \"reactstrap\";\r\n\r\nimport ActionButton from \"components/ActionButton\";\r\n\r\n/**\r\n * \r\n * @param {{\r\n * showModal:boolean,\r\n * toggleModal:Function,\r\n * product:object,\r\n * productDescription:string,\r\n * saveDescription:(description:string)=>void,\r\n * sectors:[],\r\n * updateSectors:(sectorIds:Array)=>void,\r\n * saveSectorChanges:()=>void,\r\n * updateProductRating:(rating:Number)=>void\r\n * }} props\r\n */\r\nconst EditLinkModal = (props) => {\r\n const [link, setLink] = useState({});\r\n const [brand, setBrand] = useState(\"\");\r\n const [description, setDescription] = useState(\"\");\r\n const [price, setPrice] = useState(\"\")\r\n\r\n const tryParseFloat = (text) => {\r\n const parsed = parseFloat(text);\r\n return isNaN(parsed) ? null : parsed.toFixed(2);\r\n }\r\n\r\n useEffect(() => {\r\n setLink(props.link);\r\n setBrand(props.link.brand ?? \"\");\r\n setDescription(props.link.description ?? \"\");\r\n setPrice(props.link.price ?? \"\");\r\n }, [props.link]);\r\n\r\n const updateLink = async () => {\r\n let updatedLink = props.convertMerchantLinkToUploadableObject(props.link);\r\n updatedLink.brand = brand;\r\n updatedLink.description = description;\r\n updatedLink.price = tryParseFloat(price);\r\n\r\n await props.uploadLink(updatedLink);\r\n props.toggleModal();\r\n }\r\n\r\n // Add FAILED. Check data and try again.
\r\n\r\n\r\n return (\r\n \r\n \r\n
\r\n
Link
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
Description*
\r\n
0 ? description : \"\"}\r\n id=\"name\"\r\n placeholder={description.length === 0 ? \"Enter link description\" : description}\r\n onChange={(e) => setDescription(e.target.value)}\r\n style={{ backgroundColor: \"#e9ecef\", border: \"none\", marginTop: \"\" }}\r\n />\r\n \r\n\r\n
\r\n
Brand Name
\r\n
0 ? brand : \"\"}\r\n id=\"manufacturer\"\r\n placeholder={brand.length === 0 ? \"Enter brand name if any\" : brand}\r\n onChange={(e) => setBrand(e.target.value)}\r\n style={{ backgroundColor: \"#e9ecef\", border: \"none\", marginTop: \"\" }}\r\n autoFocus\r\n />\r\n \r\n\r\n
\r\n
Retail Price
\r\n
setPrice(e.target.value)}\r\n style={{ backgroundColor: \"#e9ecef\", border: \"none\", marginTop: \"\" }}\r\n />\r\n \r\n\r\n
* Required field
\r\n\r\n
\r\n
Cancel\r\n\r\n Save\r\n\r\n \r\n\r\n
\r\n\r\n )\r\n}\r\n\r\n\r\nexport default EditLinkModal;","import React from \"react\"\r\nimport { useState } from \"react\";\r\n\r\nimport { isValidUrl } from \"sharedUtils/validationUtils\";\r\n\r\n/** \r\n * @param {{loggedInUser: Object, title:string, shareCode:string?, customStyle:Object, shareBlockStyle:Object}} props \r\n */\r\nconst MerchantShareBlock = (props) => {\r\n\r\n const [showCopied2, setCopiedText2] = useState(false);\r\n const [invalidUrl, setInvalidUrl] = useState(false);\r\n const [redirectUrl, setRedirectUrl] = useState(\"\");\r\n const [urlInput, setUrlInput] = useState(\"\");\r\n\r\n let renderCopiedText2 = () => {\r\n if (showCopied2) {\r\n setTimeout(() => { setCopiedText2(false) }, 500);\r\n return (\r\n
\r\n
\r\n
\r\n Loading... \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
No results found \r\n {props.errorMessage ?
{props.errorMessage || \"\"}
: null}\r\n
\r\n {props.children}\r\n
\r\n
\r\n
\r\n \r\n
Product currently unavailable \r\n ,\r\n {\r\n duration: 3000,\r\n position: 'top-center',\r\n icon: null,\r\n }\r\n );\r\n }\r\n\r\n handleGetLink = (shareLink) => {\r\n navigator.clipboard.writeText(shareLink);\r\n\r\n toast.success(\r\n \r\n
Commissionable Link Copied to Clipboard! \r\n
Your commissionable link has been copied to clipboard and is ready to be shared
\r\n
;\r\n let headers = [\"Description\", \"Brand\", \"Retailer\", \"Retail Price\", \"Est. Comm.\", downloadIcon];\r\n\r\n return headers.map((header, i) => {\r\n return {header}{header === \"Est. Comm.\" ? <>\r\n \r\n \r\n Commissions are estimated based on factors including retailer rates, pricing, attribution methods (e.g., Mod1 or other), and fees at the time of a consumer's purchase. \r\n \r\n\r\n : null} \r\n })\r\n }\r\n\r\n downloadCsv = () => {\r\n const filteredProductsLinks = [...this.state.filteredProductsLinks];\r\n\r\n if (!filteredProductsLinks || filteredProductsLinks.length === 0) {\r\n return;\r\n }\r\n\r\n // Step 1: Process the array into CSV rows\r\n const rows = this.processProducts(filteredProductsLinks);\r\n\r\n // Step 2: Add headers to the CSV\r\n const csvContent = [\r\n 'Description, Brand, Retailer, Retail Price, Estimated Commission, Share Link', // CSV headers\r\n ...rows,\r\n ].join('\\n');\r\n\r\n // Step 3: Create the Blob and trigger download\r\n const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });\r\n const url = URL.createObjectURL(blob);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = 'products.csv';\r\n link.click();\r\n URL.revokeObjectURL(url);\r\n }\r\n\r\n processProducts(filteredProductsLinks) {\r\n return filteredProductsLinks.map((product, i) => {\r\n if (product.logoUrl) {\r\n return this.createCsvRowForLink(product);\r\n } else {\r\n return this.createCsvRowForProduct(product);\r\n }\r\n });\r\n }\r\n\r\n createCsvRowForLink(product) {\r\n let getLinkUrl = \"https://\";\r\n\r\n if (window.location.host.includes(\"app.rockp\") && !!product.shareSubdomain) {\r\n getLinkUrl += product.shareSubdomain + \".rockporch.com\";\r\n } else {\r\n getLinkUrl += window.location.host;\r\n }\r\n\r\n getLinkUrl = getLinkUrl + \"/mlink/\" + product.merchantId + \"?userId=\" + this.props.loggedInUser.id + \"&redirectUrl=\" + encodeURIComponent(product.referralUrl);\r\n return [\r\n (product.description?.trim()?.length > 0 ? product.description : getLinkUrl).replaceAll(',', '-'),\r\n (product.brand || ' ').replaceAll(',', '-'),\r\n (product.merchantName || ' ').replaceAll(',', '-'),\r\n !!(product.price) ? currencyFormat(product.price).replaceAll(',', '') : ' ',\r\n !!(product.estimatedCommission) ? currencyFormat(product.estimatedCommission).replaceAll(',', '') : ' ',\r\n getLinkUrl\r\n ].join(',');\r\n }\r\n\r\n createCsvRowForProduct(product) {\r\n let getLinkUrl = \"https://\";\r\n if (window.location.host.includes(\"app.rockp\") && !!product.shareSubdomain) {\r\n getLinkUrl += product.shareSubdomain + \".rockporch.com\";\r\n } else {\r\n getLinkUrl += window.location.host;\r\n }\r\n\r\n getLinkUrl = getLinkUrl + \"/prdlink/\" + product.shareCode;\r\n\r\n return [\r\n titleCase(this.concatMerchantProduct(product)).replaceAll(',', '-'),\r\n (product.manufacturer || '').replaceAll(',', '-'),\r\n (product.merchant || '').replaceAll(',', '-'),\r\n product.sale && product.salePrice !== undefined && product.salePrice !== null\r\n ? product.salePrice.toFixed(2) // Use sale price if valid\r\n : currencyFormat(\r\n product.sale && product.salePrice !== undefined && product.salePrice !== null && product.originalPrice !== undefined && product.originalPrice !== null\r\n ? product.originalPrice // Use original price if sale price exists but original price is valid\r\n : product.price !== undefined && product.price !== null\r\n ? product.price // Use price if valid\r\n : 0 // Default to 0 if all prices are invalid\r\n ).replaceAll(',', ''),\r\n\r\n // Estimated commission, safely formatted\r\n currencyFormat(product.estimatedCommission || 0).replaceAll(',', ''),\r\n getLinkUrl,\r\n ].join(',');\r\n }\r\n\r\n\r\n concatMerchantProduct = (product) => {\r\n if (product.name.toLowerCase().indexOf(product.manufacturer.toLowerCase()) === 0) {\r\n return product.name.slice(product.manufacturer.length - product.name.length).trim();\r\n }\r\n return product.name;\r\n }\r\n\r\n displayShareModal = () => {\r\n return (\r\n \r\n \r\n )\r\n }\r\n\r\n displayTableRows = () => {\r\n if (this.state.filteredProductsLinks?.length > 0) {\r\n return this.state.filteredProductsLinks.map((product, i) => {\r\n\r\n if (product.logoUrl?.length > 0) {\r\n return this.displayLinksRows(product, i);\r\n }\r\n\r\n let getLinkUrl = \"https://\";\r\n if (window.location.host.includes(\"app.rockp\") && !!product.shareSubdomain) {\r\n getLinkUrl += product.shareSubdomain + \".rockporch.com\";\r\n } else {\r\n getLinkUrl += window.location.host;\r\n }\r\n\r\n getLinkUrl = getLinkUrl + \"/prdlink/\" + product.shareCode;\r\n // product.titleCase(this.concatMerchantProduct(product)), product.manufacturer, product.merchant, product.sale && !!(product.salePrice) ? product.salePrice.toFixed(2) : currencyFormat(product.sale && !!(product.salePrice) && !!(product.originalPrice) ? product.originalPrice : product.price), currencyFormat(product.estimatedCommission)\r\n const url = \"/Product/ProductPage/\" + product.shareCode;\r\n return (\r\n \r\n \r\n \r\n \r\n
{titleCase(this.concatMerchantProduct(product))}{product.sale && !!(product.salePrice) ? \r\n \r\n \r\n \r\n\r\n\r\n \r\n {product.manufacturer} \r\n \r\n\r\n \r\n {product.merchant} \r\n \r\n\r\n \r\n {product.sale && !!(product.salePrice) ? ${product.salePrice.toFixed(2)} : <>} {currencyFormat(product.sale && !!(product.salePrice) && !!(product.originalPrice) ? product.originalPrice : product.price)} \r\n \r\n\r\n \r\n {currencyFormat(product.estimatedCommission)} \r\n \r\n\r\n \r\n \r\n
this.handleGetLink(getLinkUrl)}\r\n style={{ borderRadius: \"3px\", bottom: \"5px\", lineHeight: \"16px\", fontSize: \"14px\", height: \"30px\" }} className=\"btn btn-outline-brand mr-2\">Get Link\r\n \r\n\r\n
{\r\n this.setState({ showEditProduct: !this.state.showEditProduct, productToEditIndex: i });\r\n }}\r\n hideClick={() => this.hide(i)}\r\n toggleShareModal={this.toggleProductShareModal}\r\n product={product}\r\n isUserMerchant={(product.user?.id && this.props.loggedInUser?.id) ? product.user.id === this.props.loggedInUser.id : false}\r\n />\r\n \r\n \r\n )\r\n })\r\n }\r\n }\r\n\r\n displayLinksRows = (link, i) => {\r\n\r\n let getLinkUrl = \"https://\";\r\n\r\n if (window.location.host.includes(\"app.rockp\") && !!link.shareSubdomain) {\r\n getLinkUrl += link.shareSubdomain + \".rockporch.com\";\r\n } else {\r\n getLinkUrl += window.location.host;\r\n }\r\n\r\n getLinkUrl = getLinkUrl + \"/mlink/\" + link.merchantId + \"?userId=\" + this.props.loggedInUser.id + \"&redirectUrl=\" + encodeURIComponent(link.referralUrl);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n
{link.description?.trim()?.length > 0 ? link.description : getLinkUrl} \r\n \r\n \r\n \r\n\r\n \r\n {link.brand} \r\n \r\n\r\n \r\n {link.merchantName} \r\n \r\n\r\n \r\n {!!(link.price) ? currencyFormat(link.price) : \"\"} \r\n \r\n\r\n \r\n {!!(link.estimatedCommission) ? currencyFormat(link.estimatedCommission) : \"\"} \r\n \r\n\r\n \r\n \r\n\r\n
this.handleGetLink(getLinkUrl)}\r\n style={{ borderRadius: \"3px\", bottom: \"5px\", lineHeight: \"16px\", fontSize: \"14px\", height: \"30px\" }} className=\"btn btn-outline-brand mr-2\">Get Link\r\n \r\n
{\r\n this.setState({ showEditLink: !this.state.showEditLink, linkToEdit: link })\r\n }}\r\n />\r\n \r\n \r\n )\r\n }\r\n\r\n handleEditClick = (link) => {\r\n this.setState({ showEditLink: !this.state.showEditLink, linkToEdit: link })\r\n }\r\n\r\n toggleMerchantLinkShareModal = (merchantLinkShareLink) => {\r\n this.setState({ merchantShareModalOpen: !this.state.merchantShareModalOpen, merchantLinkShareLink: this.state.merchantShareModalOpen ? \"\" : merchantLinkShareLink });\r\n }\r\n\r\n displayMerchantShareModal = () => {\r\n let shareProps = {\r\n shareCode: this.state.merchantLinkShareLink,\r\n title: \"Merchant share\",\r\n customStyle: { maxWidth: \"100%\", backgroundColor: \"white\" },\r\n shareBlockStyle: { border: \"none\", backgroundColor: \"transparent\" },\r\n loggedInUser: this.props.loggedInUser,\r\n type: \"merchant\",\r\n }\r\n return (\r\n this.toggleMerchantLinkShareModal(\"\")}>\r\n \r\n \r\n \r\n )\r\n }\r\n\r\n convertMerchantLinkToUploadableObject = (link) => {\r\n return {\r\n id: link.id,\r\n merchantId: link.merchantId,\r\n creatorUserId: link.creatorUserId,\r\n referralUrl: link.referralUrl,\r\n description: link.description,\r\n brand: link.brand ?? null,\r\n price: link.price ?? null,\r\n hide: link.hide ?? null\r\n };\r\n }\r\n\r\n hideMerchantLink = async (link) => {\r\n var links = this.state.links.filter(l => l.id !== link.id)\r\n var filteredProductsLinks = this.state.filteredProductsLinks.filter(l => l.id !== link.id || !(link.logoUrl));\r\n this.setState({ links, filteredProductsLinks });\r\n\r\n let url = `/Products/AddMerchantLinkData/`;\r\n let uploadLink = this.convertMerchantLinkToUploadableObject(link);\r\n uploadLink.hide = true;\r\n await postRequest(url, uploadLink);\r\n }\r\n\r\n uploadLink = async (link) => {\r\n this.setState({ loadingLinkUpload: true })\r\n let url = `/Products/AddMerchantLinkData/`;\r\n await postRequest(url, link);\r\n await this.updateProductsAndLinks();\r\n this.props.goToSavedLinks();\r\n this.setState({ loadingLinkUpload: false })\r\n }\r\n\r\n toggleProductShareModal = async (product, isUserMerchant = false) => {\r\n let showModal = !this.state.modalOpen;\r\n\r\n if (showModal) {\r\n let shareLink = await getProductShareLink(product?.shareCode);\r\n this.setState({ modalOpen: showModal, shareLink, isUserMerchant });\r\n }\r\n else {\r\n this.setState({ modalOpen: showModal, shareLink: \"\", isUserMerchant });\r\n }\r\n \r\n //this.props.toggleShareModal(shareLink);\r\n }\r\n\r\n showProductsMobile = () => {\r\n if (this.state.filteredProductsLinks?.length === 0) {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n\r\n return this.displayProductsMobile();\r\n }\r\n\r\n displayProductsMobile = () => {\r\n return this.state.filteredProductsLinks?.map((product, i) => {\r\n if (product.logoUrl?.length > 0) {\r\n return (\r\n {\r\n this.setState({ showEditLink: !this.state.showEditLink, linkToEdit: product })\r\n }}\r\n deviceSize={this.props.deviceSize}\r\n />\r\n )\r\n }\r\n return (\r\n \r\n
this.setState({ showEditProduct: !this.state.showEditProduct, productIndex: i })}\r\n hide={() => { this.hide(i) }}\r\n toggleProductModal={() => this.props.toggleProductPageModal(product, this.props.loggedInUser, false, () => null)}\r\n toggleShareModal={this.toggleProductShareModal}\r\n isUserMerchant={(product.user?.id && this.props.loggedInUser?.id) ? product.user.id === this.props.loggedInUser.id : false}\r\n editClick={(e) => {\r\n this.setState({ showEditProduct: !this.state.showEditProduct, productToEditIndex: i })\r\n }}\r\n hideClick={() => this.hide(i)}\r\n deviceSize={this.props.deviceSize}\r\n />\r\n {\r\n this.setState({ showEditLink: !this.state.showEditLink, linkToEdit: link })\r\n }}\r\n deviceSize={this.props.deviceSize}\r\n />\r\n )\r\n\r\n })\r\n }\r\n\r\n showLinksMobile = () => {\r\n if (this.state.links?.length === 0) {\r\n return (\r\n \r\n
\r\n ) \r\n }\r\n return (\r\n this.displayLinksMobile()\r\n );\r\n }\r\n\r\n fetchCounts = async (userId) => {\r\n let productCountUrl = `/Products/GetUserMerchantProductCount?userId=${userId}&onlyPostedProducts=false`\r\n let productCount = (await getRequest(productCountUrl)).count;\r\n\r\n this.setState({ productCount });\r\n return productCount;\r\n }\r\n\r\n fetchProducts = async () => {\r\n this.setState({ mostRecentSearch: this.state.filter });\r\n let basePath = this.props.loggedInUser ? \"/Products/GetUserMerchantProductsAuthorized\" : \"/Products/GetUserMerchantProducts\";\r\n let url = `${basePath}?userName=${this.props.loggedInUser.userName}`;\r\n //let url = `/Products/GetUserMerchantProducts?userName=pterracina&skip=${skip}&take=${take}`;\r\n let products = await getRequest(url);\r\n if (products) {\r\n products.forEach(product => product.user = this.props.loggedInUser);\r\n }\r\n\r\n return products;\r\n }\r\n\r\n fetchLinks = async () => {\r\n let url = \"/Products/GetMerchantLinksByUserId?userId=\" + this.props.loggedInUser.id;\r\n let links = await getRequest(url);\r\n if (links) {\r\n links.forEach(link => link.user = this.props.loggedInUser);\r\n\r\n }\r\n return links;\r\n }\r\n\r\n\r\n fetchMoreProducts = async () => {\r\n this.setState({ loadingMore: true });\r\n\r\n let skip = this.state.products.length;\r\n let take = 100;\r\n\r\n let basePath = this.props.loggedInUser ? \"/Products/GetUserMerchantProductsAuthorized\" : \"/Products/GetUserMerchantProducts\";\r\n let url = `${basePath}?userName=${this.props.loggedInUser.userName}&skip=${skip}&take=${take}&searchTerm=${this.state.filter}`;\r\n let products = await getRequest(url);\r\n\r\n if (products === undefined || products === null || products?.length === 0) {\r\n this.setState({ finishedFetchingProducts: true, loadingMore: false });\r\n }\r\n else {\r\n let newProducts = [...this.state.products, ...products];\r\n this.setState({ products: newProducts, filteredProducts: newProducts, loadingMore: false, finishedFetchingProducts: products.length < take });\r\n }\r\n }\r\n\r\n saveProductSectors = async (productIndex) => {\r\n let product = this.state.filteredProductsLinks[productIndex];\r\n let url = `/Products/UpdateUserMerchantProductSectors?userMerchantProductId=${product.userMerchantProductId}`;\r\n await postRequest(url, product.sectorIds);\r\n }\r\n\r\n updateProductDescription = async (productIndex, description) => {\r\n let productId = this.state.filteredProductsLinks[productIndex].userMerchantProductId;\r\n let product = { ...this.state.filteredProductsLinks[productIndex] };\r\n product.userDescription = description;\r\n let url = `/Products/EditUserMerchantProduct/${productId}`;\r\n\r\n let payload = {\r\n id: product.userMerchantProductId,\r\n userDescription: product.userDescription,\r\n merchantProductId: product.merchantProductId,\r\n coupon: product.shareCode,\r\n userId: this.props.loggedInUser.id\r\n }\r\n await postRequest(url, payload);\r\n\r\n }\r\n\r\n updateProductRating = (productRating) => {\r\n const { products, filteredProductsLinks } = this.state;\r\n const productToEditIndex = this.state.productToEditIndex;\r\n\r\n let product = filteredProductsLinks[productToEditIndex];\r\n product.rating = productRating;\r\n\r\n const updatedProducts = products.map(p =>\r\n p.userMerchantProductId === product.userMerchantProductId\r\n ? { ...p, rating: productRating }\r\n : p\r\n );\r\n\r\n const updatedProductsLinks = filteredProductsLinks.map(p =>\r\n !!(p.userMerchantProductId) && p.userMerchantProductId === product.userMerchantProductId\r\n ? { ...p, rating: productRating }\r\n : p\r\n );\r\n this.setState({ filteredProductsLinks: updatedProductsLinks, products: updatedProducts });\r\n }\r\n\r\n\r\n updateProductSectors = async (productIndex, sectors) => {\r\n let filteredProductsLinks = [...this.state.filteredProductsLinks];\r\n let product = filteredProductsLinks[productIndex];\r\n\r\n if (!!(product)) {\r\n product.sectorIds = sectors;\r\n filteredProductsLinks[productIndex] = product;\r\n\r\n this.setState({ filteredProductsLinks });\r\n }\r\n }\r\n\r\n onInputChange = (e, reset = false) => {\r\n let filter = \"\";\r\n\r\n if (reset) {\r\n filter = e;\r\n } else {\r\n filter = e.target.value;\r\n }\r\n\r\n this.setState({ filter });\r\n };\r\n\r\n onInputKeydown = (e) => {\r\n if (e.keyCode === 13) {\r\n this.updateProducts();\r\n }\r\n }\r\n\r\n resetFilter = () => {\r\n if (this.state.filter !== \"\") {\r\n const filter = \"\";\r\n this.setState({ filter });\r\n\r\n this.setState({ reset: this.state.reset + 1 });\r\n if (this.state.tab === 1) {\r\n this.setState({ filter: \"\", filteredLinks: this.state.links });\r\n }\r\n }\r\n }\r\n\r\n displayGetLinkModal = () => {\r\n return (\r\n this.setState({ getLinkPopover: !this.state.getLinkPopover })}\r\n >\r\n Your product link has been copied to clipboard and is ready to be included in your post
\r\n\r\n \r\n )\r\n }\r\n\r\n onTabChange = (tab) => {\r\n this.setState({ tab });\r\n this.props.setProductsTab(tab);\r\n }\r\n\r\n submitRating = async (productRating, product) => {\r\n if (productRating > 0) {\r\n this.updateProductRating(productRating);\r\n\r\n let url = \"/Products/Rate?id=\" + product.userMerchantProductId + \"&rating=\" + productRating;\r\n let rating = await getRequest(url);\r\n }\r\n }\r\n\r\n render() {\r\n let breadCrumbList = [{ link: '/Account/CreatorDashboard', text: 'Creator Dashboard' }, { link: '/Account/Products', text: 'My Products', active: true }];\r\n let smallSizes = [\"sm\", \"md\"];\r\n let { deviceSize } = this.props;\r\n let { productToEditIndex } = this.state;\r\n\r\n return (\r\n \r\n
\r\n RockPorch - My Products \r\n \r\n
\r\n {\r\n this.state.products != undefined && this.state.products?.length > 0 ? (\r\n
this.setState({ showEditProduct: false })}\r\n product={this.state.filteredProductsLinks[this.state.productToEditIndex]}\r\n productDescription={this.state.filteredProductsLinks[this.state.productToEditIndex]?.userDescription}\r\n saveDescription={(description) => this.updateProductDescription(productToEditIndex, description)}\r\n updateSectors={(sectors) => this.updateProductSectors(this.state.productToEditIndex, sectors)}\r\n sectors={this.state.sectors}\r\n saveSectorChanges={() => this.saveProductSectors(productToEditIndex)}\r\n updateProductRating={(rating) => this.updateProductRating(productToEditIndex, rating)}\r\n submitRating={this.submitRating}\r\n updateProductsAndLinks={this.updateProductsAndLinks}\r\n setLoading={this.setLoading}\r\n goToSavedLinks={this.props.goToSavedLinks}\r\n /> \r\n ): null\r\n }\r\n\r\n {\r\n !!(this.state.linkToEdit) && this.state.showEditLink ?(\r\n this.setState({ showEditLink: false, linkToEdit: null })}\r\n loadingLinkUpload={this.state.loadingLinkUpload}\r\n uploadLink={this.uploadLink}\r\n link={this.state.linkToEdit}\r\n convertMerchantLinkToUploadableObject={this.convertMerchantLinkToUploadableObject}\r\n />\r\n ) : null\r\n }\r\n\r\n {\r\n this.displayShareModal()\r\n }\r\n\r\n {\r\n this.displayMerchantShareModal()\r\n }\r\n\r\n \r\n \r\n Saved Links \r\n Manage commissionable links for your social posts
\r\n \r\n \r\n\r\n \r\n {this.displayGetLinkModal()}\r\n\r\n {\r\n smallSizes.includes(deviceSize) ? (\r\n \r\n
\r\n
\r\n Estimated Commission\r\n * \r\n \r\n
\r\n \r\n Commissions are estimated based on factors including retailer rates, pricing, attribution methods (e.g., Mod1 or other), and fees at the time of consumer's purchase\r\n \r\n \r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n
\r\n\r\n {this.state.loading ?\r\n
\r\n :\r\n <>\r\n }\r\n\r\n {\r\n this.state.addingProduct ?\r\n
\r\n : <>\r\n }\r\n\r\n {\r\n smallSizes.includes(deviceSize) && !this.state.loading ? (\r\n <>\r\n {this.showProductsMobile()}\r\n \r\n\r\n ) \r\n\r\n : !this.state.loading ? (\r\n\r\n
\r\n
\r\n \r\n \r\n {this.displayTableHeader()}\r\n \r\n \r\n\r\n \r\n \r\n {this.displayTableRows()}\r\n \r\n
\r\n
\r\n \r\n ) : <>\r\n }\r\n\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Have Questions, Comments, or Ideas?\r\n \r\n
\r\n
\r\n
\r\n We’re here to help!\r\n
\r\n
\r\n The RockPorch Creator Development Team is here to help guide and support you every step of the way! Whether that's questions on how to get started or keep the momentum going, or you have great ideas on features that would make your life easier, just click the Contact Us Button and we’ll get right back to you!\r\n
\r\n {\r\n this.props.creatorApp ?\r\n <>\r\n :\r\n <>\r\n
\r\n In the meantime, here are a couple of resources that may help:\r\n
\r\n
\r\n 🔎 Dive into our Creator Frequently Asked Questions to get quick answers to any issues you might be facing here !.\r\n
\r\n
\r\n 💡 Learn strategy and get platform tutorials on our Creator Resources page here .\r\n
\r\n
\r\n 💪 We have a private Facebook group just for RockPorch creators. You’ll find tips, tricks, and an awesome community of badass RockPorch creators like you. Join the group here .\r\n
\r\n \r\n }\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n\r\n
{\r\n e.preventDefault();\r\n this.props.toggleShareModal(shareLink);\r\n }} style={{ cursor: \"pointer\", backgroundColor: \"#f8f9fa\", borderRadius: \"999px\", padding: \"5px\", bottom: \"-2px\" }}>\r\n );\r\n }\r\n\r\n displayShareModal = () => {\r\n let shareProps = {\r\n shareCode: this.state.shareLink,\r\n title: \"Merchant share\",\r\n customStyle: { maxWidth: \"100%\", backgroundColor: \"white\" },\r\n shareBlockStyle: { border: \"none\", backgroundColor: \"transparent\" },\r\n loggedInUser: this.props.loggedInUser,\r\n type: \"merchant\",\r\n }\r\n return (\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n\r\n handleUserFavorite = async (partner) => {\r\n const updatedPartners = this.state.partners.map(p => {\r\n if (p.id === partner.id) {\r\n return { ...p, userFavorite: !p.userFavorite };\r\n }\r\n return p;\r\n });\r\n\r\n const updatedFilteredPartners = this.state.filteredPartners.map(p => {\r\n if (p.id === partner.id) {\r\n return { ...p, userFavorite: !p.userFavorite };\r\n }\r\n return p;\r\n });\r\n\r\n this.setState({\r\n partners: updatedPartners,\r\n filteredPartners: updatedFilteredPartners,\r\n });\r\n\r\n const userMerchant = {\r\n merchantId: partner.id,\r\n userId: this.props.loggedInUser.id,\r\n };\r\n\r\n if (partner.userFavorite) {\r\n let url = '/api/Account/DeleteUserFavoriteBrand';\r\n await postRequest(url, userMerchant);\r\n } else {\r\n let url = '/api/Account/CreateUserFavoriteBrand';\r\n await postRequest(url, userMerchant);\r\n }\r\n }\r\n\r\n toggleProductShareModal = async (urlFragment) => {\r\n let showModal = !this.state.modalOpen;\r\n let shareLink = await getMerchantShareLink(urlFragment);\r\n\r\n if (showModal) {\r\n this.setState({ modalOpen: showModal, shareLink });\r\n }\r\n else {\r\n this.setState({ modalOpen: showModal, shareLink: \"\" });\r\n }\r\n }\r\n\r\n displayTableRows = () => {\r\n return this.state.filteredPartners?.map((partner, i) => {\r\n let featuredCount = this.state.favorites ? 0 : this.state.filteredPartners?.filter(partner => !!(partner.ordinal)).length;\r\n\r\n let redirectToMerchatUrl = `/mlink/${partner.id}?userId=${this.props.loggedInUser.id}`;\r\n const today = new Date();\r\n const thirtyDaysPriorToToday = new Date().setDate(today.getDate() - 30);\r\n const newLabel = new Date(partner?.date).getTime() > thirtyDaysPriorToToday && !(partner.ordinal) ?\r\n // \r\n :\r\n
;\r\n const featuredLabel = !!(partner.ordinal) && !this.state.favorites ?\r\n //\r\n
\r\n
\r\n Featured\r\n
\r\n
\r\n //
;\r\n const renderBookmarkOverlay = () => {\r\n return (\r\n {this.handleUserFavorite(partner)}} style={{ cursor: \"pointer\", }}>\r\n );\r\n }\r\n const shareBtn = this.toggleProductShareModal(redirectToMerchatUrl)}\r\n >Get Link \r\n \r\n \r\n \r\n \r\n {roundedCommissionPercentage}% \r\n \r\n );\r\n }\r\n\r\n });\r\n }\r\n\r\n displayTableHeader = () => {\r\n let headers = [\"Name\", \"Estimated Commission\"];\r\n return headers.map((header, i) => {\r\n return (\r\n \r\n {header}\r\n \r\n \r\n \r\n \r\n \r\n {header === \"Estimated Commission\" ? \"Commissions are estimated based on factors including merchant rates, pricing, attribution methods (e.g., Mod1 or other), and fees at the time of a consumer's purchase.\" :\r\n \"You earn commissions on your own purchases, just by using one of the links to our partners below!\"}\r\n \r\n \r\n \r\n \r\n )\r\n })\r\n }\r\n\r\n handleSelect = async (e) => {\r\n let selectedSectors = e.map((sector) => { return sector.value });\r\n await this.setState({ selectedSectors });\r\n this.filterPartners(true);\r\n }\r\n\r\n handleSortSelect = async (e, filteredPartners = []) => {\r\n let selectOptions = this.state.selectOptions;\r\n\r\n if (!!(e)) {\r\n selectOptions.currentValue = e;\r\n } else {\r\n e = selectOptions.currentValue;\r\n }\r\n\r\n let favorites = e.value === 4;\r\n\r\n if (filteredPartners.length === 0)\r\n filteredPartners = [...this.state.filteredPartners];\r\n\r\n let finalFilteredPartners = [];\r\n\r\n if (e.value === 1) {\r\n let partnersWithOrdinal = filteredPartners.filter(partner => partner.ordinal !== undefined && partner.ordinal !== null);\r\n let partnersWithoutOrdinal = filteredPartners.filter(partner => partner.ordinal === undefined || partner.ordinal === null);\r\n partnersWithoutOrdinal.sort((a, b) => a.merchantName.toLowerCase() < b.merchantName.toLowerCase() ? -1 : 1);\r\n finalFilteredPartners = [...partnersWithOrdinal, ...partnersWithoutOrdinal];\r\n }\r\n\r\n if (e.value === 2) {\r\n let partnersWithOrdinal = filteredPartners.filter(partner => partner.ordinal !== undefined && partner.ordinal !== null);\r\n let partnersWithoutOrdinal = filteredPartners.filter(partner => partner.ordinal === undefined || partner.ordinal === null);\r\n partnersWithoutOrdinal.sort((a, b) => a.date > b.date ? -1 : 1);\r\n finalFilteredPartners = [...partnersWithOrdinal, ...partnersWithoutOrdinal];\r\n }\r\n\r\n if (e.value === 3) {\r\n let partnersWithOrdinal = filteredPartners.filter(partner => partner.ordinal !== undefined && partner.ordinal !== null);\r\n let partnersWithoutOrdinal = filteredPartners.filter(partner => partner.ordinal === undefined || partner.ordinal === null);\r\n partnersWithoutOrdinal.sort((a, b) => a.commission > b.commission ? -1 : 1);\r\n finalFilteredPartners = [...partnersWithOrdinal, ...partnersWithoutOrdinal];\r\n }\r\n\r\n if (e.value === 4) {\r\n let favoritesPartners = filteredPartners.filter(partner => partner.userFavorite === true);\r\n let nonFavoritePartners = filteredPartners.filter(partner => partner.userFavorite === false);\r\n\r\n favoritesPartners.sort((a, b) => a.merchantName.toLowerCase() < b.merchantName.toLowerCase() ? -1 : 1);\r\n nonFavoritePartners.sort((a, b) => a.merchantName.toLowerCase() < b.merchantName.toLowerCase() ? -1 : 1);\r\n\r\n finalFilteredPartners = [...favoritesPartners, ...nonFavoritePartners];\r\n }\r\n\r\n this.setState({ filteredPartners: finalFilteredPartners, selectOptions, favorites });\r\n };\r\n\r\n\r\n filterPartners = async (sort = false) => {\r\n const filter = this.state.filter;\r\n let filteredPartners;;\r\n\r\n if (filter.trim().length > 0) {\r\n const url = `api/Merchant/GetFilteredMerchants?merchantString=${filter.trim()}`;\r\n let filteredArray = await getRequest(url);\r\n filteredPartners = this.state.partners.filter(p => filteredArray.find(fa => fa.id === p.id));\r\n } else {\r\n filteredPartners = [...this.state.partners];\r\n }\r\n\r\n let partnersWithOrdinal = filteredPartners.filter(partner => partner.ordinal !== undefined && partner.ordinal !== null);\r\n let partnersWithoutOrdinal = filteredPartners.filter(partner => partner.ordinal === undefined || partner.ordinal === null);\r\n\r\n let sortedPartnersWithOrdinal = partnersWithOrdinal.sort((a, b) => a.ordinal - b.ordinal);\r\n let finalFilteredPartners = [...sortedPartnersWithOrdinal, ...partnersWithoutOrdinal];\r\n\r\n if (this.state.selectedSectors.length > 0) {\r\n let partnersFilteredBySectors = this.state.partnerSectors?.filter(partnerSector => this.state.selectedSectors.indexOf(partnerSector.sectorId) !== -1)\r\n .filter((v, i, a) => a.indexOf(v) === i)\r\n .map((filteredPartnerSector) => { return filteredPartnerSector.merchantId });\r\n finalFilteredPartners = finalFilteredPartners.filter(partner => partnersFilteredBySectors.indexOf(partner.id) !== -1);\r\n\r\n this.setState({ filteredPartners: finalFilteredPartners });\r\n } else {\r\n this.setState({ filteredPartners: finalFilteredPartners });\r\n }\r\n\r\n if (sort) {\r\n this.handleSortSelect(null, finalFilteredPartners);\r\n }\r\n };\r\n\r\n saveUser = async (loggedInUser) => {\r\n let serializedUser = {\r\n name: loggedInUser.name,\r\n firstName: loggedInUser.firstName,\r\n lastName: loggedInUser.lastName,\r\n bio: loggedInUser.bio,\r\n tagLine: loggedInUser.tagLine,\r\n website: loggedInUser.website,\r\n imageUrl: loggedInUser.imageUrl,\r\n userName: loggedInUser.userName,\r\n email: loggedInUser.email,\r\n\r\n phoneNumber: loggedInUser.phoneNumber,\r\n proStatusId: loggedInUser.proStatusId,\r\n address: loggedInUser.address,\r\n city: loggedInUser.city,\r\n state: loggedInUser.state,\r\n postalCode: loggedInUser.postalCode,\r\n country: loggedInUser.country,\r\n\r\n onboardingComplete: loggedInUser.onboardingComplete,\r\n profileBannerUrl: loggedInUser.profileBannerUrl,\r\n quickStart: loggedInUser.quickStart\r\n };\r\n\r\n let userUrl = '/api/Account/PostUser';\r\n await postRequest(userUrl, serializedUser);\r\n }\r\n\r\n render() {\r\n let smallSizes = [\"sm\", \"md\"];\r\n let { deviceSize } = this.props;\r\n\r\n if (this.state.loading) {\r\n return (\r\n <>\r\n < LoadSpinner />\r\n \r\n RockPorch - Merchant Partners \r\n \r\n \r\n )\r\n }\r\n return (\r\n <>\r\n \r\n RockPorch - Merchant Partners \r\n \r\n {this.displayShareModal()}\r\n \r\n \r\n Merchant Partners \r\n View Merchant Partners and commission rates
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n\r\n
\r\n
\r\n
Looking for a brand that's not on RockPorch?
\r\n
Sugggest it to us here , and we'll work on adding it!!
\r\n
\r\n
\r\n
\r\n { this.handleSelect(e) }}\r\n options={this.state.sectors?.map((sector) => {\r\n return { value: sector.sectorId, label: sector.name };\r\n })} />\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n\r\n
\r\n
Looking for a brand that's not on RockPorch?
\r\n
Sugggest it to us here , and we'll work on adding it!!
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n { this.handleSortSelect(e) }}\r\n options={this.state.selectOptions.options} />\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n\r\n
\r\n
\r\n \r\n \r\n {this.displayTableHeader()}\r\n \r\n \r\n\r\n \r\n {this.displayTableRows()}\r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n )\r\n }\r\n}\r\nfunction mapStateToProps(storeState, ownProps) {\r\n return { interactionState: storeState.interactionReducer }\r\n}\r\n\r\nexport default connect(mapStateToProps, { toggleProductPageModal, toggleShareModal })(Brands);","import React from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport AccountBanner from \"../../components/AccountBanner\"\r\nimport { getRequest, postRequest } from \"sharedUtils/httpUtils\";\r\nimport LoadSpinner from \"../../components/LoadSpinner\";\r\nimport InformationIcon from \"components/icons/InformationIcon\";\r\nimport { Popover, UncontrolledPopover, PopoverBody } from \"reactstrap\";\r\nimport Select from 'react-select';\r\nimport { debounce } from \"throttle-debounce\";\r\nimport Modal from \"../../components/Modal\";\r\nimport ShareBlock from \"components/Share/ShareBlock\";\r\nimport MerchantShareBlock from \"components/Share/MerchantShareBlock\";\r\nimport { toggleProductPageModal, toggleShareModal } from \"stateManagement/reducers/modalReducer\";\r\nimport { connect } from \"react-redux\";\r\nimport { getMerchantShareLink } from \"../../sharedUtils/shareLinkPrefixes\"\r\nimport ShareIosIcon from \"../../components/icons/ShareIosIcon\";\r\nimport { Helmet } from 'react-helmet';\r\nimport { flatMap } from \"lodash\";\r\n\r\nclass CurrentDeals extends React.Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n\r\n this.selectOptions = {\r\n name: {\r\n value: 1,\r\n label: \"Name\",\r\n },\r\n recentlyAdded: {\r\n value: 2,\r\n label: \"Recently Added\"\r\n },\r\n commission: {\r\n value: 3,\r\n label: \"Estimated Commission\"\r\n },\r\n }\r\n\r\n this.state = {\r\n modalOpen: false,\r\n shareLink: \"\",\r\n partners: [],\r\n loading: true,\r\n currentDeals: [],\r\n upcomingCurrentDeals: [],\r\n }\r\n }\r\n\r\n breadCrumbList = [{ link: '/Account/CreatorDashboard', text: 'Creator Dashboard' }, { link: '/Account/Brands', text: 'Merchant Partners', active: true }];\r\n\r\n componentDidMount = async () => {\r\n let scrollOptions = {\r\n left: 0,\r\n top: 0,\r\n behavior: 'auto'\r\n }\r\n\r\n if (!this.props.creatorDashboard) {\r\n window.scrollTo(scrollOptions);\r\n }\r\n\r\n await Promise.all([\r\n this.getPartners(),\r\n ]);\r\n\r\n await this.getCurrentDeals();\r\n\r\n this.setState({ loading: false })\r\n }\r\n\r\n getCurrentDeals = async () => {\r\n const getUrl = \"api/Merchant/GetCurrentDeals?admin=false&upcoming=true\";\r\n const currentDealsInitial = await getRequest(getUrl);\r\n if (!!(currentDealsInitial) && this.state.partners.length > 0) {\r\n const currentDeals = this.addMerchantNameAndLogoToDeals(currentDealsInitial);\r\n\r\n const today = new Date();\r\n today.setHours(0, 0, 0, 0); // Reset time part to 00:00:00\r\n\r\n const upcomingDeals = [];\r\n const remainingCurrentDeals = [];\r\n\r\n currentDeals.forEach(deal => {\r\n const startDateUTC = new Date(deal.startDate);\r\n const startDateLocal = new Date(startDateUTC.getTime() - (startDateUTC.getTimezoneOffset() * 60000));\r\n startDateLocal.setHours(0, 0, 0, 0); // Reset time part to 00:00:00\r\n\r\n if (startDateLocal > today) {\r\n deal.startDateLocal = startDateLocal;\r\n deal.upcoming = true;\r\n upcomingDeals.push(deal);\r\n } else {\r\n deal.startDateLocal = startDateLocal;\r\n deal.upcoming = false;\r\n remainingCurrentDeals.push(deal);\r\n }\r\n });\r\n\r\n const dealsWithOrdinal = remainingCurrentDeals.filter(deal => deal.ordinal !== undefined && deal.ordinal !== null);\r\n const dealsWithoutOrdinal = remainingCurrentDeals.filter(deal => deal.ordinal === undefined || deal.ordinal === null);\r\n\r\n const sortedDealsWithOrdinal = dealsWithOrdinal.sort((a, b) => a.ordinal - b.ordinal);\r\n const finalCurrentDeals = [...sortedDealsWithOrdinal, ...dealsWithoutOrdinal, ...upcomingDeals];\r\n this.setState({ currentDeals: finalCurrentDeals });\r\n }\r\n }\r\n\r\n addMerchantNameAndLogoToDeals = (deals) => {\r\n const merchants = this.state.partners;\r\n const currentDate = new Date();\r\n currentDate.setHours(0, 0, 0, 0);\r\n\r\n return deals\r\n .map(deal => {\r\n const correspondingMerchant = merchants.find((merchant) => merchant.id === deal.merchantId);\r\n const merchantName = correspondingMerchant ? correspondingMerchant.merchantName : 'Unknown Merchant';\r\n const merchantLogoUrl = correspondingMerchant ? correspondingMerchant.merchantLogoUrl : \"\";\r\n const commission = correspondingMerchant ? correspondingMerchant.commission : \"\";\r\n\r\n return {\r\n ...deal,\r\n merchantName,\r\n merchantLogoUrl,\r\n commission,\r\n };\r\n });\r\n };\r\n\r\n getPartners = async () => {\r\n let partnersUrl = '/api/Merchant/GetCommissionEstimate?showAll=false&getMaxByMerchant=true';\r\n let partners = await getRequest(partnersUrl);\r\n this.setState({ partners: partners, filteredPartners: partners });\r\n }\r\n\r\n renderShareOverlay = (shareLink) => {\r\n return ( {\r\n e.preventDefault();\r\n this.props.toggleShareModal(shareLink);\r\n }} style={{ cursor: \"pointer\", backgroundColor: \"#f8f9fa\", borderRadius: \"999px\", padding: \"5px\", bottom: \"-2px\" }}>\r\n );\r\n }\r\n\r\n displayShareModal = () => {\r\n let shareProps = {\r\n shareCode: this.state.shareLink,\r\n title: \"Merchant share\",\r\n customStyle: { maxWidth: \"100%\", backgroundColor: \"white\" },\r\n shareBlockStyle: { border: \"none\", backgroundColor: \"transparent\" },\r\n loggedInUser: this.props.loggedInUser,\r\n type: \"merchant\",\r\n }\r\n return (\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n\r\n renderDeals() {\r\n const largeScreen = [\"lg\", \"xl\"].includes(this.props.deviceSize);\r\n\r\n if (!(this.state.currentDeals) || this.state.currentDeals.length === 0) {\r\n return (\r\n \r\n No current deals are available at this time \r\n
\r\n )\r\n }\r\n\r\n return this.state.currentDeals.map((deal, i) => {\r\n let redirectToMerchantUrl = `/m/${deal.merchantId}?userId=${this.props.loggedInUser.id}&redirectUrl=${deal.url}¤tDeal=true`;\r\n\r\n const lastCard = largeScreen ? (i + 1) % 3 === 0 : (i + 1) % 1 === 0;\r\n const lastRowIndex = largeScreen ? Math.floor((this.state.currentDeals.length - 1) / 3) * 3 : Math.floor((this.state.currentDeals.length - 1) / 1) * 1;\r\n\r\n let commissionPercentage = deal.commission * 100;\r\n let roundedCommissionPercentage = 0;;\r\n if (commissionPercentage > 0) {\r\n roundedCommissionPercentage = commissionPercentage.toFixed(2);\r\n if (roundedCommissionPercentage.toString().endsWith(\".00\")) { roundedCommissionPercentage = roundedCommissionPercentage.toString().slice(0, -3) };\r\n }\r\n\r\n const dateString = deal.endDate\r\n const date = new Date(dateString);\r\n const formattedDate = date.toLocaleDateString(\"en-US\", {\r\n month: \"numeric\",\r\n day: \"numeric\",\r\n year: \"numeric\"\r\n });\r\n\r\n const dealStyle = [\"sm\", \"md\"].includes(this.props.deviceSize) ? { width: \"335px\", margin: \"0 auto\", border: \"1px solid\", marginBottom: \"5px\" } : {}\r\n\r\n const formatDate = (date) => {\r\n return date.toLocaleDateString(\"en-US\", {\r\n month: \"numeric\",\r\n day: \"numeric\",\r\n year: \"numeric\"\r\n })\r\n };\r\n\r\n return (\r\n \r\n \r\n 
\r\n ![](\"/images/flame.png\")
\r\n ![](\"images/blank-banner.png\"){kind=spacer}
}\r\n {props.post.type === 2 || props.post.type === 4 ?\r\n <>\r\n 
\r\n ![\"Avatar\"/](\"/images/avatar2.svg\"){kind=avatar}
\r\n }\r\n ![\"\"](\"/images/Logo.svg\"){kind=logo}
\r\n ![](\"./images/appleShareIcon.png\")
then select \"Add To Homescreen\"![\"\"](\"/images/sign-up-bg.png\")
\r\n ![\"\"](\"/images/splashPageBanner-min.png\")
\r\n ![\"\"](\"/images/top-banner.png\")
\r\n ![\"\"]({\"/images/rockporch-logo-white.svg\"}){kind=logo}
\r\n \r\n 
\r\n ![\"Share\"](\"images/share-icon-ios.svg\"){kind=icon}
\r\n ![\"First](\"https://evolvedoutdoorsdev.blob.core.windows.net/users/100005/Posts/617/4c1580d6-5ed8-4da6-9ced-a0e1d116c009.JPG\")
*/}\r\n {/*![](\"images/ErrorMonochrome.jpg\")
\r\n \r\n 
;\r\n },\r\n }\r\n },\r\n {\r\n name: \"userText\",\r\n label: \"User Text\",\r\n options: {\r\n filter: true,\r\n sort: true,\r\n setCellProps: () => ({ style: { maxWidth: \"200px\", overflowWrap: \"anywhere\", wordBreak: \"break-all\" } }),\r\n }\r\n },\r\n {\r\n name: \"sectors\",\r\n label: \"Sectors\",\r\n options: {\r\n filter: true,\r\n sort: true,\r\n customBodyRender: (value, tableMeta, updateValue) => {\r\n if (!!(value) && value.length > 0) {\r\n return value.join(\", \");\r\n }\r\n },\r\n }\r\n },\r\n {\r\n name: \"published\",\r\n label: \"Published\",\r\n options: {\r\n filter: true,\r\n sort: true,\r\n customBodyRender: (value, tableMeta, updateValue) => {\r\n if (value) {\r\n return String(value);\r\n }\r\n return \"false\" },\r\n }\r\n },\r\n ],\r\n options: {\r\n customToolbarSelect: () => { },\r\n selectableRows: \"multiple\",\r\n sortOrder: {\r\n name: 'userId',\r\n direction: 'asc'\r\n },\r\n onRowClick: async (rowData, rowMeta) => {\r\n const id = rowData[0];\r\n const selectedEditFeaturedCreator = this.state.topCreatorsFromDb.filter(tc => tc.id === id)[0];\r\n var topContent = selectedEditFeaturedCreator.featuredContent.postsProducts.map(p => { \r\n return { type: !!(p.userMerchantProductId) ? \"product\" : \"post\", shareCode: p.shareCode }\r\n });\r\n const sectorsArray = Object.values(selectedEditFeaturedCreator.sectors).filter((item) => typeof item === \"string\");\r\n\r\n this.setState({\r\n selectedEditFeaturedCreatorId: selectedEditFeaturedCreator.id,\r\n modalType: 2,\r\n selectedEditFeaturedCreator,\r\n show: true,\r\n addUserName: selectedEditFeaturedCreator.userName,\r\n addUserImage: selectedEditFeaturedCreator.userImage,\r\n addUserText: selectedEditFeaturedCreator.userText,\r\n sectors: sectorsArray,\r\n addPostProduct: topContent\r\n \r\n });\r\n },\r\n customToolbarSelect: (selectedRows, displayData, setSelectedRows) => {\r\n return (\r\n