\n
\n );\n};\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport { Colors } from \"utils\";\n\nexport const termsAndPrivacyStyle = makeStyles(\n () => ({\n termsAndPrivacyBoxStyle: {\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n },\n termsAndPrivacyBoxContainerStyle: {\n maxWidth: \"1440px\",\n width: \"100%\",\n padding: \"48px 80px 40px\",\n \"@media(max-width: 1200px)\": {\n paddingLeft: \"70px\",\n paddingRight: \"70px\",\n },\n \"@media(max-width: 1024px)\": {\n paddingTop: \"40px\",\n paddingBottom: \"40px\",\n },\n \"@media(max-width: 768px)\": {\n paddingLeft: \"37px\",\n paddingRight: \"37px\",\n },\n \"@media(max-width: 600px)\": { paddingTop: \"24px\" },\n \"@media(max-width: 400px)\": {\n paddingLeft: \"16px\",\n paddingRight: \"16px\",\n },\n },\n termsAndPrivacyTitle: {\n fontSize: \"24px\",\n fontWeight: 800,\n color: Colors.TextBlack,\n },\n termsAndPrivacyTextBoxStyle: {\n width: \"100%\",\n padding: \"40px\",\n marginTop: \"48px\",\n backgroundColor: Colors.BackgroundWhiteOff,\n borderRadius: \"12px\",\n \"@media(max-width: 1024px)\": { marginTop: \"40px\" },\n \"@media(max-width: 600px)\": {\n marginTop: \"24px\",\n padding: \"24px\",\n },\n },\n termsAndPrivacyTextStyle: {\n fontSize: \"16px\",\n fontWeight: 500,\n color: Colors.TextGray,\n lineHeight: \"24px\",\n \"&:not(:last-of-type)\": { marginBottom: \"24px\" },\n },\n termsAndPrivacyPStyle: {\n fontSize: \"16px\",\n fontWeight: 500,\n color: Colors.TextGray,\n lineHeight: \"24px\",\n },\n }),\n { index: 1 }\n);\n","import React, { useEffect } from 'react';\nimport { termsAndPrivacyStyle } from './styles';\nimport {Helmet} from \"react-helmet\";\n\nexport const PrivacyPolicy = () => {\n const classes = termsAndPrivacyStyle();\n\n const scrollToTop = () => window.scrollTo(0, 0);\n useEffect(scrollToTop, []);\n\n return (\n <>\n \n
\n \n history.push('/my_listings/create_listing')}\n />\n
\n My Listings
\n\n
\n \n );\n};\n","import React, {useEffect} from 'react';\nimport {termsAndPrivacyStyle} from './styles';\nimport {Helmet} from \"react-helmet\";\n\nexport const TermsAndConditions = () => {\n const classes = termsAndPrivacyStyle();\n\n const scrollToTop = () => window.scrollTo(0, 0);\n useEffect(scrollToTop, []);\n\n return (\n <>\n \n
\n {'Privacy Policy'}
\n\n
\n \n At croill.com, accessible from https://croill.com, one of our main priorities is the privacy of our visitors. This\n Privacy Policy document contains types of information that is collected and recorded by croill.com and how we use\n it.\n
\n\n\n If you have additional questions or require more information about our Privacy Policy, do not hesitate to contact\n us.\n
\n\n\n This Privacy Policy applies only to our online activities and is valid for visitors to our website with regards to\n the information that they shared and/or collect in croill.com. This policy is not applicable to any information\n collected offline or via channels other than this website.\n
\n\nConsent
\n\n\n By using our website, you hereby consent to our Privacy Policy and agree to its terms.\n
\n\nInformation we collect
\n\n\n The personal information that you are asked to provide, and the reasons why you are asked to provide it, will be\n made clear to you at the point we ask you to provide your personal information.\n
\n\n If you contact us directly, we may receive additional information about you such as your name, email address, phone\n number, the contents of the message and/or attachments you may send us, and any other information you may choose to\n provide.\n
\n\n When you register for an Account, we may ask for your contact information, including items such as name, company\n name, address, email address, and telephone number.\n
\n\nHow we use your information
\n\nWe use the information we collect in various ways, including to:
\n\n- \n
- Provide, operate, and maintain our website \n
- Improve, personalize, and expand our website \n
- Understand and analyze how you use our website \n
- Develop new products, services, features, and functionality \n
- \n Communicate with you, either directly or through one of our partners, including for customer service, to provide\n you with updates and other information relating to the website, and for marketing and promotional purposes\n \n
- Send you emails \n
- Find and prevent fraud \n
Log Files
\n\n\n croill.com follows a standard procedure of using log files. These files log visitors when they visit websites. All\n hosting companies do this and a part of hosting services' analytics. The information collected by log files include\n internet protocol (IP) addresses, browser type, Internet Service Provider (ISP), date and time stamp, referring/exit\n pages, and possibly the number of clicks. These are not linked to any information that is personally identifiable.\n The purpose of the information is for analyzing trends, administering the site, tracking users' movement on the\n website, and gathering demographic information.\n
\n\nCookies and Web Beacons
\n\n\n Like any other website, croill.com uses 'cookies'. These cookies are used to store information including visitors'\n preferences, and the pages on the website that the visitor accessed or visited. The information is used to optimize\n the users' experience by customizing our web page content based on visitors' browser type and/or other information.\n
\n\n\n For more general information on cookies, please read{' '}\n the Cookies article on Generate Privacy Policy website.\n
\n\nGoogle DoubleClick DART Cookie
\n\n\n Google is one of a third-party vendor on our site. It also uses cookies, known as DART cookies, to serve ads to our\n site visitors based upon their visit to www.website.com and other sites on the internet. However, visitors may\n choose to decline the use of DART cookies by visiting the Google ad and content network Privacy Policy at the\n following URL –{' '}\n https://policies.google.com/technologies/ads\n
\n\nOur Advertising Partners
\n\n\n Some of advertisers on our site may use cookies and web beacons. Our advertising partners are listed below. Each of\n our advertising partners has their own Privacy Policy for their policies on user data. For easier access, we\n hyperlinked to their Privacy Policies below.\n
\n\n- \n
- \n
Google
\n \n \n
Advertising Partners Privacy Policies
\n\n\n You may consult this list to find the Privacy Policy for each of the advertising partners of croill.com.\n
\n\n\n Third-party ad servers or ad networks uses technologies like cookies, JavaScript, or Web Beacons that are used in\n their respective advertisements and links that appear on croill.com, which are sent directly to users' browser. They\n automatically receive your IP address when this occurs. These technologies are used to measure the effectiveness of\n their advertising campaigns and/or to personalize the advertising content that you see on websites that you visit.\n
\n\n\n Note that croill.com has no access to or control over these cookies that are used by third-party advertisers.\n
\n\nThird Party Privacy Policies
\n\n\n croill.com's Privacy Policy does not apply to other advertisers or websites. Thus, we are advising you to consult\n the respective Privacy Policies of these third-party ad servers for more detailed information. It may include their\n practices and instructions about how to opt-out of certain options.{' '}\n
\n\n\n You can choose to disable cookies through your individual browser options. To know more detailed information about\n cookie management with specific web browsers, it can be found at the browsers' respective websites.\n
\n\nCCPA Privacy Rights (Do Not Sell My Personal Information)
\n\n\n Under the CCPA, among other rights, California consumers have the right to:\n
\n\n Request that a business that collects a consumer's personal data disclose the categories and specific pieces of\n personal data that a business has collected about consumers.\n
\nRequest that a business delete any personal data about the consumer that a business has collected.
\nRequest that a business that sells a consumer's personal data, not sell the consumer's personal data.
\n\n If you make a request, we have one month to respond to you. If you would like to exercise any of these rights,\n please contact us.\n
\n\nGDPR Data Protection Rights
\n\n\n We would like to make sure you are fully aware of all of your data protection rights. Every user is entitled to the\n following:\n
\n\n The right to access – You have the right to request copies of your personal data. We may charge you a small fee for\n this service.\n
\n\n The right to rectification – You have the right to request that we correct any information you believe is\n inaccurate. You also have the right to request that we complete the information you believe is incomplete.\n
\nThe right to erasure – You have the right to request that we erase your personal data, under certain conditions.
\n\n The right to restrict processing – You have the right to request that we restrict the processing of your personal\n data, under certain conditions.\n
\n\n The right to object to processing – You have the right to object to our processing of your personal data, under\n certain conditions.\n
\n\n The right to data portability – You have the right to request that we transfer the data that we have collected to\n another organization, or directly to you, under certain conditions.\n
\n\n If you make a request, we have one month to respond to you. If you would like to exercise any of these rights,\n please contact us.\n
\n\nChildren's Information
\n\n\n Another part of our priority is adding protection for children while using the internet. We encourage parents and\n guardians to observe, participate in, and/or monitor and guide their online activity.\n
\n\n\n croill.com does not knowingly collect any Personal Identifiable Information from children under the age of 13. If\n you think that your child provided this kind of information on our website, we strongly encourage you to contact us\n immediately and we will do our best efforts to promptly remove such information from our records.\n
\n\n
\n \n );\n};\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport { Colors } from \"utils\";\n\nexport const pageNotFoundStyle = makeStyles(\n () => ({\n notFoundBoxStyle: {\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n },\n notFoundBoxContainerStyle: {\n maxWidth: \"1440px\",\n width: \"100%\",\n height: \"100%\",\n padding: \"274px 80px\",\n \"@media(max-width: 1200px)\": { padding: \"278px 70px\" },\n \"@media(max-width: 768px)\": { padding: \"186px 37px\" },\n \"@media(max-width: 400px)\": {\n paddingLeft: \"16px\",\n paddingRight: \"16px\",\n },\n },\n notFoundInfoBoxStyle: {\n textAlign: \"center\",\n \"& img\": {\n \"@media(max-width: 600px)\": {\n width: \"250px\",\n height: \"150px\",\n },\n },\n },\n notFoundTextStyle: {\n fontSize: \"32px\",\n fontWeight: 800,\n color: Colors.TextBlack,\n margin: \"48px 0 24px\",\n lineHeight: \"30px\",\n \"@media(max-width: 600px)\": {\n fontSize: \"24px\",\n margin: \"32px 0 16px\",\n },\n },\n homeLinkStyle: {\n fontSize: \"16px\",\n fontWeight: 500,\n color: \"#3377CC\",\n textDecoration: \"none\",\n transition: \"text-decoration 0.2s linear\",\n \"&:hover\": { textDecoration: \"underline\" },\n },\n }),\n { index: 1 }\n);\n","import React from 'react';\nimport { Link } from \"react-router-dom\";\nimport { pageNotFoundStyle } from './styles';\nimport { Images } from \"utils\";\n\nexport const PageNotFound = () => {\n const classes = pageNotFoundStyle();\n\n return (\n \n
\n {'Terms & Conditions'}
\n\n
\n \n These terms and conditions outline the rules and regulations for the use of Croill's\n Website, located at\n https://croill.com.\n
\n\n\n By accessing this website we assume you accept these terms and conditions. Do not continue\n to use croill.com if you\n do not agree to take all of the terms and conditions stated on this page.\n
\n\n\n The following terminology applies to these Terms and Conditions, Privacy Statement and\n Disclaimer Notice and all\n Agreements: \"Client\", \"You\" and \"Your\" refers to you, the person log on this website and\n compliant to the Company’s\n terms and conditions. \"The Company\", \"Ourselves\", \"We\", \"Our\" and \"Us\", refers to our\n Company. \"Party\", \"Parties\",\n or \"Us\", refers to both the Client and ourselves. All terms refer to the offer, acceptance\n and consideration of\n payment necessary to undertake the process of our assistance to the Client in the most\n appropriate manner for the\n express purpose of meeting the Client’s needs in respect of provision of the Company’s\n stated services, in\n accordance with and subject to, prevailing law of Netherlands. Any use of the above\n terminology or other words in\n the singular, plural, capitalization and/or he/she or they, are taken as interchangeable and\n therefore as referring\n to same.\n
\n\n\n Cookies\n
\n\n\n We employ the use of cookies. By accessing croill.com, you agreed to use cookies in\n agreement with the Croill's\n Privacy Policy.{' '}\n
\n\n\n Most interactive websites use cookies to let us retrieve the user’s details for each visit.\n Cookies are used by our\n website to enable the functionality of certain areas to make it easier for people visiting\n our website. Some of our\n affiliate/advertising partners may also use cookies.\n
\n\n\n License\n
\n\n\n Unless otherwise stated, Croill and/or its licensors own the intellectual property rights\n for all material on\n croill.com. All intellectual property rights are reserved. You may access this from\n croill.com for your own personal\n use subjected to restrictions set in these terms and conditions.\n
\n\nYou must not:
\n- \n
- Republish material from croill.com \n
- Sell, rent or sub-license material from croill.com \n
- Reproduce, duplicate or copy material from croill.com \n
- Redistribute content from croill.com \n
This Agreement shall begin on the date\n hereof.
\n\n\n Parts of this website offer an opportunity for users to post and exchange opinions and\n information in certain areas\n of the website. Croill does not filter, edit, publish or review Comments prior to their\n presence on the website.\n Comments do not reflect the views and opinions of Croill,its agents and/or affiliates.\n Comments reflect the views\n and opinions of the person who post their views and opinions. To the extent permitted by\n applicable laws, Croill\n shall not be liable for the Comments or for any liability, damages or expenses caused and/or\n suffered as a result of\n any use of and/or posting of and/or appearance of the Comments on this website.\n
\n\n\n Croill reserves the right to monitor all Comments and to remove any Comments which can be\n considered inappropriate,\n offensive or causes breach of these Terms and Conditions.\n
\n\nYou warrant and represent that:
\n\n- \n
- You are entitled to post the Comments on our website and have all necessary licenses and\n consents to do so;\n \n
- \n The Comments do not invade any intellectual property right, including without limitation\n copyright, patent or\n trademark of any third party;\n \n
- \n The Comments do not contain any defamatory, libelous, offensive, indecent or otherwise\n unlawful material which\n is an invasion of privacy\n \n
- \n The Comments will not be used to solicit or promote business or custom or present\n commercial activities or\n unlawful activity.\n \n
\n You hereby grant Croill a non-exclusive license to use, reproduce, edit and authorize others\n to use, reproduce and\n edit any of your Comments in any and all forms, formats or media.\n
\n\n\n Hyperlinking to our Content\n
\n\nThe following organizations may link to our Website without prior written approval:
\n\n- \n
- Government agencies; \n
- Search engines; \n
- News organizations; \n
- \n Online directory distributors may link to our Website in the same manner as they\n hyperlink to the Websites of\n other listed businesses; and\n \n
- \n System wide Accredited Businesses except soliciting non-profit organizations, charity\n shopping malls, and\n charity fundraising groups which may not hyperlink to our Web site.\n \n
\n These organizations may link to our home page, to publications or to other Website\n information so long as the link:\n (a) is not in any way deceptive; (b) does not falsely imply sponsorship, endorsement or\n approval of the linking\n party and its products and/or services; and (c) fits within the context of the linking\n party’s site.\n
\n\nWe may consider and approve other link requests from the following types of\n organizations:
\n\n- \n
- commonly-known consumer and/or business information sources; \n
- dot.com community sites; \n
- associations or other groups representing charities; \n
- online directory distributors; \n
- internet portals; \n
- accounting, law and consulting firms; and \n
- educational institutions and trade associations. \n
\n We will approve link requests from these organizations if we decide that: (a) the link would\n not make us look\n unfavorably to ourselves or to our accredited businesses; (b) the organization does not have\n any negative records\n with us; (c) the benefit to us from the visibility of the hyperlink compensates the absence\n of Croill; and (d) the\n link is in the context of general resource information.\n
\n\n\n These organizations may link to our home page so long as the link: (a) is not in any way\n deceptive; (b) does not\n falsely imply sponsorship, endorsement or approval of the linking party and its products or\n services; and (c) fits\n within the context of the linking party’s site.\n
\n\n\n If you are one of the organizations listed in paragraph 2 above and are interested in\n linking to our website, you\n must inform us by sending an e-mail to Croill. Please include your name, your organization\n name, contact information\n as well as the URL of your site, a list of any URLs from which you intend to link to our\n Website, and a list of the\n URLs on our site to which you would like to link. Wait 2-3 weeks for a response.\n
\n\nApproved organizations may hyperlink to our Website as follows:
\n\n- \n
- By use of our corporate name; or \n
- By use of the uniform resource locator being linked to; or \n
- \n By use of any other description of our Website being linked to that makes sense within\n the context and format of\n content on the linking party’s site.\n \n
\n No use of Croill's logo or other artwork will be allowed for linking absent a trademark\n license agreement.\n
\n\n\n iFrames\n
\n\n\n Without prior approval and written permission, you may not create frames around our Webpages\n that alter in any way\n the visual presentation or appearance of our Website.\n
\n\n\n Content Liability\n
\n\n\n We shall not be hold responsible for any content that appears on your Website. You agree to\n protect and defend us\n against all claims that is rising on your Website. No link(s) should appear on any Website\n that may be interpreted\n as libelous, obscene or criminal, or which infringes, otherwise violates, or advocates the\n infringement or other\n violation of, any third party rights.\n
\n\n\n Your Privacy\n
\n\nPlease read Privacy Policy
\n\n\n Reservation of Rights\n
\n\n\n We reserve the right to request that you remove all links or any particular link to our\n Website. You approve to\n immediately remove all links to our Website upon request. We also reserve the right to amen\n these terms and\n conditions and it’s linking policy at any time. By continuously linking to our Website, you\n agree to be bound to and\n follow these linking terms and conditions.\n
\n\n\n Removal of links from our website\n
\n\n\n If you find any link on our Website that is offensive for any reason, you are free to\n contact and inform us any\n moment. We will consider requests to remove links but we are not obligated to or so or to\n respond to you directly.\n
\n\n\n We do not ensure that the information on this website is correct, we do not warrant its\n completeness or accuracy;\n nor do we promise to ensure that the website remains available or that the material on the\n website is kept up to\n date.\n
\n\n\n Disclaimer\n
\n\n\n To the maximum extent permitted by applicable law, we exclude all representations,\n warranties and conditions\n relating to our website and the use of this website. Nothing in this disclaimer will:\n
\n\n- \n
- limit or exclude our or your liability for death or personal injury; \n
- limit or exclude our or your liability for fraud or fraudulent misrepresentation; \n
- limit any of our or your liabilities in any way that is not permitted under applicable\n law; or\n \n
- exclude any of our or your liabilities that may not be excluded under applicable law.\n \n
\n The limitations and prohibitions of liability set in this Section and elsewhere in this\n disclaimer: (a) are subject\n to the preceding paragraph; and (b) govern all liabilities arising under the disclaimer,\n including liabilities\n arising in contract, in tort and for breach of statutory duty.\n
\n\n\n As long as the website and the information and services on the website are provided free of\n charge, we will not be\n liable for any loss or damage of any nature.\n
\n\n
\n );\n};\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport { Colors } from \"utils\";\n\nexport const smthWentWrongStyle = makeStyles(\n () => ({\n wentWrongBoxStyle: {\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n },\n wentWrongBoxContainerStyle: {\n maxWidth: \"1440px\",\n width: \"100%\",\n height: \"100%\",\n padding: \"274px 80px\",\n \"@media(max-width: 1200px)\": { padding: \"278px 70px\" },\n \"@media(max-width: 768px)\": { padding: \"186px 37px\" },\n \"@media(max-width: 400px)\": {\n paddingLeft: \"16px\",\n paddingRight: \"16px\",\n },\n },\n wentWrongInfoBoxStyle: {\n textAlign: \"center\",\n \"& img\": {\n \"@media(max-width: 600px)\": {\n width: \"200px\",\n height: \"200px\",\n },\n },\n },\n wentWrongTextStyle: {\n fontSize: \"32px\",\n fontWeight: 800,\n color: Colors.TextBlack,\n margin: \"48px 0 24px\",\n lineHeight: \"30px\",\n \"@media(max-width: 600px)\": {\n fontSize: \"24px\",\n margin: \"32px 0 16px\",\n },\n },\n homeLinkStyle: {\n fontSize: \"16px\",\n fontWeight: 500,\n color: \"#3377CC\",\n textDecoration: \"none\",\n transition: \"text-decoration 0.2s linear\",\n \"&:hover\": { textDecoration: \"underline\" },\n },\n }),\n { index: 1 }\n);\n","import React from 'react';\nimport { Link } from 'react-router-dom';\nimport { Images } from \"utils\";\nimport { smthWentWrongStyle } from './styles';\n\nexport const SmthWentWrong = () => {\n const classes = smthWentWrongStyle();\n\n return (\n \n
\n \n 
\n
\n Whoops! Page not found
\n Back to homepage \n\n
\n );\n};\n","import {makeStyles} from \"@material-ui/core/styles\";\n\nexport const promotedStyles = makeStyles(() => ({\n cardsWrapper: {\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'space-between',\n alignItems: 'center',\n '@media(max-width: 1180px)': {\n justifyContent: 'center',\n },\n },\n notPromotedCardWrapper: {\n maxWidth: '628px',\n width: '100%',\n padding: '8px 16px 8px 8px',\n height: '118px',\n background: '#FFFFFF',\n boxShadow: '0px 0px 6px rgba(0, 0, 0, 0.16)',\n borderRadius: '16px',\n display: 'flex',\n justifyContent: 'space-between',\n marginBottom: '24px',\n '@media(max-width: 1440px)': {\n maxWidth: '608px',\n },\n '@media(max-width: 1400px)': {\n maxWidth: '588px',\n },\n '@media(max-width: 1360px)': {\n maxWidth: '548px',\n },\n '@media(max-width: 1280px)': {\n maxWidth: '508px',\n },\n '@media(max-width: 1180px)': {\n maxWidth: '628px',\n },\n },\n cardIcon: {\n width: '102px',\n height: '102px',\n objectFit: 'cover',\n borderRadius: '8px',\n },\n iconAntText: {\n display: 'flex',\n },\n addressWrapper: {\n marginLeft: '16px',\n width:'100%',\n display:'flex',\n flexDirection:'column',\n justifyContent:'space-between',\n },\n address: {\n fontWeight: '600',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#0073BB',\n marginTop: '5px',\n },\n country: {\n fontWeight: '600',\n fontSize: '14px',\n lineHeight: '24px',\n color: '#0073BB',\n marginTop: '8px',\n },\n sqStyle: {\n padding: '4px 8px',\n background: '#F4F4F4',\n borderRadius: '4px',\n fontWeight: '500',\n fontSize: '14px',\n lineHeight: '20px',\n color: '#2B273C',\n marginBottom: '4px',\n width: 'auto',\n maxWidth: '120px',\n },\n priceAndButton: {\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n justifyContent: 'space-between',\n alignItems: 'flex-end',\n },\n priceStyle: {\n fontWeight: '600',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#2B273C',\n marginTop: '5px',\n '& span': {\n fontSize: '14px',\n color: '#757280',\n },\n },\n promoteButton: {\n width: '124px',\n background: 'transparent',\n color: '#FE385C',\n fontWeight: '500',\n fontSize: '14px',\n lineHeight: '20px',\n },\n promotedCardWrapper: {\n width: '100%',\n height: '414px',\n background: '#FFFFFF',\n boxShadow: '0px 0px 6px rgba(0, 0, 0, 0.16)',\n borderRadius: '12px',\n padding: '30px',\n '@media(min-width: 320px)': {\n display: 'none',\n },\n '@media(min-width: 768px)': {\n display: 'block',\n maxHeight: '982px',\n height: 'auto',\n },\n '@media(min-width: 1280px)': {\n height: '414px',\n },\n },\n promotedHead: {\n width: '100%',\n display: 'flex',\n padding: '15px 16px',\n marginBottom: '14px',\n fontWeight: '600',\n fontSize: '14px',\n lineHeight: '20px',\n color: '#41586D',\n },\n\n promotedCard: {\n width: '100%',\n background: '#FFFFFF',\n boxShadow: '0px 0px 12px rgba(0, 0, 0, 0.1)',\n borderRadius: '4px',\n height: '64px',\n padding: '14px 18px',\n display: 'flex',\n alignItems: 'center',\n marginBottom: '10px',\n },\n promotedCardIcon: {\n height: '36px',\n width: '36px',\n objectFit: 'cover',\n borderRadius: '4px',\n },\n promotedCardIconTitle: {\n fontWeight: '500',\n fontSize: '14px',\n lineHeight: '20px',\n color: '#757280',\n marginLeft: '10px',\n width:'100%',\n },\n alignItem: {\n display: 'flex',\n alignItems: 'center',\n },\n promotedCardBody: {\n height: '310px',\n overflow: 'auto',\n padding: '6px'\n },\n repromote: {\n fontWeight: '500',\n fontSize: '14px',\n lineHeight: '20px',\n color: '#0073BB',\n background: 'transparent',\n border: 'none',\n },\n promotedDesktop: {\n display: 'none',\n '@media(min-width: 1280px)': {\n display: 'block',\n },\n },\n promotedTablet: {\n display: 'none',\n '@media(min-width: 768px)': {\n display: 'block',\n },\n '@media(min-width: 1280px)': {\n display: 'none',\n },\n },\n promotedCardTablet: {\n width: '100%',\n height: '170px',\n background: '#FFFFFF',\n boxShadow: '0px 0px 12px rgba(0, 0, 0, 0.1)',\n borderRadius: '4px',\n padding: '12px 16px',\n marginBottom: '10px',\n },\n spaceBetween: {\n display: 'flex',\n justifyContent: 'space-between',\n width: '100%',\n alignItems: 'center',\n },\n boldTitle: {\n fontWeight: '600',\n color: '#2B273C'\n },\n promotedCardTabletBody: {\n maxHeight: '860px',\n height: 'auto',\n overflow: 'auto',\n padding: '6px'\n },\n promotedCardMobile: {\n '@media(min-width: 320px)': {\n display: 'block',\n },\n '@media(min-width: 768px)': {\n display: 'none',\n },\n },\n promotedCardMobileWrapper: {\n width: '100%',\n minHeight: '284px',\n height:'auto',\n background: '#FFFFFF',\n boxShadow: '0px 0px 12px rgba(0, 0, 0, 0.1)',\n borderRadius: '4px',\n padding: '18px 16px',\n marginBottom: '10px',\n },\n cardAddressStyle:{\n fontSize:'12px',\n },\n repromoteMobile: {\n width: '100%',\n height: '36px',\n border: '1px solid #0073BB',\n borderRadius: '8px',\n background: 'transparent',\n fontWeight: '500',\n fontSize: '14px',\n lineHeight: '20px',\n color: '#0073BB',\n marginTop: '18px'\n },\n\n}))","import {promotedStyles} from \"./styles\";\nimport {getAddressText, getValDependsOnLength, Images, TextRow} from \"utils\";\nimport {ViewMoreButton} from \"components\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport React from \"react\";\n\nexport const NotPromotedCard = ({item, handlePromote}) => {\n const classes = promotedStyles()\n const {address, price, mainImage} = item;\n const {street} = address;\n const listingPrice = getValDependsOnLength(price);\n const listingMinSize = getValDependsOnLength(item?.size?.start ? item?.size?.start : '');\n const listingMaxSize = getValDependsOnLength(item?.size?.end ? item?.size?.end : '');\n const size = {minSize: listingMinSize, maxSize: listingMaxSize}\n const addressDisplay = getAddressText(address);\n const sizeDisplay = size.minSize && size.maxSize ? `${size.minSize} - ${size.maxSize} sq.ft.` : size.minSize ? `Over ${size.minSize} sq.ft.` : size.maxSize ? `Under ${size.maxSize} sq.ft.` : '';\n\n return (\n \n
\n \n 
\n
\n Whoops! Something went wrong
\n Back to homepage \n\n
\n )\n}","import {promotedStyles} from \"./styles\";\nimport {Images, TextRow} from \"utils\";\nimport moment from \"moment\";\n\nexport const PromotedCard = ({key, item, handleRepromote}) => {\n const classes = promotedStyles()\n\n return (\n \n 
\n
\n \n \n \n {sizeDisplay &&\n
\n \n {street ? (\n <>\n \n
\n \n
\n )}\n
\n \n \n
\n \n
\n \n
\n )}\n {sizeDisplay}
\n }\n \n handlePromote(item?._id)}\n />\n
\n \n {`$${price ? getValDependsOnLength(price) : 0}`} {'SF/YR'} \n
\n\n\n
\n )\n}","import {promotedStyles} from \"./styles\";\nimport {Images} from \"utils\";\nimport moment from \"moment\";\n\nexport const PromotedCardTablet = ({item, key, handleRepromote}) => {\n const classes = promotedStyles()\n\n return (\n \n 
\n
\n \n
\n 
\n
\n \n {moment(item?.promotion?.startDate).format('MM.DD.YYYY')}\n
\n\n 
\n
\n \n {moment(item?.promotion?.endDate).format('MM.DD.YYYY')}\n
\n\n 
\n
\n {item?.promotion?.views ? item?.promotion?.views : 0}
\n\n
\n $15.00
\n\n Repromote\n \n
\n \n
\n )\n}","import {promotedStyles} from \"./styles\";\nimport {Images, TextRow} from \"utils\";\nimport moment from \"moment\";\n\nexport const PromotedCardMobile = ({item, key, handleRepromote}) => {\n const classes = promotedStyles()\n\n return (\n \n
\n \n \n
\n \n {item?.address?.formattedAddress}\n {/*
\n \n
\n \n
\n \n \n
\n \n \n
\n \n
\n \n 
\n
\n \n \n
\n \n
\n )\n}","import {promotedStyles} from \"./core\";\nimport {PromotedCard} from \"./core/promotedCard\";\nimport {PromotedCardTablet} from \"./core/promotedCardTablet\";\nimport {PromotedCardMobile} from \"./core/promotedCardMobile\";\n\nexport const Promoted = ({userListings, handleRepromote}) => {\n const classes = promotedStyles()\n\n return (\n \n
\n\n \n 
\n
\n\n \n {item?.address?.formattedAddress}\n {/*
\n \n
\n \n \n
\n \n \n
\n \n \n
\n\n\n \n \n
\n \n
\n )\n}","import {NotPromotedCard, promotedStyles} from \"./core\";\nimport {Fragment} from \"react\";\nimport {NON_PROMOTED} from \"utils\";\n\nexport const NonPromoted = ({handlePromote, payment, userListings}) => {\n const classes = promotedStyles()\n\n return (\n \n
\n\n \n
\n\n \n
\n Listing
\n Start Date
\n End Date
\n Impressions
\n Price
\n Action
\n \n {userListings?.map((i, j) => (\n handleRepromote(i?._id, i)}\n />\n ))}\n
\n \n
\n \n
\n Listing
\n Action
\n \n {userListings?.map((i, j) => (\n handleRepromote(i?._id, i)}\n />\n ))}\n
\n \n {userListings?.map((i, j) => (\n handleRepromote(i?._id)}\n />\n ))}\n
\n\n \n\n
\n )\n}","import {promotionStyle} from \"../styles\";\nimport {FindLoad, Images} from \"utils\";\nimport {Loader, PaymentStartEnd} from \"components\";\n\nexport const RenewPromotion = ({handleClose, payment, handlePay, item}) => {\n const classes = promotionStyle()\n const loader = FindLoad('PROMOTE_LISTING')\n\n return (\n \n {userListings?.length ? userListings?.map((item, k) => (\n // item?.promotion?.status === NON_PROMOTED &&\n \n \n \n ))\n : ''\n }\n
\n \n \n
\n )\n}","import React, {useEffect} from 'react';\nimport {useDispatch} from \"react-redux\";\nimport {loadStripe} from '@stripe/stripe-js';\nimport {Elements} from '@stripe/react-stripe-js';\nimport {Loader, PaymentStartEnd} from \"components\";\nimport {httpRequestsOnSuccessActions} from \"store\";\nimport {FindLoad, FindSuccess, Images} from \"utils\";\nimport {promotionStyle} from \"../styles\";\nimport CheckoutForm from \"./checkoutForm\";\n\nconst stripePromise = loadStripe(`${process.env.REACT_APP_STRIPE_PKEY}`);\n// const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PKEY);\nconst ACTION_TYPE = 'PROMOTE_LISTING'\n\n\nexport const PaymentMethod = ({handleClose, handleOpenSuccess, payment, handlePay, selectedItem}) => {\n const classes = promotionStyle()\n const loader = FindLoad(ACTION_TYPE)\n const success = FindSuccess(ACTION_TYPE)\n const dispatch = useDispatch()\n\n\n useEffect(() => {\n if (success?.length) {\n handleClose()\n dispatch(httpRequestsOnSuccessActions.removeSuccess(ACTION_TYPE))\n }\n }, [success])\n\n return (\n Renew promotion?
\nRenew promotion we will add another 30 Days to your listing item.
\n\n
\n \n {payment?.card &&\n \n }\n
\n {`**** **** **** ${payment?.last4}`}
\n\n \n \n
\n \n\n
\n )\n}","import {promotionStyle} from \"../styles\";\nimport {Images} from \"utils\";\n\nexport const DoneModal = ({handleClose}) => {\n const classes = promotionStyle()\n\n return (\n {payment && !selectedItem ? 'Add promotion?' : 'Payment Method'}
\n\n {payment && !selectedItem ?\n\n \n
\n :\n Add promotion we will add 30 Days to your listing item.
\n\n
\n \n {payment?.card &&\n \n }\n
\n {`**** **** **** ${payment?.last4}`}
\n\n \n \n
\n \n
\n }\n \n \n \n \n
\n \n 
\n
\n )\n}","import {Images} from \"utils\";\nimport {promotionStyle} from \"../styles\";\n\n\nexport const NoList = ({listType}) => {\n const classes = promotionStyle()\n const title = listType === 'nonPromoted' ? 'No listings yet' : 'No promoted listings yet'\n const subtitle = listType === 'nonPromoted' ? 'This page is waiting for you to fill it with your promoted listings.'\n :\n 'This page is waiting for you to fill it with your listing items'\n\n return (\n Done
\nYou can see your promotion
on listing page.
\n
\n )\n}","import React, {useEffect, useState} from \"react\";\nimport {useDispatch, useSelector} from \"react-redux\";\nimport {paymentActions, listingActions, httpRequestsOnSuccessActions} from \"store\";\nimport {globalStyles, Loader, SimpleModal} from \"components\";\nimport {FindLoad, FindSuccess, Images, NON_PROMOTED, PROMOTED} from \"utils\";\nimport {promotionStyle} from \"./styles\";\nimport {NonPromoted, Promoted} from \"../../fragments/promotions\";\nimport {RenewPromotion, PaymentMethod, DoneModal, NoList} from \"./core\";\n\nconst activeButtonStyle = {\n background: '#FE385C',\n color: '#FFFFFF',\n fontWeight: 600,\n}\n\nexport const Promotion = () => {\n const dispatch = useDispatch()\n const classes = promotionStyle()\n const globalClasses = globalStyles()\n const loader = FindLoad('GET_LISTINGS_BY_USER_ID_FILTER')\n const success = FindSuccess('PROMOTE_LISTING')\n const [activeTab, setActiveTab] = useState('nonPromoted')\n const [open, setOpen] = useState('')\n const [selectedItem, setSelectedItem] = useState('')\n const [selectedId, setSelectedId] = useState('')\n const payment = useSelector((state) => state.payment.myPayment);\n const userListings = useSelector((state) => state.listings.listingsByUserId);\n const filteredListNon = userListings?.length ? userListings.filter((i) => i?.promotion?.status === NON_PROMOTED) : []\n const filteredListPromoted = userListings?.length ? userListings.filter((i) => i?.promotion?.status === PROMOTED) : []\n\n useEffect(() => {\n if (success?.length) {\n setOpen('')\n setSelectedItem('')\n dispatch(httpRequestsOnSuccessActions.removeSuccess('PROMOTE_LISTING'))\n }\n }, [success])\n\n useEffect(() => {\n dispatch(paymentActions.getPayment())\n handleGetListing(NON_PROMOTED)\n }, [])\n\n const handleGetListing = (type, load) => {\n const filters = {\n promotionStatus: type,\n }\n const loader = load ? 'noLoad' : ''\n dispatch(listingActions.getListingsByUserIdFilter(filters, loader));\n }\n\n const handlePay = () => {\n const reqType = activeTab === 'nonPromoted' ? NON_PROMOTED : PROMOTED\n if(selectedItem){ setOpen('RenewPromotion')}\n dispatch(listingActions.promote(selectedId, {promote: true}, reqType))\n }\n\n const handlePromote = (id) => {\n setOpen('PaymentMethod')\n setSelectedId(id)\n setSelectedItem('')\n }\n\n const handleRePromote = (id, item) => {\n const selectedType = payment?.type ? 'RenewPromotion' : 'PaymentMethod'\n setOpen(selectedType)\n setSelectedId(id)\n setSelectedItem(item)\n }\n\n const handleSetActiveTab = (type) => {\n setActiveTab(type)\n const reqType = type === 'nonPromoted' ? NON_PROMOTED : PROMOTED\n handleGetListing(reqType)\n }\n\n return (\n \n 
\n
\n {title}
\n{subtitle}
\n\n setOpen('')}\n content={\n \n setOpen('')}\n handlePay={handlePay}\n item={selectedItem}\n />\n :\n open === 'PaymentMethod' ?\n setOpen(null)}\n handleOpenSuccess={() => setOpen('success')}\n handlePay={handlePay}\n selectedItem={selectedItem}\n />\n :\n open === 'success' ?\n setOpen('')}\n />\n :\n ''\n }\n
\n }\n />\n \n )\n}","import React, {useEffect} from \"react\";\nimport {useDispatch} from \"react-redux\";\nimport {globalStyles, Loader} from \"components\";\nimport {BillingFragments} from \"fragments\";\nimport {paymentActions} from \"store\";\nimport {FindLoad} from \"utils\";\n\nexport const Billing = ({}) => {\n const globalClasses = globalStyles()\n const dispatch = useDispatch()\n const loader = FindLoad('GET_PAYMENT')\n\n useEffect(() => {\n dispatch(paymentActions.getPayment())\n dispatch(paymentActions.getInvoices())\n }, [])\n\n return (\n \n \n :\n <>\n {\n activeTab === 'nonPromoted' ?\n <>\n {filteredListNon?.length ?\n \n :\n \n }\n \n :\n <>\n {filteredListPromoted?.length ?\n handleRePromote(id, item)}\n userListings={filteredListPromoted}\n />\n :\n \n }\n \n }\n\n \n }\n
\n Promotions
\nYou can promote a listing for 4 weeks. Price $15.00
\n\n handleSetActiveTab('nonPromoted')}\n style={activeTab === 'nonPromoted' ? {...activeButtonStyle} : {}}\n >\n Non Promoted\n \n handleSetActiveTab('promoted')}\n style={activeTab === 'promoted' ? {...activeButtonStyle} : {}}\n >\n Promoted\n \n
\n {loader?.length ?\n \n \n
\n {open === 'RenewPromotion' ?\n \n
\n )\n}","import React, {useEffect} from \"react\";\nimport {useDispatch, useSelector} from \"react-redux\";\nimport {Helmet} from \"react-helmet\";\nimport {brokerActions} from \"store\";\nimport {BrokersFragment} from \"fragments\";\nimport {FindLoad} from \"utils\";\nimport {Loader} from \"components\";\n\nexport const Brokers = ({}) => {\n const dispatch = useDispatch()\n const brokers = useSelector((state) => state.broker.brokerList);\n const loader = FindLoad('GET_BROKERS')\n\n useEffect(() => {\n dispatch(brokerActions.getBrokers())\n }, [])\n\n if (loader?.length) {\n return \n
\n Billing
\n\n {loader?.length ?\n \n :\n \n }\n
\n \n \n \n Commercial Real Estate Brokers | Retail Leasing \n \n \n \n
\n )\n}","import React, {useEffect} from \"react\";\nimport {useDispatch, useSelector} from \"react-redux\";\nimport {useParams} from \"react-router-dom\";\nimport {BrokerInfoFragment} from \"fragments\";\nimport {Loader} from \"components\";\nimport {FindLoad} from \"utils\";\nimport {brokerActions} from \"store\";\nimport {Helmet} from \"react-helmet\";\n\nexport const BrokerInfo = ({}) => {\n const loader = FindLoad('GET_BROKER_BY_ID')\n const param = useParams()\n const dispatch = useDispatch()\n const brokerById = useSelector((state) => state.broker.brokerById);\n\n useEffect(() => {\n if (param?.id) {\n dispatch(brokerActions.getBrokerById(param?.id))\n }\n }, [])\n\n if (loader?.length) {\n return \n \n \n {`${brokerById?.firstName ? brokerById?.firstName : ''} ${brokerById?.lastName ? brokerById?.lastName : ''} | Croill`} \n \n \n \n
\n )\n}","import {makeStyles} from \"@material-ui/core/styles\";\nimport {Colors} from \"utils\";\n\n\nexport const aboutUsStyles = makeStyles(() => ({\n aboutUsPage: {\n width: '100%',\n padding: '116px 0 138px',\n\n '@media(max-width: 1279px)': {\n padding: '56px 0 96px',\n },\n '@media(max-width: 768px)': {\n padding: '56px 0 48px',\n },\n },\n aboutUsContainer: {\n maxWidth: '1440px',\n width: '100%',\n margin: '0 auto',\n padding: '0px 80px 0',\n '@media(max-width: 1279px)': {\n padding: '0px 33px 0',\n },\n '@media(max-width: 768px)': {\n padding: '0px 14px 0',\n },\n },\n\n aboutSomethingWrapper: {\n display: \"flex\",\n justifyContent: 'space-between',\n alignItems: 'center',\n paddingBottom: '77px',\n gap: '154px',\n\n '@media(max-width: 1279px)': {\n flexDirection: 'column',\n paddingBottom: '89px',\n gap: '24px',\n },\n '@media(max-width: 768px)': {\n paddingBottom: '72px',\n },\n },\n aboutSomethingTextAndDescription: {\n width: '100%',\n maxWidth: '537px',\n\n '@media(max-width: 1279px)': {\n maxWidth: '100%',\n },\n '@media(max-width: 768px)': {},\n '@media(max-width: 400px)': {}\n },\n aboutSomethingTitle: {\n color: `${Colors.TextBlack2}`,\n fontSize: '36px',\n fontWeight: '800',\n lineHeight: '36px',\n marginBottom: '24px'\n },\n aboutSomethingDescription: {\n color: Colors.TextBlack2,\n fontSize: '16px',\n fontWeight: '400',\n lineHeight: '24px'\n },\n aboutSomethingImageBlock: {\n width: '100%',\n maxWidth: '568px',\n height: '379px',\n borderRadius: '24px',\n overflow: \"hidden\",\n\n '@media(max-width: 1279px)': {\n maxWidth: '703px',\n height: 'auto',\n aspectRatio: '3.7/2'\n },\n '@media(max-width: 768px)': {\n maxWidth: '100%',\n },\n },\n aboutSomethingImage: {\n objectFit: 'cover',\n width: '100%',\n height: '100%'\n },\n CardRedWrapper: {\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n gap: '16px',\n borderRadius: '16px',\n backgroundColor: `${Colors.ThemePink}`,\n padding: '24px'\n },\n CardRedTitle: {\n color: `${Colors.TextWhite}`,\n fontSize: '24px',\n fontWeight: '800',\n lineHeight: '36px'\n },\n CardRedDescription: {\n color: `${Colors.TextWhite}`,\n fontSize: '16px',\n fontWeight: '400',\n lineHeight: '24px'\n },\n\n cardWithSvgWrapper: {\n width: '100%',\n display: 'flex',\n backgroundColor: `${Colors.BackgroundWhite}`,\n gap: '16px',\n padding: '16px',\n borderRadius: '16px',\n boxShadow: '0px 0px 12px 0px rgba(0, 0, 0, 0.10)',\n\n '@media(max-width: 768px)': {\n flexDirection: 'column'\n },\n },\n cardWithSvgSvg: {\n minWidth: 32,\n minHeight: 32\n },\n\n cardWithSvgDescription: {\n fontSize: '16px',\n fontWeight: '400',\n lineHeight: '24px'\n },\n\n whoWeAreAndCardsWrapper: {\n padding: '60px 0 91px',\n background: `${Colors.BackgroundLightGray}`,\n\n '@media(max-width: 1279px)': {\n padding: '60px 0 80px',\n },\n '@media(max-width: 768px)': {\n padding: '60px 0 60px',\n },\n\n },\n WhoWeAreSection: {\n flexDirection: 'row-reverse',\n paddingBottom: '0px',\n\n '@media(max-width: 1279px)': {\n flexDirection: 'column',\n },\n },\n\n WhoWeAreContent: {\n maxWidth: '579px',\n\n '@media(max-width: 1279px)': {\n maxWidth: '100%',\n },\n },\n\n WhoWeAreImageBlock: {\n maxWidth: '538px',\n height: '359px',\n\n '@media(max-width: 1279px)': {\n maxWidth: '648px',\n aspectRatio: '3.61/2',\n height: 'auto'\n },\n },\n\n redCardsWrapper: {\n display: 'flex',\n gap: '28px',\n marginTop: '79px',\n\n '@media(max-width: 1279px)': {\n flexDirection: 'column'\n },\n },\n whyChooseUsWrapper: {\n paddingTop: '104px',\n display: 'flex',\n gap: '46px',\n\n '@media(max-width: 1279px)': {\n paddingTop: '96px',\n flexDirection:'column',\n alignItems:'center'\n },\n '@media(max-width: 768px)': {\n paddingTop: '72px',\n },\n },\n whyChooseUsTitle: {\n color: `${Colors.TextBlack}`,\n fontSize: '36px',\n fontWeight: '800',\n lineHeight: '36px',\n },\n whyChooseUsBox: {\n width:'100%',\n maxWidth:'628px',\n\n '@media(max-width: 1279px)': {\n maxWidth:'100%',\n },\n\n },\n whyChooseUsContent: {\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n gap: '16px',\n\n '@media(max-width: 1279px)': {\n maxWidth: '100%',\n },\n },\n\n whyChooseUsDesc: {\n fontSize: '16px',\n color: `${Colors.TextBlack2}`,\n fontWeight: '400',\n lineHeight: '24px',\n margin:'44px 0',\n },\n\n whyChooseUsImageBlock: {\n width: '100%',\n maxWidth: '562px',\n height: 'auto',\n borderRadius: '24px',\n overflow: 'hidden',\n aspectRatio: '1.16/1',\n\n '@media(max-width: 1279px)': {\n maxWidth: '648px',\n aspectRatio: '1.16/1'\n },\n },\n whyChooseUsImage: {\n width: '100%',\n height: '100%',\n objectFit: 'contain'\n }\n}))","import React from 'react';\nimport {CardRed, CardWithSvg} from \"fragments\";\nimport {Images} from \"assets/images\";\nimport {aboutUsStyles} from \"./styles\";\n\nexport const AboutUs = () => {\n const classes = aboutUsStyles()\n\n\n const items = [\n\n {\n title: 'Our Mission',\n description: \"Simplify the commercial real estate leasing journey, ensuring a smooth and accessible\" +\n \" experience for both property owners and lessees. We strive to provide users with the necessary \" +\n \"tools to effortlessly list, explore, and manage commercial properties with precision and efficiency.\"\n },\n {\n title: 'Our Vision',\n description: 'To reshape the commercial real estate sector into a more inclusive and streamlined ' +\n 'marketplace. We strive to make finding a rental space easy, adapting to the dynamic needs of ' +\n 'the real estate industry.'\n },\n ]\n\n const whyChooseCards = [\n {\n description: 'Streamlined Experience: Seamlessly create your commercial property listings in just' +\n ' three straightforward steps – Create an account, list your property and manage your property listing.'\n },\n {\n description: 'Free Listing Creation: Create commercial real estate listings for free whenever you want.'\n },\n {\n description: 'Wide Visibility: Your listings gain maximum exposure through our network of industry-leading ' +\n 'partners and platforms.'\n },\n ]\n return (\n \n
\n\n \n
\n\n \n
\n \n
\n\n \n About Us\n
\n\n\n Croill is your top choice for finding commercial spaces in the US. We focus on industrial,\n commercial, and residential areas to help you succeed in any industry. From small\n retail spaces to expansive office complexes, we ensure seamless\n leasing experiences to propel your business forward.\n
\n\n \n
\n \n
\n \n
\n\n \n \n
\n\n \n Who We Are\n
\n\n\n We are a team of innovators and real estate professionals dedicated to\n revolutionizing the commercial property leasing landscape. With a focus on technology\n -driven solutions, we are committed to providing a platform that simplifies the leasing\n process, making it more accessible and efficient for everyone involved.\n
\n\n \n
\n \n {items.map(({title, description}, i) => (\n \n ))}\n
\n \n
\n \n );\n};\n\n","import {makeStyles} from \"@material-ui/core/styles\";\nimport {Colors} from \"utils\";\n\n\nexport const howItWorksStyles = makeStyles(() => ({\n howItWorksPage: {\n width: '100%',\n padding: '89px 0 138px',\n\n '@media(max-width: 1279px)': {\n padding: '60px 0 89px',\n },\n '@media(max-width: 768px)': {\n padding: '48px 0 61px',\n },\n },\n howItWorksContainer: {\n maxWidth: '1440px',\n width: '100%',\n margin: '0 auto',\n padding: '0px 80px 0',\n '@media(max-width: 1279px)': {\n padding: '0px 33px 0',\n },\n '@media(max-width: 768px)': {\n padding: '0px 14px 0',\n },\n },\n\n howItWorksTitle: {\n color: `${Colors.TextBlack2}`,\n fontSize: '36px',\n fontWeight: '800',\n lineHeight: '60px',\n marginBottom: '58px',\n\n '@media(max-width: 1279px)': {\n marginBottom: '36px',\n },\n },\n\n howItWorksContentWrapper: {\n display: \"flex\",\n gap: '116px',\n\n '@media(max-width: 1279px)': {\n flexDirection: 'column',\n gap: '36px',\n },\n },\n tabsWrapper: {\n width: '100%',\n maxWidth: '417px',\n display: \"flex\",\n flexDirection: 'column',\n gap: '28px'\n },\n tab: {\n display: 'flex',\n alignItems: 'center',\n gap: '16px',\n borderRadius: '8px',\n background: `${Colors.TextWhite}`,\n cursor: 'pointer',\n padding: '16px 24px',\n boxShadow: '0px 0px 12px 0px rgba(0, 0, 0, 0.10)',\n '&:hover': {\n background: `${Colors.ThemePink}`,\n\n '& div': {\n background: `${Colors.TextWhite}`,\n '& svg': {\n fill: 'red',\n '& path': {\n fill: 'red'\n }\n }\n },\n '& p': {\n color: `${Colors.TextWhite}`,\n }\n },\n },\n activeTab: {\n background: `${Colors.ThemePink}`,\n\n '& div': {\n background: `${Colors.TextWhite}`,\n '& svg': {\n '& path': {\n fill: 'red'\n }\n }\n },\n '& p': {\n color: `${Colors.TextWhite}`,\n }\n },\n svgWrapper: {\n width: '24px',\n height: '24px',\n display: 'inline-flex',\n borderRadius: '4px',\n padding: '3px',\n background: `${Colors.ThemePink}`\n },\n tabSvg: {\n width: '100%',\n height: '100%',\n\n '& path': {\n fill: `${Colors.TextWhite}`\n }\n },\n text: {\n color: `${Colors.TextBlack}`,\n fontSize: '18px',\n fontWeight: '800',\n lineHeight: '28px',\n },\n\n\n}))","import React, {useState} from 'react';\nimport {Step1, Step2, Step3, Step4} from \"fragments\";\nimport {Svg} from \"assets/images\";\nimport {howItWorksStyles} from \"./styles\";\nimport {useWidth} from \"../../utils\";\nimport {UserInputsDropdown} from \"../../components\";\n\nexport const HowItWorks = () => {\n const width = useWidth()\n const classes = howItWorksStyles();\n const [currentTab, setTabs] = useState('How to Create An Account Profile')\n\n const tabs = [\n {\n title: 'How to Create An Account Profile',\n Svg: Svg.ProfileSvg,\n steps: [\n {\n title: 'Step 1',\n description: 'Go to the homepage and click the “Sign In†button, then click \"Sign Up\"'\n },\n\n {\n title: 'Step 2',\n subTitle: 'Choose an account type',\n description: 'Go to the homepage and click the “Sign In†button, then click \"Sign Up\"',\n },\n\n ]\n },\n {\n title: 'How to Create a Property Listing',\n Svg: Svg.ListSvg\n },\n {\n title: 'How to Quickly Find a Broker',\n Svg: Svg.AgentSvg\n },\n {\n title: 'How to Promote a Listing',\n Svg: Svg.MegaphoneSvg\n },\n ]\n\n const dropdownOptions = tabs.map(({title})=> title)\n\n const handleClickTabs = (value) => {\n setTabs(value)\n }\n\n return (\n \n\n
\n \n
\n\n \n Why Choose Us\n
\n\n\n We are your top choice for managing commercial real estate listings. We do it with\n simplicity, efficiency, and effectiveness. Here's why our platform excels:\n
\n\n\n {whyChooseCards.map(({description}, i) => (\n \n ))}\n
\n \n \n
\n \n
\n \n );\n};\n\n","import {Route, Switch, Redirect} from 'react-router-dom';\nimport {\n Home,\n ListingDetailsPage,\n Listings,\n PrivacyPolicy,\n TermsAndConditions,\n UserListings,\n PageNotFound,\n SmthWentWrong,\n Promotion,\n Billing,\n Brokers,\n BrokerInfo,\n AboutUs,\n HowItWorks,\n} from 'pages';\nimport {CreateListing, UserRegistration, ListingGallery, UserProfile, ResetPassword, BrokerProfile} from 'fragments';\n\nconst createListingPaths = ['/create_listing', '/my_listings/create_listing', '/my_listings/edit_listing-:id'];\nconst listingDetailsPaths = ['/listings/listing_details-:id', '/my_listings/listing_details-:id'];\nconst listingGalleryPaths = ['/listings/listing_details-:id/gallery', '/my_listings/listing_details-:id/gallery'];\nconst usrType = localStorage.getItem('userType')\nexport const Router = () => {\n const Token = localStorage.getItem('access-token');\n\n return (\n \n \n }\n\n
\n\n \n How It Works\n
\n\n {width > 1279 &&\n
\n }\n {\n width <= 1279 &&\n\n \n {tabs.map(({Svg, title}, index) => (\n handleClickTabs(title)}\n >\n
\n ))}\n \n
\n \n {title}\n
\n\n {currentTab === tabs[0].title\n &&\n \n }\n\n {currentTab === tabs[1].title\n &&\n \n }\n\n {currentTab === tabs[2].title\n &&\n \n }\n\n {currentTab === tabs[3].title\n &&\n \n }\n\n
\n \n \n\n \n\n {!Token ? (\n \n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n ) : (\n \n \n\n \n \n\n \n \n\n \n \n \n \n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n )}\n
\n );\n};\n","import React from \"react\";\nimport { MenuBar } from \"fragments\";\n\nexport const RouterSwitcher = () => \n {RenderText(ref?.current?.offsetWidth, text, textWidth)}\n
\n );\n}\n\nexport const RenderText = (width, text, textWidth) => {\n if (text) {\n const count = Math.ceil(width / (textWidth ? textWidth : 11));\n const slicedText = '' + text?.slice(0, count);\n return (\n \n {text?.length > count ? (\n {text}} placement=\"top-start\">\n \n ) : (\n
\n );\n } else {\n return '...';\n }\n};\n","export const APPEND_SUCCESS = \"APPEND_SUCCESS\";\nexport const REMOVE_SUCCESS = \"REMOVE_SUCCESS\";\n","import {\n APPEND_SUCCESS,\n REMOVE_SUCCESS,\n} from \"./http_requests_on_success.types\";\n\nexport const httpRequestsOnSuccessActions = {\n appendSuccess: (type, data = true) => ({\n type: APPEND_SUCCESS,\n payload: {\n type,\n data,\n },\n }),\n removeSuccess: (successType) => ({\n type: REMOVE_SUCCESS,\n payload: successType,\n }),\n};\n","import {\n APPEND_SUCCESS,\n REMOVE_SUCCESS,\n} from \"./http_requests_on_success.types\";\nconst initialState = [];\n\nexport const httpRequestsOnSuccessReducer = (state = initialState, action) => {\n switch (action.type) {\n case APPEND_SUCCESS:\n return [...state, action.payload];\n case REMOVE_SUCCESS:\n return state.filter((successData) => successData.type !== action.payload);\n default:\n return state;\n }\n};\n","import React, {useState} from 'react';\nimport {useHistory} from 'react-router-dom';\nimport {useDispatch} from 'react-redux';\nimport axios from 'axios';\nimport {CardElement, useStripe, useElements} from '@stripe/react-stripe-js';\nimport {Checkbox} from '@material-ui/core';\nimport {promotionStyle} from \"../styles\";\nimport {paymentActions} from \"../../../store/payment\";\nimport {paymentAuthService} from \"../../../store/payment/payment.service\";\nimport {Loader, PaymentStartEnd} from \"../../../components\";\n// import { MinLoader, useModal } from 'components';\n// import { PaymentActions, services } from 'store';\n// import { MODAL_NAMES } from 'utils';\n\nconst cardElementOptions = {\n style: {\n base: {\n color: '#666',\n fontSize: '16px',\n },\n invalid: {\n color: '#fa755a',\n fontSize: '16px',\n },\n },\n};\n\nconst CheckoutForm = ({handleClose, handlePay, edit, selectedItem}) => {\n const history = useHistory()\n const stripe = useStripe();\n const elements = useElements();\n const classes = promotionStyle()\n const dispatch = useDispatch()\n const [checkoutError, setCheckoutError] = useState();\n const [loader, setLoader] = useState(false);\n const [cardError, setCardError] = useState('');\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setLoader(true);\n setCardError('');\n\n try {\n const paymentMethod = await stripe.createPaymentMethod({\n type: 'card',\n card: elements.getElement('card'),\n });\n\n await axios.patch('/billing', {'pmtMethod': paymentMethod?.paymentMethod?.id}, {auth: true}).then(() => {\n const inter = setInterval(() => {\n dispatch(paymentActions.getPayment());\n paymentAuthService.getPaymentService().then((res) => {\n if (edit !== true) {\n handlePay()\n }\n setLoader(false);\n clearInterval(inter);\n });\n }, 2000);\n }).catch((e) => {\n setCardError(e?.data?.message);\n setLoader(false);\n },\n );\n } catch (err) {\n setCheckoutError(err.message);\n setLoader(false);\n }\n };\n\n return (\n {`${slicedText}...`}
\n{text}
\n )}\n\n
\n );\n};\n\nexport default CheckoutForm;","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAKCAYAAAC9vt6cAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEhSURBVHgBlVDRTcMwED07Ca1qVPkLocagjmCJlG+yQTtBGaEbUDboCM0EZYOov0hIYQMLqcCnAUVCclxjtwmUNIB4kuW783t3zwdg0T7mfXIySEk44PAHSMg5YVHqNC5HLsBBkCJjXEECxpP84TZpFJ+ej2G9ntmQAkJCKxV7LcoWCKCa3AZjhgeUCfWyum8QzzecLSjGmHte52iJEBraQz/ZtknQ7YF6fVy6tMOiK+tw9s2OMUJrPULVDjzfX8CXky0HYLr5Z3nvPGRaF6P350ygqkb7nKrCT+tN9mDFQV7EUmbSpbiqS5HJwC9iay35WWySXXHpbh8kPJvbLY/r4nx1d1nnek0N1NvTTavbc80vyinXVjyB/+KQRVN3fuN8AKiOZ4TcZf+/AAAAAElFTkSuQmCC\"","var _g;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nfunction SvgCorrectSvg(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 32,\n height: 32,\n viewBox: \"0 0 32 32\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"correct 1\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"path2\",\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M26.4014 13.6292C26.5747 14.3918 26.6667 15.1852 26.6667 15.9998C26.6667 21.8865 21.8867 26.6665 16.0001 26.6665C10.1134 26.6665 5.33341 21.8865 5.33341 15.9998C5.33341 10.1132 10.1134 5.33317 16.0001 5.33317C17.2307 5.33317 18.4121 5.54117 19.5121 5.92517C20.2067 6.16784 20.9667 5.80117 21.2094 5.1065C21.4521 4.4105 21.0854 3.6505 20.3907 3.40784C19.0147 2.92784 17.5374 2.6665 16.0001 2.6665C8.64141 2.6665 2.66675 8.64117 2.66675 15.9998C2.66675 23.3585 8.64141 29.3332 16.0001 29.3332C23.3587 29.3332 29.3334 23.3585 29.3334 15.9998C29.3334 14.9825 29.2188 13.9905 29.0028 13.0372C28.8388 12.3198 28.1241 11.8705 27.4067 12.0332C26.6894 12.1958 26.2388 12.9105 26.4014 13.6292ZM14.6667 16.7812L25.7241 5.72384C26.2441 5.20384 27.0894 5.20384 27.6094 5.72384C28.1294 6.24384 28.1294 7.08917 27.6094 7.60917L15.6094 19.6092C15.0894 20.1305 14.2441 20.1305 13.7241 19.6092L9.72408 15.6092C9.20408 15.0892 9.20408 14.2438 9.72408 13.7238C10.2441 13.2038 11.0894 13.2038 11.6094 13.7238L14.6667 16.7812Z\",\n fill: \"#FE385C\"\n }))));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgCorrectSvg);\nexport default __webpack_public_path__ + \"static/media/CorrectSvg.45138910.svg\";\nexport { ForwardRef as ReactComponent };","export default __webpack_public_path__ + \"static/media/aboutUs.46f5ab50.png\";","export default __webpack_public_path__ + \"static/media/whoWeAre.3d71bd90.png\";","export default __webpack_public_path__ + \"static/media/whyChooseImg.9ed23f2a.png\";","var _g;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nfunction SvgArrowRightSvg(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 32,\n height: 32,\n viewBox: \"0 0 32 32\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"_icon / chevron.right\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector\",\n d: \"M18.4829 16.165L11.1689 8.85099C11.0227 8.71788 10.9047 8.55679 10.8219 8.37726C10.7391 8.19774 10.6932 8.00343 10.6868 7.80582C10.6804 7.60822 10.7138 7.41135 10.7848 7.22687C10.8559 7.04238 10.9633 6.87403 11.1006 6.73178C11.2379 6.58953 11.4023 6.47627 11.5842 6.39871C11.766 6.32114 11.9616 6.28085 12.1593 6.28022C12.357 6.27959 12.5528 6.31862 12.7352 6.39502C12.9175 6.47142 13.0827 6.58362 13.2209 6.72499L13.2569 6.76099L21.6169 15.119C21.894 15.3962 22.0497 15.7721 22.0497 16.164C22.0497 16.5559 21.894 16.9318 21.6169 17.209L13.2589 25.567C13.124 25.7066 12.963 25.8183 12.785 25.8956C12.6069 25.973 12.4154 26.0145 12.2213 26.0178C12.0273 26.0212 11.8344 25.9863 11.6539 25.9151C11.4733 25.8439 11.3085 25.7379 11.1689 25.603C11.0293 25.4681 10.9176 25.3071 10.8403 25.1291C10.7629 24.951 10.7214 24.7595 10.718 24.5654C10.7147 24.3714 10.7496 24.1785 10.8208 23.998C10.892 23.8174 10.998 23.6526 11.1329 23.513L11.1689 23.477L18.4829 16.165Z\",\n fill: \"#FE385C\",\n stroke: \"#FE385C\",\n strokeWidth: 0.5\n }))));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgArrowRightSvg);\nexport default __webpack_public_path__ + \"static/media/ArrowRightSvg.d5111408.svg\";\nexport { ForwardRef as ReactComponent };","var _g;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nfunction SvgProfileSvg(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 18,\n height: 18,\n viewBox: \"0 0 18 18\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Profile\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"account\",\n d: \"M2.25003 15.1365C2.25643 15.2949 2.32386 15.4447 2.43822 15.5545C2.55257 15.6643 2.70498 15.7257 2.86353 15.7257C3.02208 15.7257 3.17449 15.6643 3.28885 15.5545C3.4032 15.4447 3.47063 15.2949 3.47703 15.1365C3.47598 14.0873 3.77598 13.0598 4.34142 12.176C4.90686 11.2922 5.71399 10.5892 6.66703 10.1505C7.36168 10.6046 8.17361 10.8464 9.00353 10.8464C9.83345 10.8464 10.6454 10.6046 11.34 10.1505C11.9201 10.4213 12.4494 10.7897 12.905 11.2395C13.4189 11.7505 13.8265 12.3582 14.1042 13.0276C14.3819 13.697 14.5243 14.4147 14.523 15.1395C14.5294 15.2979 14.5969 15.4477 14.7112 15.5575C14.8256 15.6673 14.978 15.7287 15.1365 15.7287C15.2951 15.7287 15.4475 15.6673 15.5618 15.5575C15.6762 15.4477 15.7436 15.2979 15.75 15.1395C15.7522 14.2528 15.5785 13.3745 15.239 12.5554C14.8994 11.7362 14.4008 10.9926 13.772 10.3675C13.3394 9.93803 12.8511 9.56872 12.32 9.26946C12.8384 8.64057 13.1674 7.87732 13.2687 7.06863C13.3699 6.25995 13.2393 5.43914 12.892 4.70185C12.5446 3.96457 11.9949 3.34117 11.3069 2.90431C10.6189 2.46745 9.82088 2.23511 9.00588 2.23438C8.19089 2.23364 7.39246 2.46453 6.70365 2.90015C6.01483 3.33577 5.46401 3.95817 5.11535 4.69483C4.76669 5.43148 4.63456 6.25206 4.73436 7.06092C4.83416 7.86979 5.16178 8.63364 5.67903 9.26346C4.63598 9.84801 3.76811 10.7007 3.16523 11.7333C2.56236 12.7658 2.24639 13.9408 2.25003 15.1365ZM8.99903 3.47746C9.60561 3.47746 10.1986 3.65727 10.703 3.99416C11.2074 4.33106 11.6007 4.80992 11.833 5.37023C12.0654 5.93054 12.1264 6.54716 12.0084 7.14216C11.8905 7.73715 11.5988 8.28383 11.1702 8.71309C10.7416 9.14236 10.1954 9.43495 9.60063 9.55389C9.00582 9.67284 8.38911 9.61279 7.82842 9.38135C7.26773 9.14991 6.78823 8.75745 6.45051 8.25358C6.11279 7.74971 5.93202 7.15704 5.93103 6.55046C5.93077 5.73623 6.25376 4.9552 6.82903 4.37899C7.40431 3.80278 8.18481 3.47852 8.99903 3.47746Z\",\n fill: \"white\"\n }))));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgProfileSvg);\nexport default __webpack_public_path__ + \"static/media/ProfileSvg.63dae1be.svg\";\nexport { ForwardRef as ReactComponent };","var _g;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nfunction SvgListSvg(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 18,\n height: 18,\n viewBox: \"0 0 18 18\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Profile\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"list (1)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path 3370\",\n d: \"M15.253 14.0918H5.22101C5.0221 14.0918 4.83133 14.0128 4.69068 13.8721C4.55003 13.7315 4.47101 13.5407 4.47101 13.3418C4.47101 13.1429 4.55003 12.9521 4.69068 12.8115C4.83133 12.6708 5.0221 12.5918 5.22101 12.5918H15.253C15.4519 12.5918 15.6427 12.6708 15.7833 12.8115C15.924 12.9521 16.003 13.1429 16.003 13.3418C16.003 13.5407 15.924 13.7315 15.7833 13.8721C15.6427 14.0128 15.4519 14.0918 15.253 14.0918Z\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path 3371\",\n d: \"M15.253 9.39355H5.22101C5.0221 9.39355 4.83133 9.31454 4.69068 9.17389C4.55003 9.03323 4.47101 8.84247 4.47101 8.64355C4.47101 8.44464 4.55003 8.25388 4.69068 8.11322C4.83133 7.97257 5.0221 7.89355 5.22101 7.89355H15.253C15.4519 7.89355 15.6427 7.97257 15.7833 8.11322C15.924 8.25388 16.003 8.44464 16.003 8.64355C16.003 8.84247 15.924 9.03323 15.7833 9.17389C15.6427 9.31454 15.4519 9.39355 15.253 9.39355Z\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path 3372\",\n d: \"M15.253 4.69629H5.22101C5.0221 4.69629 4.83133 4.61727 4.69068 4.47662C4.55003 4.33597 4.47101 4.1452 4.47101 3.94629C4.47101 3.74738 4.55003 3.55661 4.69068 3.41596C4.83133 3.27531 5.0221 3.19629 5.22101 3.19629H15.253C15.4519 3.19629 15.6427 3.27531 15.7833 3.41596C15.924 3.55661 16.003 3.74738 16.003 3.94629C16.003 4.1452 15.924 4.33597 15.7833 4.47662C15.6427 4.61727 15.4519 4.69629 15.253 4.69629Z\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Ellipse 208\",\n d: \"M2.005 5.01C2.56005 5.01 3.01 4.56005 3.01 4.005C3.01 3.44995 2.56005 3 2.005 3C1.44995 3 1 3.44995 1 4.005C1 4.56005 1.44995 5.01 2.005 5.01Z\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Ellipse 209\",\n d: \"M2.005 9.64965C2.56005 9.64965 3.01 9.19969 3.01 8.64465C3.01 8.0896 2.56005 7.63965 2.005 7.63965C1.44995 7.63965 1 8.0896 1 8.64465C1 9.19969 1.44995 9.64965 2.005 9.64965Z\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Ellipse 210\",\n d: \"M2.005 14.2903C2.56005 14.2903 3.01 13.8403 3.01 13.2853C3.01 12.7302 2.56005 12.2803 2.005 12.2803C1.44995 12.2803 1 12.7302 1 13.2853C1 13.8403 1.44995 14.2903 2.005 14.2903Z\",\n fill: \"white\"\n })))));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgListSvg);\nexport default __webpack_public_path__ + \"static/media/ListSvg.9ddf4cfa.svg\";\nexport { ForwardRef as ReactComponent };","var _g;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nfunction SvgAgentSvg(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 18,\n height: 18,\n viewBox: \"0 0 18 18\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"real-estate-agent 1\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Layer 2\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector\",\n d: \"M16.7462 14.8909C16.508 13.5862 15.9437 12.3629 15.1056 11.335C14.2676 10.307 13.1831 9.50777 11.9531 9.01166C12.6448 8.41008 13.1363 7.6116 13.3617 6.72307C13.5872 5.83454 13.536 4.89834 13.2148 4.03974C12.8937 3.18114 12.318 2.4411 11.5647 1.91864C10.8115 1.39617 9.91668 1.11621 8.99998 1.11621C8.08329 1.11621 7.18846 1.39617 6.43523 1.91864C5.682 2.4411 5.1063 3.18114 4.78516 4.03974C4.46402 4.89834 4.41276 5.83454 4.63824 6.72307C4.86371 7.6116 5.35518 8.41008 6.04686 9.01166C4.81686 9.50777 3.73237 10.307 2.89433 11.335C2.05628 12.3629 1.49193 13.5862 1.2538 14.8909C1.20952 15.1325 1.21908 15.3808 1.2818 15.6182C1.34451 15.8557 1.45883 16.0764 1.61661 16.2645C1.77542 16.4556 1.97439 16.6094 2.19936 16.7149C2.42432 16.8203 2.66977 16.875 2.91823 16.8748H15.0817C15.3302 16.875 15.5756 16.8203 15.8006 16.7149C16.0256 16.6094 16.2245 16.4556 16.3834 16.2645C16.5411 16.0764 16.6555 15.8557 16.7182 15.6182C16.7809 15.3808 16.7904 15.1325 16.7462 14.8909ZM5.62498 5.62485C5.62498 4.95733 5.82293 4.30481 6.19378 3.74979C6.56462 3.19478 7.09173 2.7622 7.70843 2.50675C8.32513 2.25131 9.00373 2.18447 9.65841 2.31469C10.3131 2.44492 10.9145 2.76636 11.3865 3.23836C11.8585 3.71036 12.1799 4.31173 12.3101 4.96642C12.4404 5.6211 12.3735 6.2997 12.1181 6.9164C11.8626 7.5331 11.43 8.0602 10.875 8.43106C10.32 8.8019 9.6675 8.99985 8.99998 8.99985C8.10515 8.99895 7.24723 8.64309 6.61449 8.01034C5.98174 7.3776 5.62588 6.51968 5.62498 5.62485ZM9.18167 10.1248L10.0254 12.2393L8.99998 13.267L7.97286 12.2393L8.8183 10.1248H9.18167ZM15.5194 15.544C15.466 15.6083 15.3992 15.6602 15.3235 15.6957C15.2479 15.7313 15.1653 15.7498 15.0817 15.7498H2.91823C2.83464 15.7498 2.75209 15.7313 2.67645 15.6957C2.60081 15.6602 2.53394 15.6083 2.48061 15.544C2.42848 15.4825 2.3906 15.4103 2.36969 15.3325C2.34878 15.2547 2.34536 15.1733 2.35967 15.094C2.59086 13.8316 3.1778 12.6615 4.05144 11.7214C4.92507 10.7813 6.04905 10.1103 7.29111 9.78734C7.42011 9.84022 7.55136 9.88728 7.68486 9.92853L6.92661 11.8236C6.84498 12.028 6.82508 12.2518 6.86937 12.4673C6.91366 12.6829 7.0202 12.8807 7.1758 13.0363L8.20461 14.0623C8.41558 14.2733 8.70167 14.3917 8.99998 14.3917C9.29829 14.3917 9.58439 14.2733 9.79536 14.0623L10.8236 13.0347C10.9792 12.8789 11.0857 12.681 11.1299 12.4653C11.1741 12.2496 11.1541 12.0257 11.0722 11.8213L10.3145 9.92685C10.4484 9.8856 10.5797 9.83853 10.7083 9.78566C11.9504 10.1087 13.0745 10.7798 13.9481 11.72C14.8217 12.6602 15.4086 13.8304 15.6397 15.0928C15.6543 15.1723 15.6511 15.2539 15.6302 15.3319C15.6094 15.4099 15.5716 15.4824 15.5194 15.544Z\",\n fill: \"white\"\n })))));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgAgentSvg);\nexport default __webpack_public_path__ + \"static/media/AgentSvg.00e66f42.svg\";\nexport { ForwardRef as ReactComponent };","var _g;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nfunction SvgMegaphoneSvg(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 33,\n height: 33,\n viewBox: \"0 0 33 33\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"megaphone (2) 1\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_2\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector\",\n d: \"M32.0326 11.665H28.1011C27.5667 11.665 27.1343 12.0975 27.1343 12.6318C27.1343 13.1662 27.5667 13.5986 28.1011 13.5986H32.0326C32.567 13.5986 32.9994 13.1662 32.9994 12.6318C32.9994 12.0975 32.567 11.665 32.0326 11.665Z\",\n fill: \"#0073BB\"\n }))), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_3\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_4\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector_2\",\n d: \"M32.8978 6.39955C32.659 5.92183 32.0783 5.72924 31.6006 5.96714L27.669 7.90073C27.1913 8.1396 26.9977 8.72025 27.2366 9.19798C27.4742 9.67165 28.0513 9.86997 28.5339 9.6304L32.4654 7.6968C32.9432 7.45794 33.1367 6.87728 32.8978 6.39955Z\",\n fill: \"#0073BB\"\n }))), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_5\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_6\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector_3\",\n d: \"M32.4654 17.5681L28.5339 15.6345C28.0561 15.3984 27.4773 15.5882 27.2366 16.0669C26.9977 16.5446 27.1913 17.1253 27.669 17.3641L31.6006 19.2977C32.0832 19.5373 32.6603 19.339 32.8978 18.8653C33.1367 18.3876 32.9432 17.8069 32.4654 17.5681Z\",\n fill: \"#0073BB\"\n }))), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_7\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_8\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector_4\",\n d: \"M23.2671 1.99805C22.1992 1.99805 21.3335 2.86372 21.3335 3.93164V23.2673C21.3335 24.3351 22.1992 25.2009 23.2671 25.2009C24.335 25.2009 25.2007 24.3351 25.2007 23.2673V3.93164C25.2006 2.86365 24.335 1.99805 23.2671 1.99805Z\",\n fill: \"#0073BB\"\n }))), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_9\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_10\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector_5\",\n d: \"M11.636 22.4465C11.5626 22.9073 11.1803 23.2666 10.6989 23.2666H9.51495C9.43161 23.2666 9.35717 23.2942 9.28008 23.3139L9.12263 21.6088L8.29511 21.333H3.2124L4.0182 28.8049C4.41349 30.3827 6.01038 31.3 7.53502 30.9141C9.08621 30.527 10.0332 28.9494 9.67067 27.5426L9.45314 25.1878C9.4746 25.1892 9.49291 25.2002 9.51489 25.2002H10.6989C12.0326 25.2002 13.1473 24.2905 13.4845 23.0627L11.636 22.4465Z\",\n fill: \"#0073BB\"\n }))), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_11\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_12\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector_6\",\n d: \"M9.73242 7.42363V19.7736L19.4003 22.9961V4.20117L9.73242 7.42363Z\",\n fill: \"#0073BB\"\n }))), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_13\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_14\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector_7\",\n d: \"M2.90033 7.79883C1.30105 7.79883 0 9.09988 0 10.6992V16.4999C0 18.0992 1.30105 19.4002 2.90033 19.4002H7.7987V7.79883H2.90033Z\",\n fill: \"#0073BB\"\n }))))));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgMegaphoneSvg);\nexport default __webpack_public_path__ + \"static/media/MegaphoneSvg.1b503339.svg\";\nexport { ForwardRef as ReactComponent };","var _g;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nfunction SvgDownRightArrow(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"down-right-arrow 1\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"18 Down right\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector\",\n d: \"M21.5841 13.9505L14.7806 7.14714C14.6746 7.04549 14.5412 6.97692 14.3968 6.94979C14.2524 6.92267 14.1032 6.93816 13.9674 6.99438C13.8317 7.05061 13.7153 7.14513 13.6323 7.26641C13.5494 7.38769 13.5035 7.53049 13.5004 7.67739V10.8557C9.8854 11.1068 5.77007 5.98374 5.48185 2.65074C5.46372 2.48472 5.391 2.32942 5.27509 2.2092C5.15918 2.08897 5.00663 2.01063 4.84139 1.98646C4.67615 1.96229 4.50755 1.99365 4.36206 2.07564C4.21657 2.15763 4.10241 2.28559 4.0375 2.43946C0.767123 10.7055 5.3074 16.7431 13.5004 18.1227V21.2842C13.506 21.4299 13.5534 21.571 13.6367 21.6906C13.7201 21.8103 13.836 21.9035 13.9707 21.9593C14.1054 22.0151 14.2533 22.0311 14.3969 22.0055C14.5404 21.9798 14.6736 21.9135 14.7806 21.8144L21.5841 15.011C21.7247 14.8703 21.8037 14.6796 21.8037 14.4807C21.8037 14.2818 21.7247 14.0911 21.5841 13.9505Z\",\n fill: \"#0073BB\"\n })))));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgDownRightArrow);\nexport default __webpack_public_path__ + \"static/media/DownRightArrow.4a475aa9.svg\";\nexport { ForwardRef as ReactComponent };","import arrowIcon from \"./down-arrow.png\";\nimport aboutUs from './aboutUs.png'\nimport whoWeAre from './whoWeAre.png'\nimport whyChooseImg from './whyChooseImg.png'\n\nimport {ReactComponent as CorrectSvg} from \"./svg/CorrectSvg.svg\";\nimport {ReactComponent as ArrowRightSvg} from \"./svg/ArrowRightSvg.svg\";\nimport {ReactComponent as ProfileSvg} from \"./svg/ProfileSvg.svg\";\nimport {ReactComponent as ListSvg} from \"./svg/ListSvg.svg\";\nimport {ReactComponent as AgentSvg} from \"./svg/AgentSvg.svg\";\nimport {ReactComponent as MegaphoneSvg} from \"./svg/MegaphoneSvg.svg\";\nimport {ReactComponent as DownRightArrow} from \"./svg/DownRightArrow.svg\";\n\nexport const Images = {\n // Name:Value\n arrowIcon: arrowIcon,\n aboutUs,\n whoWeAre,\n whyChooseImg\n};\n\nexport const Svg = {\n CorrectSvg,\n ArrowRightSvg,\n ProfileSvg,\n ListSvg,\n AgentSvg,\n MegaphoneSvg,\n DownRightArrow\n}","import React, {useState, useEffect} from \"react\";\nimport {useDispatch} from \"react-redux\";\nimport ReCAPTCHA from \"react-google-recaptcha\"\nimport {footerCoresStyle} from \"./styles\";\nimport {CloseModalButton, UserInput} from \"components\";\nimport {EmailValidator, FindLoad, FindSuccess, Images} from \"utils\";\nimport {authActions, httpRequestsOnSuccessActions} from \"store\";\nimport {CircularProgress} from \"@mui/material\";\n\nexport const SendMessage = ({onClose}) => {\n const classes = footerCoresStyle()\n const dispatch = useDispatch()\n const [inputs, setInputs] = useState({});\n const [error, setError] = useState('');\n const loader = FindLoad('SEND_MESSAGE')\n const success = FindSuccess('SEND_MESSAGE')\n const [disable, setDisable] = useState(true)\n\n function onChange(value) {\n setDisable(false)\n }\n\n useEffect(() => {\n if (success.length) {\n onClose();\n dispatch(httpRequestsOnSuccessActions.removeSuccess('SEND_MESSAGE'));\n }\n }, [success]);\n\n const handleChange = (evt) => {\n setInputs((prevState) => ({\n ...prevState,\n [evt.target.name]: evt.target.value,\n }));\n error === evt.target.name && setError('');\n };\n\n const sendMessage = () => {\n const emailErrorMsg = !EmailValidator.test(inputs.email) ? 'Email must be an email!' : '';\n if (inputs?.name && inputs.email && !emailErrorMsg !== 'Email must be an email!' && inputs?.message) {\n const info = {\n \"name\": inputs?.name,\n \"email\": inputs.email,\n \"message\": inputs?.message,\n }\n dispatch(authActions.sendMessage(info))\n } else {\n setError(\n !inputs?.name ? 'name' :\n !inputs?.email ? 'email' :\n emailErrorMsg ? emailErrorMsg :\n !inputs?.message ? 'message' : ''\n )\n }\n }\n\n return (\n \n }\n />\n \n \n \n \n {loader?.length ?\n \n :\n 'Send'\n }\n \n
\n )\n}","\n\nexport const Colors ={\n\n // Backgrounds colors\n\n BackgroundDark :'#1C2331',\n BackgroundLight :'#F7F9FC',\n BackgroundLightGray :'#F5F5F5',\n BackgroundPrimary :'#E6ECF3',\n BackgroundWhite :'#FFFFFF',\n BackgroundWhiteOff: '#F4F4F4',\n BackgroundDarkWhite: '#F7F7F7', \n\n // Text colors\n\n TextPrimary:'#51566D',\n TextSecondary:'#2A374E',\n TextWhite:'#FFFFFF',\n TextLight:'#51566D80',\n TextGray:'#757280',\n TextDarkGrey:'#2A374E80',\n TextWhiteBlue: '#438AFE4D',\n TextBlack: '#2B273C',\n TextBlack2: '#000',\n\n // Theme colors\n\n ThemeError:'#F07379',\n ThemeBlue:'#0073BB',\n ThemeWhiteBlue:'#9cb9f3',\n ThemeBorderBlue: '#438AFE80',\n ThemeYellow:'#ECC711',\n ThemeGreen:'#00C851',\n ThemeRed:'#D72525',\n ThemePurple:'#7B61EA',\n ThemeOrange:'#FFA330',\n ThemeGray:'#E6ECF380',\n ThemeDarkGray:'#E6ECF3',\n ThemeBorder:'#51566DB3',\n ThemeDarkBlue:'#3F51B5',\n ThemeTurquoise:'#00BCD4',\n ThemePink: '#FE385C',\n\n}\n\nexport const Shadow ={\n normal: '0px 0px 12px #0052E01A',\n menuShadow: '0px 3px 6px #8A8A8A29',\n modalShadow: '0px 0px 6px #8A8A8A29',\n changeShadow: '0px 0px 6px #8A8A8A3D',\n blueButton: '0px 3px 6px #438AFE4D'\n}\n\nexport const Backgrounds ={\n white: '#F7F9FC 0% 0% no-repeat padding-box',\n green: '#00C851 0% 0% no-repeat padding-box',\n gray: '#E6ECF3 0% 0% no-repeat padding-box',\n hover: '#26b85d 0% 0% no-repeat padding-box',\n whiteModal: '#FFFFFF 0% 0% no-repeat padding-box',\n tableActive: '#E6ECF380 0% 0% no-repeat padding-box',\n tableActiveDark: '#E6ECF3 0% 0% no-repeat padding-box;',\n info: '#438AFE1A 0% 0% no-repeat padding-box',\n theme: '#438AFE 0% 0% no-repeat padding-box',\n themeDark: '#0000001A 0% 0% no-repeat padding-box',\n darkBlue : '#337BEFFF',\n\n}\n\n","import { Switch } from \"@mui/material\";\nimport { makeStyles, withStyles } from \"@mui/styles\";\nimport { Backgrounds, Colors } from \"./globalColors\";\n\nexport const useGlobalStyles = makeStyles(\n () => ({\n tableStyle: {\n background: \"red\",\n height: \"100%\",\n minHeight: \"100vh\",\n width: \"100%\",\n boxShadow: \"0px 0px 12px #0052E01A\",\n borderRadius: \"8px\",\n marginTop: \"16px\",\n marginBottom: \"24px\",\n \"& .MuiTableContainer-root\": {\n boxShadow: \"none\",\n },\n },\n tableWrapper: {\n height: \"100%\",\n minHeight: \"80vh\",\n width: \"100%\",\n boxShadow: \"0px 0px 12px #0052E01A\",\n borderRadius: \"8px\",\n marginTop: \"16px\",\n marginBottom: \"24px\",\n \"& .MuiTableContainer-root\": {\n boxShadow: \"none\",\n },\n },\n tableWrapperSmallHeight: {\n height: \"100%\",\n minHeight: \"60vh\",\n width: \"100%\",\n boxShadow: \"0px 0px 12px #0052E01A\",\n borderRadius: \"8px\",\n marginTop: \"24px\",\n marginBottom: \"24px\",\n \"& .MuiTableContainer-root\": {\n boxShadow: \"none\",\n },\n },\n tableWrapperSmall: {\n height: \"100%\",\n width: \"100%\",\n boxShadow: \"0px 0px 12px #0052E01A\",\n borderRadius: \"8px\",\n marginTop: \"16px\",\n marginBottom: \"24px\",\n \"& .MuiTableContainer-root\": {\n boxShadow: \"none\",\n },\n },\n\n simpleInput: {\n marginRight: \"30px\",\n width: \"100%\",\n \"@media (min-width: 1919px)\": {\n marginRight: \"56px\",\n },\n },\n simpleInputFull: {\n width: \"100%\",\n },\n\n InfoAndImage: {\n display: \"flex\",\n alignItems: \"center\",\n \"& p\": {\n fontSize: \"14px\",\n lineHeight: \"19px\",\n fontWeight: \"bold\",\n color: Colors.TextSecondary,\n },\n \"& img\": {\n width: \"24px\",\n height: \"24px\",\n marginRight: \"4px\",\n \"@media (min-width: 1920px)\": {\n marginRight: \"8px\",\n },\n },\n },\n\n buttonsStyle: {\n marginTop: \"14px\",\n },\n\n createOfficeTableHead: {\n display: \"flex\",\n alignItems: \"center\",\n\n \"& p\": {\n fontSize: \"16px\",\n fontWeight: \"bold\",\n color: Colors.TextSecondary,\n\n \"@media (max-width: 1919px)\": {\n marginLeft: \"4px\",\n },\n \"@media (min-width: 1920px)\": {\n marginLeft: \"8px\",\n },\n },\n },\n\n spaceBetween: {\n display: \"flex\",\n justifyContent: \"space-between\",\n width: \"100%\",\n },\n\n centerItem: {\n display: \"flex\",\n alignItems: \"center\",\n },\n\n fullScreen: {\n display: \"flex\",\n width: \"100%\",\n height: \"100%\",\n },\n\n flexAble: {\n display: \"flex\",\n },\n\n fullWidth: {\n width: \"100%\",\n },\n\n deleteModal: {\n width: \"500px\",\n height: \"auto\",\n background: Backgrounds.whiteModal,\n borderRadius: \"8px\",\n padding: \"8px 0 40px 0\",\n display: \"flex\",\n flexDirection: \"column\",\n textAlign: \"center\",\n },\n\n tableContainer: {\n display: \"flex\",\n justifyContent: \"space-between\",\n flexDirection: \"column\",\n height: \"110vh\",\n \"@media (min-width: 1919px)\": {\n height: \"85vh\",\n },\n },\n\n item: {\n background: Backgrounds.tableActive,\n borderRadius: \"4px\",\n height: \"48px\",\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n padding: \"0 16px\",\n marginBottom: \"8px\",\n cursor: \"pointer\",\n },\n activeItem: {\n background: Backgrounds.tableActiveDark,\n borderRadius: \"4px\",\n height: \"48px\",\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n padding: \"0 16px\",\n marginBottom: \"8px\",\n cursor: \"pointer\",\n },\n inputTextFieldBlue: {\n width: \"100%\",\n \"& .MuiOutlinedInput-notchedOutline\": {\n borderColor: Colors.ThemeBlue,\n },\n \"& .MuiOutlinedInput-root.Mui-disabled .MuiOutlinedInput-notchedOutline\":\n {\n borderColor: Colors.ThemeWhiteBlue,\n },\n \"& .MuiFormLabel-root.Mui-disabled\": {\n color: `${Colors.ThemeWhiteBlue}!important`,\n },\n \"& .MuiOutlinedInput-root\": {\n height: \"48px\",\n },\n \"& .MuiInputLabel-outlined\": {\n marginTop: \"-3px\",\n },\n \"& .MuiInputLabel-outlined.MuiInputLabel-shrink\": {\n transform: \"translate(14px, -2px) scale(0.75)\",\n color: Colors.ThemeBlue,\n },\n },\n }),\n { index: 1 }\n);\n\nexport const useGlobalTextStyles = makeStyles(\n () => ({\n modalTitle: {\n fontSize: \"32px\",\n fontWeight: \"bold\",\n lineHeight: \"43px\",\n color: Colors.TextSecondary,\n },\n\n modalText: {\n color: Colors.TextPrimary,\n fontSize: \"16px\",\n lineHeight: \"24px\",\n margin: \"16px 0 20px 0\",\n \"@media (min-width: 1920px)\": {\n margin: \"16px 0 40px 0\",\n },\n },\n\n orText: {\n fontSize: \"16px\",\n lineHeight: \"24px\",\n fontWeight: \"600\",\n textAlign: \"center\",\n margin: \"16px 0\",\n \"@media (min-width: 1920px)\": {\n margin: \"24px 0\",\n },\n },\n }),\n { index: 1 }\n);\n\nexport const AntSwitch = withStyles((theme) => ({\n root: {\n width: 32,\n height: 16,\n padding: 0,\n display: \"flex\",\n marginTop: 0,\n marginLeft: \"8px\",\n },\n switchBase: {\n paddingTop: \"2.2px\",\n padding: 3,\n color: theme.palette.common.white,\n \"&$checked\": {\n transform: \"translateX(14px)\",\n color: theme.palette.common.white,\n \"& + $track\": {\n opacity: 1,\n backgroundColor: Colors.ThemeBlue,\n borderColor: theme.palette.primary.main,\n },\n },\n },\n thumb: {\n width: 12,\n height: 12,\n marginTop: 0,\n boxShadow: \"none\",\n },\n track: {\n border: \"none\",\n borderRadius: 24 / 2,\n opacity: 1,\n backgroundColor: theme.palette.grey[400],\n },\n checked: {},\n}))(Switch);\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport { Colors } from \"./globalColors\";\n\nexport const useGlobalText = makeStyles(\n () => ({\n title: {\n fontSize: \"24px\",\n fontWeight: \"700\",\n color: \"black\",\n position: \"relative\",\n display: \"flex\",\n justifyContent: \"flex-end\",\n \"& span\": {\n fontSize: \"24px\",\n fontWeight: \"700\",\n color: \"black\",\n margin: \"0 8px\",\n },\n },\n\n smallText: {\n fontSize: \"18px\",\n fontWeight: \"600\",\n color: Colors.TextSecondary,\n },\n\n smallSwitchText: {\n fontSize: \"14px\",\n color: Colors.TextSecondary,\n },\n\n nameEllipsis: {\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\",\n width: \"100px\",\n textTransform: \"uppercase\",\n \"@media (min-width: 1919px)\": {\n width: \"150px\",\n },\n },\n\n addressEllipsis: {\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\",\n width: \"200px\",\n \"@media (min-width: 1919px)\": {\n width: \"250px\",\n },\n },\n desc: {\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\",\n width: \"200px\",\n \"@media (min-width: 1919px)\": {\n width: \"250px\",\n },\n },\n\n emailEllipsis: {\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\",\n width: \"150px\",\n \"@media (min-width: 1919px)\": {\n width: \"200px\",\n },\n },\n }),\n { index: 1 }\n);\n","import { makeStyles } from \"@material-ui/core/styles\";\n\nexport const createInputsWrapper = makeStyles(\n () => ({\n createInputsWrapper: {\n display: \"flex\",\n flexDirection: \"column\",\n width: \"100%\",\n },\n\n basicInfo: {\n margin: \"20px 0 8px 0\",\n \"@media (min-width: 1920px)\": {\n margin: \"30px 0 8px 0\",\n },\n },\n\n basicInfoInputs: {\n display: \"flex\",\n justifyContent: \"space-between\",\n marginTop: \"16px\",\n \"@media (min-width: 1920px)\": {\n marginTop: \"24px\",\n },\n },\n }),\n { index: 1 }\n);\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport { Backgrounds } from \"./globalColors\";\n\nexport const globalModals = makeStyles(\n () => ({\n smallModalWrapper: {\n width: \"500px\",\n height: \"auto\",\n background: Backgrounds.whiteModal,\n borderRadius: \"8px\",\n padding: \"8px 0 40px 0\",\n maxHeight: \"590px\",\n overflow: \"auto\",\n \"@media (min-width: 1919px)\": {\n width: \"582px\",\n maxHeight: \"650px\",\n },\n },\n\n smallModalClose: {\n display: \"flex\",\n justifyContent: \"flex-end\",\n },\n\n modalWrapperContent: {\n padding: \"8px 32px 0 32px\",\n\n \"@media (min-width: 1920px)\": {\n padding: \"8px 40px 0 40px\",\n },\n },\n }),\n { index: 1 }\n);\n","export const EmailValidator =\n /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\nexport const PasswordValidator = /^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$/;\n","import axios from 'axios';\n\nexport const initAxiosInterceptors = () => {\n axios.interceptors.request.use((config) => {\n config.url = `${process.env.REACT_APP_API_BASE}${config.url}`;\n\n if (config.auth) {\n const token = localStorage.getItem('access-token');\n\n if (!token) {\n // router.push('/');\n throw new Error('token not found');\n }\n config.headers = {\n ...config.headers,\n 'access-token': `${token}`,\n };\n }\n\n return config;\n });\n\n axios.interceptors.response.use(\n (response) => response,\n (error) => {\n if (error?.response?.status === 401) {\n localStorage.removeItem('access-token');\n localStorage.removeItem('userInfo');\n window.location.replace('/');\n // router.push('/');\n }\n\n throw new Object({\n data: error.response.data,\n status: error.response.status,\n });\n }\n );\n};\n","import { useSelector } from \"react-redux\";\n\nexport const FindError = (status) => {\n const { httpOnError } = useSelector((state) => ({\n httpOnError: state.httpOnError,\n }));\n\n return (\n httpOnError &&\n httpOnError.length &&\n httpOnError.filter((i) => (i.type === status ? i : \"\"))\n );\n};\n","import {useSelector} from \"react-redux\";\n\nexport const FindSuccess =(status) =>{\n const {httpOnSuccess} = useSelector((state) => ({\n httpOnSuccess: state.httpOnSuccess\n }));\n return httpOnSuccess && httpOnSuccess.length && httpOnSuccess.filter((i) => i.type === status)\n\n}","import {useSelector} from \"react-redux\";\n\nexport const FindLoad =(status) =>{\n const {httpOnLoad} = useSelector((state) => ({\n httpOnLoad: state.httpOnLoad\n }));\n return httpOnLoad && httpOnLoad.length && httpOnLoad.filter((i) => i === status)\n\n}","export const makeCapitalize = (val = \"\") => {\n return val.includes(\"_\")\n ? val\n .split(\"_\")\n .map((el) => el.slice(0, 1).toUpperCase() + el.slice(1).toLowerCase())\n .join(\" \")\n : val\n .split(\" \")\n .map((el) => el.slice(0, 1).toUpperCase() + el.slice(1).toLowerCase())\n .join(\" \");\n};\n","export const isNotEmpty = (val = '') => (typeof val === 'number' ? val.toString().trim() : val.trim() !== '');\n","export const getValDependsOnLength = (val = \"\") => {\n const strVal = val.toString();\n switch (strVal.length) {\n case 4:\n return `${strVal.slice(0, 1)}K`;\n case 5:\n return `${strVal.slice(0, 2)}K`;\n case 6:\n return `${strVal.slice(0, 3)}K`;\n case 7:\n return `${strVal.slice(0, 1)}M`;\n case 8:\n return `${strVal.slice(0, 2)}M`;\n case 9:\n return `${strVal.slice(0, 3)}M`;\n case 10:\n return `${strVal.slice(0, 1)}B`;\n default:\n return strVal;\n }\n};\n","export const getValTillTenDig = (val = '', limit = 10) => (val.trim().length > limit ? val.slice(0, limit) : val);\n","export const getLimitedVal = (val = '', limit = 10) => (val.trim().length > limit ? `${val.slice(0, limit)}...` : val);\n","export const handleCreatedAtDate = (date = \"\", sliceSize = 10, joinBy = \".\") =>\n date.slice(0, sliceSize).split(\"-\").reverse().join(joinBy);\n","export const formatPhoneNumber = (num = \"\") =>\n `+${num.slice(0, 1)} ${num.slice(1, 4)}-${num.slice(4, 7)}-${num.slice(7)}`;\n","export const hideParamsId = (pathname = \"\") =>\n pathname.includes(\"-\") ? pathname.slice(0, pathname.indexOf(\"-\")) : pathname;\n","import { isNotEmpty } from \"utils\";\n\nexport const getPassErrorText = (val = \"\") => {\n if (isNotEmpty(val)) {\n return val.trim().length < 8\n ? \"Minimum 8 characters\"\n : !/\\d/.test(val)\n ? \"At least 1 number\"\n : !/[A-Z]/.test(val)\n ? \"At least 1 uppercase letter\"\n : \"\";\n }\n};\n","import { isNotEmpty } from 'utils';\n\nexport const getPhoneErrorText = (phoneNum = '') => {\n if (isNotEmpty(phoneNum)) {\n return phoneNum.trim().length < 10 ? 'At least 10 digits' : /[a-zA-Z]/g.test(phoneNum) ? 'Invalid phone number' : '';\n }\n};\n","export const ToastSuccess = (success) => {\n if (success) {\n return success === \"GET_RECOVERY_LINK\" ? \"We sent a recovery email to you. Please check your inbox.\" :\n success === \"CHANGE_PASSWORD_REQUEST\" ? \"Your password has been reset successfully.\" :\n false;\n }\n};\n","export const ToastFail = (fail) => {\n if (fail) {\n // return\n // fail === \"GET_RECOVERY_LINK\" ? \"While sending a recovery email an error occured. Please try again.\" :\n // fail === \"CHANGE_PASSWORD_REQUEST\" ? \"While resetting your password an error occured. Please try again.\" :\n return fail === \"IMAGE_SIZE\" ? \"Image Max size must be 2 MB\" :\n false;\n }\n};\n","export const getDataValue = (val) => {\n if (val) return val;\n else {\n if (typeof val === 'number') return 0;\n else return '';\n }\n};\n","export const getAddressText = (address) => {\n if (!address) return;\n const { street, neighborhood, city, state, country, zip } = address;\n const addressComponents = [];\n const addressKeys = [zip, country, state, city, neighborhood, street];\n for (let i = 0; i < addressKeys.length; i++) {\n if (addressKeys[i]) addressComponents.push(addressKeys[i]);\n }\n let addressDisplay = '';\n for (let i = 0; i < addressComponents.length; i++) {\n if (i === 0) {\n addressDisplay += addressComponents[i];\n } else {\n addressDisplay += `, ${addressComponents[i]}`;\n }\n }\n return addressDisplay;\n};\n","import { useCallback, useEffect, useState } from \"react\";\n\nexport const useWidth = () => {\n const [width, setWidth] = useState(window?.innerWidth);\n\n const onResize = useCallback(() => {\n setWidth(window?.innerWidth);\n }, []);\n\n useEffect(() => {\n window.addEventListener(\"resize\", onResize);\n return () => {\n window.removeEventListener(\"resize\", onResize);\n };\n }, []);\n return width;\n};\n","import axios from 'axios';\nimport { forEach } from 'lodash';\n\nexport const handleFileUpload = async (givenFile) => {\n if (!givenFile) return;\n\n const formData = new FormData();\n let endpoint = '';\n\n if (Array.isArray(givenFile)) {\n forEach(givenFile, (file) => formData.append('files', file));\n endpoint = '/files/uploadMany';\n } else {\n formData.append('files', givenFile);\n endpoint = '/files/upload';\n }\n\n return await axios.post(endpoint, formData, { auth: true });\n};\n","export const hasURL = (images = []) => {\n if (!Array.isArray(images)) return;\n\n let hasURL = false;\n\n for (const image of images) {\n if (!!image.url) {\n hasURL = true;\n } else {\n hasURL = false;\n }\n }\n\n return hasURL;\n};\n","export { initAxiosInterceptors } from './axios';\nexport { FindError } from './findError';\nexport { FindSuccess } from './findSuccess';\nexport { FindLoad } from './findLoad';\nexport { makeCapitalize } from './makeCapitalize';\nexport { isNotEmpty } from './isNotEmpty';\nexport { getValDependsOnLength } from './getValDependsOnLength';\nexport { getValTillTenDig } from './getValTillTenDig';\nexport { getLimitedVal } from './getLimitedVal';\nexport { handleCreatedAtDate } from './handleCreatedAtDate';\nexport { formatPhoneNumber } from './fomatPhoneNumber';\nexport { hideParamsId } from './hideParamsId';\nexport { getPassErrorText } from './getPassErrorText';\nexport { getPhoneErrorText } from './getPhoneErrorText';\nexport { ToastSuccess } from './toastSuccess';\nexport { ToastFail } from './toastFail';\nexport { getDataValue } from './getDataValue';\nexport { getAddressText } from './getAddressText';\nexport { useWidth } from './useWidth';\nexport { handleFileUpload } from './handleFileUpload';\nexport { hasURL } from './hasURL';\nexport { TextRow } from './textResizer'\n\n\n\nexport const PROMOTED = 'PROMOTED'\nexport const NON_PROMOTED = 'NON_PROMOTED'\n","export default __webpack_public_path__ + \"static/media/user.55fddad0.svg\";","export default __webpack_public_path__ + \"static/media/dropdownArrow.8ea1ebc1.svg\";","export default __webpack_public_path__ + \"static/media/grid.67092f33.svg\";","export default __webpack_public_path__ + \"static/media/gridWhite.421b2dd5.svg\";","export default __webpack_public_path__ + \"static/media/list.dff0ba28.svg\";","export default __webpack_public_path__ + \"static/media/listWhite.8c328a59.svg\";","export default __webpack_public_path__ + \"static/media/checkedCheckmark.1cee4a73.svg\";","export default __webpack_public_path__ + \"static/media/uncheckedCheckmark.a372b95a.svg\";","export default __webpack_public_path__ + \"static/media/clear.642cd78d.svg\";","export default __webpack_public_path__ + \"static/media/dropdownArrowBlack.2d314fad.svg\";","export default __webpack_public_path__ + \"static/media/clearSearch.2c49ef57.svg\";","export default __webpack_public_path__ + \"static/media/filterSmall.beaa63ab.svg\";","export default __webpack_public_path__ + \"static/media/upDownArrows2.06617420.svg\";","export default __webpack_public_path__ + \"static/media/upDownArrowsBlue2.2bfd0f30.svg\";","export default __webpack_public_path__ + \"static/media/downUpArrows2.e1c952af.svg\";","export default __webpack_public_path__ + \"static/media/downUpArrowsBlue2.cf1e83de.svg\";","export default __webpack_public_path__ + \"static/media/close.8b13a072.svg\";","export default __webpack_public_path__ + \"static/media/filter.ad281110.svg\";","export default __webpack_public_path__ + \"static/media/facebook.f78568ed.svg\";","export default __webpack_public_path__ + \"static/media/instagram.73cf4183.svg\";","export default __webpack_public_path__ + \"static/media/twitter.c58076b8.svg\";","export default __webpack_public_path__ + \"static/media/facebookHover.d99736bc.svg\";","export default __webpack_public_path__ + \"static/media/instagramHover.a4115cac.svg\";","export default __webpack_public_path__ + \"static/media/twitterHover.f783a0f2.svg\";","export default __webpack_public_path__ + \"static/media/address.f8dac59f.svg\";","export default __webpack_public_path__ + \"static/media/arrowLeft.12b84a72.svg\";","export default __webpack_public_path__ + \"static/media/arrowRight.8af7bac7.svg\";","export default __webpack_public_path__ + \"static/media/price.488e446c.svg\";","export default __webpack_public_path__ + \"static/media/size.ec435a44.svg\";","export default __webpack_public_path__ + \"static/media/checkmark.f1c83962.svg\";","export default __webpack_public_path__ + \"static/media/userProfile.6feec1e0.svg\";","export default __webpack_public_path__ + \"static/media/pin.87ea3af5.svg\";","export default __webpack_public_path__ + \"static/media/arrowWhiteLeft.349fd256.svg\";","export default __webpack_public_path__ + \"static/media/arrowWhiteRight.02c4d5d8.svg\";","export default __webpack_public_path__ + \"static/media/closeWhite.631c3d78.svg\";","export default __webpack_public_path__ + \"static/media/noListingsFound.8f47f048.svg\";","export default __webpack_public_path__ + \"static/media/registerModalClose.a01a33b7.svg\";","export default __webpack_public_path__ + \"static/media/registerModalImage.15562f03.svg\";","export default __webpack_public_path__ + \"static/media/eyeOnIcon.2759b5cd.svg\";","export default __webpack_public_path__ + \"static/media/eyeOffIcon.5fc715c2.svg\";","export default __webpack_public_path__ + \"static/media/validCheckmark.3e582f76.svg\";","export default __webpack_public_path__ + \"static/media/invalidCheckmark.6a1ca3de.svg\";","export default __webpack_public_path__ + \"static/media/success.20ca2af3.svg\";","export default __webpack_public_path__ + \"static/media/error.339b154a.svg\";","export default __webpack_public_path__ + \"static/media/profile.aa7a6f08.svg\";","export default __webpack_public_path__ + \"static/media/listing.4092e442.svg\";","export default __webpack_public_path__ + \"static/media/logOut.e8495677.svg\";","export default __webpack_public_path__ + \"static/media/arrowBlueUp.7eb98fef.svg\";","export default __webpack_public_path__ + \"static/media/arrowBlueDown.788166b2.svg\";","export default __webpack_public_path__ + \"static/media/emptyImage.2a5e0e2e.svg\";","export default __webpack_public_path__ + \"static/media/closeImage.5e3ff833.svg\";","export default __webpack_public_path__ + \"static/media/password.dfa4c19e.svg\";","export default __webpack_public_path__ + \"static/media/delete.647cf27e.svg\";","export default __webpack_public_path__ + \"static/media/addPhoto.2f84bc12.svg\";","export default __webpack_public_path__ + \"static/media/edit.8f3811b6.svg\";","export default __webpack_public_path__ + \"static/media/heroImage.dba51d22.svg\";","export default __webpack_public_path__ + \"static/media/search.faf48d84.svg\";","export default __webpack_public_path__ + \"static/media/searchCity.7edc7c77.svg\";","export default __webpack_public_path__ + \"static/media/searchRed.cc7a6772.svg\";","export default __webpack_public_path__ + \"static/media/diamond.41fa8601.svg\";","export default __webpack_public_path__ + \"static/media/users.448eaaf5.svg\";","export default __webpack_public_path__ + \"static/media/listingList.a685c590.svg\";","export default __webpack_public_path__ + \"static/media/usersImage.f77c38f3.svg\";","export default __webpack_public_path__ + \"static/media/freeAccess.bdd628b1.svg\";","export default __webpack_public_path__ + \"static/media/management.34204d2f.svg\";","export default __webpack_public_path__ + \"static/media/property.0532ca59.svg\";","export default __webpack_public_path__ + \"static/media/account.bfbd0944.svg\";","export default __webpack_public_path__ + \"static/media/industrial.501d89bf.png\";","export default __webpack_public_path__ + \"static/media/retail.90cead1b.png\";","export default __webpack_public_path__ + \"static/media/office.abc142eb.png\";","export default __webpack_public_path__ + \"static/media/more.ae78cf9a.svg\";","export default __webpack_public_path__ + \"static/media/building.5fe1f639.svg\";","export default __webpack_public_path__ + \"static/media/pageNotFound.e5024dde.svg\";","export default __webpack_public_path__ + \"static/media/smthWentWrong.27920310.svg\";","export default __webpack_public_path__ + \"static/media/map.8d8bf448.svg\";","export default __webpack_public_path__ + \"static/media/mapActive.8092c1a0.svg\";","export default __webpack_public_path__ + \"static/media/zoomInIcon.7ce2c87c.svg\";","export default __webpack_public_path__ + \"static/media/zoomOutIcon.627807b1.svg\";","export default __webpack_public_path__ + \"static/media/homePageHero.3971f0a3.png\";","export default __webpack_public_path__ + \"static/media/forLease.d2277cdd.svg\";","export default __webpack_public_path__ + \"static/media/arrowRightRed.04a7ad3c.svg\";","export default __webpack_public_path__ + \"static/media/officeIcon.4bc290a4.png\";","export default __webpack_public_path__ + \"static/media/rectangleIcon.06317cb7.png\";","export default __webpack_public_path__ + \"static/media/arrowBlackRight.36bf3691.svg\";","export default __webpack_public_path__ + \"static/media/signUpRectangle.b84f3dd0.png\";","export default __webpack_public_path__ + \"static/media/basicUser.3ee83bdc.svg\";","export default __webpack_public_path__ + \"static/media/brokerIcon.04ae7098.svg\";","export default __webpack_public_path__ + \"static/media/facebookFooter.a9e29ea3.svg\";","export default __webpack_public_path__ + \"static/media/linkedinFooter.8797cafa.svg\";","export default __webpack_public_path__ + \"static/media/twitterFooter.82927d1c.svg\";","export default __webpack_public_path__ + \"static/media/sms.fac6d189.svg\";","export default __webpack_public_path__ + \"static/media/promotions.a95c8084.svg\";","export default __webpack_public_path__ + \"static/media/statusUp.50c91d5d.svg\";","export default __webpack_public_path__ + \"static/media/timerPause.a218dcfe.svg\";","export default __webpack_public_path__ + \"static/media/timerStart.43f22ebc.svg\";","export default __webpack_public_path__ + \"static/media/dollarSquare.8422ee94.svg\";","export default __webpack_public_path__ + \"static/media/visa.a2f782ea.svg\";","export default __webpack_public_path__ + \"static/media/done.4e454c7c.svg\";","export default __webpack_public_path__ + \"static/media/showInvoice.353c8c89.svg\";","export default __webpack_public_path__ + \"static/media/download.1294753b.svg\";","export default __webpack_public_path__ + \"static/media/noPromoted.a7584ff1.svg\";","export default __webpack_public_path__ + \"static/media/cards.6f8a2191.svg\";","export default __webpack_public_path__ + \"static/media/add.138ea8d2.svg\";","export default __webpack_public_path__ + \"static/media/promotedFill.a1e037a6.svg\";","export default __webpack_public_path__ + \"static/media/master.03a50ef8.svg\";","export default __webpack_public_path__ + \"static/media/userIcon.9935b96a.svg\";","export default __webpack_public_path__ + \"static/media/buildings.a1cd91e6.svg\";","export default __webpack_public_path__ + \"static/media/callCalling.fcb25082.svg\";","export default __webpack_public_path__ + \"static/media/redSms.6151567d.svg\";","export default __webpack_public_path__ + \"static/media/brokerAvatar.bec3af01.svg\";","export default __webpack_public_path__ + \"static/media/callCallingBlack.2ca737aa.svg\";","export default __webpack_public_path__ + \"static/media/medalStar.e1165551.svg\";","export default __webpack_public_path__ + \"static/media/location.78aea5ac.svg\";","import user from '../assets/images/icons/user.svg';\nimport dropdownArrow from '../assets/images/icons/dropdownArrow.svg';\nimport galleryView from '../assets/images/icons/grid.svg';\nimport galleryViewWhite from '../assets/images/icons/gridWhite.svg';\nimport listView from '../assets/images/icons/list.svg';\nimport listViewWhite from '../assets/images/icons/listWhite.svg';\nimport checkedCheckmark from '../assets/images/icons/checkedCheckmark.svg';\nimport uncheckedCheckmark from '../assets/images/icons/uncheckedCheckmark.svg';\nimport clear from '../assets/images/icons/clear.svg';\nimport dropdownArrowBlack from '../assets/images/icons/dropdownArrowBlack.svg';\nimport clearSearch from '../assets/images/icons/clearSearch.svg';\nimport filterSmall from '../assets/images/icons/filterSmall.svg';\n\n// import upDownArrows from '../assets/images/icons/upDownArrows.svg';\n// import upDownArrowsBlue from '../assets/images/icons/upDownArrowsBlue.svg';\n// import downUpArrows from '../assets/images/icons/downUpArrows.svg';\n// import downUpArrowsBlue from '../assets/images/icons/downUpArrowsBlue.svg';\nimport upDownArrows from '../assets/images/icons/upDownArrows2.svg';\nimport upDownArrowsBlue from '../assets/images/icons/upDownArrowsBlue2.svg';\nimport downUpArrows from '../assets/images/icons/downUpArrows2.svg';\nimport downUpArrowsBlue from '../assets/images/icons/downUpArrowsBlue2.svg';\n\nimport close from '../assets/images/icons/close.svg';\nimport filter from '../assets/images/icons/filter.svg';\nimport facebook from '../assets/images/icons/facebook.svg';\nimport instagram from '../assets/images/icons/instagram.svg';\nimport twitter from '../assets/images/icons/twitter.svg';\nimport facebookHover from '../assets/images/icons/facebookHover.svg';\nimport instagramHover from '../assets/images/icons/instagramHover.svg';\nimport twitterHover from '../assets/images/icons/twitterHover.svg';\nimport address from '../assets/images/icons/address.svg';\nimport arrowLeft from '../assets/images/icons/arrowLeft.svg';\nimport arrowRight from '../assets/images/icons/arrowRight.svg';\nimport price from '../assets/images/icons/price.svg';\nimport size from '../assets/images/icons/size.svg';\nimport checkmark from '../assets/images/icons/checkmark.svg';\nimport userProfile from '../assets/images/icons/userProfile.svg';\nimport pin from '../assets/images/icons/pin.svg';\nimport arrowWhiteLeft from '../assets/images/icons/arrowWhiteLeft.svg';\nimport arrowWhiteRight from '../assets/images/icons/arrowWhiteRight.svg';\nimport closeWhite from '../assets/images/icons/closeWhite.svg';\nimport noListingsFound from '../assets/images/noListingsFound.svg';\nimport registerModalClose from '../assets/images/icons/registerModalClose.svg';\nimport registerModalIMage from '../assets/images/registerModalImage.svg';\nimport eyeOnIcon from '../assets/images/icons/eyeOnIcon.svg';\nimport eyeOffIcon from '../assets/images/icons/eyeOffIcon.svg';\nimport validCheckmark from '../assets/images/icons/validCheckmark.svg';\nimport invalidCheckmark from '../assets/images/icons/invalidCheckmark.svg';\nimport success from '../assets/images/icons/success.svg';\nimport error from '../assets/images/icons/error.svg';\nimport profile from '../assets/images/icons/profile.svg';\nimport listing from '../assets/images/icons/listing.svg';\nimport logOut from '../assets/images/icons/logOut.svg';\nimport arrowBlueUp from '../assets/images/icons/arrowBlueUp.svg';\nimport arrowBlueDown from '../assets/images/icons/arrowBlueDown.svg';\nimport emptyImage from '../assets/images/icons/emptyImage.svg';\nimport closeImage from '../assets/images/icons/closeImage.svg';\nimport password from '../assets/images/icons/password.svg';\nimport deletee from '../assets/images/icons/delete.svg';\nimport addPhoto from '../assets/images/icons/addPhoto.svg';\nimport edit from '../assets/images/icons/edit.svg';\nimport heroImage from '../assets/images/heroImage.svg';\nimport search from '../assets/images/icons/search.svg';\nimport searchCity from '../assets/images/icons/searchCity.svg';\nimport searchRed from '../assets/images/icons/searchRed.svg';\nimport diamond from '../assets/images/icons/diamond.svg';\nimport users from '../assets/images/icons/users.svg';\nimport listingList from '../assets/images/icons/listingList.svg';\nimport usersImage from '../assets/images/usersImage.svg';\nimport freeAccess from '../assets/images/icons/freeAccess.svg';\nimport management from '../assets/images/icons/management.svg';\nimport property from '../assets/images/icons/property.svg';\nimport account from '../assets/images/icons/account.svg';\nimport industrial from '../assets/images/industrial.png';\nimport retail from '../assets/images/retail.png';\nimport office from '../assets/images/office.png';\nimport more from '../assets/images/icons/more.svg';\nimport building from '../assets/images/icons/building.svg';\nimport pageNotFound from '../assets/images/pageNotFound.svg';\nimport smthWentWrong from '../assets/images/smthWentWrong.svg';\nimport map from '../assets/images/icons/map.svg';\nimport mapActive from '../assets/images/icons/mapActive.svg';\nimport zoomInIcon from '../assets/images/icons/zoomInIcon.svg';\nimport zoomOutIcon from '../assets/images/icons/zoomOutIcon.svg';\nimport homePageHero from '../assets/images/homePageHero.png';\nimport forLease from '../assets/images/icons/forLease.svg';\nimport arrowRightRed from '../assets/images/icons/arrowRightRed.svg';\nimport officeIcon from '../assets/images/officeIcon.png';\nimport rectangleIcon from '../assets/images/rectangleIcon.png';\nimport arrowBlackRight from '../assets/images/icons/arrowBlackRight.svg';\nimport signUpRectangle from '../assets/images/signUpRectangle.png';\nimport basicUser from '../assets/images/icons/basicUser.svg';\nimport brokerIcon from '../assets/images/icons/brokerIcon.svg';\n\nimport facebookFooter from '../assets/images/icons/facebookFooter.svg';\nimport linkedinFooter from '../assets/images/icons/linkedinFooter.svg';\nimport twitterFooter from '../assets/images/icons/twitterFooter.svg';\nimport sms from '../assets/images/icons/sms.svg';\nimport promotions from '../assets/images/icons/promotions.svg';\n\nimport statusUp from '../assets/images/icons/statusUp.svg';\nimport timerPause from '../assets/images/icons/timerPause.svg';\nimport timerStart from '../assets/images/icons/timerStart.svg';\nimport dollarSquare from '../assets/images/icons/dollarSquare.svg';\nimport visa from '../assets/images/icons/visa.svg';\nimport done from '../assets/images/icons/done.svg';\nimport showInvoice from '../assets/images/icons/showInvoice.svg';\nimport download from '../assets/images/icons/download.svg';\nimport noPromoted from '../assets/images/noPromoted.svg';\nimport cards from '../assets/images/icons/cards.svg';\nimport add from '../assets/images/icons/add.svg';\nimport promotedFill from '../assets/images/icons/promotedFill.svg';\nimport master from '../assets/images/icons/master.svg';\nimport userIcon from '../assets/images/icons/userIcon.svg';\nimport buildings from '../assets/images/icons/buildings.svg';\nimport callCalling from '../assets/images/icons/callCalling.svg';\nimport redSms from '../assets/images/icons/redSms.svg';\nimport brokerAvatar from '../assets/images/icons/brokerAvatar.svg';\nimport callCallingBlack from '../assets/images/icons/callCallingBlack.svg';\nimport medalStar from '../assets/images/icons/medalStar.svg';\nimport location from '../assets/images/icons/location.svg';\nimport searchBroker from '../assets/images/icons/searchBroker.svg';\n\nexport const Images = {\n searchBroker,\n master,\n promotedFill,\n add,\n cards,\n noPromoted,\n showInvoice,\n download,\n done,\n visa,\n dollarSquare,\n statusUp,\n timerPause,\n timerStart,\n promotions,\n location,\n medalStar,\n callCallingBlack,\n brokerAvatar,\n redSms,\n callCalling,\n buildings,\n userIcon,\n sms,\n facebookFooter,\n linkedinFooter,\n twitterFooter,\n brokerIcon,\n basicUser,\n signUpRectangle,\n arrowBlackRight,\n rectangleIcon,\n officeIcon,\n arrowRightRed,\n forLease,\n user,\n dropdownArrow,\n galleryView,\n galleryViewWhite,\n listView,\n listViewWhite,\n checkedCheckmark,\n uncheckedCheckmark,\n dropdownArrowBlack,\n clear,\n clearSearch,\n filterSmall,\n upDownArrows,\n upDownArrowsBlue,\n downUpArrows,\n downUpArrowsBlue,\n close,\n filter,\n facebook,\n instagram,\n twitter,\n facebookHover,\n instagramHover,\n twitterHover,\n address,\n arrowLeft,\n arrowRight,\n price,\n size,\n checkmark,\n userProfile,\n pin,\n arrowWhiteLeft,\n arrowWhiteRight,\n closeWhite,\n noListingsFound,\n registerModalClose,\n registerModalIMage,\n eyeOffIcon,\n eyeOnIcon,\n validCheckmark,\n invalidCheckmark,\n success,\n error,\n profile,\n listing,\n logOut,\n arrowBlueUp,\n arrowBlueDown,\n emptyImage,\n closeImage,\n password,\n deletee,\n addPhoto,\n edit,\n heroImage,\n search,\n searchCity,\n searchRed,\n diamond,\n users,\n listingList,\n freeAccess,\n usersImage,\n management,\n account,\n property,\n industrial,\n retail,\n office,\n more,\n building,\n pageNotFound,\n smthWentWrong,\n map,\n mapActive,\n zoomInIcon,\n zoomOutIcon,\n homePageHero\n};\n","export default __webpack_public_path__ + \"static/media/searchBroker.6dadeda4.svg\";","import { Images } from 'utils';\n\nexport const enumValues = {\n NEWEST_OPTIONS: [\n { id: '0', label: 'Newest', filterSort: 'createdAt' },\n { id: '1', label: 'Oldest', filterSort: '-createdAt' },\n {\n id: '2',\n label: 'Price',\n filterSort: 'price',\n icon: Images.downUpArrows,\n iconSelected: Images.downUpArrowsBlue,\n },\n {\n id: '3',\n label: 'Price',\n filterSort: '-price',\n icon: Images.upDownArrows,\n iconSelected: Images.upDownArrowsBlue,\n },\n {\n id: '4',\n label: 'Size',\n filterSort: 'size',\n icon: Images.downUpArrows,\n iconSelected: Images.downUpArrowsBlue,\n },\n {\n id: '5',\n label: 'Size',\n filterSort: '-size',\n icon: Images.upDownArrows,\n iconSelected: Images.upDownArrowsBlue,\n },\n ],\n PROPERTY_TYPES: [\n { label: 'Industrial Estate', value:'INDUSTRIAL',\n isChecked: false,\n image: Images.retail,\n description:'Discover commercial industrial spaces for lease by owner in Los Angeles. Our listings offer ' +\n 'quick, efficient solutions.'\n },\n { label: 'Office Space', value:'OFFICE', isChecked: false, image: Images.officeIcon,\n description:'Elevate your business with our modern commercial office spaces for lease, featuring' +\n ' modern workspaces for every kind of venture.'\n },\n { label: 'Retail Space', value:'RETAIL', isChecked: false, image: Images.rectangleIcon,\n description:\"Expand your retail potential with prime commercial properties for \\n\" +\n \"lease. Find high-visibility, strategic spaces in the US, offered by \\n\" +\n \"owners for optimal exposure.\"\n },\n { label: 'Other',value:'OTHER', isChecked: false },\n ],\n DEFAULT_PROPERTY_TYPES: [\n { label: 'Industrial Estate', value:'INDUSTRIAL',isChecked: false, image: Images.retail,\n description:'Discover commercial industrial spaces for lease by owner in Los Angeles. Our listings offer quick, efficient solutions.'\n },\n { label: 'Office Space', value:'OFFICE', isChecked: false, image: Images.officeIcon,\n description:'Elevate your business with our modern commercial office spaces for lease, featuring modern workspaces for every kind of venture.'\n },\n { label: 'Retail Space', value:'RETAIL', isChecked: false, image: Images.rectangleIcon,\n description:\"Expand your retail potential with prime commercial properties for \\n\" +\n \"lease. Find high-visibility, strategic spaces in the US, offered by \\n\" +\n \"owners for optimal exposure.\"\n },\n { label: 'Other',value:'OTHER', isChecked: false },\n ],\n};\n","export const initialCoordinates = {\n lat: '39.9795039904056',\n lng: '-101.6602300769889',\n zoom: 6,\n searchingZoom: 12,\n};\n","import React, { useState } from 'react';\n\nexport const ViewAsContext = React.createContext({\n view: '',\n handleViewChange: () => {},\n});\n\nexport const ViewAsContextProvider = ({ children }) => {\n const [view, setView] = useState('gallery');\n\n const handleViewChange = (viewName) => setView(viewName);\n\n const context = { view, handleViewChange };\n\n return Send Message
\n*Message
\n\n \n
\n \n
\n );\n};\n","import { makeStyles } from '@material-ui/core/styles';\nimport { Images, Colors } from 'utils';\n\nexport const navBarCoresStyle = makeStyles(\n () => ({\n navBarFilteringBoxStyle: {\n display: 'flex',\n alignItems: 'center',\n '& > div': { marginRight: '16px' },\n },\n sortByTitleStyle: {\n display: 'block',\n fontSize: '16px',\n fontWeight: 500,\n color: Colors.TextBlack,\n },\n navBarActionsBoxStyle: {\n display: 'flex',\n alignItems: 'center',\n marginRight: '24px',\n '& button': {\n marginLeft: '16px',\n outline: 'none',\n border: 'none',\n padding: '10px',\n borderRadius: '6px',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n transition: 'all 0.2s linear',\n backgroundColor: Colors.BackgroundWhiteOff,\n '&.active': {\n backgroundColor: '#FF385C',\n },\n '& img': {\n width: '100%',\n },\n '@media(max-width: 650px)': {\n padding: '8px',\n },\n },\n '@media(max-width: 650px)': {\n marginRight: '0px',\n },\n },\n filterMoreButnStyle: {\n display: 'none',\n position: 'relative',\n border: '1px solid #757280',\n borderRadius: '20px',\n padding: '8px 24px 8px 16px',\n backgroundColor: 'inherit',\n '@media(max-width: 1440px)': {\n display: 'block',\n },\n '@media(max-width: 1200px)': {\n display: 'none',\n },\n },\n filterButnStyle: {\n display: 'none',\n position: 'relative',\n width: '40px',\n height: '40px',\n border: '1px solid #757280',\n backgroundColor: 'inherit',\n borderRadius: '6px',\n backgroundImage: `url(${Images.filter})`,\n backgroundRepeat: 'no-repeat',\n backgroundSize: '24px 24px',\n backgroundPosition: 'center',\n '& > div': {\n top: '-8px',\n },\n '@media(max-width: 1200px)': {\n display: 'block',\n },\n '@media(max-width: 650px)': {\n width: '36px',\n height: '36px',\n },\n },\n sortByBoxStyle: {\n display: 'none',\n width: '100%',\n borderBottom: '1px solid #7572804D',\n paddingLeft: '24px',\n paddingRight: '24px',\n '&.sortByBox': { borderBottom: 'none', paddingTop: '32px' },\n '&.newestBox, &.checkBox': {\n '@media(max-width: 1200px)': {\n display: 'block',\n },\n },\n '&.fromToBox': {\n '@media(max-width: 1440px)': {\n display: 'block',\n },\n },\n },\n newestBoxStyle: {\n width: '100%',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n padding: '24px 0',\n },\n filterOverlayStyle: {\n backgroundColor: 'rgba(100, 100, 100, 0.8)',\n },\n forLeaseButton: {\n marginLeft:'25px',\n marginTop:'25px',\n padding: '0 24px 0 16px',\n width: '129px',\n height: '48px',\n borderRadius: '6px',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n backgroundColor: Colors.ThemePink,\n border: 'none',\n transition: 'background-color 0.2s linear',\n // '&:hover': {backgroundColor: '#d52f4c'},\n // '@media(max-width: 1024px)': {width: '56px'},\n '& span': {\n fontSize: '16px',\n fontWeight: 500,\n color: Colors.TextWhite,\n },\n '@media(max-width: 1279px)': {\n marginBottom: '12px',\n\n },\n },\n\n }),\n { index: 1 }\n);\n","import {useState, useContext, useEffect} from \"react\";\nimport {useHistory} from \"react-router-dom\";\nimport {useDispatch} from \"react-redux\";\nimport {FilteringCheckboxInModal, FilteringFromToInModal, FiltersModalWrapper} from \"components\";\nimport {\n enumValues,\n FindLoad,\n FindSuccess,\n getValTillTenDig,\n Images,\n initialCoordinates,\n isNotEmpty,\n ListingFiltersContext\n} from \"utils\";\nimport {navBarCoresStyle} from \"../../menuBar/nav/core/style\";\nimport {httpRequestsOnSuccessActions} from \"store\";\n\nexport const AdvancedSearch = ({ handleModalClose, handleClearAll }) => {\n const listingFiltersCtx = useContext(ListingFiltersContext);\n const {filters, selectedPropType, handleFiltersRequest, reselAllFilters, propTypes, setPropTypes,\n filteredMinPrice, setFilteredMinPrice,\n filteredMaxPrice, setFilteredMaxPrice,\n filteredMinSize, setFilteredMinSize,\n filteredMaxSize, setFilteredMaxSize,\n handleLatLngRequest, handleZoomRequest,\n } = listingFiltersCtx;\n const [filteredNewest, setFilteredNewest] = useState('');\n const [advancedFilters, setAdvancedFilters] = useState(filters ? { ...filters} : {});\n const [filtersInModal, setFiltersInModal] = useState({});\n const classes = navBarCoresStyle();\n const dispatch = useDispatch();\n const history = useHistory()\n const modalClass = navBarCoresStyle();\n const filteredPropTypes = propTypes.filter((propType) => propType?.isChecked).map((propType) => propType.label.toUpperCase());\n\n const passSelectedPropTypes = (selectedOption) => {\n setPropTypes(\n propTypes.map((propType) => {\n if (propType.label === selectedOption.label) {\n return selectedOption;\n }\n return propType;\n })\n );\n };\n\n useEffect(() => {\n if (selectedPropType) {\n const selPropType = {label: selectedPropType, isChecked: true};\n handleSelectedPropType(selPropType, setAdvancedFilters);\n }\n }, [selectedPropType]);\n\n const handleSelectedPropType = (selectedOption, resetFilters) => {\n passSelectedPropTypes(selectedOption);\n resetFilters((prevState) => ({...prevState}));\n };\n\n const handleSelectedMinPrice = (minPrice, resetFilters) => {\n setFilteredMinPrice(getValTillTenDig(minPrice));\n resetFilters((prevState) => ({\n ...prevState,\n priceStart: getValTillTenDig(minPrice),\n }));\n };\n\n const handleSelectedMaxPrice = (maxPrice, resetFilters) => {\n setFilteredMaxPrice(getValTillTenDig(maxPrice));\n resetFilters((prevState) => ({\n ...prevState,\n priceEnd: getValTillTenDig(maxPrice),\n }));\n };\n\n const handleSelectedMinSize = (minSize, resetFilters) => {\n setFilteredMinSize(getValTillTenDig(minSize));\n resetFilters((prevState) => ({\n ...prevState,\n sizeStart: getValTillTenDig(minSize),\n }));\n };\n\n const handleSelectedMaxSize = (maxSize, resetFilters) => {\n setFilteredMaxSize(getValTillTenDig(maxSize));\n resetFilters((prevState) => ({\n ...prevState,\n sizeEnd: getValTillTenDig(maxSize),\n }));\n };\n\n const clearAllSelectedFilters = (resetFilters) => {\n setFilteredNewest('');\n setFilteredMinPrice('');\n setFilteredMaxPrice('');\n setFilteredMinSize('');\n setFilteredMaxSize('');\n setPropTypes(enumValues.DEFAULT_PROPERTY_TYPES);\n setAdvancedFilters({})\n setFiltersInModal({})\n reselAllFilters()\n handleClearAll && handleClearAll()\n\n\n handleLatLngRequest(initialCoordinates.lat, initialCoordinates.lng);\n handleZoomRequest(initialCoordinates.zoom);\n };\n\n const handleSelectedFilters = (selFilters) => {\n delete selFilters[isNotEmpty(filteredNewest.label) ? '' : 'filterSort'];\n delete selFilters[filteredPropTypes.length !== 0 ? '' : 'propertyType'];\n delete selFilters[isNotEmpty(filteredMinPrice) ? '' : 'priceStart'];\n delete selFilters[isNotEmpty(filteredMaxPrice) ? '' : 'priceEnd'];\n delete selFilters[isNotEmpty(filteredMinSize) ? '' : 'sizeStart'];\n delete selFilters[isNotEmpty(filteredMaxSize) ? '' : 'sizeEnd'];\n handleFiltersRequest(selFilters);\n };\n\n const listingFilterLoader = FindLoad('GET_LISTINGS_BY_FILTERS');\n const userListingFilterLoader = FindLoad('GET_LISTINGS_BY_USER_ID_FILTER');\n const isLoading = !!listingFilterLoader.length || !!userListingFilterLoader.length;\n\n const listingFilterSuccess = FindSuccess('GET_LISTINGS_BY_FILTERS');\n const userListingFilterSuccess = FindSuccess('GET_LISTINGS_BY_USER_ID_FILTER');\n\n useEffect(() => {\n if (listingFilterSuccess.length) {\n dispatch(httpRequestsOnSuccessActions.removeSuccess('GET_LISTINGS_BY_FILTERS'));\n }\n if (userListingFilterSuccess.length) {\n dispatch(httpRequestsOnSuccessActions.removeSuccess('GET_LISTINGS_BY_USER_ID_FILTER'));\n }\n }, [listingFilterSuccess, userListingFilterSuccess]);\n\n const handleSubmitFilters = () => {\n const chosenFiltersInModal = {\n ...advancedFilters,\n ...filtersInModal,\n propertyType: filteredPropTypes,\n };\n handleSelectedFilters(chosenFiltersInModal);\n const link = history?.location?.pathname === \"/my_listings\" ? \"/my_listings\" : '/listings'\n history.push(link);\n };\n\n return (\n \n
\n \n 
\n
\n {title}
\n{text}
\n\n clearAllSelectedFilters(setFiltersInModal)}\n onDesktop={true}\n >\n \n 
\n For lease \n \n\n
\n )\n}","import React, {useState} from 'react';\nimport {Accordion, AccordionDetails, AccordionSummary} from \"@mui/material\";\nimport {Svg} from \"assets/images\";\nimport {homeFragmentStyles} from \"../styles\";\n\nexport const Faqs = () => {\n const [expanded, setExpanded] = useState(null);\n\n const classes = homeFragmentStyles();\n\n const items = [\n {\n title: 'What types of properties can I list on Croill?',\n description: 'You can list various types of commercial properties including retail spaces, office spaces,' +\n ' and industrial estates. Our platform is designed to cater to a wide range of commercial real estate ' +\n 'needs.'\n },\n {\n title: 'How long does it take to create an account on Croill.com?',\n description: 'Creating an account on Croill.com is quick and easy, taking just two minutes. This account' +\n ' will link directly to your property listings, providing a seamless management experience.',\n },\n {\n title: 'Are there any fees associated with listing or promoting my property on Croill.com?',\n description: 'Listing your property on Croill.com is completely free. However, additional promotional' +\n ' features to improve the visibility of your listings are not free, see the Promotions section.',\n },\n {\n title: 'What types of commercial spaces are available for lease on Croill.com?',\n description: 'We offer a variety of commercial spaces including industrial, office, and retail options,' +\n ' each customized to meet specific business needs and designed to enhance the growth and efficiency ' +\n 'of diverse business models.',\n },\n {\n title: 'What kind of support does Croill.com offer?',\n description: 'We offers extensive support to ensure you can manage your listings and accounts ' +\n 'effectively. For immediate assistance, you can reach our customer service team via email at' +\n ' info@croill.com. ',\n },\n {\n title: 'Can I list multiple properties under one account on Croill.com?',\n description: 'Yes, you can list multiple properties under a single account.',\n },\n {\n title: 'How do I update or edit a listing on Croill.com?',\n description: 'To update or edit a listing, log in to your account, navigate to \"My Listings,\" select the ' +\n 'listing you want to update, and click \"Edit.\" Make the necessary changes and save them to ' +\n 'update your listing immediately.',\n },\n ]\n\n const handleChange = (id) => {\n const checkId = expanded === id ? null : id;\n\n if (id) {\n setExpanded(checkId);\n }\n }\n return (\n \n handleSelectedPropType(propType, setFiltersInModal)}\n />\n
\n Property Type
\n\n\n handleSelectedMinPrice(minPrice, setFiltersInModal)}\n passSelectedMax={(maxPrice) => handleSelectedMaxPrice(maxPrice, setFiltersInModal)}\n selectedMin={filteredMinPrice}\n selectedMax={filteredMaxPrice}\n minInputPlaceholder={'Min $/SF/YR'}\n maxInputPlaceholder={'Max $/SF/YR'}\n />\n
\n Price
\n\n handleSelectedMinSize(minSize, setFiltersInModal)}\n passSelectedMax={(maxSize) => handleSelectedMaxSize(maxSize, setFiltersInModal)}\n selectedMin={filteredMinSize}\n selectedMax={filteredMaxSize}\n minInputPlaceholder={'Min SF'}\n maxInputPlaceholder={'Max SF'}\n />\n
\n \n Size
\n\n
\n );\n};\n\n","import React, {useContext, useEffect, useState} from 'react';\nimport {useDispatch, useSelector} from 'react-redux';\nimport Carousel from 'nuka-carousel';\nimport {useHistory} from 'react-router';\nimport {homeFragmentStyles} from './styles';\nimport {enumValues, getValDependsOnLength, Images, ListingFiltersContext, useWidth} from 'utils';\nimport {FilteringCheckBoxDropdown, FilteringWithSearchBoxDropdown, SimpleModal,} from 'components';\nimport {AdvancedSearch, YourFreeListing} from './core';\nimport {listingActions} from 'store';\nimport {ListingsCardItem} from 'fragments';\nimport {navBarCoresStyle} from \"../menuBar/nav/core/style\";\nimport {Faqs} from \"./core/faqs\";\n\nexport const HomeFragment = () => {\n const classes = homeFragmentStyles();\n const dispatch = useDispatch();\n const width = useWidth();\n const listings = useSelector((state) => state.listings.listingList);\n const [selectedAddress, setSelectedAddress] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n const [openSearch, setOpenSearch] = useState(false)\n\n useEffect(() => {\n dispatch(listingActions.getListings());\n }, []);\n\n const handleModalClose = () => {\n setIsOpen(!isOpen)\n }\n\n const categoriesSize =\n width < 450\n ? 1.2\n : width >= 450 && width < 500\n ? 1.3\n : width >= 500 && width < 580\n ? 1.5\n : width >= 580 && width < 660\n ? 1.8\n : width >= 660 && width < 690\n ? 2.1\n : width >= 690 && width < 761\n ? 2.2\n : width >= 761 && width < 820\n ? 1.4\n : width >= 820 && width < 900\n ? 1.6\n : width >= 900 && width < 1000\n ? 1.8\n : width >= 1000 && width < 1050\n ? 2\n : width >= 1050 && width < 1089\n ? 2.1\n : width >= 1089 && width < 1149\n ? 2.2\n : width >= 1149 && width < 1279\n ? 2.3\n : width >= 1279 && width < 1330\n ? 2.5\n : width >= 1330 && width < 1430\n ? 2.7\n : width >= 1430\n ? 3\n : 1;\n\n const listingsSize =\n width >= 320 && width < 450\n ? 1.1\n : width >= 450 && width < 480\n ? 1.2\n : width >= 480 && width < 580\n ? 1.4\n : width >= 580 && width < 710\n ? 1.7\n : width >= 710 && width < 740\n ? 2.1\n : width >= 740 && width < 800\n ? 2.2\n : width >= 800 && width < 989\n ? 2.4\n : width >= 989 && width < 1049\n ? 2.6\n : width >= 1049 && width < 1209\n ? 3.2\n : width >= 1209 && width < 1330\n ? 3.4\n : width >= 1330 && width < 1430\n ? 3.5\n : width >= 1430\n ? 4\n : 1;\n\n const history = useHistory();\n const isHomePage = window.location.pathname === '/';\n const modalClass = navBarCoresStyle();\n\n const listingFiltersCtx = useContext(ListingFiltersContext);\n const {\n handleAddressRequest,\n handlePropTypeSelected,\n selectedPropType,\n reselAllFilters,\n setPropTypes\n } = listingFiltersCtx;\n\n const viewAll = () => {\n reselAllFilters()\n window.location.replace(\"/listings\")\n }\n\n return (\n \n FAQs\n
\n\n\n {items?.map(({title, description}, i) => (\n handleChange(i+1)}\n expanded={expanded === i+1}\n >\n }\n aria-controls=\"panel-content\"\n id=\"panel-header\"\n >\n \n \n \n ))}\n
\n \n {title}\n
\n \n\n\n {description}\n
\n\n
\n {/*\n
\n\n\n \n \n {/*
\n 
\n\n {/*
\n\n\n \n {/*
*/}\n The Next Gen Commercial Real Estate
Leasing Platform\n
\n */}\n {/* Croill is designed ground up to take the frustration of leasing industrial, commercial or retail real estate away*/}\n {/* from the leasees and leasors.*/}\n {/*
*/}\n\n\n\n
\n\n \n \n \n For lease \n
\n\n {/**/}\n\n
\n\n \n\n \n {/*
*/}\n \n setSelectedAddress(address)}\n />\n {\n history.push('/listings');\n handleAddressRequest(selectedAddress);\n }}>\n 
\n Search \n \n
\n \n \n
\n\n */}\n {/*
*/}\n */}\n {/*
*/}\n {/**/}\n {/* 
*/}\n {/*
*/}\n {/* - */}\n {/*
- */}\n {/* */}\n {/**/}\n {/* Unlimited Listings */}\n {/*
*/}\n {/*
*/}\n {/* - */}\n {/* */}\n {/**/}\n {/* 100's of Users/Day */}\n {/*
*/}\n {/*
*/}\n {/* - */}\n {/* */}\n {/**/}\n {/* Free Access */}\n {/*
*/}\n {/*
*/}\n {/*
*/}\n {/*
*/}\n {/* Have a property you want to lease out?
*/}\n {/**/}\n {/* You can use Croill to add your listings for your potential leasees to see at not cost. Add as many listings as*/}\n {/* you need with ease using our advanced platform. Keep in mind to fill out as much information about your listing*/}\n {/* as possible to attrack more users.*/}\n {/*
*/}\n {/*\n
\n \n
\n \n 3 steps to create FREE commercial property listings\n
\n\n \n \n \n
\n \n
\n \n \n\n {listings && listings.length !== 0 && (\n \n false}\n renderCenterLeftControls={() => false}\n renderCenterRightControls={() => false}>\n {enumValues.PROPERTY_TYPES.slice(0, 3).map((propType, index) => {\n return (\n \n
\n );\n })}\n \n )}\n Choose Categories
\n\n Discover your perfect business space, near you in popular spots. Explore the ideal space\n for your business journey!\n
\n\n {width >= 1440 ? (\n enumValues.PROPERTY_TYPES.slice(0, 3).map((propType, index) => {\n return (\n \n
\n );\n })\n ) : (\n \n 
\n
\n \n {\n setPropTypes(enumValues.DEFAULT_PROPERTY_TYPES)\n reselAllFilters()\n handlePropTypeSelected(propType.label);\n history.push('/listings');\n }}\n className={classes.viewMoreButton}\n >\n 
\n \n
\n {propType.label}
\n{propType?.description}
\nView More
\n\n \n
\n \n {\n setPropTypes(enumValues.DEFAULT_PROPERTY_TYPES)\n reselAllFilters()\n handlePropTypeSelected(propType.label);\n history.push('/listings');\n }}\n className={classes.viewMoreButton}\n >\n \n \n
\n {propType.label}
\n{propType?.description}
\nView More
\n\n
\n )}\n\n \n
\n \n
\n Latest Listings
\n\n \n\n {width >= 1440 ? (\n listings.slice(0, 4).map((listing, index) => {\n const {address, price, size, mainImage} = listing;\n const {street} = address;\n const listingPrice = getValDependsOnLength(price);\n const listingMinSize = getValDependsOnLength(size.start ? size.start : '');\n const listingMaxSize = getValDependsOnLength(size.end ? size.end : '');\n\n return (\n \n );\n })\n ) : (\n false}\n renderCenterLeftControls={() => false}\n renderCenterRightControls={() => false}>\n {listings.map((listing, index) => {\n const {address, price, size, mainImage} = listing;\n const {street} = address;\n const listingPrice = getValDependsOnLength(price);\n const listingMinSize = getValDependsOnLength(size.start ? size.start : '');\n const listingMaxSize = getValDependsOnLength(size.end ? size.end : '');\n\n return (\n \n );\n })}\n \n )}\n
\n \n \n \n
\n );\n};\n","import { Images, Colors } from 'utils';\nimport { makeStyles } from '@material-ui/core/styles';\n\nexport const headerCoresStyle = makeStyles(\n () => ({\n userProfileMenuDropdownOverlayStyle: {\n width: '100%',\n height: '100%',\n position: 'fixed',\n zIndex: 99,\n top: 0,\n left: 0,\n display: 'block',\n '&.hide': { display: 'none' },\n '@media(max-width: 768px)': {\n display: 'none',\n },\n },\n userProfileStyle: {\n width: '30px',\n height: '30px',\n marginRight: '16px',\n '& img': { width: '100%' },\n\n '@media(max-width: 400px)': {\n marginRight: '8px',\n width: '24px',\n height: '24px',\n },\n },\n authButnStyle: {\n outline: 'none',\n border: 'none',\n backgroundColor: 'inherit',\n textTransform: 'capitalize',\n position: 'relative',\n fontSize: '16px',\n fontWeight: '500',\n color: Colors.TextGray,\n marginRight: '19px',\n cursor: 'pointer',\n\n '&.authButnDontUser':{\n marginRight: 0,\n marginLeft: 0,\n '@media(min-width: 1279px)': {\n marginLeft: '31px',\n },\n },\n '@media(max-width: 768px)': {\n color: Colors.TextBlack,\n margin: '0',\n },\n },\n userSignInStyle: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n signInTextStyle: { color: Colors.TextGray },\n myDropdownContainer: {\n width: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n '& > span': {\n marginRight: '16px',\n '&.active': {\n },\n },\n },\n menuDropdownStyle: {\n position: 'absolute',\n top: '62px',\n left: '2px',\n zIndex: 9999999,\n backgroundColor: Colors.BackgroundWhite,\n boxShadow: '0px 0px 6px #00000029',\n borderRadius: '12px',\n padding: '12px 0',\n minWidth:'180px',\n width: '100%',\n cursor: 'default',\n display: 'none',\n '&.show': { display: 'block' },\n '@media(max-width: 1279px)': {\n top: '50px',\n left: '-32px',\n backgroundColor: Colors.BackgroundWhiteOff,\n width: '326px',\n boxShadow: 'none',\n borderRadius: 0,\n },\n '@media(max-width: 400px)': {\n width: '248px',\n },\n },\n userMenuListStyle: {\n width: '100%',\n backgroundColor: 'inherit',\n '& li': {\n backgroundColor: 'inherit',\n transition: 'background-color 0.2s linear',\n fontSize: '14px',\n fontWeight: 500,\n color: Colors.TextGray,\n\n '@media(max-width: 1279px)': {\n color: Colors.TextBlack,\n fontSize: '16px',\n textAlign:'center'\n },\n '@media(max-width: 400px)': {\n fontSize: '14px',\n marginLeft: '60px',\n },\n '&:hover': { backgroundColor: Colors.BackgroundWhiteOff },\n '& a': {\n cursor: 'pointer',\n color: 'inherit',\n textDecoration: 'none',\n display: 'flex',\n alignItems: 'center',\n padding: '11px 16px 11px 78px',\n '@media(min-width: 1279px)': {\n padding: '11px 16px 11px 16px',\n },\n\n '&::before': {\n content: \"''\",\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'contain',\n backgroundPosition: 'center',\n width: '18px',\n height: '18px',\n marginRight: '8px',\n '@media(max-width: 1279px)': { display: 'none' },\n },\n '&.myProfile::before': { backgroundImage: `url(${Images.profile})` },\n '&.myListings::before': { backgroundImage: `url(${Images.listing})` },\n '&.promotions::before': { backgroundImage: `url(${Images.promotions})` },\n '&.billings::before': { backgroundImage: `url(${Images.cards})` },\n '&.logOut::before': { backgroundImage: `url(${Images.logOut})` },\n },\n },\n },\n dropdownArrowStyle: {\n width: '18px',\n height: '18px',\n '& img': { width: '100%' },\n },\n }),\n { index: 1 }\n);\n","import React from 'react';\nimport {Link} from 'react-router-dom';\nimport { getLimitedVal, Images } from 'utils';\nimport { headerCoresStyle } from './styles';\nimport { useDispatch } from 'react-redux';\nimport { authActions } from 'store';\n\nexport const UserProfileMenu = ({\n onClickUserProfileMenu,\n userInfo,\n userProfileMenuIsShown,\n onHideUserProfileMenu,\n onHideMenu,\n menuIsShown,\n}) => {\n const classes = headerCoresStyle();\n const userProfileName = `${userInfo?.firstName} ${userInfo?.lastName}`;\n const userProfileNameDisplay = menuIsShown ? getLimitedVal(userProfileName, 16) : getLimitedVal(userProfileName, 14);\n const dispatch = useDispatch();\n\n return (\n <>\n \n {userInfo ? (\n <>\n
\n \n );\n};\n","import {makeStyles} from \"@material-ui/core/styles\";\nimport {Colors} from \"utils\";\n\nexport const headerStyle = makeStyles(\n () => ({\n headerStyle: {\n width: \"100%\",\n backgroundColor: \"#FAFAFA\",\n boxShadow: \"0px 2px 8px #0000001A\",\n display: \"flex\",\n justifyContent: \"center\",\n position: \"relative\",\n zIndex: 999,\n },\n headerContainerStyle: {\n maxWidth: \"1440px\",\n width: \"100%\",\n padding: \"24px 80px\",\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n \"@media(max-width: 1279px)\": {\n padding: \"24px 32px\",\n },\n \"@media(max-width: 768px)\": {\n padding: \"18px 16px\",\n },\n },\n headerLogoStyle: {\n \"@media(max-width: 400px)\": {\n \"&::after\": {\n width: \"8px\",\n height: \"8px\",\n },\n \"& > h1\": {\n fontSize: \"18px\",\n },\n },\n },\n menuOverlayStyle: {\n width: \"100%\",\n height: \"100%\",\n top: 0,\n left: 0,\n position: \"fixed\",\n },\n userProfileActionsBoxStyle: {\n display: \"flex\",\n alignItems: \"center\",\n\n \"@media(max-width: 1279px)\": {\n display: \"none\",\n height: \"100vh\",\n flexDirection: \"column\",\n position: \"absolute\",\n right: \"0\",\n transition: \"width 0.4s ease-in-out\",\n top: \"94px\",\n boxShadow: \"-4px 0px 8px #0000001A\",\n backgroundColor: \"#FAFAFA\",\n alignItems: \"flex-start\",\n padding: \"32px\",\n\n \"@media(max-width: 767px)\": {\n top: \"82px\",\n },\n\n \"&.show\": {\n width: \"fit-content\",\n display: \"flex\",\n marginTop: '-4px'\n },\n },\n\n },\n menuList: {\n display: 'flex',\n gap: '24px',\n paddingRight: '24px',\n marginRight: '24px',\n borderRight: `1px solid ${Colors.TextGray}`,\n\n \"@media(max-width: 1279px)\": {\n width: '100%',\n flexDirection: 'column',\n borderRight: 'none',\n borderBottom: `1px solid ${Colors.TextGray}`,\n paddingBottom: '24px',\n }\n },\n menuItem: {\n color: `${Colors.TextGray}`,\n fontSize: '16px',\n fontWeight: 500,\n lineHeight: '24px',\n cursor: 'pointer',\n '&:hover': {\n color: `${Colors.ThemePink}`,\n },\n '&.active-page': {\n color: `${Colors.ThemePink}`,\n }\n },\n buttonsInfoBlock: {\n display: 'flex',\n \"@media(min-width: 1279px)\": {\n alignItems: 'center',\n },\n '&.row-revers': {\n flexDirection: 'row-reverse',\n \"@media(max-width: 1279px)\": {\n flexDirection: 'column',\n gap: '24px',\n },\n },\n \"@media(max-width: 1279px)\": {\n flexDirection: 'column',\n gap: '24px',\n },\n\n },\n\n userName: {\n fontSize: \"16px\",\n fontWeight: \"500\",\n color: Colors.TextGray,\n marginRight: \"30px\",\n },\n createListingButnStyle: {\n width: \"161px\",\n color: `${Colors.ThemePink}`,\n backgroundColor: \"inherit\",\n marginRight: '16px',\n transition: \"all 0.2s linear\",\n \"&:hover\": {\n color: Colors.TextWhite,\n backgroundColor: Colors.ThemePink,\n },\n\n \"@media(max-width: 1279px)\": {\n width: \"100%\",\n maxWidth: '100%',\n margin: \"21px 0 16px\",\n },\n },\n\n findListingButnStyle: {\n width: \"161px\",\n color: `${Colors.ThemePink}`,\n backgroundColor: \"inherit\",\n transition: \"all 0.2s linear\",\n\n \"&:hover\": {\n color: Colors.TextWhite,\n backgroundColor: Colors.ThemePink,\n },\n \"@media(max-width: 1279px)\": {\n width: \"100%\",\n maxWidth: \"100%\",\n margin: \"0\",\n },\n },\n\n menuIconStyle: {\n display: \"none\",\n position: \"relative\",\n width: \"42px\",\n height: \"42px\",\n cursor: \"pointer\",\n \"& div\": {\n margin: \"auto\",\n position: \"absolute\",\n top: 0,\n right: 0,\n left: 0,\n bottom: 0,\n width: \"32px\",\n height: \"16px\",\n \"@media(max-width: 400px)\": {\n width: \"22px\",\n height: \"12px\",\n },\n },\n \"& span\": {\n borderRadius: \"4px\",\n position: \"absolute\",\n display: \"block\",\n width: \"100%\",\n height: \"3px\",\n backgroundColor: \"#FF385C\",\n transition: \"all 0.3s ease-in-out\",\n \"&:first-of-type\": {top: 0},\n \"&:last-of-type\": {bottom: 0},\n },\n\n \"@media(max-width: 1279px)\": {\n display: \"block\",\n },\n\n \"&.active span:first-of-type\": {\n transform: \"rotate(45deg)\",\n top: \"8px\",\n \"@media(max-width: 400px)\": {top: \"4px\"},\n },\n \"&.active span:last-of-type\": {\n transform: \"rotate(-45deg)\",\n bottom: \"5px\",\n },\n },\n checkboxStyle: {\n display: \"block\",\n width: \"100%\",\n height: \"100%\",\n cursor: \"pointer\",\n zIndex: 2,\n \"-webkit-touch-callout\": \"none\",\n position: \"absolute\",\n opacity: 0,\n },\n }),\n {index: 1}\n);\n","import React, {useState, useContext, useEffect} from 'react';\nimport {useHistory} from 'react-router-dom';\nimport {useDispatch, useSelector} from 'react-redux';\nimport {userActions} from 'store';\nimport {Logo, RegisterModalWrapper, SimpleModal, ViewMoreButton} from 'components';\nimport {UserRegistration} from 'fragments';\nimport {UserProfileMenu} from './core';\nimport {RegisterContext} from 'utils';\nimport {routerInfo} from \"root\";\nimport {headerStyle} from './style';\n\n\nexport const Header = () => {\n const classes = headerStyle();\n const history = useHistory();\n const dispatch = useDispatch();\n const [isOpen, setIsOpen] = useState(false);\n const [isShown, setIsShown] = useState(false);\n const [menuIsShown, setMenuIsShown] = useState(false);\n const [currentPage, setCurrentPage] = useState('')\n const isResetPasswordPage = window.location.pathname === '/resetPassword';\n const userInfo = JSON.parse(localStorage.getItem('userInfo'));\n\n useEffect(() => {\n if (userInfo) {\n dispatch(userActions.getUserById(userInfo.id));\n }\n }, []);\n\n const user = useSelector((state) => state.users.userById);\n\n const registerCtx = useContext(RegisterContext);\n const {handleModalContent} = registerCtx;\n\n const handleModalClose = () => {\n setIsOpen(false);\n handleModalContent('signIn');\n };\n const handleUserProfileMenu = () => {\n if (userInfo) {\n setIsShown((prevState) => !prevState);\n } else {\n setIsOpen(true);\n }\n };\n\n return (\n <>\n \n
\n \n 
\n
\n \n {userProfileNameDisplay}\n \n \n 
\n
\n \n
\n \n ) : (\n - \n
- \n \n My Profile\n \n \n
- \n \n My Listings\n \n \n
- \n \n Promotions\n \n \n
- \n \n Billing\n \n \n
- \n
\n
\n )}\n \n \n
\n sign in \n \n \n \n
\n \n {menuIsShown && setMenuIsShown(false)}/>}\n
\n
\n \n {routerInfo().map(({text, href}, i) => (\n {\n history.push(href)\n setMenuIsShown(false)\n setCurrentPage(href)\n }}\n className={`${classes.menuItem} ${currentPage === href ? 'active-page' : ''}`}\n >\n {text}\n \n ))}\n
\n\n \n setIsShown(false)}\n onHideMenu={() => setMenuIsShown(false)}\n menuIsShown={menuIsShown}\n />\n
\n\n\n \n {\n if (userInfo) {\n window.location.replace('/create_listing');\n setMenuIsShown(false);\n } else {\n setIsOpen(true);\n setMenuIsShown(false);\n }\n }}\n />\n\n {\n const pageEvent = {\n event: \"FIND_BROKER\",\n type: 'FIND_BROKER'\n };\n window?.dataLayer.push(pageEvent);\n history.push('/brokers');\n }}\n\n // onView={() => {\n // history.push('/brokers');\n // // if (userInfo) {\n // // history.push('/brokers');\n // // setMenuIsShown(false);\n // // } else {\n // // setIsOpen(true);\n // // setMenuIsShown(false);\n // // }\n // }}\n />\n
\n\n\n \n handleSelectedFilterSort(filterSort, setFilters)}\n selected={filteredNewest}\n defaultSelected={enumValues.NEWEST_OPTIONS[0]}\n onClearSelected={() => clearSelectedFilterSort(setFilters)}\n />\n handleSelectedPropType(propType, setFilters)}\n />\n <>\n handleSelectedMinPrice(minPrice, setFilters)}\n passSelectedMax={(maxPrice) => handleSelectedMaxPrice(maxPrice, setFilters)}\n selectedMin={filteredMinPrice}\n selectedMax={filteredMaxPrice}\n dropdownTitle={'Price'}\n onClearSelected={() => clearSelectedPrice(setFilters)}\n measureUnit={'$'}\n minInputPlaceholder={'Min $/SF/YR'}\n maxInputPlaceholder={'Max $/SF/YR'}\n />\n handleSelectedMinSize(minSize, setFilters)}\n passSelectedMax={(maxSize) => handleSelectedMaxSize(maxSize, setFilters)}\n selectedMin={filteredMinSize}\n selectedMax={filteredMaxSize}\n dropdownTitle={'Size'}\n onClearSelected={() => clearSelectedSize(setFilters)}\n measureUnit={'SF'}\n minInputPlaceholder={'Min SF'}\n maxInputPlaceholder={'Max SF'}\n />\n \n {\n setOpen(true);\n }}\n filterButnLabel={'More Filters'}\n filteredItemsQuantity={usedFromToFilters.length}\n />\n {\n setOpen(true);\n }}\n filteredItemsQuantity={usedFilters.length}\n />\n \n }\n openDefault={open}\n handleOpenClose={handleModalClose}\n />\n
\n );\n};\n","import React, { useContext } from 'react';\nimport { ViewAsButton } from 'components';\nimport { Images, ViewAsContext } from 'utils';\nimport { navBarCoresStyle } from './style';\n\nexport const NavBarActionsBox = () => {\n const classes = navBarCoresStyle();\n\n const { view, handleViewChange } = useContext(ViewAsContext);\n\n const galleryViewImgSrc = view === 'gallery' ? Images.galleryViewWhite : Images.galleryView;\n const galleryViewLabel = \n handleViewChange('gallery')}\n butnViewAsLabel={galleryViewLabel}\n />\n handleViewChange('list')}\n butnViewAsLabel={listViewLabel}\n />\n handleViewChange('map')}\n butnViewAsLabel={mapViewLabel}\n />\n
\n );\n};\n","import React, { useContext } from 'react';\nimport { FilteringWithSearchBoxDropdown } from 'components';\nimport { ListingFiltersContext } from 'utils';\n\nexport const NavBarSearchBox = () => {\n const listingFiltersCtx = useContext(ListingFiltersContext);\n const { address, handleAddressRequest } = listingFiltersCtx;\n\n return (\n \n
\n )\n}","import React, {useState, useEffect, useContext} from 'react';\nimport {useDispatch} from 'react-redux';\nimport {UserInput, SendButton, MaskInput} from 'components';\nimport {httpRequestsOnErrorsActions, httpRequestsOnSuccessActions, userActions} from 'store';\nimport {\n FindLoad,\n FindError,\n isNotEmpty,\n getPassErrorText,\n EmailValidator,\n getPhoneErrorText,\n FindSuccess,\n RegisterContext,\n Images,\n} from 'utils';\nimport {userRegistrationCoreStyles} from './styles';\nimport {Link} from 'react-router-dom';\nimport {Radio} from \"@mui/material\";\nimport {BrokerSignUp} from \"./brokerSignUp\";\n\nexport const CreateUserInputs = ({closeModal}) => {\n const classes = userRegistrationCoreStyles();\n const dispatch = useDispatch();\n const [inputs, setInputs] = useState({});\n const [error, setError] = useState('');\n const [accountType, setAccountType] = useState('');\n const [isLastStep, setIsLastStep] = useState(false);\n const userLoader = FindLoad('CREATE_USER');\n const userBackError = FindError('CREATE_USER');\n const userSuccess = FindSuccess('CREATE_USER');\n const errorMsg = 'This field must be not empty!';\n const phoneErrorMsg = getPhoneErrorText(inputs.phone);\n const emailErrorMsg = !EmailValidator.test(inputs.email) ? 'Email must be an email!' : '';\n const passwordErrorMsg = getPassErrorText(inputs.password);\n const phoneErrorText =\n error === 'phone' ? errorMsg :\n userBackError.length && userBackError[0].error[0] === 'phone must be a valid phone number' ? 'Phone must be a valid phone number' : '';\n const emailErrorText =\n error === 'email' ? errorMsg\n : userBackError.length && userBackError[0]?.error === 'User already exists' ? 'User already exists'\n : '';\n const passwordErrorText = error === 'password' ? errorMsg : error === passwordErrorMsg ? passwordErrorMsg : '';\n const hasMinSixChars = isNotEmpty(inputs.password) && inputs.password.trim().length >= 8;\n const hasOneNum = isNotEmpty(inputs.password) && /\\d/.test(inputs.password);\n const hasOneUppercase = isNotEmpty(inputs.password) && /[A-Z]/.test(inputs.password);\n const registerCtx = useContext(RegisterContext);\n const {handleModalContent} = registerCtx;\n\n useEffect(() => {\n if (userSuccess.length) {\n handleModalContent('welcome');\n dispatch(httpRequestsOnSuccessActions.removeSuccess(userSuccess.type));\n }\n }, [userSuccess]);\n\n const handleChange = (evt) => {\n setInputs((prevState) => ({...prevState, [evt.target.name]: evt.target.value}));\n if (\n error === evt.target.name ||\n error === phoneErrorMsg ||\n error === emailErrorMsg ||\n error === passwordErrorMsg ||\n userBackError.length\n ) {\n setError('');\n }\n if (userBackError.length) {\n dispatch(httpRequestsOnErrorsActions.removeError(userBackError.type));\n }\n };\n\n const handleStepContinue = () => {\n if (accountType) {\n setError('')\n setIsLastStep(true)\n } else {\n setError('selectType')\n }\n };\n\n const handleUserDataSend = () => {\n const passwordIsValid = !!inputs.password && hasMinSixChars && hasOneNum && hasOneUppercase;\n const emailIsValid = !!inputs.email && EmailValidator.test(inputs.email);\n const phone = inputs?.phone ? `${parseInt(inputs?.phone.replace(/[^0-9]/g, ''))}` : '';\n\n const errorText =\n !inputs.firstName ? 'firstName' :\n !inputs.lastName ? 'lastName' :\n !phone ? 'phone' :\n !inputs.email ? 'email' :\n !inputs.password ? 'password' :\n !passwordIsValid ? passwordErrorMsg\n : 'Input is not field';\n\n const userData = {\n firstName: inputs.firstName,\n lastName: inputs.lastName,\n phone: phone,\n email: inputs.email,\n password: inputs.password,\n };\n\n if (!!inputs.firstName && !!inputs.lastName && phone && emailIsValid && passwordIsValid) {\n dispatch(userActions.createUser(userData));\n } else {\n setError(errorText);\n }\n };\n\n const handeSetType = (ev) => {\n if (error === 'selectType') {\n setError('')\n }\n setAccountType(ev)\n }\n\n return (\n \n
\n <>\n\n \n \n \n \n\n \n
\n \n \n \n
\n \n handleChangeCounty(address)}\n />\n
\n * County of Service
\n\n
\n {error === 'countryOfService' ? errorMsg : ''}
\n\n \n
\n \n \n
\n \n By signing up, you agree to Croil's\n \n Terms of Use\n \n and\n \n Privacy Policy\n \n
\n \n\n\n
\n\n\n {!isLastStep && (\n \n {accountType === 'BASIC' ?\n \n }\n handeSetType('BROKER')}\n style={accountType === 'BROKER' ? {\n border: '1px solid #FF385C',\n background: '#FFF5F7'\n } :\n error === 'selectType' ? {borderColor: '#D03325'} :\n {}}\n className={classes.accountTypeItem}\n >\n
\n \n \n \n \n \n \n
\n :\n accountType === 'BROKER' && isLastStep &&\n \n \n
\n \n <>\n handeSetType('BASIC')}\n style={accountType === 'BASIC' ? {\n border: '1px solid #FF385C',\n background: '#FFF5F7'\n } :\n error === 'selectType' ? {borderColor: '#D03325'} :\n {}}\n className={classes.accountTypeItem}\n >\n
\n You are all set up. Now you're ready to start your\n journey\n within\n Croil.
\n\n\n
\n \n 
\n
\n \n
\n Basic Account
\nPost and sell your property
\n\n handeSetType('BASIC')}\n value=\"BASIC\"\n />\n
\n \n
\n \n 
\n
\n \n
\n Broker
\nPost and sell your property
\n\n handeSetType('BROKER')}\n value=\"BROKER\"\n />\n
\n {error === 'selectType' ? 'Select one of options' : ''}
\n\n By signing up, you agree to Croil's\n \n Terms of Use\n \n and\n \n Privacy Policy\n \n
\n \n )}\n \n \n );\n};\n","import React, { useState, useContext, useEffect } from 'react';\nimport { userRegistrationCoreStyles } from './styles';\nimport { SendButton, UserActionButton, UserInput } from 'components';\nimport { useDispatch } from 'react-redux';\nimport { EmailValidator, FindError, FindLoad, FindSuccess, isNotEmpty, RegisterContext } from 'utils';\nimport { authActions, httpRequestsOnErrorsActions, httpRequestsOnSuccessActions } from 'store';\n\nexport const UserSignIn = ({ closeModal }) => {\n const classes = userRegistrationCoreStyles();\n\n const registerCtx = useContext(RegisterContext);\n const { handleModalContent } = registerCtx;\n\n const dispatch = useDispatch();\n\n const [inputs, setInputs] = useState({});\n const [error, setError] = useState('');\n\n const userSignInLoader = FindLoad('LOG_IN');\n const userBackError = FindError('LOG_IN');\n const userSignInSuccess = FindSuccess('LOG_IN');\n\n const errorMsg = 'This field must be not empty!';\n const emailErrorMsg = !EmailValidator.test(inputs.email) ? 'Email must be an email!' : '';\n\n const emailErrorText =\n error === 'email'\n ? errorMsg\n : userBackError.length && userBackError[0].error === 'User with this email was not found'\n ? 'The email you entered isn’t connected to an account'\n : error === emailErrorMsg\n ? emailErrorMsg\n : '';\n\n const passwordErrorText =\n error === 'password'\n ? errorMsg\n : userBackError.length && userBackError[0].error === 'user password does not match'\n ? 'The password you’ve entered is incorrect'\n : '';\n\n const handleChange = (evt) => {\n setInputs((prevState) => ({\n ...prevState,\n [evt.target.name]: evt.target.value,\n }));\n\n if (error === evt.target.name || error === emailErrorMsg) {\n setError('');\n }\n\n if (userBackError.length) {\n dispatch(httpRequestsOnErrorsActions.removeError('LOG_IN'));\n }\n };\n\n const handleSignIn = () => {\n const signInData = {\n email: inputs.email,\n password: inputs.password,\n };\n\n const emailIsValid = inputs.email && EmailValidator.test(inputs.email);\n const errorText = !inputs.email ? 'email' : !emailIsValid ? emailErrorMsg : !inputs.password ? 'password' : 'Input is not field';\n\n if (emailIsValid && inputs.password) {\n dispatch(authActions.logIn(signInData));\n } else {\n setError(errorText);\n }\n };\n\n useEffect(() => {\n if (userSignInSuccess.length) {\n closeModal();\n dispatch(httpRequestsOnSuccessActions.removeSuccess('LOG_IN'));\n }\n }, [userSignInSuccess]);\n\n return (\n\n \n\n \n
\n );\n};\n","import React, { useState, useEffect, useContext } from 'react';\nimport { userRegistrationCoreStyles } from './styles';\nimport { EmailValidator, FindError, FindLoad, FindSuccess, RegisterContext } from 'utils';\nimport { SendButton, UserInput } from 'components';\nimport { useDispatch } from 'react-redux';\nimport { authActions, httpRequestsOnErrorsActions, httpRequestsOnSuccessActions } from 'store';\n\nexport const ForgotPassword = ({ onTrigger }) => {\n const classes = userRegistrationCoreStyles();\n const dispatch = useDispatch();\n\n const [inputs, setInputs] = useState({});\n const [error, setError] = useState('');\n\n const sendingEmailLoader = FindLoad('GET_RECOVERY_LINK');\n const userBackError = FindError('GET_RECOVERY_LINK');\n const sendingEmailSuccess = FindSuccess('GET_RECOVERY_LINK');\n\n const registerCtx = useContext(RegisterContext);\n const { handleModalContent } = registerCtx;\n\n useEffect(() => {\n if (sendingEmailSuccess.length) {\n handleModalContent('checkEmail');\n dispatch(httpRequestsOnSuccessActions.removeSuccess('GET_RECOVERY_LINK'));\n }\n }, [sendingEmailSuccess]);\n\n const errorMsg = 'This field must be not empty!';\n const emailErrorMsg = !EmailValidator.test(inputs.email) ? 'Email must be an email!' : '';\n const emailErrorText =\n error === 'email' ? errorMsg : userBackError.length && userBackError[0].error === 'User already exists' ? 'User already exists'\n : userBackError.length && userBackError[0].error === 'User with this email was not found'\n ? 'The email you entered isn’t connected to an account'\n : error === emailErrorMsg\n ? emailErrorMsg\n : '';\n\n const handleChange = (evt) => {\n setInputs((prevState) => ({\n ...prevState,\n [evt.target.name]: evt.target.value,\n }));\n if (error === evt.target.name || error === emailErrorMsg || userBackError.length) {\n setError('');\n }\n if (userBackError.length) {\n dispatch(httpRequestsOnErrorsActions.removeError('GET_RECOVERY_LINK'));\n }\n };\n\n const handleEmailSend = () => {\n const emailIsValid = inputs.email && EmailValidator.test(inputs.email);\n const errorText = !inputs.email ? 'email' : !emailIsValid ? emailErrorMsg : 'Input is not field';\n if (emailIsValid) {\n dispatch(authActions.getRecoveryLink(inputs.email));\n onTrigger(inputs.email);\n } else {\n setError(errorText);\n }\n };\n\n return (\n <>\n \n \n handleModalContent('forgotPass')}\n butnLabel={'Forgot Password?'}\n />\n
\n \n Not on Croil yet? \n handleModalContent('signUp')}\n butnLabel={'Sign Up'}\n />\n
\n \n Please enter your email address and we'll send you a recovery email to reset your password.\n
\n\n \n \n
\n \n );\n};\n","import React, { useEffect, useState } from 'react';\nimport { userRegistrationCoreStyles } from './styles';\nimport { FindLoad, getPassErrorText, isNotEmpty } from 'utils';\nimport { Logo, SendButton, UserInput } from 'components';\nimport { useDispatch } from 'react-redux';\nimport { authActions } from 'store';\n\nexport const ResetPassword = () => {\n const classes = userRegistrationCoreStyles();\n const dispatch = useDispatch();\n\n const [inputs, setInputs] = useState({\n newPassword: '',\n confirmation: '',\n });\n const [error, setError] = useState('');\n const [resetToken, setResetToken] = useState('');\n\n const resetPasswordLoader = FindLoad('RESET_PASSWORD_REQUEST');\n\n useEffect(() => {\n const link = window.location.search;\n if (link.search('resetToken=') !== -1) {\n const pos = link.slice(link.search('resetToken='));\n const resetToken = pos.substring(11);\n setResetToken(resetToken);\n }\n }, []);\n\n const errorMsg = 'This field must be not empty!';\n const newPasswordErrorMsg = getPassErrorText(inputs.newPassword);\n const confirmNewPasswordErrorMsg = inputs.confirmNewPassword !== inputs.newPassword ? 'Passwords do not match!' : '';\n const newPasswordErrorText = error === 'newPassword' ? errorMsg : error === newPasswordErrorMsg ? newPasswordErrorMsg : '';\n const confirmNewPasswordErrorText =\n error === 'confirmNewPassword' ? errorMsg : error === confirmNewPasswordErrorMsg ? confirmNewPasswordErrorMsg : '';\n\n const hasMinSixChars = isNotEmpty(inputs.newPassword) && inputs.newPassword.trim().length >= 8;\n const hasOneNum = isNotEmpty(inputs.newPassword) && /\\d/.test(inputs.newPassword);\n const hasOneUppercase = isNotEmpty(inputs.newPassword) && /[A-Z]/.test(inputs.newPassword);\n\n const handleChange = (evt) => {\n setInputs((prevState) => ({\n ...prevState,\n [evt.target.name]: evt.target.value,\n }));\n if (error === evt.target.name || error === newPasswordErrorMsg || error === confirmNewPasswordErrorMsg) {\n setError('');\n }\n };\n\n const handlePasswordReset = () => {\n const newPasswordData = {\n newPassword: inputs.newPassword,\n confirmation: inputs.confirmNewPassword,\n token: resetToken,\n };\n const newPasswordIsValid = inputs.newPassword && hasMinSixChars && hasOneNum && hasOneUppercase;\n const confirmNewPasswordIsValid = inputs.confirmNewPassword && inputs.confirmNewPassword === inputs.newPassword;\n const errorText = !inputs.newPassword\n ? 'newPassword'\n : !newPasswordIsValid\n ? newPasswordErrorMsg\n : !inputs.confirmNewPassword\n ? 'confirmNewPassword'\n : !confirmNewPasswordIsValid\n ? confirmNewPasswordErrorMsg\n : 'Input is not field';\n if (newPasswordIsValid && confirmNewPasswordIsValid) {\n dispatch(authActions.resetPassword(newPasswordData));\n } else {\n setError(errorText);\n }\n };\n\n return (\n \n
\n );\n};\n","import { SendButton } from \"components\";\nimport React from \"react\";\nimport { useHistory } from \"react-router\";\nimport { userRegistrationCoreStyles } from \"./styles\";\n\nexport const Welcome = ({ closeModal }) => {\n const classes = userRegistrationCoreStyles();\n\n const history = useHistory();\n\n return (\n <>\n \n \n
\n \n
\n Reset Password
\nPlease enter a new password below to reset password.
\n\n \n \n \n
\n \n You are all set up. Now you're ready to start your journey within Croil.\n
\n\n We've sent a recovery email to\n \n {userEmail}\n \n reset your password.\n
\n\n \n \n \n \n
\n );\n};\n","import React, { useContext, useState } from \"react\";\nimport {\n CreateUserInputs,\n ForgotPassword,\n Welcome,\n UserSignIn,\n CheckEmail,\n} from \"./core\";\nimport { useSelector } from \"react-redux\";\nimport { useParams } from \"react-router\";\nimport {\n Loader,\n MyProfileWrapper,\n UserRegistrationWrapper,\n} from \"components\";\nimport { RegisterContext } from \"utils\";\n\nexport const UserRegistration = ({ onClose }) => {\n const params = useParams();\n\n const [userEmail, setUserEmail] = useState();\n const triggerUserEmail = (email) => setUserEmail(email);\n\n const httpOnLoad = useSelector((state) => state.httpOnLoad);\n // const isLoading = httpOnLoad.length && httpOnLoad[0] === \"GET_USER_BY_ID\";\n // const isEditUserPage = window.location.pathname === `/edit_user-${params.id}`;\n // const userById = useSelector((state) => state.users.userById);\n\n const registerCtx = useContext(RegisterContext);\n const { modalContent } = registerCtx;\n\n // isEditUserPage ? (\n // isLoading ? (\n // \n {show &&\n setShow(!show)}\n butnLabel={'Edit'}\n />\n }\n
\n \n
\n \n
\n {!show &&\n \n \n \n
\n \n */}\n \n
\n \n \n
\n\n {/*\n Cancel\n \n \n {editLoad?.length ?\n \n :\n 'Save'\n }\n \n
\n }\n \n {show &&\n setShow(!show)}\n butnLabel={'Edit'}\n />\n }\n
\n \n
\n \n
\n\n \n \n \n \n
\n \n */}\n \n \n
\n \n \n
\n {/*\n
\n\n {!show &&\n \n\n
\n\n \n handleChangeCounty(address)}\n />\n
\n County of Service
\n\n
\n {error === 'countryOfService' ? errorMsg : ''}
\n\n \n
\n About Me
\n\n
\n {error === 'aboutMe' ? errorMsg : ''}
\n\n Cancel\n \n \n {editLoad?.length ?\n \n :\n 'Save'\n }\n \n
\n }\n \n \n )}\n
\n \n handleSelPropTypePass(selected)}\n selected={selPropType}\n dropdownTitle={'Select Type'}\n dropdownError={error === 'propertyType'}\n />\n
\n {selPropType === 'Other' && (\n Property Type
\n{error === 'propertyType' && dropdownErrorMsg}
\n\n \n \n
\n \n
\n Listing Number
\n\n {info ? info.number : 'Auto-generated'}\n
\n \n \n handleSelLeaseTypePass(selected)}\n selected={selLeaseType}\n dropdownTitle={'Select Type'}\n dropdownError={error === 'leaseType'}\n />\n
\n {selLeaseType === 'NNN' && (\n Lease Type
\n{error === 'leaseType' && dropdownErrorMsg}
\n\n \n \n
\n \n \n
\n {userFullName}
\n\n {userProfileInputs.map((inputs, index) => {\n return (\n
\n \n
\n );\n })}\n {inputs.profileLabel}
\n\n {inputs.profileInput}\n
\n Description
\n\n {info ? (\n setNewText(ev)} />\n ) : (\n setText(ev)} />\n )}\n
\n Max 500 characters \n \n {!uniqueImages.length ? (\n \n ) : (\n <>\n \n
\n
\n ) : (\n \n 
\n
\n Drag your photos here
\n \n\n \n
\n \n );\n};\n","import React, {useState} from 'react';\nimport {useHistory} from 'react-router';\nimport {useDispatch} from 'react-redux';\nimport {FindLoad, getValTillTenDig, makeCapitalize, getDataValue, handleFileUpload, hasURL, FindError} from 'utils';\nimport {SaveOrCancelButton} from 'components';\nimport {listingActions} from 'store';\nimport {listingInputsStyle} from './styles';\nimport {ContactInfo, Description, GeneralInfo, ListingImages, PropertyDetails} from './common';\n\nexport const CreateListingInputs = ({info}) => {\n const classes = listingInputsStyle();\n const history = useHistory();\n const dispatch = useDispatch();\n const backError = FindError(info ? 'EDIT_LISTING' : 'CREATE_LISTING');\n const createListingLoader = FindLoad('CREATE_LISTING');\n const editListingLoader = FindLoad('EDIT_LISTING');\n const backMessage = backError?.length && backError.find((i) => i?.error === 'Unable to verify the address')\n const [inputs, setInputs] = useState(\n info\n ? {\n ...info,\n ...info.size,\n address: info.address.formattedAddress,\n }\n : {}\n );\n const [error, setError] = useState('');\n const [selectedPropertyType, setSelectedPropertyType] = useState(info ? makeCapitalize(inputs.propertyType) : '');\n const [selectedLeaseType, setSelectedLeaseType] = useState(\n info ? (inputs.leaseType === 'NNN' ? inputs.leaseType : makeCapitalize(inputs.leaseType)) : ''\n );\n const [chosenImages, setChosenImages] = useState([]);\n const [chosenMainImage, setChosenMainImage] = useState();\n const [chosenImagesToAdd, setChosenImagesToAdd] = useState();\n const [chosenImagesToRemove, setChosenImagesToRemove] = useState();\n const [loaderUpload, setLoaderUpload] = useState(false);\n const errorMsg = 'This field must be not empty!';\n const dropdownErrorMsg = 'One of the options must be chosen!';\n\n const handleChange = (evt) => {\n const evtTargetValue = evt.target.name === 'propertyTypeDescription' ? getValTillTenDig(evt.target.value, 50) : evt.target.value;\n setInputs((prevState) => ({\n ...prevState,\n [evt.target.name]: evtTargetValue,\n }));\n error === evt.target.name && setError('');\n };\n\n const handleTextChange = (text, newText) => {\n setInputs((prevState) => ({\n ...prevState,\n description: newText ? getValTillTenDig(newText, 500) : getValTillTenDig(text, 500),\n }));\n };\n\n const sendListingData = () => {\n const listingFormIsValid =\n !!selectedPropertyType &&\n (selectedPropertyType === 'Other' ? !!inputs.propertyTypeDescription : true) &&\n !!inputs.address &&\n !!selectedLeaseType;\n\n const errorText = !selectedPropertyType\n ? 'propertyType'\n : selectedPropertyType === 'Other' && !inputs.propertyTypeDescription\n ? 'propertyTypeDescription'\n : !inputs.address\n ? 'address'\n : !selectedLeaseType\n ? 'leaseType'\n : 'Input is not field';\n\n const listingData = {\n propertyType: selectedPropertyType.toUpperCase(),\n propertyTypeDescription: getDataValue(inputs.propertyTypeDescription),\n size: {\n start: getDataValue(+inputs.start),\n end: getDataValue(+inputs.end),\n },\n zoning: getDataValue(inputs.zoning),\n lotSize: getDataValue(+inputs.lotSize),\n parking: getDataValue(inputs.parking),\n price: getDataValue(+inputs.price),\n leaseType: selectedLeaseType.toUpperCase(),\n nPrice: getDataValue(+inputs.nPrice),\n description: getDataValue(inputs.description),\n mainImage: chosenMainImage,\n images: chosenImages,\n address: getDataValue(inputs.address),\n };\n\n if (listingFormIsValid) {\n if (info) {\n delete listingData.images;\n\n const listingDataEdit = {\n ...listingData,\n imagesToAdd: !!chosenImagesToAdd?.length ? chosenImagesToAdd : undefined,\n imagesToRemove: !!chosenImagesToRemove?.length ? chosenImagesToRemove : undefined,\n };\n\n if (!!chosenImagesToAdd?.length && !hasURL(chosenImagesToAdd)) {\n setLoaderUpload(true);\n\n if (!!chosenMainImage && !chosenMainImage.url) {\n Promise.all([handleFileUpload(chosenMainImage), handleFileUpload(chosenImagesToAdd)]).then((response) => {\n setLoaderUpload(false);\n\n const uploadedMainImage = response[0].data;\n const uploadedImagesToAdd = response[1].data;\n\n const listingDataEditWithFileDTO = {\n ...listingDataEdit,\n mainImage: uploadedMainImage,\n imagesToAdd: uploadedImagesToAdd,\n };\n\n dispatch(listingActions.editListing(info._id, listingDataEditWithFileDTO));\n });\n } else {\n handleFileUpload(chosenImagesToAdd).then((response) => {\n setLoaderUpload(false);\n\n const uploadedImagesToAdd = response.data;\n\n const listingDataEditWithFileDTO = {\n ...listingDataEdit,\n imagesToAdd: uploadedImagesToAdd,\n };\n\n dispatch(listingActions.editListing(info._id, listingDataEditWithFileDTO));\n });\n }\n } else {\n dispatch(listingActions.editListing(info._id, listingDataEdit));\n }\n } else {\n if (!!chosenImages.length && !hasURL(chosenImages)) {\n setLoaderUpload(true);\n\n if (!!chosenMainImage && !chosenMainImage.url) {\n Promise.all([handleFileUpload(chosenMainImage), handleFileUpload(chosenImages)]).then((response) => {\n setLoaderUpload(false);\n\n const uploadedMainImage = response[0].data;\n const uploadedImages = response[1].data;\n\n const listingDataWithFileDTO = {\n ...listingData,\n mainImage: uploadedMainImage,\n images: uploadedImages,\n };\n\n dispatch(listingActions.createListing(listingDataWithFileDTO));\n });\n } else {\n handleFileUpload(chosenImages).then((response) => {\n setLoaderUpload(false);\n\n const uploadedImages = response.data;\n\n const listingDataWithFileDTO = {\n ...listingData,\n images: uploadedImages,\n };\n\n dispatch(listingActions.createListing(listingDataWithFileDTO));\n });\n }\n } else {\n dispatch(listingActions.createListing(listingData));\n }\n }\n } else {\n setError(errorText);\n }\n };\n\n return (\n Drag to reorder
\n\n
\n )}\n \n 
\n \n
\n setMainImage(images[0])}>\n 
\n
\n \n \n {uniqueImages.map((uniqueImage, index, uniqueImageArray) => {\n const _imagesAlreadyExist = info?.images.includes(uniqueImage);\n\n const _uniqueImageURL = _imagesAlreadyExist ? uniqueImage.url : URL.createObjectURL(uniqueImage);\n\n return (\n
\n \n
\n setMainImage(uniqueImage)} />\n 
\n \n handleImagesRemove(evt, uniqueImage, uniqueImageArray, _imagesAlreadyExist)\n }\n />\n
\n );\n })}\n \n
\n );\n};\n","import React, { useEffect } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useHistory, useParams } from 'react-router';\nimport { CustomBreadcrumbs, Loader } from 'components';\nimport { httpRequestsOnSuccessActions, listingActions } from 'store';\nimport { CreateListingInputs } from './core';\nimport { SET_LISTING_BY_ID } from '../../../store/listings/listings.types';\nimport { listingInputsStyle } from './core/styles';\nimport {FindError, FindLoad, FindSuccess} from 'utils';\n\nexport const CreateListing = () => {\n const location = window.location;\n const params = useParams();\n const _id = params.id;\n\n const dispatch = useDispatch();\n const classes = listingInputsStyle();\n\n const isEditListingPage = location.pathname === `/my_listings/edit_listing-${_id}`;\n\n const listingById = useSelector((state) => state.listings.listingById);\n\n const loader = FindLoad('GET_LISTING_BY_ID');\n\n useEffect(() => {\n if (isEditListingPage) {\n dispatch(listingActions.getListingById(_id));\n return () => {\n dispatch({\n type: SET_LISTING_BY_ID,\n payload: { listingById: null },\n });\n };\n }\n }, [isEditListingPage, _id]);\n\n return loader.length ? (\n \n history.push(`${info ? '/my_listings' : '/'}`)}\n />\n
\n {info ? 'Edit Listing' : 'Create Listing'}
\n\n {\n setSelectedPropertyType(selected);\n setError('');\n }}\n selPropType={selectedPropertyType}\n error={error}\n dropdownErrorMsg={dropdownErrorMsg}\n info={info}\n inputs={inputs}\n handleChange={handleChange}\n errorMsg={errorMsg}\n backMessage={backMessage}\n />\n {\n setSelectedLeaseType(selected);\n setError('');\n }}\n selLeaseType={selectedLeaseType}\n />\n \n \n setChosenImages(images)}\n handleMainImagePass={(mainImage) => setChosenMainImage(mainImage)}\n handleImagesToAddPass={(imagesToAdd) => setChosenImagesToAdd(imagesToAdd)}\n handleImagesToRemovePass={(imagesToRemove) => setChosenImagesToRemove(imagesToRemove)}\n />\n
\n \n \n
\n \n );\n};\n","import {makeStyles} from '@material-ui/core/styles';\nimport {Colors} from 'utils';\n\nexport const listingsCardItemStyle = makeStyles(\n () => ({\n // * gallery view styles *\n cardItemStyle: {\n position: 'relative',\n width: '292px !important',\n height: '336px',\n display: 'flex',\n flexDirection: 'column',\n backgroundColor: Colors.BackgroundWhite,\n boxShadow: '0px 0px 6px #00000029',\n borderRadius: '16px',\n overflow: 'hidden',\n marginRight: '24px',\n marginBottom: '24px',\n cursor: 'pointer',\n '&:hover .cardOverlay': {\n backgroundColor: '#00000066',\n zIndex: 9,\n },\n '@media(min-width: 769px)': {\n cursor: 'default',\n '&:hover .cardInfo': {height: '131px'},\n '&:hover .viewDetailsButn': {\n opacity: 1,\n transition: 'opacity 0.1s linear',\n },\n },\n '@media(max-width: 795px)': {marginRight: '0px'},\n },\n cardImageBoxStyle: {\n width: '100%',\n height: '259px',\n overflow: 'hidden',\n '& img': {\n width: '100%',\n objectFit: 'cover',\n height: '259px',\n },\n },\n cardItemOverlayStyle: {\n position: 'absolute',\n top: 0,\n left: 0,\n zIndex: -9,\n width: '100%',\n height: '100%',\n backgroundColor: '#0000001A',\n transition: 'background-color 0.1s linear',\n },\n cardItemInfoStyle: {\n width: '100%',\n height: '87px',\n padding: '12px',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n backgroundColor: Colors.BackgroundWhite,\n transition: 'height 0.2s linear',\n position: 'absolute',\n left: 0,\n bottom: 0,\n zIndex: 9,\n },\n infoBoxStyle: {\n width: '100%',\n display: 'flex',\n justifyContent: 'space-between',\n },\n formattedAddressBoxStyle: {\n cursor: 'default',\n // marginTop: '8px',\n },\n formattedAddressBoxListViewStyle: {cursor: 'default'},\n cardTitleStyle: {\n fontSize: '16px',\n fontWeight: 600,\n color: Colors.ThemeBlue,\n },\n cardAddressStyle: {\n maxWidth: '130px',\n fontSize: '12px',\n fontWeight: 500,\n color: Colors.ThemeBlue,\n marginTop: '8px',\n },\n cardPriceStyle: {\n fontSize: '16px',\n fontWeight: 600,\n color: Colors.TextBlack,\n textAlign: 'right',\n '& em': {\n fontSize: '12px',\n fontWeight: 500,\n color: Colors.TextGray,\n },\n },\n cardSizeStyle: {\n marginTop: '8px',\n padding: '4px 8px',\n backgroundColor: Colors.BackgroundWhiteOff,\n borderRadius: '4px',\n fontSize: '14px',\n fontWeight: 500,\n color: Colors.TextGray,\n height: '28px',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n viewCardDetailsButnStyle: {\n backgroundColor: Colors.ThemePink,\n color: Colors.TextWhite,\n width: '268px',\n opacity: 0,\n transition: 'background-color 0.1s linear',\n '&:hover': {backgroundColor: '#d52f4c'},\n },\n moreBoxStyle: {\n position: 'absolute',\n top: '8px',\n right: '8px',\n zIndex: 99,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-end',\n },\n moreStyle: {\n cursor: 'pointer',\n marginBottom: '4px',\n },\n buildingStyle: {\n width: '302px',\n height: '259px !important',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: Colors.BackgroundWhiteOff,\n },\n // * end *\n\n // * list view styles *\n cardItemListViewStyle: {\n position: 'relative',\n maxWidth: '628px',\n width: '100%',\n padding: '8px',\n display: 'flex',\n marginBottom: '24px',\n alignItems: 'center',\n backgroundColor: Colors.BackgroundWhite,\n boxShadow: '0px 0px 6px #00000029',\n borderRadius: '16px',\n '@media(max-width: 1440px)': {\n maxWidth: '608px',\n },\n '@media(max-width: 1400px)': {\n maxWidth: '588px',\n },\n '@media(max-width: 1360px)': {\n maxWidth: '548px',\n },\n '@media(max-width: 1280px)': {\n maxWidth: '508px',\n },\n '@media(max-width: 1180px)': {\n maxWidth: '628px',\n },\n },\n cardImageBoxListViewStyle: {\n width: '102px',\n height: '102px',\n flexShrink: 0,\n display: 'flex',\n marginRight: '8px',\n justifyContent: 'center',\n alignItems: 'center',\n '@media(min-width: 320px)': {\n width: '76px',\n height: '76px',\n },\n '@media(min-width: 767px)': {\n width: '102px',\n height: '102px',\n },\n '& img': {\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n borderRadius: '16px',\n },\n },\n cardItemOverlayListViewStyle: {display: 'none'},\n cardItemInfoListViewStyle: {\n height: '78px',\n position: 'relative',\n flexGrow: 1,\n paddingLeft: '8px',\n paddingRight: '8px',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n },\n infoBoxListViewStyle: {\n width: '100%',\n display: 'flex',\n justifyContent: 'space-between',\n },\n cardTitleListViewStyle: {\n fontSize: '16px',\n fontWeight: 600,\n color: Colors.ThemeBlue,\n '@media(max-width: 605px)': {fontSize: '14px'},\n },\n cardPriceListViewStyle: {\n fontSize: '16px',\n fontWeight: 600,\n color: Colors.TextBlack,\n textAlign: 'right',\n '&.margin': {\n marginRight: '50px',\n marginTop: '8px',\n },\n '& em': {\n fontSize: '12px',\n fontWeight: 500,\n color: Colors.TextGray,\n },\n '@media(max-width: 605px)': {fontSize: '14px'},\n },\n cardSizeListViewStyle: {\n position: 'absolute',\n left: '8px',\n bottom: 0,\n '@media(max-width: 605px)': {\n backgroundColor: 'inherit',\n paddingLeft: '0px',\n justifyContent: 'flex-start',\n },\n },\n viewCardDetailsButnListViewStyle: {\n width: '150px',\n backgroundColor: 'inherit',\n color: Colors.ThemePink,\n alignSelf: 'flex-end',\n '&:hover': {\n backgroundColor: Colors.ThemePink,\n color: Colors.TextWhite,\n transition: 'background-color 0.1s linear',\n },\n '@media(max-width: 605px)': {\n width: '100px',\n padding:'0',\n border: 'none',\n textAlign: 'right',\n paddingBottom: '0px',\n textDecoration: 'underline',\n '&:hover': {\n backgroundColor: 'inherit',\n color: Colors.ThemePink,\n },\n },\n },\n priceAndMoreStyle: {\n display: 'flex',\n height: '20px',\n justifyContent: 'flex-end',\n alignItems: 'center',\n },\n moreBoxListViewStyle: {\n position: 'absolute',\n top: '16px',\n right: '18px',\n zIndex: 99,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-end',\n },\n moreListViewStyle: {\n cursor: 'pointer',\n boxShadow: '0px 0px 6px #00000029',\n borderRadius: '50%',\n marginBottom: '4px',\n width: '32px',\n height: '32px',\n },\n buildingListViewStyle: {\n width: '102px',\n height: '102px',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: Colors.BackgroundWhiteOff,\n borderRadius: '16px',\n '@media(min-width: 320px)': {\n width: '76px',\n height: '76px',\n },\n '@media(min-width: 767px)': {\n width: '102px',\n height: '102px',\n }\n\n },\n // * end *\n\n moreOverlayStyle: {\n position: 'fixed',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n zIndex: -9,\n },\n moreActionsBoxStyle: {\n width: '140px',\n borderRadius: '12px',\n boxShadow: '0px 0px 6px #00000029',\n backgroundColor: Colors.BackgroundWhite,\n padding: '12px 0',\n },\n moreActionsListStyle: {\n '& li': {\n padding: '10px 16px',\n fontSize: '14px',\n fontWeight: 500,\n color: Colors.TextGray,\n backgroundColor: 'inherit',\n transition: 'background-color 0.2s linear',\n '&:hover': {backgroundColor: Colors.BackgroundWhiteOff},\n cursor: 'default',\n },\n },\n\n // * Custom Marker Style *\n markerStyle: {\n position: 'relative',\n '&:hover $pinStyle': {\n borderColor: '#1593C14D',\n '&::before': {backgroundColor: '#1593C1'},\n },\n '&.active $pinStyle': {\n borderColor: '#FF385C33',\n '&::before': {backgroundColor: '#FF385C'},\n },\n },\n pinStyle: {\n width: '30px',\n height: '30px',\n borderRadius: '50%',\n border: '5px solid #3377CC33',\n position: 'relative',\n transition: 'all 0.2s ease-in-out',\n '&::before': {\n content: \"''\",\n width: '20px',\n height: '20px',\n borderRadius: '50%',\n position: 'absolute',\n top: 0,\n left: 0,\n backgroundColor: '#3377CC',\n },\n },\n markerContentStyle: {\n position: 'absolute',\n top: 0,\n left: 0,\n transform: 'translate(8%, -88%)',\n width: '264px',\n height: '93px',\n overflow: 'hidden',\n boxShadow: '0px 3px 6px #00000029',\n borderRadius: '8px',\n backgroundColor: Colors.BackgroundWhite,\n display: 'flex',\n },\n listingImageStyle: {\n width: '89px',\n position: 'relative',\n '& > img': {\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n },\n '& > p': {\n width: '100%',\n position: 'absolute',\n bottom: 0,\n left: 0,\n textAlign: 'center',\n backgroundColor: '#F4F4F4E3',\n fontSize: '12px',\n fontWeight: 600,\n color: Colors.TextBlack,\n },\n },\n listingDetailsStyle: {\n padding: '8px 16px',\n width: '175px',\n '& > h5': {\n fontSize: '14px',\n fontWeight: 600,\n color: Colors.ThemeBlue,\n },\n '& > h6': {\n fontSize: '12px',\n fontWeight: 500,\n color: Colors.ThemeBlue,\n },\n '& > p': {\n fontSize: '14px',\n fontWeight: 600,\n color: Colors.TextBlack,\n marginTop: '16px',\n textAlign: 'right',\n '& > em': {\n fontSize: '12px',\n fontWeight: 500,\n color: Colors.TextGray,\n },\n },\n },\n promoted: {\n width: '112px',\n height: '36px',\n background: '#FBEBED',\n borderRadius: '16px',\n padding: '8px',\n display: 'flex',\n alignItems: 'center',\n fontWeight: '500',\n fontSize: '14px',\n lineHeight: '20px',\n color: '#FE385C',\n position:'absolute',\n left: 8,\n top: 8,\n '& img':{\n marginRight:'8px',\n },\n },\n promotedList: {\n width: '26px',\n height: '26px',\n background: '#FBEBED',\n borderRadius: '8px',\n display: 'flex',\n alignItems: 'center',\n justifyContent:'center',\n fontWeight: '500',\n fontSize: '14px',\n lineHeight: '20px',\n color: '#FE385C',\n position:'absolute',\n left: 16,\n top: 16,\n },\n // * end *\n }),\n {index: 1}\n);\n","import React, {useContext, useState} from 'react';\nimport {useHistory} from 'react-router';\nimport {RegisterModalWrapper, SimpleModal, UserRegistrationWrapper, ViewMoreButton} from 'components';\nimport {\n getAddressText,\n Images,\n PROMOTED,\n RegisterContext,\n TextRow,\n useWidth,\n ViewAsContext\n} from 'utils';\nimport {listingsCardItemStyle} from './style';\n\nexport const ListingsCardItem = ({cardClassName, listingId, mainImage = '', street, price, size, address, item}) => {\n const classes = listingsCardItemStyle();\n const history = useHistory();\n\n const screenWidth = useWidth();\n\n const showMoreDetails = () => {\n if (isMyListingsPage) {\n history.push(`/my_listings/listing_details-${listingId}`);\n } else {\n\n const pageEvent = {\n event: \"VIEW_DETAILS\",\n list_id: listingId,\n };\n window?.dataLayer.push(pageEvent);\n\n history.push(`/listings/listing_details-${listingId}`);\n }\n };\n\n const onViewDetails = () => {\n if (view !== 'gallery' || (!isHomePage && screenWidth > 768)) return;\n showMoreDetails();\n };\n\n const [isShownMore, setIsShownMore] = useState(false);\n const [modalIsOpen, setModalIsOpen] = useState(false);\n\n const {view} = useContext(ViewAsContext);\n const registerCtx = useContext(RegisterContext);\n const {handleModalContent} = registerCtx;\n\n const isHomePage = window.location.pathname === '/';\n const isMyListingsPage = window.location.pathname === '/my_listings';\n\n const cardItemClassName = view === 'gallery' || isHomePage ? classes.cardItemStyle : view === 'list' ? classes.cardItemListViewStyle : '';\n const cardImageBoxClassName = view === 'gallery' || isHomePage ? classes.cardImageBoxStyle : view === 'list' ? classes.cardImageBoxListViewStyle : '';\n const cardItemOverlayClassName = view === 'gallery' || isHomePage ? `${classes.cardItemOverlayStyle} cardOverlay` : view === 'list' ? classes.cardItemOverlayListViewStyle : '';\n const cardItemInfoClassName = view === 'gallery' || isHomePage ? `${classes.cardItemInfoStyle} cardInfo` : view === 'list' ? classes.cardItemInfoListViewStyle : '';\n const infoBoxClassName = view === 'gallery' || isHomePage ? classes.infoBoxStyle : view === 'list' ? classes.infoBoxListViewStyle : '';\n const formattedAddressBoxClassName = view === 'gallery' || isHomePage ? classes.formattedAddressBoxStyle : view === 'list' ? classes.formattedAddressBoxListViewStyle : '';\n const cardTitleClassName = view === 'gallery' || isHomePage ? classes.cardTitleStyle : view === 'list' ? classes.cardTitleListViewStyle : '';\n const cardPriceClassName = view === 'gallery' || isHomePage ? classes.cardPriceStyle : view === 'list' ? `${classes.cardPriceListViewStyle} ${isMyListingsPage ? 'margin' : ''}` : '';\n const cardSizeClassName = view === 'gallery' || isHomePage ? classes.cardSizeStyle : view === 'list' ? `${classes.cardSizeStyle} ${classes.cardSizeListViewStyle}` : '';\n const viewCardDetailsButnClassName = view === 'gallery' || isHomePage ? `${classes.viewCardDetailsButnStyle} viewDetailsButn` : view === 'list' ? `${classes.viewCardDetailsButnListViewStyle} viewDetailsButnListView` : '';\n const moreBoxClassName = view === 'gallery' ? classes.moreBoxStyle : view === 'list' ? classes.moreBoxListViewStyle : '';\n const moreClassName = view === 'gallery' ? classes.moreStyle : view === 'list' ? classes.moreListViewStyle : '';\n const buildingClassName = view === 'gallery' || isHomePage ? classes.buildingStyle : view === 'list' ? classes.buildingListViewStyle : '';\n const addressDisplay = getAddressText(address);\n const sizeDisplay = size.minSize && size.maxSize ? `${size.minSize} - ${size.maxSize} sq.ft.` : size.minSize ? `Over ${size.minSize} sq.ft.` : size.maxSize ? `Under ${size.maxSize} sq.ft.` : '';\n\n return (\n <>\n \n {isMyListingsPage && (\n setModalIsOpen(false)}\n content={\n setModalIsOpen(false)}>\n setModalIsOpen(false)}\n listingId={listingId}\n />\n \n }\n />\n \n );\n};\n","import React, { Fragment, useState } from 'react';\nimport { useHistory } from 'react-router';\nimport { getAddressText, getLimitedVal, getValDependsOnLength, Images, makeCapitalize } from 'utils';\nimport { listingsCardItemStyle } from './style';\n\nexport const CustomMarker = ({ listing }) => {\n const classes = listingsCardItemStyle();\n const [isShown, setIsShown] = useState(false);\n\n const { address, mainImage, propertyType, price } = listing;\n const { street } = address;\n const addressDisplay = getAddressText(address);\n\n const history = useHistory();\n\n const isMyListingsPage = window.location.pathname === '/my_listings';\n\n const showMoreDetails = () => {\n if (isMyListingsPage) {\n history.push(`/my_listings/listing_details-${listing._id}`);\n } else {\n\n const pageEvent = {\n event: \"VIEW_DETAILS\",\n list_id: listing._id,\n };\n window?.dataLayer.push(pageEvent);\n\n history.push(`/listings/listing_details-${listing._id}`);\n }\n };\n\n return (\n \n \n \n \n Invoice \n \n \n Invoice Number:\n {item?.invoiceNumber} \n \n Date of issue:\n {moment(item?.createdAt).format('MM.DD.YYYY')} \n \n Date due:\n {moment(item?.createdAt).format('MM.DD.YYYY')} \n \n \n \n \n Croill \n 345 Park Avenue \n San Francisco CA 95110-2704 \n United States \n \n\n \n Billed to \n {item?.email} \n {/*2972 Westheimer Rd. Santa Ana, Illinois 85486 */}\n \n \n\n \n Description \n Amount \n Total \n \n \n {item?.description} \n $15.00 \n $15.00 \n \n\n \n \n \n \n Total \n $15.00 \n \n \n Amount due \n $15.00 \n \n\n \n \n \n \n \n )\n ;\n}\n\nexport default BasicDocument;","import {useState} from \"react\";\nimport moment from \"moment\";\nimport {globalStyles} from \"components\";\nimport {Images} from \"utils\";\nimport {billingStyles} from \"./styles\";\nimport BasicDocument from \"../../../components/wrappers/pdf\";\n\nexport const Invoices = ({invoices}) => {\n const classes = billingStyles()\n const globalClasses = globalStyles()\n const [show, setShow] = useState(null)\n\n return (\n <>\n
e.stopPropagation()}>\n \n 
\n {view === 'gallery' &&
\n }\n {mainImage ? (\n setIsShownMore((prevState) => !prevState)}>\n 
\n
\n {isShownMore && (\n <>\n setIsShownMore(false)}/>\n
\n )}\n {item?.promotion?.status === PROMOTED && view &&\n \n
\n \n )}\n - \n
- history.push(`/my_listings/edit_listing-${listingId}`)}>\n Edit\n \n
Promoted
}\n\n 
\n
\n ) : (\n \n 
\n
\n )}\n \n
\n \n \n
\n \n {/**/}\n */}\n {!!price && price !== '0' && (\n
\n \n {street ? (\n <>\n \n
\n \n
\n )}\n
\n {/*\n \n {/*{getLimitedVal(street, 15)}*/}\n
\n \n
\n \n {/*{getLimitedVal(addressDisplay, 15)}*/}\n
\n )}\n \n
\n )\n }\n \n
\n {sizeDisplay && \n {`$${price}`} {'SF/YR'} \n
\n{sizeDisplay}
}\n\n \n ) : (\n <>\n \n \n \n :\n \n }\n
\n }\n />\n \n )\n}","import {\n Document,\n Page,\n Text,\n View,\n StyleSheet,\n PDFViewer,\n} from \"@react-pdf/renderer\";\nimport moment from \"moment\";\n\nconst styles = StyleSheet.create({\n page: {\n backgroundColor: \"white\",\n color: \"black\",\n height: '100%',\n padding: 26,\n },\n title: {\n margin: '10px 0',\n fountSize: '24px',\n fontWeight: 700,\n },\n viewer: {\n width: window.innerWidth,\n height: window.innerHeight,\n },\n invoiceInfo: {\n backgroundColor: '#F5F7F9',\n width: '235px',\n height: 'auto',\n borderLeft: '1px solid red',\n padding: '8px 8px 8px 22px',\n },\n invoiceInfoTitle: {\n fontSize: '10px',\n display: 'flex',\n fontWeight: 400,\n marginBottom: '8px',\n color: '#324557',\n },\n firstColumn: {\n flexDirection: 'column',\n width: '50%',\n fontSize: '12px',\n color: '#324557',\n fontWeight: 400\n },\n bill: {\n fontWeight: '700',\n fontSize: '14px',\n color: '#324557',\n marginBottom: '8px',\n },\n to: {\n fontWeight: '600',\n fontSize: '12px',\n color: '#324557',\n marginBottom: '8px',\n },\n info: {\n fontWeight: '400',\n fontSize: '11px',\n color: '#324557',\n },\n tableHead: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n marginTop: '35px',\n backgroundColor: '#41586D',\n height: '31px',\n fontWeight: '400',\n fontSize: '10px',\n color: '#FFFFFF',\n padding: '8px 16px',\n },\n tableBody: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n backgroundColor: '#F5F7F9',\n height: '31px',\n fontWeight: '400',\n fontSize: '10px',\n color: '#41586D',\n padding: '8px 16px',\n },\n information: {\n color: 'black',\n fontWeight: '600',\n fontSize: '10px',\n },\n amountTitle: {\n fontWeight: '400',\n fontSize: '10px',\n color: '#324557',\n },\n amountTitleBold: {\n fontWeight: '700',\n fontSize: '10px',\n color: '#324557',\n }\n});\n\nfunction BasicDocument(invoice) {\n const item = invoice?.invoice\n\n return (\n setIsShown((prevState) => !prevState)} />\n {isShown && (\n
\n );\n};\n","import { makeStyles } from '@material-ui/core/styles';\nimport { Colors } from 'utils';\n\nexport const listingsCardStyle = makeStyles(\n () => ({\n listingsCardBoxStyle: {\n width: '100%',\n display: 'flex',\n justifyContent: 'center',\n },\n listingsCardBoxContainerStyle: {\n maxWidth: '1440px',\n width: '100%',\n padding: '0px 80px 128px',\n '@media(max-width: 1200px)': {\n paddingLeft: '70px',\n paddingRight: '70px',\n },\n '@media(max-width: 768px)': {\n paddingLeft: '37px',\n paddingRight: '37px',\n },\n '@media(max-width: 400px)': {\n paddingLeft: '16px',\n paddingRight: '16px',\n },\n },\n // ** gallery view style **\n listingsCardStyle: {\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n '@media(max-width: 1100px)': {\n justifyContent: 'center',\n },\n '@media(max-width: 795px)': {\n justifyContent: 'space-between',\n },\n '@media(max-width: 768px)': {\n justifyContent: 'center',\n flexDirection: 'column',\n },\n '@media(max-width: 375px)': {\n justifyContent: 'space-between',\n },\n },\n // ** end **\n\n // ** list view style **\n listingsCardListViewStyle: {\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'space-between',\n alignItems: 'center',\n '@media(max-width: 1180px)': {\n justifyContent: 'center',\n },\n },\n // ** end **\n\n // ** map view style **\n listingsCardMapViewStyle: {\n width: '100%',\n height: '753px',\n borderRadius: '16px',\n overflow: 'hidden',\n '@media(max-width: 1200px)': { height: '769px' },\n '@media(max-width: 650px)': { height: '440px' },\n },\n // ** end **\n\n // ** not found error style **\n noListingsFoundStyle: {\n width: '100%',\n margin: '100px 0',\n textAlign: 'center',\n '@media(max-width: 768px)': { margin: '80px 0' },\n '@media(max-width: 530px)': { margin: '60px 0' },\n },\n noListingsFoundContainerStyle: { width: '100%' },\n errorImageStyle: {\n maxWidth: '260px',\n width: '100%',\n margin: '40px auto',\n '& img': { width: '100%' },\n },\n errorMsgContainerStyle: { width: '100%' },\n errorMsgTitleStyle: {\n fontSize: '32px',\n fontWeight: 800,\n color: Colors.TextBlack,\n '@media(max-width: 530px)': { fontSize: '24px' },\n '@media(max-width: 360px)': { fontSize: '21px' },\n },\n errorMsgTextStyle: {\n fontSize: '16px',\n fontWeight: 500,\n color: Colors.TextBlack,\n lineHeight: '68px',\n },\n // ** end **\n }),\n { index: 1 }\n);\n","import React, { useContext } from 'react';\nimport GoogleMapReact from 'google-map-react';\nimport { ListingsCardItem, CustomMarker } from './core';\nimport { listingsCardStyle } from './style';\nimport {getValDependsOnLength, Images, ViewAsContext, FindLoad, ListingFiltersContext} from 'utils';\nimport { Loader } from 'components';\n\nconst defaultMapOptions = {\n fullscreenControl: false,\n keyboardShortcuts: false,\n};\n\nconst GOOGLE_MAPS_API_KEY = '';\n\nexport const ListingsCard = ({ listingList }) => {\n const classes = listingsCardStyle();\n const listingFilterLoader = FindLoad('GET_LISTINGS_BY_FILTERS');\n const userListingFilterLoader = FindLoad('GET_LISTINGS_BY_USER_ID_FILTER');\n const { view } = useContext(ViewAsContext);\n const { mapCenter, zoom, handleLatLngRequest, handleZoomRequest } = useContext(ListingFiltersContext);\n const listingsCardClassName =\n view === 'gallery'\n ? classes.listingsCardStyle\n : view === 'list'\n ? classes.listingsCardListViewStyle\n : view === 'map'\n ? classes.listingsCardMapViewStyle\n : '';\n\n\n\n return (\n \n
\n )}\n \n 
\n {propertyType !== 'OTHER' &&
\n {makeCapitalize(propertyType)}
}\n\n {!!street ? (\n <>\n
\n {getLimitedVal(street, 15)}
\n{getLimitedVal(addressDisplay, 20)}
\n \n ) : (\n{getLimitedVal(addressDisplay, 30)}
\n )}\n {!!price && (\n\n {`$${getValDependsOnLength(price)}`} {'SF/YR'} \n
\n )}\n\n
\n );\n};\n","import { Images, Colors } from 'utils';\nimport { makeStyles } from '@material-ui/core/styles';\n\nexport const listingDetailsStyle = makeStyles(\n () => ({\n listingDetailsBoxStyle: {\n width: '100%',\n display: 'flex',\n justifyContent: 'center',\n },\n listingDetailsBoxContainerStyle: {\n maxWidth: '1440px',\n width: '100%',\n padding: '0px 80px 128px',\n '@media(max-width: 1200px)': {\n paddingLeft: '70px',\n paddingRight: '70px',\n },\n '@media(max-width: 768px)': {\n paddingLeft: '37px',\n paddingRight: '37px',\n },\n '@media(max-width: 400px)': {\n paddingLeft: '16px',\n paddingRight: '16px',\n },\n },\n listingDetailsTitleStyle: {\n fontSize: '20px',\n fontWeight: 700,\n color: Colors.TextBlack,\n },\n propertyDetailsStyle: {\n width: '100%',\n marginTop: '44px',\n marginBottom: '80px',\n '@media(max-width: 1130px)': {\n marginTop: '64px',\n marginBottom: '64px',\n },\n '@media(max-width: 500px)': {\n marginTop: '48px',\n marginBottom: '48px',\n },\n },\n detailsListStyle: {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n flexWrap: 'wrap',\n marginTop: '32px',\n '@media(max-width: 1320px)': {\n justifyContent: 'space-between',\n },\n '& li': {\n marginRight: '25px',\n marginBottom: '16px',\n maxWidth: '400px',\n width: '100%',\n padding: '12px 16px',\n border: '1px solid #7572804D',\n backgroundColor: Colors.BackgroundWhite,\n borderRadius: '4px',\n '@media(max-width: 1440px)': {\n maxWidth: '380px',\n },\n '@media(max-width: 1380px)': {\n maxWidth: '360px',\n },\n '@media(max-width: 1320px)': {\n maxWidth: '460px',\n marginRight: 0,\n },\n '@media(max-width: 1110px)': {\n maxWidth: '400px',\n },\n '@media(max-width: 990px)': {\n maxWidth: '100%',\n marginRight: 0,\n },\n },\n },\n propDetailTextStyle: {\n fontSize: '16px',\n fontWeight: 600,\n color: Colors.TextBlack,\n display: 'flex',\n alignItems: 'center',\n '&:before': {\n content: \"''\",\n display: 'block',\n width: '24px',\n height: '24px',\n marginRight: '8px',\n backgroundImage: `url(${Images.checkmark})`,\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'contain',\n backgroundPosition: 'center',\n },\n },\n propDetailStyle: {\n fontWeight: 500,\n color: Colors.TextGray,\n marginLeft: '8px',\n },\n contactDetailsStyle: {\n width: '100%',\n display: 'flex',\n justifyContent: 'space-between',\n '@media(max-width: 1130px)': {\n flexWrap: 'wrap',\n justifyContent: 'center',\n },\n },\n decriptionBoxStyle: {\n maxWidth: '628px',\n width: '100%',\n marginRight: '25px',\n '@media(max-width: 1130px)': {\n maxWidth: '100%',\n marginRight: 0,\n },\n },\n listingDescriptionStyle: {\n fontSize: '16px',\n fontWeight: 500,\n color: Colors.TextGray,\n lineHeight: '24px',\n marginTop: '16px',\n },\n locationBoxStyle: {\n maxWidth: '465px',\n width: '100%',\n '@media(max-width: 1130px)': {\n maxWidth: '100%',\n marginTop: '64px',\n },\n },\n googleMapBoxStyle: {\n height: '240px',\n borderRadius: '8px',\n overflow: 'hidden',\n marginTop: '16px',\n marginBottom: '24px',\n '@media(max-width: 1130px)': {\n height: '340px',\n },\n '@media(max-width: 768px)': {\n height: '240px',\n },\n '@media(max-width: 500px)': {\n height: '178px',\n },\n },\n pinMarkerStyle: {\n display: 'flex',\n width: '150px',\n '& img': {\n width: '32px',\n height: '32px',\n },\n },\n titleAndAddressMarkerStyle: {\n maxWidth: '150px',\n width: '100%',\n fontSize: '14px',\n fontWeight: 500,\n color: Colors.ThemePink,\n lineHeight: '12px',\n },\n locationLinkStyle: {\n textDecoration: 'none',\n fontSize: '16px',\n fontWeight: 500,\n color: '#3377CC',\n display: 'inline-flex',\n alignItems: 'center',\n '&:before': {\n content: \"''\",\n display: 'block',\n width: '24px',\n height: '24px',\n marginRight: '8px',\n backgroundImage: `url(${Images.address})`,\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'contain',\n backgroundPosition: 'center',\n },\n },\n }),\n { index: 1 }\n);\n","import {Images, Colors} from 'utils';\nimport {makeStyles} from '@material-ui/core/styles';\n\nexport const listingDetailsCoreStyle = makeStyles(() => ({\n listingGalleryBoxStyle: {\n width: '100%',\n display: 'flex',\n justifyContent: 'center',\n },\n listingGalleryBoxContainerStyle: {\n maxWidth: '1440px',\n width: '100%',\n padding: '0px 80px 128px',\n '@media(max-width: 1200px)': {\n paddingLeft: '70px',\n paddingRight: '70px',\n },\n '@media(max-width: 768px)': {\n paddingLeft: '37px',\n paddingRight: '37px',\n },\n '@media(max-width: 400px)': {\n paddingLeft: '16px',\n paddingRight: '16px',\n },\n },\n listingDetailsStyle: {\n width: '100%',\n display: 'flex',\n '@media(max-width: 1130px)': {\n flexWrap: 'wrap',\n justifyContent: 'center',\n },\n },\n listingPhotosStyle: {\n width: '100%',\n position: 'relative',\n '&.reactCarousel .slider-wrapper.axis-horizontal .slider .slide': {\n maxWidth: '628px',\n height: '420px',\n '& > div > img': {\n width: '100%',\n height: '420px',\n objectFit: 'cover',\n },\n },\n '&.reactCarousel .carousel.carousel-slider .control-arrow': {\n transition: 'background-color 0.1s linear',\n top: '50%',\n opacity: 1,\n transform: 'translateY(-50%)',\n width: '40px',\n height: '40px',\n backgroundRepeat: 'no-repeat',\n backgroundSize: '20px',\n backgroundPosition: 'center',\n backgroundColor: Colors.BackgroundWhite,\n borderRadius: '50%',\n '&:first-of-type': {\n backgroundImage: `url(${Images.arrowLeft})`,\n left: '8px',\n },\n '&:last-of-type': {\n backgroundImage: `url(${Images.arrowRight})`,\n right: '8px',\n },\n '&:hover': {backgroundColor: Colors.BackgroundWhiteOff},\n '&:before': {display: 'none'},\n },\n },\n carouselStyle: {width: '100%'},\n photoStyle: {\n width: '100%',\n borderRadius: '16px',\n overflow: 'hidden',\n '& img': {width: '100%'},\n },\n viewAllPhotosButnStyle: {\n position: 'absolute',\n top: '16px',\n left: '15px',\n backgroundColor: Colors.BackgroundWhite,\n color: '#0273BB',\n maxWidth: '155px',\n border: 'none',\n textAlign: 'center',\n transition: 'background-color 0.1s linear',\n '&:hover': {backgroundColor: Colors.BackgroundWhiteOff},\n '@media(max-width: 768px)': {\n display: 'none',\n },\n '&.smallDevice': {\n position: 'unset',\n opacity: 1,\n textDecoration: 'underline',\n padding: 0,\n textAlign: 'right',\n display: 'none',\n '@media(max-width: 768px)': {\n display: 'block',\n },\n },\n },\n smallInfoBoxStyle: {\n width: '100%',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n padding: '16px',\n },\n createdAtStyle: {\n display: 'inline-block',\n fontSize: '14px',\n fontWeight: 500,\n color: Colors.TextGray,\n },\n lisingInfoStyle: {\n width: '100%',\n marginLeft: '24px',\n paddingBottom: '48px',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n '@media(max-width: 1130px)': {\n marginLeft: 0,\n marginTop: '28px',\n paddingBottom: 0,\n },\n '@media(max-width: 500px)': {\n marginTop: '20px',\n },\n },\n titleAndAddressStyle: {\n fontSize: '24px',\n fontWeight: 600,\n color: '#0273BB',\n },\n priceAndSizeStyle: {\n margin: '24px 0',\n '& li:first-of-type': {marginBottom: '16px'},\n '& li p': {\n display: 'flex',\n alignItems: 'center',\n fontSize: '16px',\n fontWeight: 600,\n color: Colors.TextBlack,\n '&:before': {\n content: \"''\",\n display: 'block',\n width: '24px',\n height: '24px',\n marginRight: '8px',\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'contain',\n backgroundPosition: 'center',\n },\n },\n '& li span': {\n display: 'inline-block',\n margin: '4px 32px',\n fontSize: '16px',\n color: Colors.TextGray,\n fontWeight: 600,\n '& em': {\n fontSize: '14px',\n fontWeight: 500,\n },\n },\n '& li:last-of-type span': {fontWeight: 500},\n },\n priceStyle: {\n '&:before': {backgroundImage: `url(${Images.price})`},\n },\n sizeStyle: {\n '&:before': {backgroundImage: `url(${Images.size})`},\n },\n viewOnMapButnStyle: {\n backgroundColor: Colors.ThemePink,\n color: Colors.TextWhite,\n maxWidth: '300px',\n transition: 'background-color 0.1s linear',\n '&:hover': {backgroundColor: '#d52f4c'},\n '@media(max-width: 500px)': {\n maxWidth: '100%',\n },\n },\n underlineStyle: {margin: '24px 0'},\n userInfoStyle: {\n display: 'flex',\n alignItems: 'center',\n marginBottom: '26px'\n },\n userImageStyle: {\n width: '52px',\n height: '52px',\n border: '2px solid #FFFFFF',\n borderRadius: '40px',\n filter: 'drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.161))',\n '& img': {\n width: '48px',\n height: '48px',\n borderRadius: '40px',\n objectFit: 'cover',\n },\n },\n userFullNameStyle: {\n fontSize: '20px',\n fontWeight: 600,\n color: '#0273BB',\n marginLeft: '26px',\n },\n userContactsListStyle: {\n '& li': {\n fontSize: '16px',\n fontWeight: 500,\n color: Colors.TextBlack,\n marginBottom: '8px',\n },\n },\n contactLinkStyle: {\n color: Colors.TextGray,\n textDecoration: 'none',\n marginLeft: '8px',\n },\n galleryStyle: {\n width: '100%',\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fill, minmax(302px, 1fr))',\n gridAutoRows: '302px',\n gridGap: '24px',\n '@media(max-width: 701px)': {gridAutoRows: '502px'},\n '@media(max-width: 601px)': {gridAutoRows: '402px'},\n '@media(max-width: 501px)': {gridAutoRows: '302px'},\n },\n photoContainerStyle: {\n position: 'relative',\n '& img': {\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n },\n },\n photoOverlayStyle: {\n position: 'absolute',\n top: 0,\n left: 0,\n zIndex: 9,\n width: '100%',\n height: '100%',\n cursor: 'pointer',\n backgroundColor: '#0000001A',\n transition: 'background-color 0.2s linear',\n '&:hover': {backgroundColor: '#00000066'},\n },\n photoModalStyle: {\n backgroundColor: '#2B273C',\n maxWidth: '100%',\n width: '100%',\n height: '100%',\n position: 'fixed',\n padding: '80px',\n top: 0,\n left: 0,\n zIndex: 9999,\n '@media(max-width: 860px)': {\n padding: '24px',\n },\n '@media(max-width: 500px)': {\n padding: ' 24px 0',\n },\n },\n photoModalContentStyle: {\n backgroundColor: '#2B273C',\n position: 'relative',\n top: 0,\n left: '50%',\n transform: 'translateX(-50%)',\n zIndex: 99999,\n maxWidth: '1200px',\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n '& .carousel .slider-wrapper': {\n width: '628px',\n height: '414px',\n '@media(max-width: 1200px)': {\n width: '628px',\n height: '414px',\n },\n '@media(max-width: 600px)': {\n width: '343px',\n height: '224px',\n },\n },\n '& .carousel.carousel-slider .control-arrow': {\n transition: 'opacity 0.1s linear',\n top: '50%',\n transform: 'translateY(-50%)',\n width: '36px',\n height: '36px',\n backgroundRepeat: 'no-repeat',\n backgroundSize: '20px',\n backgroundPosition: 'center',\n border: '2px solid #FFFFFF',\n borderRadius: '50%',\n '&:first-of-type': {\n backgroundImage: `url(${Images.arrowWhiteLeft})`,\n },\n '&:last-of-type': {\n backgroundImage: `url(${Images.arrowWhiteRight})`,\n },\n '&:before': {display: 'none'},\n },\n },\n closeButnStyle: {\n position: 'absolute',\n top: 0,\n left: 0,\n backgroundColor: 'inherit',\n border: 'none',\n outline: 'none',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n fontSize: '16px',\n fontWeight: 500,\n color: Colors.TextWhite,\n '& img': {marginRight: '8px'},\n '@media(max-width: 860px)': {left: '50px'},\n },\n carouselContainerStyle: {\n paddingTop: '47px',\n position: 'relative',\n maxWidth: '800px',\n width: '100%',\n maxHeight: '656px',\n '& .carousel .slider-wrapper.axis-horizontal .slider .slide': {\n height: '420px',\n '& > div': {maxHeight: '100%', height: '100%'},\n '@media(max-width: 600px)': {\n width: '343px',\n height: '224px',\n },\n },\n },\n photoBoxInModalStyle: {\n '& img': {\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n },\n },\n carouselStatusStyle: {\n position: 'absolute',\n top: 0,\n right: '50%',\n transform: 'translateX(50%)',\n fontSize: '16px',\n fontWeight: 500,\n color: Colors.TextWhite,\n },\n listingDetailsBuildingStyle: {\n width: '100%',\n height: '420px',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: Colors.BackgroundWhiteOff,\n borderRadius: '16px',\n },\n }),\n {index: 1}\n);\n","import React from 'react';\nimport { useHistory } from 'react-router';\nimport { formatPhoneNumber, handleCreatedAtDate, Images, makeCapitalize } from 'utils';\nimport { ViewMoreButton } from 'components';\nimport { listingDetailsCoreStyle } from './styles';\nimport 'react-responsive-carousel/lib/styles/carousel.min.css';\nimport { Carousel } from 'react-responsive-carousel';\n\nexport const PhotosAndInfoBox = ({\n listingId,\n addressDisplay,\n price,\n size,\n user,\n createdAt,\n listingLocationUrl,\n listingImages = [],\n mainImage,\n\n}) => {\n const classes = listingDetailsCoreStyle();\n const history = useHistory();\n\n const goToListingGalleryPage = () => {\n if (isMyListingsDetailsPage) {\n history.push(`/my_listings/listing_details-${listingId}/gallery`);\n } else {\n\n const pageEvent = {\n event: \"VIEW_DETAILS\",\n list_id: listingId,\n };\n window?.dataLayer.push(pageEvent);\n\n history.push(`/listings/listing_details-${listingId}/gallery`);\n }\n };\n\n const priceDisplay =\n price && price !== '0' ? (\n <>\n {`$${price}`} SQ/YR \n \n ) : (\n 'Not Set'\n );\n const sizeDisplay =\n size.sizeStart && size.sizeEnd ? (\n <>\n {`${size.sizeStart} - ${size.sizeEnd}`} sq.ft.\n \n ) : size.sizeStart ? (\n <>\n {`Over ${size.sizeStart}`} sq.ft.\n \n ) : size.sizeEnd ? (\n <>\n {`Under ${size.sizeEnd}`} sq.ft.\n \n ) : (\n 'Not Set'\n );\n\n const userFullNameDisplay = `${makeCapitalize(`${user?.firstName ? user?.firstName : ''} ${user?.lastName ? user?.lastName : ''}`)}`;\n const createdAtDisplay = handleCreatedAtDate(createdAt, 10, '/');\n\n const indicatorsAreShown = window.innerWidth <= 768;\n const isMyListingsDetailsPage = window.location.pathname === `/my_listings/listing_details-${listingId}`;\n\n const modifiedListingImages = listingImages.filter((image) => image.url !== mainImage?.url);\n modifiedListingImages.unshift(mainImage);\n\n return (\n \n {(!!listingFilterLoader.length || !!userListingFilterLoader.length) && view !== 'map' ? (\n \n ) : !listingList.length && view !== 'map' ? (\n
\n \n
\n ) : (\n \n
\n \n 
\n
\n \n
\n Whoops! No listings found
\nPlease try again.
\n\n {view === 'map' ? (\n {\n handleLatLngRequest(mapProps.center.lat().toString(), mapProps.center.lng().toString());\n }}\n onZoomAnimationEnd={(zoomInteger) => handleZoomRequest(zoomInteger)}>\n {listingList.map((listing, index) => (\n \n ))}\n \n ) : (\n listingList.map((listing, index) => {\n const { address, price, size, mainImage } = listing;\n const { street } = address;\n const listingPrice = getValDependsOnLength(price);\n const listingMinSize = getValDependsOnLength(size.start ? size.start : '');\n const listingMaxSize = getValDependsOnLength(size.end && size.end !== '0' ? size.end : '');\n\n // if( listing?.promotion?.status === PROMOTED) {\n return (\n \n );\n // }\n })\n )}\n
\n )}\n \n
\n );\n};\n","import React, { useEffect, useState } from 'react';\nimport { FindLoad, Images } from 'utils';\nimport { listingDetailsCoreStyle } from './styles';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useParams } from 'react-router';\nimport { listingActions } from 'store';\nimport { CloseModalButton, CustomBreadcrumbs, Loader } from 'components';\nimport 'react-responsive-carousel/lib/styles/carousel.min.css';\nimport { Carousel } from 'react-responsive-carousel';\nimport { SET_LISTING_BY_ID } from 'store/listings/listings.types';\n\nexport const ListingGallery = () => {\n const classes = listingDetailsCoreStyle();\n\n const params = useParams();\n const _id = params.id;\n\n const dispatch = useDispatch();\n\n const [isOpen, setIsOpen] = useState(false);\n const [selectedPhoto, setSelectedPhoto] = useState(1);\n\n const arrowsAreShown = window.innerWidth > 1200;\n\n const listingById = useSelector((state) => state.listings.listingById);\n const loader = !!FindLoad('GET_LISTING_BY_ID').length;\n\n useEffect(() => {\n dispatch(listingActions.getListingById(_id));\n return () => {\n dispatch({\n type: SET_LISTING_BY_ID,\n payload: { listingById: null },\n });\n };\n }, [dispatch, _id]);\n\n return loader ? (\n \n {!listingImages.length ? (\n <>\n \n {modifiedListingImages.map((image, index) => (\n \n
\n \n \n
\n \n {`Created: ${createdAtDisplay}`}\n
\n \n ) : (\n <>\n \n 
\n
\n ))}\n \n \n {`Created: ${createdAtDisplay}`}\n \n
\n \n )}\n \n window.open(listingLocationUrl, '_blank')}\n butnViewingText={'View on Map'}\n />\n
\n\n {user?.firstName &&\n
\n {addressDisplay}
\n- \n
- \n
Price
\n {priceDisplay}\n \n - \n
Size
\n {sizeDisplay}\n \n
\n\n {user?.firstName &&\n
\n
\n }\n\n \n 
\n
\n {userFullNameDisplay}
\n- \n {user?.phone &&\n
- \n
\n Tell:\n \n {formatPhoneNumber(user?.phone)}\n \n
\n \n }\n {user?.email &&\n - \n
\n Email:\n \n {user?.email}\n \n
\n \n }\n
\n
\n \n );\n};\n","import React, {useEffect} from 'react';\nimport {listingDetailsStyle} from './styles';\nimport {PhotosAndInfoBox} from './core';\nimport {Images, makeCapitalize, getAddressText, NON_PROMOTED, PROMOTED} from 'utils';\nimport GoogleMapReact from 'google-map-react';\nimport ReactHtmlParser from 'react-html-parser';\nimport {useDispatch} from \"react-redux\";\nimport {paymentActions} from \"store\";\n\nconst Marker = ({children}) => <>{children};\n\nconst defaultMapOptions = {\n fullscreenControl: false,\n zoomControl: false,\n keyboardShortcuts: false,\n};\n\nexport const ListingDetails = ({details}) => {\n const dispatch = useDispatch()\n const classes = listingDetailsStyle();\n const {\n _id,\n address,\n createdAt,\n description,\n leaseType,\n nPrice,\n number,\n parking,\n price,\n propertyType,\n size,\n user,\n zoning,\n lotSize,\n capRate,\n images,\n mainImage,\n } = details ? details : {};\n const {lat, lng} = address ? address : {};\n const {start: sizeStart, end: sizeEnd} = size ? size : {};\n const {firstName, middleName, lastName, phone, email, avatar} = user ? user : {};\n const currentUser = JSON.parse(localStorage.getItem('userInfo'));\n\n const PROPERTY_DETAILS = [\n {\n detailText: 'Listing Number:',\n detail: number === 0 ? number + '' : number,\n },\n {detailText: 'Property Type:', detail: makeCapitalize(propertyType)},\n {detailText: 'Zoning:', detail: zoning},\n {detailText: 'Parking:', detail: parking},\n {detailText: 'Lot Size:', detail: lotSize ? `${lotSize} sq.ft.` : ''},\n {detailText: 'Lease Type:', detail: leaseType === 'NNN' ? leaseType : makeCapitalize(leaseType)},\n {detailText: 'NNN Price:', detail: nPrice ? `$${nPrice}` : ''},\n {detailText: 'Cap Rate:', detail: capRate ? `${capRate}%` : ''},\n ];\n const filteredDetails = PROPERTY_DETAILS.filter((dtl) => dtl.detail);\n const LISTING_LOCATION_URL = `https://maps.google.com/?q=${lat},${lng}&ll=${lat},${lng}&z=4&t=m`;\n const addressDisplay = getAddressText(address);\n const addressMapView = addressDisplay ? addressDisplay.split(', ').reverse().join(', ') : '';\n\n useEffect(() => {\n if (details && details?.user?._id !== currentUser?.id && details?.promotion?.status === PROMOTED) {\n dispatch(paymentActions.impression(details?._id))\n }\n }, [details])\n\n return (\n \n
\n \n {listingById?.images.map((image, index) => (\n
\n {isOpen && (\n \n \n {\n setIsOpen(true);\n setSelectedPhoto(index);\n }}\n />\n
\n ))}\n \n
\n )}\n \n setIsOpen(false)}\n butnLabel={\n <>\n 
\n Close\n \n }\n />\n
\n \n setSelectedPhoto(index)}>\n {listingById?.images.map((image, index) => (\n
\n {`${selectedPhoto + 1}/${listingById?.images.length}`}
\n\n \n
\n ))}\n \n \n
\n );\n};\n","import {makeStyles} from \"@material-ui/core/styles\";\nimport {Colors} from \"utils\";\n\nexport const billingStyles = makeStyles(() => ({\n billingFragmentsWrapper: {\n display: 'flex',\n margin: '0 auto',\n flexDirection: 'column',\n alignItems: 'center',\n width: '100%'\n },\n whiteWrapper: {\n background: '#FFFFFF',\n boxShadow: '0px 0px 6px rgba(0, 0, 0, 0.16)',\n borderRadius: '12px',\n padding: '24px',\n marginTop: '24px',\n width: '100%',\n maxWidth: '897px',\n height: 'auto',\n '@media(min-width: 320px)': {\n padding: '16px',\n },\n '@media(min-width: 768px)': {\n padding: '24px',\n },\n },\n changePayment: {\n fontWeight: '400',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#000000',\n margin: '16px 0'\n },\n paymentCardWrapper: {\n background: '#FFFFFF',\n boxShadow: '0px 0px 6px rgba(0, 0, 0, 0.16)',\n borderRadius: '4px',\n padding: '16px',\n width: '100%',\n height: 'auto',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'flex-start',\n '@media(min-width: 320px)': {\n flexDirection: 'column'\n },\n '@media(min-width: 768px)': {\n flexDirection: 'row'\n },\n },\n cardInfo: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n cardNumberYear: {\n marginLeft: '16px',\n fontWeight: '400',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#2B273C',\n },\n buttonsWrapper: {\n display: 'flex',\n alignItems: 'center',\n width: '100%',\n '@media(min-width: 320px)': {\n justifyContent: 'flex-end',\n marginTop: '24px',\n },\n '@media(min-width: 768px)': {\n width: 'auto',\n marginTop: '0'\n },\n '& button': {\n border: 'none',\n background: 'transparent',\n alignItems: 'center',\n display: 'flex',\n '& p': {\n fontWeight: '600',\n fontSize: '16px',\n lineHeight: '24px',\n },\n '& img': {\n marginRight: '6px',\n },\n },\n },\n edit: {\n color: '#0073BB',\n marginRight: '10px',\n },\n delete: {\n color: '#FE385C',\n },\n invoicesHead: {\n height: '50px',\n padding: '15px 16px',\n fontWeight: '600',\n fontSize: '14px',\n lineHeight: '20px',\n color: '#2B273C',\n width: '100%',\n display: 'flex',\n justifyContent: 'space-between',\n margin: '24px 0 8px',\n },\n invoicesBody: {\n borderRadius: '4px',\n marginBottom: '8px',\n fontWeight: '500',\n fontSize: '14px',\n lineHeight: '20px',\n color: '#757280',\n display: 'flex',\n justifyContent: 'space-between',\n width: '100%',\n boxShadow: '0px 0px 6px rgba(0, 0, 0, 0.16)',\n padding: '14px 16px',\n alignItems: 'center',\n },\n actionButtonsWrapper: {\n display: 'flex',\n alignItems: 'center',\n '& button': {\n border: 'none',\n background: 'transparent',\n }\n },\n paymentModal: {\n position: 'fixed',\n bottom: '50%',\n right: '50%',\n transform: 'translate(50%, 50%)',\n zIndex: 99999,\n maxWidth: '464px',\n width: '90%',\n maxHeight: '500px',\n height: 'auto',\n overflow: 'auto',\n paddingTop: '16px',\n backgroundColor: Colors.BackgroundWhite,\n borderRadius: '16px',\n display: 'flex',\n flexDirection: 'column',\n padding: '24px',\n },\n flexEnd: {\n display: 'flex',\n justifyContent: 'flex-end',\n width: '100%',\n '& button': {\n background: 'transparent',\n border: 'none',\n\n }\n },\n deleteTitle: {\n fontWeight: '800',\n fontSize: '24px',\n lineHeight: '36px',\n color: '#2B273C',\n },\n deleteSubTitle: {\n fontWeight: '400',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#000000',\n margin: '32px 0'\n },\n alignCenter: {\n display: 'flex',\n alignItems: 'center',\n },\n desktopView: {\n height:'300px',\n overflow:'auto',\n padding:'0 6px',\n '@media(min-width: 320px)': {\n display: 'none',\n },\n '@media(min-width: 768px)': {\n display: 'block',\n },\n },\n mobileView: {\n height:'420px',\n overflow:'auto',\n padding:'0 6px',\n '@media(min-width: 320px)': {\n display: 'block',\n },\n '@media(min-width: 768px)': {\n display: 'none',\n },\n },\n textAndDescription: {\n fontWeight: '600',\n fontSize: '14px',\n lineHeight: '20px',\n color: '#2B273C',\n marginBottom: '12px',\n '& span': {\n fontWeight: '500',\n fontSize: '14px',\n lineHeight: '20px',\n color: '#757280',\n },\n },\n noInvoicesYet: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n fontWeight: '400',\n fontSize: '16px',\n lineHeight: '24px',\n textAlign: 'center',\n color: '#757280',\n height: '200px',\n },\n addCardWrapper: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n width: '100%',\n height: '100%',\n },\n addButton: {\n display: 'flex',\n alignItems: 'center',\n background: 'transparent',\n border: 'none',\n fontWeight: '600',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#FE385C',\n cursor:'pointer',\n '& img':{\n marginRight:'8px'\n },\n },\n pdfReader:{\n width:'100%',\n height:'100%',\n position:'fixed',\n background:'rgb(50, 54, 57)',\n top:'0',\n zIndex:999999\n },\n closeFiltersModalStyle:{\n width:'30px',\n height:'30px',\n display:'flex',\n justifyContent:'center',\n alignItems:'center',\n background:'white',\n borderRadius:'40px',\n border:'none',\n }\n\n}))","import {useEffect} from \"react\";\nimport {useDispatch} from \"react-redux\";\nimport {FindLoad, FindSuccess} from \"utils\";\nimport {httpRequestsOnSuccessActions, paymentActions} from \"store\";\nimport {billingStyles} from \"./styles\";\nimport {CreateCancelButtons} from \"components\";\n\nconst ACTION_TYPE = 'DELETE_PAYMENT'\nexport const DeleteCard = ({onClose}) => {\n const user = JSON.parse(localStorage.getItem('userInfo'));\n const classes = billingStyles()\n const dispatch = useDispatch()\n const loader = FindLoad(ACTION_TYPE)\n const success = FindSuccess(ACTION_TYPE)\n\n const handleDelete = () => {\n dispatch(paymentActions.deletePayment(user?.id))\n }\n\n useEffect(() => {\n if (success?.length) {\n dispatch(httpRequestsOnSuccessActions.removeSuccess(ACTION_TYPE))\n }\n }, [success])\n\n return (\n \n \n
\n \n {filteredDetails.length !== 0 && (\n <>\n
\n Property Details
\n- \n {filteredDetails.map((propDetail, index) => (\n
- \n
\n {propDetail.detailText}\n {propDetail.detail}\n
\n \n ))}\n
\n {description && description !== '
\n \n
\n )}\n \n Description
\n{ReactHtmlParser(description)}
\n\n \n
\n )\n}","import {billingStyles} from \"./styles\";\nimport {Elements} from \"@stripe/react-stripe-js\";\nimport CheckoutForm from \"../../../pages/promotion/core/checkoutForm\";\nimport {loadStripe} from \"@stripe/stripe-js\";\n\n\n// const stripePromise = loadStripe('pk_test_51MfratLAkwdqYCSYf1eRsihPMam37GmLHUIXsgZXXYxlO3kS1XX4o6ptNACFivptJUezorigv5QL4W5nIQHFgVtr00tXNFUnCr');\nconst stripePromise = loadStripe(`${process.env.REACT_APP_STRIPE_PKEY}`);\n\nexport const EditCard = ({onClose, handleCreate}) => {\n const classes = billingStyles()\n\n return (\n Delete Card?
\nDeleting your card you can’t promoted your listing item. You must add\n new card.
\n\n \n \n \n
\n )\n}","import React, {useState} from \"react\";\nimport {billingStyles} from \"./styles\";\nimport {globalStyles, SimpleModal} from \"components\";\nimport {Images} from \"utils\";\nimport {DeleteCard} from \"./deleteCard\";\nimport {EditCard} from \"./editCard\";\n\nexport const PaymentMethod = ({payment}) => {\n const classes = billingStyles()\n const globalClasses = globalStyles()\n const [open, setOpen] = useState('')\n\n const handleClose = () => {\n setOpen('')\n }\n\n return (\n <>\n Payment Method
\n\n
\n\n Payment method
\nChange how you pay your promotions.
\n\n {payment ?\n\n
\n :\n \n \n\n
\n \n
\n {`**** **** **** ${payment?.last4}`}
\n{`Expiry ${payment?.exp_month}/${payment?.exp_year}`}
\n\n \n \n
\n \n
\n }\n \n \n
\n \n \n
\n {open === 'delete' ?\n \n
\n\n {show &&\n Invoices
\n\n {invoices?.length ?\n <>\n
\n\n \n
\n {invoices.map((i, j) => (\n Description
\nDate Paid
\nAmount
\nAction
\n\n
\n ))}\n \n :\n {i?.description ? i?.description : 'Not Set'}
\n{moment(i?.createdAt).format(\"ll\")}
\n$15.00
\n\n \n {/**/}\n
\n \n
\n }\n No Invoices yet
\n\n {invoices?.length ?\n invoices.map((i, j) => (\n
\n \n
\n ))\n :\n \n Description: \n {i?.description ? i?.description : 'Not Set'}\n
\n\n Date Paid: \n {moment(i?.createdAt).format(\"ll\")}\n
\n\n Amount: \n $15\n
\n\n \n {/**/}\n
\n \n
\n }\n No Invoices yet
\n\n \n
\n }\n \n )\n}","import React from \"react\";\nimport {useSelector} from \"react-redux\";\nimport {Invoices, PaymentMethod, billingStyles} from \"./core\";\n\nexport const BillingFragments = ({}) => {\n const classes = billingStyles()\n const payment = useSelector((state) => state.payment.myPayment);\n const invoices = useSelector((state) => state.payment.invoices);\n\n return (\n \n setShow(null)}>\n 
\n \n
\n \n \n \n
\n )\n}","import {makeStyles} from \"@material-ui/core/styles\";\n\n\nexport const BrokersFragmentStyles = makeStyles(() => ({\n\n brokersFragmentWrapper: {\n padding: '50px 80px',\n display: 'flex',\n flexDirection: 'column',\n maxWidth: '1440px',\n margin: '0 auto',\n minHeight: '100vh',\n '@media(min-width: 320px)': {\n padding: '24px 16px',\n },\n '@media(min-width: 768px)': {\n padding: '42px 70px',\n },\n '@media(min-width: 1280px)': {\n padding: '50px 80px',\n }\n },\n\n brokersWrapper: {\n height: '70vh',\n overflow: 'auto',\n width: '100%',\n padding: '5px',\n },\n\n breadcrumb: {\n display: 'flex',\n\n '& a': {\n fontWeight: '500',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#757280',\n textDecoration: 'none'\n },\n '& p': {\n fontWeight: '500',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#2B273C',\n }\n },\n\n title: {\n fontWeight: '800',\n fontSize: '24px',\n lineHeight: '36px',\n color: '#2B273C',\n marginBottom: '32px',\n },\n\n findWrapper: {\n display: 'flex',\n alignItems: 'center',\n width: '204px',\n height: '40px',\n background: '#F4F4F4',\n borderRadius: '24px',\n padding: '0 12px',\n marginBottom: '31px',\n '@media(min-width: 320px)': {\n width:'100%',\n maxWidth:'626px',\n },\n '@media(min-width: 1280px)': {\n width: '204px',\n }\n },\n\n searchInput: {\n height: '40px',\n width: '100%',\n background: 'transparent',\n border: 'none',\n outline: 'none',\n marginLeft: '8px',\n fontWeight: '500',\n fontSize: '14px',\n lineHeight: '21px',\n color: '#757280',\n },\n\n brokerItem: {\n height: 'auto',\n background: '#FFFFFF',\n boxShadow: '0px 0px 12px rgba(0, 0, 0, 0.1)',\n borderRadius: '12px',\n padding: '16px',\n marginBottom: '8px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n cursor: 'pointer',\n\n '@media(min-width: 320px)': {\n flexDirection: 'column',\n alignItems: 'flex-start',\n },\n '@media(min-width: 1280px)': {\n flexDirection: 'row',\n alignItems: 'center',\n },\n\n },\n\n brokerInfo: {\n display: 'flex',\n alignItems: 'center',\n width: '100%',\n '@media(min-width: 320px)': {\n marginBottom: '16px',\n },\n '@media(min-width: 1280px)': {\n marginBottom: '0',\n width: '310px'\n },\n\n\n '& p': {\n // fontWeight: '700',\n // fontSize: '18px',\n // lineHeight: '24px',\n // color: '#2B273C',\n // marginLeft: '16px',\n },\n },\n\n textRow: {\n width: '100%',\n fontWeight: '700',\n fontSize: '18px',\n lineHeight: '24px',\n color: '#2B273C',\n marginLeft: '16px',\n },\n\n grayItem: {\n display: 'flex',\n alignItems: 'center',\n height: '44px',\n width: '100%',\n background: '#F9F9F9',\n borderRadius: '4px',\n padding: '10px 12px',\n marginRight: '16px',\n\n '@media(min-width: 320px)': {\n marginBottom: '8px',\n marginRight: 0\n },\n '@media(min-width: 1280px)': {\n marginBottom: '0',\n marginRight: '16px',\n },\n },\n\n grayItemTitle: {\n fontWeight: '600',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#2B273C',\n marginLeft: '10px'\n },\n\n grayItemSbTitle: {\n fontWeight: '400',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#2B273C',\n marginLeft: '4px',\n\n },\n\n grayItemsWrapper: {\n display: 'flex',\n alignItems: 'center',\n width: '100%',\n\n '@media(min-width: 320px)': {\n flexDirection: 'column'\n },\n '@media(min-width: 1280px)': {\n flexDirection: 'row'\n },\n\n\n '& a': {\n textDecoration: 'none',\n color: '#2B273C',\n width: '100%',\n '@media(min-width: 1280px)': {\n marginRight: '16px',\n },\n\n },\n },\n\n brokerInfoFragmentWrapper: {\n maxWidth: '1440px',\n margin: '0 auto',\n display: 'flex',\n flexDirection: 'column',\n '@media(min-width: 320px)': {\n padding: '0 16px',\n },\n '@media(min-width: 768px)': {\n padding: '0 32px',\n },\n '@media(min-width: 1280px)': {\n padding: '0 80px',\n },\n },\n\n grayBack: {\n background: '#F4F4F4',\n height: '100%',\n },\n\n whiteSpaces: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column'\n },\n\n whiteSpaceWrapper: {\n padding: '24px',\n width: '100%',\n maxWidth: '896px',\n height: 'auto',\n marginBottom: '24px',\n background: '#FFFFFF',\n boxShadow: '0px 0px 6px rgba(0, 0, 0, 0.16)',\n borderRadius: '12px',\n \"@media(min-width: 320px)\": {\n padding: '16px',\n },\n \"@media(min-width: 768px)\": {\n padding: '24px',\n },\n \"@media(min-width: 1280px)\": {\n marginBottom: '16px',\n },\n },\n\n contactMeWrapper: {\n '@media(min-width: 320px)': {\n width: '100%',\n },\n '@media(min-width: 768px)': {\n width: 'auto',\n },\n },\n\n brokerInfoImage: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n width: '100%',\n\n '@media(min-width: 320px)': {\n flexDirection: 'column'\n },\n '@media(min-width: 768px)': {\n flexDirection: 'row',\n justifyContent: 'space-between',\n\n },\n },\n\n imageAndInfo: {\n display: 'flex',\n alignItems: 'center',\n\n '@media(min-width: 320px)': {\n flexDirection: 'column',\n textAlign: 'center',\n },\n '@media(min-width: 768px)': {\n flexDirection: 'row',\n textAlign: 'start',\n },\n\n },\n\n nameInfo: {\n marginLeft: '16px',\n '@media(min-width: 320px)': {\n marginLeft: 0,\n },\n '@media(min-width: 768px)': {\n marginLeft: '16px',\n }\n },\n\n name: {\n fontWeight: '800',\n fontSize: '24px',\n lineHeight: '36px',\n color: '#2B273C',\n '@media(min-width: 320px)': {\n marginTop: '16px'\n },\n '@media(min-width: 768px)': {\n marginTop: '0'\n },\n },\n\n license: {\n margin: '12px 0',\n fontWeight: '500',\n fontSize: '18px',\n lineHeight: '24px',\n color: '#757280',\n },\n\n company: {\n fontWeight: '700',\n fontSize: '18px',\n lineHeight: '24px',\n color: '#2B273C',\n },\n\n contactMe: {\n width: '128px',\n height: '40px',\n background: '#FE385C',\n borderRadius: '8px',\n fontWeight: '500',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#FFFFFF',\n border: 'none',\n\n '@media(min-width: 320px)': {\n width: '100%',\n marginTop: '16px'\n },\n '@media(min-width: 768px)': {\n width: '128px',\n marginTop: '0'\n },\n },\n\n cardTitle: {\n fontWeight: '800',\n fontSize: '18px',\n lineHeight: '28px',\n color: '#2B273C',\n marginBottom: '26px',\n },\n\n contactItem: {\n display: 'flex',\n alignItems: 'center',\n marginBottom: '24px',\n\n '@media(min-width: 320px)': {\n marginLeft:'6px',\n },\n // '@media(min-width: 768px)': {\n // width: '128px',\n // marginTop: '0'\n // },\n\n '& img': {\n marginRight: '10px',\n },\n\n '& a': {\n textDecoration: 'none',\n fontWeight: '600',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#2B273C',\n },\n '& p': {\n fontWeight: '600',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#2B273C',\n },\n },\n aboutBrokerInfo: {\n fontWeight: '400',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#2B273C',\n marginTop: '16px'\n },\n aboutMeWrapper: {\n marginBottom: '110px',\n width: '100%',\n maxWidth: '896px',\n },\n brokerAvatar: {\n width: '130px',\n height: '130px',\n borderRadius: '80px',\n objectFit: 'cover',\n '@media(min-width: 320px)': {\n width: '80px',\n height: '80px',\n },\n '@media(min-width: 768px)': {\n width: '102px',\n height: '102px',\n },\n '@media(min-width: 1280px)': {\n width: '130px',\n height: '130px',\n },\n },\n brokerListAvatar: {\n width: '50px',\n height: '50px',\n borderRadius: '40px',\n objectFit: 'cover',\n },\n noBrokersYet: {\n marginTop:'40px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n textAlign: 'center',\n flexDirection: 'column',\n width: '100%',\n height: 'auto',\n\n '& p': {\n fontWeight: '800',\n fontSize: '24px',\n lineHeight: '36px',\n textAlign: 'center',\n color: '#2B273C',\n marginTop:'30px',\n }\n }\n}))\n","import {BrokersFragmentStyles} from \"./styles\";\nimport {TextRow} from \"../../../utils\";\n\n\nexport const GrayItem = ({ icon, title, subtitle, right}) => {\n const classes = BrokersFragmentStyles()\n\n return(\n \n \n
\n )\n}","import {useEffect, useRef, useState} from \"react\";\nimport {useHistory} from \"react-router-dom\";\nimport {Images} from \"utils\";\nimport {GrayItem, BrokersFragmentStyles} from \"./core\";\nimport {RenderText} from \"../../utils/hooks/textResizer\";\n\nexport const BrokersFragment = ({brokers}) => {\n const classes = BrokersFragmentStyles()\n const history = useHistory()\n const [mapList, setMapList] = useState([])\n\n useEffect(() => {\n if (brokers?.brokers) {\n setMapList(brokers?.brokers)\n }\n }, [brokers])\n\n const handleRoute = (e, id) => {\n history.push(`broker/${id}`)\n }\n\n const handleFind = (e) => {\n const list = brokers?.brokers.filter((el) => el?.countryOfService.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1)\n setMapList(list)\n }\n\n const TextRow = ({ name, textWidth }) => {\n const text = (name ? name : 'Not Set') + '';\n const ref = useRef();\n return (\n {title}
\n\n
\n {RenderText(ref?.current?.offsetWidth ? ref?.current?.offsetWidth : 190, text, textWidth)}\n
\n );\n }\n\n const phoneText = window.innerWidth > 1279 && window.innerWidth < 1320 ? 'Phone:' : 'Phone Number:'\n\n return (\n \n
\n )\n}","import {BrokersFragmentStyles} from \"./styles\";\n\n\nexport const WhiteSpace = ({ children }) => {\n const classes = BrokersFragmentStyles()\n\n return(\n Find Broker
\n\n 
\n \n
\n \n {brokers?.brokers?.length ?\n <>\n {mapList?.length ?\n mapList?.map((i, k) => (\n
\n handleRoute(e, i?.id)} key={k} className={classes.brokerItem}>\n
\n ))\n :\n \n \n
\n \n \n
\n \n \n \n \n
\n \n 
\n
\n }\n \n :\n Search by County to
\n Find a Broker
\n \n
\n }\n No Brokers Yet
\n\n {children}\n
\n )\n}","import {BrokersFragmentStyles} from \"./core/styles\";\nimport {WhiteSpace} from \"./core/whiteSpace\";\nimport {Images} from \"utils\";\n\nexport const BrokerInfoFragment = ({info}) => {\n const classes = BrokersFragmentStyles()\n return (\n \n
\n )\n}","import {makeStyles} from \"@material-ui/core/styles\";\nimport {Colors} from \"utils\"\n\nexport const aboutUsFragments = makeStyles(() => ({\n cardRedWrapper: {\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n gap: '16px',\n borderRadius: '16px',\n backgroundColor: `${Colors.ThemePink}`,\n padding: '24px'\n },\n cardRedTitle: {\n color: `${Colors.TextWhite}`,\n fontSize: '24px',\n fontWeight: '800',\n lineHeight: '36px'\n },\n cardRedDescription: {\n color: `${Colors.TextWhite}`,\n fontSize: '16px',\n fontWeight: '400',\n lineHeight: '24px'\n },\n\n cardWithSvgWrapper: {\n width: '100%',\n display: 'flex',\n backgroundColor: `${Colors.BackgroundWhite}`,\n gap: '16px',\n padding: '16px',\n borderRadius: '16px',\n boxShadow: '0px 0px 12px 0px rgba(0, 0, 0, 0.10)',\n\n '@media(max-width: 768px)': {\n flexDirection: 'column'\n },\n },\n cardWithSvgSvg:{\n minWidth:32,\n minHeight:32\n },\n\n cardWithSvgDescription:{\n fontSize: '16px',\n fontWeight: '400',\n lineHeight: '24px'\n }\n}))","import React from 'react';\nimport {aboutUsFragments} from \"./styles\";\n\nexport const CardRed = ({title, description}) => {\n const classes = aboutUsFragments()\n return (\n \n\n \n\n
\n \n \n \n\n \n \n\n
\n \n
\n \n \n
\n \n
\n {`${info?.firstName} ${info?.lastName}`}
\n{info?.licenseNumber}
\nCompany:
\n \n \n \n
\n Contacts Info
\n \n\n 
\n Email: {info?.email} \n
\n \n 
\n
\n County of Service: {info?.countryOfService}
\n\n 
\n
\n License Number: {info?.licenseNumber}
\n\n \n \n
\n About
\n\n {info?.aboutMe ? info?.aboutMe : 'No Information Yet'}\n
\n\n
\n );\n};\n\n","import React from 'react';\nimport {aboutUsFragments} from \"./styles\";\nimport {Svg} from \"assets/images\";\n\nexport const CardWithSvg = ({description}) => {\n const classes = aboutUsFragments()\n\n return (\n \n {title}\n
\n\n\n {description}\n
\n\n \n\n
\n );\n};\n\n","import {makeStyles} from \"@material-ui/core/styles\";\nimport {Colors} from \"utils\";\n\nexport const howItWorksFragmentsStyles = makeStyles(() => (\n {\n stepsWrapper: {\n display: 'flex',\n flexDirection: 'column',\n gap: '16px',\n },\n singleStepWrapper: {\n display: 'flex',\n gap: '24px',\n },\n stepCountAndDot: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n gap: '8px'\n },\n stepCount: {\n width: '48px',\n height: '48px',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n fontSize: '18px',\n fontWeight: '800',\n lineHeight: '28px',\n color: `${Colors.ThemePink}`,\n background: `${Colors.TextWhite}`,\n borderRadius: '8px',\n boxShadow: '0px 0px 12px 0px rgba(0, 0, 0, 0.10)',\n padding: '10px',\n },\n stepDot: {\n height: '100%',\n border: '1px dashed #757280',\n },\n stepTitleAndDesc: {\n display: 'flex',\n flexDirection: 'column',\n },\n stepTitle: {\n fontSize: '24px',\n fontWeight: '800',\n lineHeight: '36px',\n color: `${Colors.TextBlack2}`,\n },\n stepSubTitle: {\n fontSize: '18px',\n fontWeight: '800',\n lineHeight: '24px',\n color: `${Colors.TextBlack2}`,\n marginTop: '16px',\n },\n stepDesc: {\n fontSize: '16px',\n fontWeight: '400',\n lineHeight: '24px',\n color: `${Colors.TextBlack2}`,\n marginTop: '16px',\n },\n stepItemsDescWrapper: {\n display: 'flex',\n flexDirection: 'column',\n gap: '12px'\n },\n stepItemsDesc: {\n display: 'flex',\n alignItems: 'start'\n },\n stepItemsSvg: {\n minWidth: '24px',\n minHeight: '24px',\n marginRight: '10px'\n },\n stepItemsText: {\n fontSize: '16px',\n fontWeight: '400',\n lineHeight: '24px',\n },\n stepItemsTextBold: {\n fontWeight: '600',\n whiteSpace: 'nowrap'\n },\n megaPhoneWrapper: {\n display: 'flex',\n alignItems: 'start',\n gap: '12px',\n color: `${Colors.TextBlack2}`,\n fontSize: '18px',\n fontWeight: '600',\n lineHeight: '27px',\n margin: '-60px 0 32px auto',\n\n '@media(max-width: 1279px)': {\n margin: '0 0 32px auto',\n },\n },\n\n megaPhone: {\n minWidth: '33px',\n minHeight: '33px'\n },\n }\n))","import React from 'react';\nimport {Svg} from \"assets/images\";\nimport {howItWorksFragmentsStyles} from \"./styles\";\n\nexport const Step1 = () => {\n const classes = howItWorksFragmentsStyles();\n\n return (\n \n {description}\n
\n\n
\n \n {content}\n \n );\n};\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport { Colors } from \"utils\";\n\nexport const screensStyle = makeStyles(\n () => ({\n // ** toastr style **\n toastStyle: {\n\n \"& .Toastify .Toastify__toast\": {\n width: \"auto\",\n padding: \"19px 16px\",\n },\n },\n toastWrapper: {\n display: \"flex\",\n \"& p\": {\n fontSize: \"16px\",\n fontWeight: 500,\n color: Colors.TextBlack,\n lineHeight: \"20px\",\n },\n },\n toastIconStyle: {\n marginRight: \"16px\",\n width: \"28px\",\n height: \"28px\",\n \"& img\": { width: \"100%\" },\n },\n // ** end **\n }),\n { index: 1 }\n);\n","import React, {useEffect} from 'react';\nimport { ToastContainer, toast } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\nimport { Images } from \"utils\";\nimport { screensStyle } from \"./styles\";\n\nexport const Toast = ({ info, text, type }) => {\n const classes = screensStyle();\n\n const screen =\n ;\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\nimport \"./assets/styles/reset.css\";\nimport reportWebVitals from \"./reportWebVitals\";\nimport { BrowserRouter } from \"react-router-dom\";\nimport { Provider } from \"react-redux\";\nimport { store } from \"./store\";\nimport {\n initAxiosInterceptors,\n ListingFiltersContextProvider,\n RegisterContextProvider,\n ViewAsContextProvider,\n} from \"./utils\";\nimport { AvatarContextProvider } from \"utils/contexts/avatarContext\";\n\ninitAxiosInterceptors();\nReactDOM.render(\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ,\n document.getElementById(\"root\")\n);\n\n// serviceWorker.register()\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n","/** Payment Actions */\nexport const CREATE_PAYMENT = 'CREATE_PAYMENT'\n\nexport const GET_PAYMENT = 'GET_PAYMENT'\nexport const GET_PAYMENT_SUCCESS = 'GET_PAYMENT_SUCCESS'\n\nexport const GET_INVOICES = 'GET_INVOICES'\nexport const GET_INVOICES_SUCCESS = 'GET_INVOICES_SUCCESS'\n\nexport const DELETE_PAYMENT = 'DELETE_PAYMENT'\n\nexport const IMPRESSION_REQUEST = 'IMPRESSION_REQUEST'","import {GET_INVOICES_SUCCESS, GET_PAYMENT_SUCCESS} from \"./payment.types\";\n\nconst initialState = {\n myPayment: null,\n invoices: null,\n};\n\nexport const paymentReducer = (state = initialState, action) => {\n switch (action.type) {\n\n case GET_PAYMENT_SUCCESS:\n return {\n ...state,\n myPayment: action.payload,\n };\n\n case GET_INVOICES_SUCCESS:\n return {\n ...state,\n invoices: action.payload,\n };\n\n default:\n return state;\n }\n};\n","import {call, put, takeLatest} from 'redux-saga/effects';\nimport {paymentAuthService} from './payment.service';\nimport {authActions} from '..';\nimport {httpRequestsOnErrorsActions} from '../http_requests_on_errors';\nimport {httpRequestsOnLoadActions} from '../http_requests_on_load';\nimport {httpRequestsOnSuccessActions} from '../http_requests_on_success';\nimport {\n CREATE_PAYMENT,\n DELETE_PAYMENT,\n GET_INVOICES,\n GET_INVOICES_SUCCESS,\n GET_PAYMENT,\n GET_PAYMENT_SUCCESS, IMPRESSION_REQUEST\n} from \"./payment.types\";\n\n/** Payment Actions */\n\nfunction* createPaymentSaga({type, payload}) {\n yield put(httpRequestsOnErrorsActions.removeError(type));\n yield put(httpRequestsOnLoadActions.appendLoading(type));\n yield put(httpRequestsOnSuccessActions.removeSuccess(type));\n try {\n yield call(paymentAuthService.createPaymentService, payload.body);\n yield put({\n type: GET_PAYMENT,\n });\n yield put(httpRequestsOnLoadActions.removeLoading(type));\n yield put(httpRequestsOnErrorsActions.removeError(type));\n yield put(httpRequestsOnSuccessActions.appendSuccess(type));\n } catch (err) {\n yield put(httpRequestsOnLoadActions.removeLoading(type));\n yield put(httpRequestsOnErrorsActions.appendError(type, err?.data?.message));\n yield put(httpRequestsOnSuccessActions.removeSuccess(type));\n }\n}\n\nfunction* getPaymentSaga({type}) {\n yield put(httpRequestsOnErrorsActions.removeError(type));\n yield put(httpRequestsOnLoadActions.appendLoading(type));\n yield put(httpRequestsOnSuccessActions.removeSuccess(type));\n try {\n const res = yield call(paymentAuthService.getPaymentService);\n yield put({\n type: GET_PAYMENT_SUCCESS,\n payload: res.data,\n });\n yield put(httpRequestsOnLoadActions.removeLoading(type));\n yield put(httpRequestsOnErrorsActions.removeError(type));\n } catch (err) {\n yield put(httpRequestsOnLoadActions.removeLoading(type));\n yield put(httpRequestsOnErrorsActions.appendError(type, err?.data?.message));\n yield put(httpRequestsOnSuccessActions.removeSuccess(type));\n }\n}\n\nfunction* getInvoicesSaga({type}) {\n yield put(httpRequestsOnErrorsActions.removeError(type));\n yield put(httpRequestsOnLoadActions.appendLoading(type));\n yield put(httpRequestsOnSuccessActions.removeSuccess(type));\n try {\n const res = yield call(paymentAuthService.getInvoicesService);\n yield put({\n type: GET_INVOICES_SUCCESS,\n payload: res.data,\n });\n yield put(httpRequestsOnLoadActions.removeLoading(type));\n yield put(httpRequestsOnErrorsActions.removeError(type));\n } catch (err) {\n yield put(httpRequestsOnLoadActions.removeLoading(type));\n yield put(httpRequestsOnErrorsActions.appendError(type, err?.data?.message));\n yield put(httpRequestsOnSuccessActions.removeSuccess(type));\n }\n}\n\nfunction* deleteInvoicesSaga({type, payload}) {\n yield put(httpRequestsOnErrorsActions.removeError(type));\n yield put(httpRequestsOnLoadActions.appendLoading(type));\n yield put(httpRequestsOnSuccessActions.removeSuccess(type));\n try {\n yield call(paymentAuthService.deletePaymentService);\n yield put({\n type: GET_PAYMENT,\n });\n yield put(httpRequestsOnLoadActions.removeLoading(type));\n yield put(httpRequestsOnErrorsActions.removeError(type));\n } catch (err) {\n yield put(httpRequestsOnLoadActions.removeLoading(type));\n yield put(httpRequestsOnErrorsActions.appendError(type, err?.data?.message));\n yield put(httpRequestsOnSuccessActions.removeSuccess(type));\n }\n}\n\nfunction* impressionRequestSaga({type, payload}) {\n yield put(httpRequestsOnErrorsActions.removeError(type));\n yield put(httpRequestsOnLoadActions.appendLoading(type));\n yield put(httpRequestsOnSuccessActions.removeSuccess(type));\n try {\n yield call(paymentAuthService.impressionService, payload.id);\n yield put(httpRequestsOnLoadActions.removeLoading(type));\n yield put(httpRequestsOnErrorsActions.removeError(type));\n } catch (err) {\n yield put(httpRequestsOnLoadActions.removeLoading(type));\n yield put(httpRequestsOnErrorsActions.appendError(type, err?.data?.message));\n yield put(httpRequestsOnSuccessActions.removeSuccess(type));\n }\n}\n\n/** End */\n\nexport const watchPayment = function* watchPaymentSaga() {\n /** Payment Actions */\n yield takeLatest(CREATE_PAYMENT, createPaymentSaga);\n yield takeLatest(GET_PAYMENT, getPaymentSaga);\n yield takeLatest(GET_INVOICES, getInvoicesSaga);\n yield takeLatest(DELETE_PAYMENT, deleteInvoicesSaga);\n yield takeLatest(IMPRESSION_REQUEST, impressionRequestSaga);\n /** End */\n};\n","import {createPayment, deletePayment, getInvoices, getPayment, impression} from \"./payment.action\";\n\nexport { paymentReducer } from \"./payment.reducer\";\nexport { watchPayment } from \"./payment.saga\";\n\nexport const paymentActions = {\n /** Payment Actions */\n createPayment,\n getPayment,\n getInvoices,\n deletePayment,\n impression,\n /** End */\n};\n","import {CREATE_PAYMENT, DELETE_PAYMENT, GET_INVOICES, GET_PAYMENT, IMPRESSION_REQUEST} from \"./payment.types\";\n\n/** Payment Actions */\n\nexport const createPayment = (body) => {\n return {\n type: CREATE_PAYMENT,\n payload: {body},\n };\n};\n\nexport const getPayment = () => {\n return {\n type: GET_PAYMENT,\n };\n};\n\nexport const getInvoices = () => {\n return {\n type: GET_INVOICES,\n };\n};\n\nexport const deletePayment = (id) => {\n return {\n type: DELETE_PAYMENT,\n payload: {id},\n };\n};\n\nexport const impression = (id) => {\n return {\n type: IMPRESSION_REQUEST,\n payload: {id},\n };\n};\n\n/** End */","import React, { useState } from 'react';\n\nexport const AvatarContext = React.createContext({\n avatar: undefined,\n handleAvatarChange: () => {},\n});\n\nexport const AvatarContextProvider = ({ children }) => {\n const [avatar, setAvatar] = useState();\n\n const handleAvatarChange = (avatar) => setAvatar(avatar);\n\n return {children} ;\n};\n","import axios from \"axios\";\n\nexport const paymentAuthService = {\n createPaymentService: (body) => axios.patch(\"/billing\", body, { auth: true }),\n\n getPaymentService: () => axios.get(\"/billing/pmtMethod\", { auth: true }),\n\n getInvoicesService: () => axios.get(\"/billing/invoices\", { auth: true }),\n\n deletePaymentService: ( ) => axios.delete(`/billing/card`, { auth: true }),\n\n impressionService: (id) => axios.post(`/listing/${id}/click`, {}, { auth: true }),\n};\n"],"sourceRoot":""}
\n
\n \n 1\n
\n \n
\n\n \n
\n \n Step 1\n
\n\n\n Go to the\n “Homepageâ€\n and click the “Sign In†button, then click\n \"Sign Up\"\n
\n\n setOpen(false)}\n content={\n setOpen(false)}>\n {modalContent === 'profilePicture' ? (\n \n \n setOpen(false)} />\n \n ) : modalContent === 'deleteAccount' ? (\n setOpen(false)} title={'Delete Account'}>\n \n ) : null}\n \n }\n />\n \n );\n});\n","import {promotionStyle} from \"../../pages/promotion/styles\";\nimport moment from \"moment\";\n\nexport const PaymentStartEnd = ({ startDate,endDate, renewPromotion }) => {\n const classes = promotionStyle()\n const newMount = moment().add(1, 'months').calendar()\n const endDayRenew = endDate ? moment(endDate).add(1, 'months').calendar() : ''\n const startDay = startDate ? moment(startDate).format('MM.DD.YYYY') : moment().format('MM.DD.YYYY')\n\n return(\n \n
\n );\n }\n);\n","import { Tooltip } from \"@material-ui/core\";\n\nexport const SimpleTooltip = ({ title, content }) => {\n return (\n \n
\n \n 2\n
\n \n
\n\n \n
\n \n Step 2\n
\n\n\n Choose an account type\n
\n\n\n
\n\n \n \n
\n \n \n Basic Account:\n \n Allows you to post and sell your property.\n
\n\n \n\n
\n \n \n Broker Account:\n \n Allows you to post and sell your property, as well as be listed on a broker\n list for potential clients to easily connect with you.\n
\n\n \n\n
\n \n Click\n \n “Next Stepâ€\n \n to proceed.\n
\n\n
\n );\n};\n\n","import React from 'react';\nimport {howItWorksFragmentsStyles} from \"./styles\";\nimport {Svg} from \"assets/images\";\n\nexport const Step2 = () => {\n const classes = howItWorksFragmentsStyles();\n\n return (\n \n
\n \n 3\n
\n \n
\n\n \n
\n \n Step 3\n
\n\n\n Enter your personal information\n
\n\n\n Note: If you're a broker, please include your license number.\n Ensure all your information is correct for smooth account operation.\n
\n\n
\n \n
\n\n \n 4\n
\n \n
\n \n Step 4\n
\n\n\n Complete registration\n
\n\n\n
\n\n \n \n
\n \n After entering your details, click the “Sign Up†button to finalize your account\n creation.\n
\n\n As soon as you register, you'll see a confirmation message pop up on your\n screen.You're officially part of Croill.com! You're all set to start listing\n properties and exploring opportunities.\n
\n\n
\n );\n};\n","import React, { useContext } from 'react';\nimport {FindLoad, RegisterContext} from 'utils';\nimport { wrappersStyle } from './style';\nimport {Loader, SaveOrCancelButton, SendButton} from 'components';\nimport { useDispatch } from 'react-redux';\nimport { listingActions, userActions } from 'store';\nimport ReactFileReader from 'react-file-reader';\n\nexport const UserRegistrationWrapper = ({ title, children, avatarURL, user, onClose, onChangeAvatar, onRemoveAvatar, listingId, loader }) => {\n const classes = wrappersStyle();\n const dispatch = useDispatch();\n const delLoader = FindLoad('REMOVE_USER')\n const delListingLoader = FindLoad('REMOVE_LISTING')\n\n const registerCtx = useContext(RegisterContext);\n const { modalContent } = registerCtx;\n\n return (\n \n
\n );\n};\n","import {Images, Colors} from 'utils';\nimport {makeStyles} from '@material-ui/core/styles';\nimport * as url from \"url\";\n\nexport const wrappersStyle = makeStyles(\n () => ({\n // ** filters modal wrapper style **\n '@keyframes bottomUp': {\n '0%': {\n maxHeight: '0px',\n },\n '100%': {\n maxHeight: '587px',\n },\n },\n filtersModalWrapperStyle: {\n position: 'fixed',\n bottom: '50%',\n right: '50%',\n transform: 'translate(50%, 50%)',\n zIndex: 99999,\n maxWidth: '500px',\n width: '100%',\n maxHeight: '391px',\n height: '100%',\n overflow: 'auto',\n paddingTop: '16px',\n backgroundColor: Colors.BackgroundWhite,\n borderRadius: '16px',\n display: 'flex',\n flexDirection: 'column',\n '@media(max-width: 1200px)': {\n maxHeight: '587px',\n },\n '@media(max-width: 768px)': {\n maxWidth: '375px',\n },\n '@media(max-width: 375px)': {\n bottom: 0,\n right: 0,\n transform: 'translate(0%, 0%)',\n borderBottomLeftRadius: 0,\n borderBottomRightRadius: 0,\n animation: '$bottomUp 0.2s linear',\n },\n },\n titleBoxStyle: {\n padding: '0px 16px 15px',\n textAlign: 'center',\n borderBottom: '1px solid #7572804D',\n },\n moreFiltersTitleStyle: {\n fontSize: '24px',\n fontWeight: 600,\n color: Colors.TextBlack,\n '@media(max-width: 1200px)': {\n display: 'none',\n },\n },\n filtersTitleStyle: {\n fontSize: '24px',\n fontWeight: 600,\n color: Colors.TextBlack,\n display: 'none',\n '@media(max-width: 1200px)': {\n display: 'block',\n },\n },\n wrapperChildrenBoxStyle: {\n flexGrow: 1,\n },\n wrapperActionsStyle: {\n flexShrink: 0,\n padding: '22px 24px',\n backgroundColor: Colors.BackgroundWhiteOff,\n },\n // ** end **\n\n // ** register modal wrapper style **\n registerWrapperStyle: {\n position: 'relative',\n overflow: 'hidden',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n margin: 'auto',\n zIndex: 999,\n backgroundColor: Colors.BackgroundWhite,\n borderRadius: '12px',\n display: 'flex',\n },\n closeModalButnStyle: {\n left: 'unset',\n right: '16px',\n '@media(max-width: 500px)': {\n top: '8px',\n right: '8px',\n },\n },\n closeFiltersModalStyle: {\n right: '16px',\n left: 'auto',\n },\n wrapperLeftSideStyle: {\n width: '232px',\n // height: '404px',\n backgroundRepeat: \"no-repeat\",\n backgroundSize: \"cover\",\n backgroundPosition: \"center\",\n // padding: '24px 32px 32px',\n // ../assets/images/signUpRectangle.png\n backgroundImage: `url(${Images.signUpRectangle})`,\n // background: url('../assets/images/signUpRectangle.png'),\n backgroundColor: '#F4EAEE',\n '@media(max-width: 1120px)': {display: 'none'},\n },\n logoInModalStyle: {\n marginBottom: '11px',\n marginLeft: '-8px',\n '& > h1': {fontSize: '20px'},\n '&::after': {\n width: '8px',\n height: '8px',\n },\n },\n wrapperImageStyle: {\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n wrapperRightSideStyle: {\n padding: '32px',\n backgroundColor: 'inherit',\n maxHeight: '90vh',\n '@media(max-width: 600px)': {width: '343px', padding: '16px'},\n '@media(max-width: 500px)': {padding: '16px'},\n },\n // ** end **\n\n // ** user registration wrapper style **\n registerTitleStyle: {\n fontSize: '24px',\n fontWeight: 800,\n color: Colors.TextBlack,\n marginBottom: '32px',\n '&.welcome': {\n marginTop: '40px',\n '@media(max-width: 500px)': {marginTop: '32px'},\n },\n '&.profilePicture': {\n textAlign: 'center',\n marginBottom: '16px',\n },\n '&.changeDelete': {marginBottom: '16px'},\n },\n // ** end **\n\n // ** listing inputs wrapper style **\n listingInputWrapperStyle: {\n backgroundColor: Colors.BackgroundWhite,\n boxShadow: '0px 0px 6px #00000029',\n borderRadius: '12px',\n },\n wrapperContainerStyle: {\n padding: '40px 40px 0px',\n width: '100%',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n '@media(max-width: 768px)': {\n display: 'none',\n },\n '&.tabletView': {\n display: 'none',\n '@media(max-width: 768px)': {\n display: 'flex',\n paddingBottom: '40px',\n cursor: 'pointer',\n },\n '@media(max-width: 600px)': {\n paddingBottom: '24px',\n },\n },\n '@media(max-width: 600px)': {\n padding: '24px 24px 0px',\n },\n },\n wrapperTitleStyle: {\n fontSize: '24px',\n fontWeight: 800,\n color: '#3377CC',\n textTransform: 'capitalize',\n },\n childrenContainerStyle: {\n padding: '40px',\n width: '100%',\n '@media(max-width: 768px)': {display: 'none'},\n '&.tabletView': {\n display: 'none',\n '@media(max-width: 768px)': {\n display: 'block',\n padding: '0px 40px',\n '&.active': {paddingBottom: '40px'},\n },\n '@media(max-width: 600px)': {\n padding: '0px 24px',\n '&.active': {paddingBottom: '24px'},\n },\n },\n },\n // ** end **\n\n // ** my profile wrapper style **\n userInfoStyle: {\n position: 'relative',\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n marginBottom: '36px',\n },\n userProfilePictureContentStyle: {\n position: 'relative',\n width: '78px',\n height: '78px',\n border: '4px solid #FFFFFF',\n boxShadow: '0px 0px 6px rgba(0, 0, 0, 0.16)',\n borderRadius: '40px',\n '& > label.editAvatarIcon': {\n display: 'block',\n width: '28px',\n height: '28px',\n backgroundImage: `url(${Images.addPhoto})`,\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'contain',\n backgroundPosition: 'center',\n position: 'absolute',\n bottom: '-2px',\n right: '-8px',\n cursor: 'pointer',\n },\n },\n userProfileBoxStyle: {\n width: '100%',\n height: '100%',\n borderRadius: '50%',\n overflow: 'hidden',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n // '& > input': { display: 'none' },\n '& embed, & img': {\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n border: `0.1px solid ${Colors.BackgroundWhite}`,\n borderRadius: '50%',\n },\n },\n userProfileImageStyle: {\n width: '78px',\n height: '78px',\n objectFit: 'cover',\n },\n userFullNameStyle: {\n fontSize: '24px',\n fontWeight: 800,\n color: Colors.TextBlack,\n textTransform: 'capitalize',\n marginLeft: '34px',\n \"@media(min-width: 320px)\": {\n marginLeft: '16px',\n },\n \"@media(min-width: 768px)\": {\n marginLeft: '34px',\n },\n },\n myProfileBoxStyle: {\n width: '100%',\n display: 'flex',\n justifyContent: 'center',\n backgroundColor: Colors.BackgroundWhiteOff,\n },\n myProfileBoxContainerStyle: {\n maxWidth: '1440px',\n width: '100%',\n padding: '148px 80px 180px',\n\n '@media(min-width: 320px)': {\n padding:'24px 16px',\n },\n '@media(min-width: 768px)': {\n padding:'57px 152px',\n },\n '@media(min-width: 1440px)': {\n padding:'148px 272px',\n },\n },\n myProfileWrapperStyle: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n myProfileTitleStyle: {\n fontSize: '24px',\n fontWeight: 800,\n color: Colors.TextBlack,\n marginBottom: '40px',\n '@media(max-width: 600px)': {marginBottom: '24px'},\n },\n wrapperContentStyle: {\n // width: '936px',\n padding: '32px',\n paddingBottom: '24px',\n backgroundColor: Colors.BackgroundWhite,\n borderRadius: '12px',\n boxShadow: '0px 0px 6px #00000029',\n // '@media(max-width: 1024px)': {width: '464px'},\n // '@media(max-width: 600px)': {\n width: '100%',\n // padding: '24px',\n // },\n },\n myProfileActionsStyle: {\n marginTop: '25px',\n paddingRight: '32px',\n display: 'flex',\n justifyContent: 'flex-end',\n alignItems: 'center',\n '@media(max-width: 600px)': {\n flexDirection: 'column',\n alignItems: 'flex-start',\n },\n '& button': {\n fontSize: '16px',\n fontWeight: 600,\n display: 'flex',\n alignItems: 'center',\n '&::before': {\n content: \"''\",\n width: '24px',\n height: '24px',\n marginRight: '8px',\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'contain',\n backgroundPosition: 'center',\n },\n },\n },\n changePassButnStyle: {\n marginRight: '40px',\n color: '#3377CC',\n '&::before': {backgroundImage: `url(${Images.password})`},\n '@media(max-width: 600px)': {\n marginRight: '0px',\n marginBottom: '17px',\n },\n },\n delAccountButnStyle: {\n color: '#FF385C',\n '&::before': {backgroundImage: `url(${Images.deletee})`},\n },\n // ** end **\n\n // ** my profile modals style **\n userRegistrationStyle: {\n '& > div:last-of-type > div': {marginTop: '24px'},\n '& > div:last-of-type > div > button': {\n width: '188px',\n height: '40px',\n '&:first-of-type': {\n textDecoration: 'none',\n backgroundColor: '#75728080',\n color: Colors.TextWhite,\n marginRight: '24px',\n },\n '&:last-of-type': {backgroundColor: '#3377CC'},\n },\n },\n profilePictureStyle: {\n width: '112px',\n height: '112px',\n borderRadius: '50%',\n overflow: 'hidden',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n margin: '0 auto 28px',\n '& embed, & img': {\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n border: `0.1px solid ${Colors.BackgroundWhite}`,\n borderRadius: '50%',\n },\n },\n profilePictureDescStyle: {\n fontSize: '16px',\n fontWeight: 500,\n color: Colors.TextGray,\n maxWidth: '400px',\n width: '100%',\n textAlign: 'center',\n lineHeight: '24px',\n },\n descriptionStyle: {\n fontSize: '16px',\n fontWeight: 500,\n color: Colors.TextGray,\n maxWidth: '400px',\n width: '100%',\n lineHeight: '24px',\n },\n pictureActionsStyle: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n },\n removeButnStyle: {\n maxWidth: '188px',\n backgroundColor: '#75728080 !important',\n },\n changeAvatarStyle: {\n cursor: 'pointer',\n maxWidth: '188px',\n borderRadius: '8px',\n width: '100%',\n height: '40px',\n textAlign: 'center',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n fontSize: '16px',\n fontWeight: 500,\n color: Colors.TextWhite,\n backgroundColor: '#3377CC',\n },\n // ** end **\n }),\n {index: 1}\n);\n\n\nexport const globalStyles = makeStyles(() => ({\n promotionWrapperBackground: {\n background: '#F4F4F4',\n },\n promotionWrapper: {\n height: '100%',\n minHeight: '100vh',\n maxWidth: '1440px',\n margin: '0 auto',\n padding: '18px 16px 64px 16px',\n\n '@media(min-width: 320px)': {\n padding: '18px 16px 64px 16px',\n },\n '@media(min-width: 768px)': {\n padding: '32px 70px 80px 70px',\n },\n '@media(min-width: 1280px)': {\n padding: '48px 80px 80px 80px',\n },\n },\n title: {\n fontWeight: '800',\n fontSize: '24px',\n lineHeight: '36px',\n color: '#2B273C',\n },\n subTitle: {\n fontWeight: '400',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#2B273C',\n margin: '12px 0 24px',\n '@media(min-width: 320px)': {\n margin: '16px 0 16px',\n },\n '@media(min-width: 768px)': {\n margin: '12px 0 24px',\n },\n },\n\n}))","import { Images } from 'utils';\nimport React from 'react';\nimport { SaveOrCancelButton } from 'components';\nimport { wrappersStyle } from './style';\nimport { CloseModalButton } from 'components';\n\nexport const FiltersModalWrapper = ({ onClose, children, submitHandler, clearAllHandler, isLoading = false,onDesktop }) => {\n const classes = wrappersStyle();\n return (\n \n
\n \n 1\n
\n \n
\n\n \n
\n \n Step 1\n
\n\n\n Log in to your account and click \"Create Listing\". This will take you to the listing creation\n page.\n
\n\n
\n );\n};","import React from 'react';\nimport {howItWorksFragmentsStyles} from \"./styles\";\nimport {Svg} from \"assets/images\";\n\nexport const Step3 = () => {\n const classes = howItWorksFragmentsStyles();\n\n return (\n \n
\n \n 2\n
\n \n
\n\n \n
\n \n Step 2\n
\n\n\n Fill out required information\n
\n\n\n Begin by filling out the information about your listing. Here are the fields you’ll need to\n complete:\n
\n\n\n
\n\n \n \n
\n \n \n Property type:\n \n Choose from retail, office, industrial, or other.\n
\n\n \n\n
\n\n \n \n Address:\n \n Provide the full address of the property.\n
\n\n \n\n
\n\n \n \n Size range:\n \n Specify the size of the property in square feet or other applicable units.\n
\n\n \n\n
\n\n \n \n Price per sq. ft.:\n \n Set the price per square foot or your preferred pricing unit.\n
\n\n \n\n
\n\n \n \n Listing number:\n \n Auto-Generate a unique number to your listing for easy reference.\n
\n\n \n\n
\n\n \n \n Lease type:\n \n Select from gross, NNN, or other lease types.\n
\n\n \n\n
\n\n \n \n Zoning:\n \n Include the zoning information relevant to your property.\n
\n\n \n\n
\n\n \n \n Lot size:\n \n Specify the size of the lot\n
\n\n \n\n
\n\n \n \n Parking:\n \n Detail the parking options available\n
\n\n \n\n
\n\n \n \n Description:\n \n Write a compelling description that highlights key features and advantages of the\n property.\n
\n\n \n\n
\n \n \n Listing images:\n \n Upload high-quality images to showcase the property. Ensure the photos are well-lit and\n cover various angles and key areas.\n
\n\n
\n \n
\n\n \n 3\n
\n \n
\n \n Step 3\n
\n\n\n Review and publish your listing\n
\n\n\n
\n\n \n \n
\n \n Review all the information you’ve entered for completeness. This is important to\n provide possible clients get a clear picture of what’s being offered.\n
\n\n \n\n
\n \n When you’re satisfied, click the “Create Listing†button to publish your\n listing on Croill.\n
\n\n Your property is now active on Croill and available for potential buyers and tenants to view.\n
\n\n triggerStatus(status)}>\n {({getInputProps, suggestions, getSuggestionItemProps, loading}) => (\n <>\n \n {suggestions.length !== 0 && dropdownIsShown && (\n
\n )}\n \n )}\n \n );\n};\n","import React, {useContext, useEffect, useRef, useState} from 'react';\nimport {dropdownStyle} from './style';\nimport {getLimitedVal, Images, initialCoordinates, isNotEmpty, ListingFiltersContext, ViewAsContext} from 'utils';\nimport axios from 'axios';\nimport {AddressInput} from '../address/address';\n\nexport const FilteringWithSearchBoxDropdown = ({\n searchBoxClassName,\n dropdownClassName,\n defaultSearchText,\n searchIcon,\n searchedAddress,\n onRequest,\n customClass,\n error,\n searchType,\n disabled,\n }) => {\n const classes = dropdownStyle();\n\n const addressInputRef = useRef();\n\n const [address, setAddress] = useState('');\n const [noAddress, setNoAddress] = useState(false);\n const [searchInputIsTouched, setSearchInputIsTouched] = useState(false);\n const [status, setStatus] = useState('');\n\n const isHomePage = window.location.pathname === '/';\n\n const {handleLatLngRequest, handleZoomRequest} = useContext(ListingFiltersContext);\n\n useEffect(() => {\n setAddress(searchedAddress);\n }, [searchedAddress]);\n\n const handleSearchAddressInput = (evt) => {\n if (evt.currentTarget.value === '') {\n setNoAddress(true);\n } else {\n setNoAddress(false);\n }\n };\n\n const handleSearchInputFocus = () => setSearchInputIsTouched(true);\n\n const handleSearchInputBlur = () => {\n if (noAddress && !isHomePage) {\n onRequest(address);\n handleLatLngRequest(initialCoordinates.lat, initialCoordinates.lng);\n handleZoomRequest(initialCoordinates.zoom);\n }\n\n setSearchInputIsTouched(false);\n };\n\n const handleChangeAddress = (value) => {\n if (isHomePage) {\n onRequest(value);\n }\n\n setAddress(value);\n setStatus('');\n };\n\n const handleSearchingStatus = (status) => setStatus(status);\n\n const handleSelectAddress = async (value) => {\n if (!isNotEmpty(value)) return;\n\n addressInputRef.current.blur();\n\n await axios.post(`/address`, {address: value})\n .then(function (response) {\n handleLatLngRequest(response.data.lat.toString(), response.data.lng.toString());\n\n handleZoomRequest(initialCoordinates.searchingZoom);\n\n setAddress(response.data.formattedAddress);\n\n onRequest(response.data.formattedAddress);\n })\n .catch(function (error) {\n console.log(error);\n });\n };\n\n const dropdownIsShown = searchInputIsTouched && isNotEmpty(address);\n\n const addressDisplay = searchInputIsTouched || isHomePage ? address : getLimitedVal(address, 15);\n\n\n const { view, handleViewChange } = useContext(ViewAsContext);\n\n useEffect(() =>{\n if(!address) {\n handleLatLngRequest(initialCoordinates.lat, initialCoordinates.lng);\n handleZoomRequest(initialCoordinates.zoom);\n }\n },[view])\n\n return (\n \n
\n \n );\n};\n","import React, { useState } from 'react';\nimport { getValDependsOnLength, Images, isNotEmpty } from 'utils';\nimport { dropdownStyle } from './style';\nimport { FromToInput } from 'components';\n\nexport const FilteringFromToDropdown = ({\n isInModal,\n passSelectedMin,\n passSelectedMax,\n selectedMin,\n selectedMax,\n dropdownTitle,\n onClearSelected,\n measureUnit,\n minInputPlaceholder,\n maxInputPlaceholder,\n}) => {\n const [dropdownIsShown, setDropdownIsShown] = useState(false);\n const classes = dropdownStyle();\n\n const minValueIsNotEmpty = isNotEmpty(selectedMin);\n const maxValueIsNotEmpty = isNotEmpty(selectedMax);\n const selectedMinValue = getValDependsOnLength(selectedMin);\n const selectedMaxValue = getValDependsOnLength(selectedMax);\n\n const selectedValueWithUnit =\n minValueIsNotEmpty && maxValueIsNotEmpty\n ? measureUnit === '$'\n ? `$${selectedMinValue} - ${selectedMaxValue}`\n : `${selectedMinValue} - ${selectedMaxValue} SF`\n : minValueIsNotEmpty\n ? measureUnit === '$'\n ? `Over $${selectedMinValue}`\n : `Over ${selectedMinValue} SF`\n : maxValueIsNotEmpty\n ? measureUnit === '$'\n ? `Under $${selectedMaxValue}`\n : `Under ${selectedMaxValue} SF`\n : dropdownTitle;\n\n const selectFieldIsNotEmpty = (minValueIsNotEmpty && maxValueIsNotEmpty) || minValueIsNotEmpty || maxValueIsNotEmpty;\n\n return (\n <>\n {dropdownIsShown && \n
\n \n 1\n
\n \n
\n\n \n
\n \n Step 1\n
\n\n\n Quickly find a broker\n
\n\n\n
\n\n \n \n
\n \n Start by visiting the homepage.\n
\n\n \n\n
\n \n Look for the\n \"Find Broker\"\n button, which is located on the right side of the page.\n
\n\n
\n );\n};","import React from 'react';\nimport {Svg} from \"assets/images\";\nimport {howItWorksFragmentsStyles} from \"./styles\";\n\nexport const Step4 = () => {\n const classes = howItWorksFragmentsStyles();\n\n return (\n <>\n \n
\n \n 2\n
\n \n
\n\n \n
\n \n Step 2\n
\n\n\n Meet broker listings\n
\n\n\n After clicking the \"Find Broker\" button, a pop-up will appear displaying a list of brokers. This list includes:\n
\n\n\n
\n\n \n \n\n
\n\n \n Broker's name\n
\n\n \n\n
\n\n \n Phone number\n
\n\n \n\n
\n\n \n Company name\n
\n\n \n\n
\n \n Email address\n
\n\n
\n \n
\n\n \n 3\n
\n \n
\n \n Step 3\n
\n\n\n Contact a broker\n
\n\n\n
\n \n \n
\n \n Browse through the list to find a broker who fits your needs based on their specialty, location, or company.\n
\n\n \n\n
\n \n Use the contact information provided (phone number or email address) to reach out\n directly to the broker. You can inquire further about their services, request a meeting, or discuss your property needs.\n
\n\n \n Promoting your listing can help you reach more potential buyers or renters by\n increasing its visibility on Croill. Here's how;\n
\n\n \n
\n )}\n \n \n {dropdownOptions.map((option, index) => {\n return (\n chooseOptionHandler(option)}\n >\n \n {option.label}\n \n {index >= 2 && (\n
\n );\n })}\n \n
\n \n 1\n
\n \n
\n\n \n
\n \n Step 1\n
\n\n\n Access your profile\n
\n\n\n
\n \n \n
\n \n Go to the “Homepageâ€.\n
\n\n \n\n
\n \n Click on your profile name at the top right corner of the page. This action will\n direct\n you to your profile and various personal sections.\n
\n\n setDropdownIsShown(false)}\n />\n )}\n \n setDropdownIsShown((prevState) => !prevState)}\n >\n {selected ? (\n {\n evt.stopPropagation();\n onClearSelected();\n setDropdownIsShown(false);\n }}\n className={`${classes.clearSelectedButnStyle} dropClear`}\n >\n 
\n \n ) : dropdownIsShown ? (\n \n ) : (\n \n )}\n
\n {dropdownIsShown && (\n \n
\n \n 2\n
\n \n
\n\n \n
\n \n Step 2\n
\n\n\n Go to the “Promotions†section\n
\n\n\n Within your profile, locate and select the
\n \n evt.target.blur()}\n placeholder={inputPlaceholder}\n />\n );\n};\n","import React from \"react\";\nimport { inputStyle } from \"./style\";\n\nexport const CheckBoxInput = ({\n inputId,\n inputChecked,\n onInputChange,\n inputLabel,\n}) => {\n const classes = inputStyle();\n\n const isHomePage = window.location.pathname === \"/\";\n\n return (\n \n \n \n {loader ? : butnSendingText}\n \n );\n};\n","import { RegisterContext } from \"utils\";\nimport React, { useContext } from \"react\";\nimport { buttonsStyle } from \"./style\";\nimport { CircularProgress } from \"@mui/material\";\n\nexport const SaveOrCancelButton = ({\n butnClassName,\n loader = false,\n butnSavingText,\n butnCancelling,\n onClearAll,\n onSaveData,\n}) => {\n const classes = buttonsStyle();\n\n const registerCtx = useContext(RegisterContext);\n const { modalContent } = registerCtx;\n\n return (\n \n {butnViewingText}\n \n );\n};\n","import React from \"react\";\n\nexport const ViewAsButton = ({\n butnClassName,\n viewAsHandler,\n butnViewAsLabel,\n}) => {\n return (\n \n );\n};\n","import { Colors } from 'utils';\nimport { makeStyles } from '@material-ui/core/styles';\n\nexport const dropdownStyle = makeStyles(\n () => ({\n dropdownOverlayStyle: {\n width: '100%',\n height: '100vh',\n position: 'fixed',\n zIndex: 1,\n top: 0,\n left: 0,\n '&.overlayInModal': {\n maxWidth: '500px',\n width: '100%',\n maxHeight: '391px',\n height: '100%',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n '@media(max-width: 1200px)': { maxHeight: '587px' },\n '@media(max-width: 768px)': { maxWidth: '375px' },\n },\n },\n dropdownBoxStyle: {\n position: 'relative',\n backgroundColor: Colors.BackgroundWhite,\n border: '1px solid #757280',\n borderRadius: '20px',\n '&.listing': {\n backgroundColor: Colors.BackgroundWhiteOff,\n borderRadius: '8px',\n border: '1px solid transparent',\n '&.active': {\n backgroundColor: Colors.BackgroundWhite,\n boxShadow: '0px 0px 6px #0073BB29',\n border: '1px solid #0073BB',\n },\n '&.error': {\n backgroundColor: Colors.BackgroundWhite,\n boxShadow: '0px 0px 6px #FF385C29',\n border: '1px solid #FF385C',\n },\n },\n '&.fromToDropdown': {\n '@media(max-width: 1440px)': {\n display: 'none',\n },\n },\n '&.newestInModal, &.checkBoxInModal': {\n '@media(max-width: 1200px)': {\n display: 'none',\n },\n },\n '&.boxInModal': {\n maxWidth: '372px',\n width: '100%',\n borderRadius: '8px',\n '@media(max-width: 768px)': {\n maxWidth: '247px',\n },\n },\n },\n showDropdownBoxStyle: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n cursor: 'pointer',\n padding: '10px 16px 10px 24px',\n '&.listing': {\n justifyContent: 'space-between',\n padding: '10px 16px',\n height: '38px',\n },\n '& .dropArrow, & .dropClear': {\n marginLeft: '16px',\n },\n '&.selected': {\n paddingRight: '8px',\n },\n '&.showBoxInModal': {\n justifyContent: 'space-between',\n },\n },\n dropTitleBoxClassName: {\n display: 'flex',\n alignItems: 'center',\n },\n dropdownSelectedStyle: {\n fontSize: '14px',\n fontWeight: 500,\n color: Colors.TextBlack,\n '&.listing': { color: Colors.TextGray },\n '&.active': { color: '#757280' },\n },\n dropdownOptionIconClassName: {\n width: '18px',\n height: '18px',\n marginLeft: '8px',\n '& img': { width: '100%' },\n },\n clearSelectedButnStyle: {\n border: 'none',\n outline: 'none',\n backgroundColor: 'inherit',\n display: 'flex',\n },\n dropdownStyle: {\n position: 'absolute',\n left: 0,\n width: '250px',\n backgroundColor: Colors.BackgroundWhite,\n boxShadow: '0px 0px 6px #00000029',\n borderRadius: '12px',\n paddingTop: '12px',\n paddingBottom: '12px',\n top: '48px',\n zIndex: 999,\n '&.listing': {\n width: '100%',\n borderRadius: '8px',\n top: '42px',\n },\n '&.dropdownInModal': {\n width: '372px',\n '@media(max-width: 768px)': {\n maxWidth: '247px',\n },\n },\n '&.filteringFromTo': {\n width: '376px',\n padding: '24px',\n top: '48px',\n transition: 'all 0.1s linear',\n display: 'flex',\n alignItems: 'center',\n '& span': {\n fontSize: '16px',\n fontWeight: 500,\n color: Colors.TextBlack,\n marginLeft: '16px',\n marginRight: '16px',\n },\n '& input': {\n maxWidth: '140px',\n width: '100%',\n },\n },\n },\n dropdownInModalStyle: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n marginTop: '16px',\n flexWrap: 'wrap',\n '@media(max-width: 768px)': {\n maxWidth: '280px',\n },\n },\n dropdownOptionsStyle: {\n transition: 'all 0.1s linear',\n cursor: 'default',\n padding: '10px 16px',\n display: 'flex',\n alignItems: 'center',\n '&:hover': {\n backgroundColor: Colors.BackgroundWhiteOff,\n },\n zIndex: 9999,\n },\n dropdownOptionTitleStyle: {\n fontSize: '14px',\n fontWeight: 500,\n color: Colors.TextGray,\n '&.selectedTitle': {\n color: '#3377CC',\n },\n },\n checkBoxesQuantityStyle: {\n position: 'absolute',\n top: 0,\n right: '-10px',\n width: '24px',\n height: '24px',\n backgroundColor: '#2B273C',\n border: '2px solid #FAFAFA',\n borderRadius: '50%',\n textAlign: 'center',\n '& span': {\n fontSize: '10px',\n fontWeight: 500,\n color: Colors.TextWhite,\n },\n },\n searchContainerStyle: {\n position: 'relative',\n '@media(max-width: 650px)': {\n marginTop: '24px',\n width: '100%',\n },\n },\n\n searchBoxStyle: {\n padding: '8px 8px 8px 19px',\n width: '230px',\n height: '40px',\n backgroundColor: Colors.BackgroundWhiteOff,\n borderRadius: '24px',\n border: '1px solid transparent',\n display: 'flex',\n alignItems: 'center',\n transition: 'all 0.2s linear',\n '&.focused': {\n width: '380px',\n border: '1px solid #0073BB',\n backgroundColor: Colors.BackgroundWhite,\n boxShadow: '0px 0px 6px #0073BB29',\n },\n '@media(max-width: 650px)': {\n width: '100%',\n '&.focused': { width: '100%' },\n },\n },\n\n searchBoxStyleCustom: {\n backgroundColor: Colors.BackgroundWhiteOff,\n borderRadius: '8px',\n border: '1px solid transparent',\n '&.focused': {\n width: '100%',\n borderRadius: '8px',\n border: '1px solid #0073BB',\n backgroundColor: Colors.BackgroundWhite,\n },\n '@media(max-width: 650px)': {\n width: '100%',\n '&.focused': { width: '100%' },\n },\n },\n\n searchBoxStyleCustomError: {\n backgroundColor: Colors.BackgroundWhiteOff,\n borderRadius: '8px',\n border: '1px solid red',\n '&.focused': {\n width: '100%',\n borderRadius: '8px',\n border: '1px solid #0073BB',\n backgroundColor: Colors.BackgroundWhite,\n },\n '@media(max-width: 650px)': {\n width: '100%',\n '&.focused': { width: '100%' },\n },\n },\n searchIconStyle: {\n display: 'flex',\n paddingRight: '11px',\n cursor: 'text',\n },\n }),\n { index: 1 }\n);\n","import React from \"react\";\nimport { dropdownStyle } from \"../dropdowns/style\";\n\nexport const FilterButton = ({\n butnClassName,\n butnLabelClassName,\n onOpen,\n filterButnLabel,\n filteredItemsQuantity,\n}) => {\n const classes = dropdownStyle();\n\n return (\n \n );\n};\n","import React from \"react\";\nimport { buttonsStyle } from \"./style\";\n\nexport const CloseModalButton = ({\n onCloseModal,\n butnLabel,\n butnClassName,\n}) => {\n const classes = buttonsStyle();\n return (\n \n {butnLabel}\n \n );\n};\n","import React from \"react\";\nimport { buttonsStyle } from \"./style\";\n\nexport const UserActionButton = ({\n butnClassName,\n onUserAction,\n butnLabel,\n}) => {\n const classes = buttonsStyle();\n\n return (\n \n {butnLabel}\n \n );\n};\n","import { makeStyles } from '@material-ui/core/styles';\n\nexport const loaderStyle = makeStyles(\n () => ({\n loaderBoxStyle: {\n width: '100%',\n height: '50vh',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n }),\n { index: 1 }\n);\n","import React from \"react\";\nimport {CircularProgress} from \"@mui/material\";\nimport {loaderStyle} from \"./style\";\nimport {Colors} from \"utils\";\n\nexport const Loader = ({type, color}) => {\n const classes = loaderStyle();\n return (\n
\n \n );\n};\n","import React, { useState } from \"react\";\nimport { Images } from \"utils\";\nimport { dropdownStyle } from \"./style\";\n\nexport const FilteringOptionsDropdown = ({\n dropdownOptions = [],\n isInModal,\n onPass,\n selected,\n defaultSelected = {},\n onClearSelected,\n}) => {\n const [dropdownIsShown, setDropdownIsShown] = useState(false);\n\n const classes = dropdownStyle();\n\n const chooseOptionHandler = (option) => {\n onPass(option);\n setDropdownIsShown(false);\n };\n\n return (\n <>\n {dropdownIsShown && (\n \n
\n\n \n 3\n
\n\n \n
\n\n \n
\n \n Step 3\n
\n\n\n Choose a listing to promote from the\n \"Non Promoted\"\n section.\n
\n\n\n
\n \n \n
\n \n Identify the listing you want to improve from the\n \"Non Promoted\"\n section.\n
\n\n \n
\n \n Click the\n \n \"Promote\"\n \n button next to the listing you wish to push forward.\n\n
\n\n
\n \n );\n};\n\n","import {makeStyles} from \"@material-ui/core/styles\";\nimport {Colors} from \"utils\";\n\nexport const footerCoresStyle = makeStyles(() => ({\n\n sendMessageWrapper: {\n position: 'fixed',\n bottom: '50%',\n right: '50%',\n transform: 'translate(50%, 50%)',\n zIndex: 99999,\n maxWidth: '500px',\n width: '96%',\n maxHeight: '650px',\n height: '100%',\n overflow: 'auto',\n paddingTop: '16px',\n backgroundColor: Colors.BackgroundWhite,\n borderRadius: '16px',\n display: 'flex',\n flexDirection: 'column',\n padding: '24px 12px',\n '@media(min-width: 320px)': {\n padding: '24px 12px',\n },\n '@media(min-width: 768px)': {\n padding: '24px',\n },\n },\n\n closeButton: {\n left: 'auto',\n right: '16px',\n },\n\n title: {\n fontWeight: '800',\n fontSize: '24px',\n lineHeight: '36px',\n color: '#2B273C',\n marginBottom: '32px',\n },\n\n textAreaStyles: {\n width: '100%',\n height: '169px',\n background: '#F4F4F4',\n borderRadius: '8px',\n border: '1px solid transparent',\n resize: 'none',\n padding: '10px 16px',\n outline: 'none',\n\n '&:focus': {\n backgroundColor: Colors.BackgroundWhite,\n border: '1px solid #0073BB',\n },\n\n },\n\n inputStyles: {\n maxWidth: '100%',\n '&:not(:last-of-type)': {\n marginBottom: '24px'\n },\n '& > label > input': {\n width: '100%',\n },\n },\n\n inputTitle: {\n // marginTop: '24px',\n fontWeight: '700',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#2B273C',\n marginBottom: '4px',\n '& span': {\n color: '#FF385C',\n }\n },\n\n sendButton: {\n width: '100%',\n height: '48px',\n background: '#FF385C',\n borderRadius: '8px',\n // marginTop: '38px',\n border: 'none',\n fontWeight: '500',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#FFFFFF',\n display:'flex',\n justifyContent:'center',\n alignItems:'center',\n }\n\n\n}), {index: 1});\n","import {makeStyles} from '@material-ui/core/styles';\nimport {Images, Colors} from 'utils';\n\nexport const inputStyle = makeStyles(\n () => ({\n // ** user input style **\n userInputBoxStyle: {\n position: 'relative',\n width: '100%',\n marginBottom: '8px',\n '&.inModal': {marginBottom: '16px'},\n '&.edit': {marginBottom: '24px'},\n '&.hide': {display: 'none'},\n },\n userInputLabelStyle: {\n '& > p': {\n marginBottom: '4px',\n fontSize: '16px',\n fontWeight: 700,\n color: Colors.TextBlack,\n display: 'flex',\n '&.required::before': {\n content: \"'*'\",\n color: '#FF385C',\n },\n },\n },\n userInputStyle: {\n outline: 'none',\n width: '400px',\n padding: '10px 16px',\n borderRadius: '8px',\n backgroundColor: Colors.BackgroundWhiteOff,\n border: '1px solid transparent',\n '&.listing': {width: '100%'},\n '&:focus': {\n backgroundColor: Colors.BackgroundWhite,\n border: '1px solid #0073BB',\n },\n '&.error': {\n backgroundColor: Colors.BackgroundWhite,\n border: '1px solid #FF385C',\n },\n '@media(max-width: 600px)': {width: '100%'},\n '@media(max-width: 500px)': {width: '295px'},\n '@media(max-width: 350px)': {width: '265px'},\n },\n eyeIconStyle: {\n position: 'absolute',\n top: '32px',\n right: '16px',\n zIndex: 999,\n display: 'block',\n width: '18px',\n height: '18px',\n backgroundImage: `url(${Images.eyeOffIcon})`,\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'contain',\n backgroundPosition: 'center',\n cursor: 'pointer',\n '&.show': {\n backgroundImage: `url(${Images.eyeOnIcon})`,\n },\n },\n userInputErrorBoxStyle: {\n width: '100%',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n padding: '4px 16px 0',\n minHeight: '17px',\n '& > p': {\n fontSize: '12px',\n fontWeight: 500,\n },\n },\n userInputErrorStyle: {color: '#FF385C'},\n charCounterStyle: {color: '#2B273C'},\n // ** end **\n\n // ** from-to input style **\n fromToInputStyle: {\n outline: 'none',\n padding: '8px',\n backgroundColor: Colors.BackgroundWhite,\n border: '1px solid #75728080',\n borderRadius: '8px',\n fontSize: '14px',\n fontWeight: 500,\n color: Colors.TextGray,\n },\n // * end **\n\n // ** check-box input style **\n checkBoxLabelStyle: {\n display: 'flex',\n alignItems: 'center',\n transition: 'all 0.1s linear',\n cursor: 'default',\n padding: '10px 16px',\n '& input': {display: 'none'},\n '& input:checked + $inputCheckBoxStyle': {\n backgroundImage: `url(${Images.checkedCheckmark})`,\n },\n '&.homPageLabel input:checked ~ $inputLabelStyle': {\n color: Colors.ThemeBlue,\n },\n '&:hover': {backgroundColor: Colors.BackgroundWhiteOff},\n },\n inputCheckBoxStyle: {\n transition: 'background-image 0.2s linear',\n width: '18px',\n height: '18px',\n backgroundImage: `url(${Images.uncheckedCheckmark})`,\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'contain',\n backgroundPosition: 'center',\n marginRight: '8px',\n },\n inputLabelStyle: {\n fontSize: '14px',\n fontWeight: 500,\n color: Colors.TextGray,\n '&.selectedTitle': {\n color: '#3377CC',\n },\n },\n // ** end **\n\n\n inputTextField: {\n width: '100%',\n '& .MuiOutlinedInput-notchedOutline': {\n border: 'none',\n // borderColor: '#F4F4F4',\n borderRadius: '8px',\n },\n '& .MuiOutlinedInput-root': {\n height: '40px',\n border: 'none',\n borderRadius: '8px',\n background: '#F4F4F4'\n },\n '& .MuiInputLabel-outlined': {\n marginTop: '-3px'\n },\n '& .MuiInputLabel-outlined.MuiInputLabel-shrink': {\n transform: 'translate(14px, -2px) scale(0.75)'\n },\n '& .MuiSelect-select.MuiSelect-select': {\n background: 'none',\n border: 'none',\n },\n },\n\n selectTitle: {\n fontWeight: '700',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#2B273C',\n marginBottom: '4px',\n },\n selectWrapper: {\n width: '100%',\n height: '40px',\n background: '#F4F4F4',\n borderRadius: '8px',\n padding: '0 12px',\n border: '1px solid #F4F4F4',\n },\n select: {\n background: 'transparent',\n outline: 'none',\n border: 'none',\n height: '40px',\n width: '100%',\n },\n errorText: {\n fontWeight: '500',\n fontSize: '12px',\n color: '#FF385C',\n padding: '4px 16px 0',\n minHeight: '17px',\n },\n titleClass: {\n fontWeight: '700',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#2B273C',\n '& span': {\n color: '#FE385C',\n },\n },\n simpleInput: {},\n errorMessage: {\n fontSize: '12px',\n fontWeight: '500',\n color: '#FF385C',\n padding: '4px 16px 0',\n minHeight: '17px',\n }\n }),\n {index: 1}\n);\n","import {makeStyles} from \"@material-ui/core/styles\";\nimport {Colors} from \"utils\";\n\nexport const promotionStyle = makeStyles(() => ({\n tabButtonsWrapper: {\n marginBottom: '24px',\n width: '307px',\n height: '40px',\n background: '#FFFFFF',\n boxShadow: '0px 0px 6px rgba(138, 138, 138, 0.16)',\n borderRadius: '8px',\n display: 'flex',\n padding: '4px',\n alignItems: 'center',\n '& button': {\n border: 'none',\n width: '166px',\n height: '32px',\n borderRadius: '4px',\n fontWeight: '500',\n fontSize: '14px',\n lineHeight: '20px',\n background: 'transparent',\n }\n },\n\n paymentModal: {\n position: 'fixed',\n bottom: '50%',\n right: '50%',\n transform: 'translate(50%, 50%)',\n zIndex: 99999,\n maxWidth: '465px',\n width: '90%',\n maxHeight: '500px',\n height: 'auto',\n overflow: 'auto',\n paddingTop: '16px',\n backgroundColor: Colors.BackgroundWhite,\n borderRadius: '16px',\n display: 'flex',\n flexDirection: 'column',\n padding: '24px',\n },\n flexEnd: {\n display: 'flex',\n justifyContent: 'flex-end',\n width: '100%',\n '& button': {\n background: 'transparent',\n border: 'none',\n\n }\n },\n\n modalTitle: {\n fontWeight: '800',\n fontSize: '24px',\n lineHeight: '36px',\n color: '#2B273C',\n },\n modalSubTitle: {\n fontWeight: '400',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#000000',\n margin: '15px 0 24px',\n },\n whiteWrapper: {\n display: 'flex',\n alignItems: 'flex-start',\n width: '100%',\n height: 'auto',\n background: '#FFFFFF',\n boxShadow: '0px 0px 6px rgba(0, 0, 0, 0.16)',\n borderRadius: '8px',\n padding: '16px',\n marginBottom: '22px'\n },\n alignCenter: {\n display: 'flex',\n alignItems: 'center',\n width: '100%',\n },\n titleAndItem: {\n fontWeight: '500',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#000000',\n '& span': {\n color: '#757280',\n },\n },\n spaceBetween: {\n display: 'flex',\n justifyContent: 'space-between',\n width: '100%',\n '& button': {\n // width: '188px',\n height: '40px',\n borderRadius: '8px',\n fontWeight: '500',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#FFFFFF',\n border: 'none',\n }\n },\n cancel: {\n background: 'rgba(117, 114, 128, 0.5)',\n },\n pay: {\n background: '#FE385C',\n // marginLeft:'20px',\n width:'100%',\n },\n\n spaceBetweenRenew: {\n display: 'flex',\n justifyContent: 'space-between',\n width: '100%',\n '& button': {\n width: '188px',\n height: '40px',\n borderRadius: '8px',\n fontWeight: '500',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#FFFFFF',\n border: 'none',\n }\n },\n\n payButton: {\n background: '#FE385C',\n marginLeft:'20px',\n width: '188px',\n height: '40px',\n borderRadius: '8px',\n fontWeight: '500',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#FFFFFF',\n border: 'none',\n },\n cardNumber: {\n fontWeight: '400',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#2B273C',\n marginLeft: '17px',\n },\n totalAmount: {\n display: 'flex',\n justifyContent: 'space-between',\n marginBottom: '24px',\n '& p': {\n fontWeight: '600',\n fontSize: '18px',\n lineHeight: '28px',\n color: '#757280',\n },\n '& span': {\n fontWeight: '700',\n fontSize: '18px',\n lineHeight: '28px',\n color: '#2B273C',\n },\n },\n cardElement: {\n background: '#F4F4F4',\n padding: '12px 16px',\n border: 'none',\n borderRadius: '8px',\n width: '100%',\n height: '48px',\n },\n cardNumberTitle: {\n fontWeight: '700',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#2B273C',\n margin: '24px 0 4px',\n '& span': {\n color: '#FE385C',\n },\n },\n doneWrapper: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n alignItems: 'center',\n },\n doneTitle: {\n fontWeight: '800',\n fontSize: '24px',\n lineHeight: '36px',\n color: '#2B273C',\n margin: '24px 0 16px',\n },\n doneSubtitle: {\n fontWeight: '500',\n fontSize: '16px',\n lineHeight: '24px',\n textAlign: 'center',\n color: '#2B273C',\n marginBottom: '24px'\n },\n doneButton: {\n width: '192px',\n height: '40px',\n background: '#FE385C',\n borderRadius: '8px',\n fontWeight: '500',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#FFFFFF',\n border: 'none'\n },\n noListWrapper: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n alignItems: 'center',\n textAlign: 'center',\n width: '100%',\n height: '100%',\n marginTop:'70px',\n },\n noList:{\n width: '100%',\n maxWidth:'362px',\n height: '100%',\n },\n noListTitle: {\n fontWeight: '800',\n fontSize: '24px',\n lineHeight: '36px',\n textAlign: 'center',\n color: '#2B273C',\n margin: '24px 0 16px 0'\n },\n noListSubTitle: {\n fontWeight: '400',\n fontSize: '16px',\n lineHeight: '24px',\n textAlign: 'center',\n color: '#2B273C',\n },\n}))","import { makeStyles } from \"@material-ui/core/styles\";\nimport { Images, Colors } from \"utils\";\n\nexport const tooltipCoresStyle = makeStyles(\n () => ({\n // ** password validity style **\n passValidityContentStyle: {\n maxWidth: \"300px\",\n width: \"100%\",\n position: \"absolute\",\n top: \"85px\",\n left: \"16px\",\n zIndex: -1,\n backgroundColor: Colors.BackgroundWhite,\n boxShadow: \"0px 0px 6px #00000029\",\n height: \"0px\",\n padding: \"0px\",\n opacity: 0,\n transition:\n \"height 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out\",\n \"&.active\": {\n height: \"135px\",\n padding: \"16px\",\n opacity: 1,\n zIndex: 1,\n },\n },\n tooltipArrowStyle: {\n width: \"16px\",\n height: \"16px\",\n position: \"absolute\",\n top: \"-8px\",\n left: \"16px\",\n transform: \"rotate(45deg)\",\n backgroundColor: Colors.BackgroundWhite,\n borderLeft: \"1.5px solid rgba(0, 0, 0, 0.07)\",\n borderTop: \"1.5px solid rgba(0, 0, 0, 0.07)\",\n },\n validityTitleStyle: {\n width: \"100%\",\n fontSize: \"14px\",\n fontWeight: 700,\n color: Colors.TextBlack,\n },\n validityListStyle: {\n width: \"100%\",\n marginTop: \"16px\",\n \"& li\": {\n display: \"flex\",\n alignItems: \"center\",\n fontSize: \"14px\",\n fontWeight: 500,\n color: Colors.TextGray,\n \"&::before\": {\n content: \"''\",\n width: \"18px\",\n height: \"18px\",\n marginRight: \"8px\",\n backgroundImage: `url(${Images.invalidCheckmark})`,\n backgroundRepeat: \"no-repeat\",\n backgroundSize: \"contain\",\n backgroundPosition: \"center\",\n },\n \"&.active::before\": {\n backgroundImage: `url(${Images.validCheckmark})`,\n },\n },\n \"& li:not(:last-of-type)\": { marginBottom: \"8px\" },\n },\n // ** end **\n }),\n { index: 1 }\n);\n","import React from \"react\";\nimport { tooltipCoresStyle } from \"./styles\";\n\nexport const PassValidityContent = ({\n isShown,\n hasMinSixChars,\n hasOneNum,\n hasOneUppercase,\n}) => {\n const classes = tooltipCoresStyle();\n\n return (\n \n
\n\n \n 4\n
\n \n
\n\n \n
\n \n Step 4\n
\n\n\n Set up payment\n
\n\n\n
\n\n \n \n
\n \n Upon selecting \"Promote\", a payment window will appear:\n
\n\n \n\n
\n \n Fill in your card number to proceed with the payment.\n
\n\n \n\n
\n \n You'll also see the cost of the promotion, along with the start and end dates of the\n promotional period.\n
\n\n
\n \n
\n\n \n 5\n
\n \n
\n \n Step 5\n
\n\n\n Confirm and pay\n
\n\n\n
\n \n \n
\n \n Double-check all the entered details to ensure accuracy.\n
\n\n \n\n
\n \n Click the \"Pay\" button to finalize your promotion.\n
\n\n
\n );\n};\n","import React, { useEffect, useState } from 'react';\nimport { SimpleTooltip } from 'components';\nimport { inputStyle } from './style';\nimport { PassValidityContent } from '../tooltip/core';\n\nexport const UserInput = ({\n required,\n inputClassName,\n inputLabel,\n inputType,\n inputName,\n inputValue = '',\n onInputChange,\n inputPlaceholder,\n inputError,\n charCounterIsShown,\n passwordInput,\n areaLabel,\n hasMinSixChars,\n hasOneNum,\n hasOneUppercase,\n disabled,\n}) => {\n const classes = inputStyle();\n\n const [passwordIsShown, setPasswordIsShown] = useState(false);\n const [isValid, setIsValid] = useState(false);\n\n const passwordIsValid = hasMinSixChars && hasOneNum && hasOneUppercase;\n\n useEffect(() => {\n const timerId = setTimeout(() => setIsValid(passwordIsValid), 1000);\n return () => clearTimeout(timerId);\n }, [passwordIsValid]);\n\n return (\n \n Your password must contain:\n
\n- \n
- Minimum 8 characters \n
- At least 1 number \n
- \n At least 1 uppercase letter\n \n
\n \n {passwordInput &&\n \n \n \n }\n />\n }\n
\n );\n};\n","import React from 'react';\nimport { inputStyle } from './style';\n\nexport const FromToInput = ({ inputValue, onInputChange, inputPlaceholder }) => {\n const classes = inputStyle();\n\n return (\n \n
\n {inputError}
\n {charCounterIsShown &&{`${inputValue.length}/50`}
}\n\n {inputLabel}\n \n );\n};\n","\nimport React from \"react\";\nimport InputMask from \"react-input-mask\";\nimport {TextField} from \"@material-ui/core\";\nimport {inputStyle} from \"./style\";\n\nexport const MaskInput = ({name, label, value, disables, handleChange, info, error, mask, styles, notRequired}) => {\n const classes = inputStyle();\n\n return(\n \n\n \n {() => \n }\n \n
\n )\n}","import {makeStyles} from \"@material-ui/core/styles\";\nimport {Colors} from \"utils\";\n\nexport const buttonsStyle = makeStyles(\n () => ({\n viewMoreButnStyle: {\n paddingTop: \"8px\",\n paddingBottom: \"8px\",\n border: \"1px solid #FE385C\",\n borderRadius: \"8px\",\n fontSize: \"14px\",\n fontWeight: 500,\n textAlign: \"center\",\n },\n saveOrCancelButnStyle: {\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n \"& button\": {\n border: \"none\",\n paddingTop: \"8px\",\n paddingBottom: \"8px\",\n borderRadius: \"8px\",\n fontWeight: 500,\n width: \"156px\",\n textAlign: \"center\",\n },\n },\n saveButnStyle: {\n backgroundColor: \"#FF385C\",\n color: Colors.TextWhite,\n fontSize: \"14px\",\n transition: \"background-color 0.2s linear\",\n \"&.delete\": {backgroundColor: \"#FF385C !important\"},\n \"&:hover\": {backgroundColor: \"#d52f4c\"},\n },\n sendButnStyle: {\n padding: \"8px\",\n fontSize: \"16px\",\n fontWeight: 500,\n textAlign: \"center\",\n color: Colors.TextWhite,\n textTransform: \"capitalize\",\n borderRadius: \"8px\",\n backgroundColor: \"#FF385C\",\n border: \"none\",\n outline: \"none\",\n transition: \"background-color 0.2s linear\",\n \"&:hover\": {backgroundColor: \"#d52f4c\"},\n },\n cancelButnStyle: {\n backgroundColor: \"inherit\",\n textDecoration: \"underline\",\n fontSize: \"16px\",\n },\n closeModalButnStyle: {\n border: \"none\",\n backgroundColor: \"inherit\",\n position: \"absolute\",\n top: \"16px\",\n left: \"16px\",\n width: \"24px\",\n height: \"24px\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n \"@media(max-width: 860px)\": {left: \"60px\"},\n },\n userActionButnStyle: {\n border: \"none\",\n outline: \"none\",\n backgroundColor: \"inherit\",\n padding: 0,\n \"&:hover\": {textDecoration: \"underline\"},\n },\n alignCenter: {\n display: 'flex',\n alignItems: 'center',\n width: '100%',\n justifyContent: 'space-between',\n },\n cancelButton: {\n width: '188px',\n height: '40px',\n background: 'rgba(117, 114, 128, 0.5)',\n borderRadius: '8px',\n fontWeight: '500',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#FFFFFF',\n border:'none',\n },\n createButton: {\n width: '188px',\n height: '40px',\n background: '#FF0331',\n borderRadius: '8px',\n fontWeight: '500',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#FFFFFF',\n border:'none',\n },\n }),\n {index: 1}\n);\n","import React from \"react\";\nimport { buttonsStyle } from \"./style\";\nimport { CircularProgress } from \"@mui/material\";\n\nexport const SendButton = ({\n butnClassName,\n butnType,\n butnSendingText,\n butnDisabled,\n onClickButn,\n loader = false,\n}) => {\n const classes = buttonsStyle();\n\n return (\n {notRequired ? '' : *}Phone Number
\n\n */}\n
\n {error}
\n {/*\n \n {butnCancelling}\n \n \n {loader ? (\n \n ) : (\n butnSavingText\n )}\n \n
\n );\n};\n","import React from \"react\";\nimport {buttonsStyle} from \"./style\";\n\nexport const ViewMoreButton = ({butnClassName, onView, butnViewingText, styles}) => {\n const classes = buttonsStyle();\n return (\n \n \n
\n );\n};\n","import {Loader} from \"../loader\";\nimport {buttonsStyle} from \"./style\";\n\nexport const CreateCancelButtons = ({cancelText, handleCancel, createText, handleCreate, loader}) => {\n const classes = buttonsStyle()\n\n return (\n \n \n \n
\n )\n}","import React, { useState } from 'react';\nimport { Images } from 'utils';\nimport { dropdownStyle } from './style';\n\nexport const UserInputsDropdown = ({ dropdownOptions = [], onPass, selected, dropdownTitle, dropdownError }) => {\n const [dropdownIsShown, setDropdownIsShown] = useState(false);\n\n const classes = dropdownStyle();\n\n const chooseOptionHandler = (option) => {\n onPass(option);\n setDropdownIsShown(false);\n };\n\n return (\n <>\n {dropdownIsShown && setDropdownIsShown(false)} />}\n \n
\n )}\n setDropdownIsShown((prevState) => !prevState)}>\n 
\n
\n {dropdownIsShown && (\n {selected ? selected : dropdownTitle}
\n\n {dropdownOptions.map((option, index) => {\n return (\n chooseOptionHandler(option)}>\n \n {option}\n \n
\n );\n })}\n \n
\n ) : (\n \n {selected.label}\n
\n {selected.id !== \"0\" && selected.id !== \"1\" && (\n\n 
\n
\n )}\n \n {defaultSelected.label}\n
\n )}\n {selected ? (\n\n {option.id === selected.id ? (\n \n ) : (\n 
\n )}\n
\n )}\n setDropdownIsShown(false)} />}\n
\n \n );\n};\n","import React, { useState, useContext } from 'react';\nimport { Images, ListingFiltersContext } from 'utils';\nimport { dropdownStyle } from './style';\nimport { CheckBoxInput } from 'components';\n\nexport const FilteringCheckBoxDropdown = ({\n dropdownBoxClassName,\n dropdownClassName,\n pointsBoxClassName,\n dropdownOptions = [],\n isInModal,\n selectedCheckBoxes = [],\n selectedOption = '',\n dropdownTitle,\n onPass,\n isHomePage,\n}) => {\n const [dropdownIsShown, setDropdownIsShown] = useState(false);\n\n const classes = dropdownStyle();\n const listingFiltersCtx = useContext(ListingFiltersContext);\n const { handlePropTypeSelected } = listingFiltersCtx;\n\n return (\n <>\n {dropdownIsShown && \n setDropdownIsShown((prevState) => !prevState)}>\n {\n evt.stopPropagation();\n onClearSelected();\n setDropdownIsShown(false);\n }}>\n \n \n ) : dropdownIsShown ? (\n 
\n ) : (\n 
\n )}\n
\n {dropdownIsShown && (\n {selectedValueWithUnit}
\n {selectFieldIsNotEmpty ? (\n\n passSelectedMin(evt.target.value)}\n inputPlaceholder={minInputPlaceholder}\n />\n to \n passSelectedMax(evt.target.value)}\n inputPlaceholder={maxInputPlaceholder}\n />\n
\n )}\n setDropdownIsShown(false)} />}\n
\n \n );\n};\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport { Colors, Images } from \"utils\";\n\nexport const addressStyle = makeStyles(\n () => ({\n addressInputStyle: {\n outline: \"none\",\n border: \"none\",\n backgroundColor: \"inherit\",\n fontSize: \"14px\",\n fontWeight: 500,\n color: Colors.TextGray,\n width: \"100%\",\n \"&::-webkit-search-cancel-button\": {\n position: \"relative\",\n right: 0,\n appearence: \"none\",\n \"-webkit-appearance\": \"none\",\n height: \"24px\",\n width: \"24px\",\n borderRadius: \"50%\",\n backgroundImage: `url(${Images.clearSearch})`,\n backgroundRepeat: \"no-repeat\",\n backgroundSize: \"contain\",\n backgroundPosition: \"center\",\n cursor: \"pointer\",\n },\n },\n addressDropdownStyle: {\n position: \"absolute\",\n left: 0,\n width: \"250px\",\n backgroundColor: Colors.BackgroundWhite,\n boxShadow: \"0px 0px 6px #00000029\",\n borderRadius: \"12px\",\n paddingTop: \"12px\",\n paddingBottom: \"12px\",\n top: \"48px\",\n zIndex: 999,\n \"&.dropdownInModal\": {\n width: \"372px\",\n \"@media(max-width: 768px)\": {\n maxWidth: \"247px\",\n },\n },\n \"&.filteringFromTo\": {\n width: \"376px\",\n padding: \"24px\",\n top: \"48px\",\n transition: \"all 0.1s linear\",\n display: \"flex\",\n alignItems: \"center\",\n \"& span\": {\n fontSize: \"16px\",\n fontWeight: 500,\n color: Colors.TextBlack,\n marginLeft: \"16px\",\n marginRight: \"16px\",\n },\n \"& input\": {\n maxWidth: \"140px\",\n width: \"100%\",\n },\n },\n \"&.filteringAddress\": {\n width: \"380px\",\n backgroundColor: Colors.BackgroundWhite,\n boxShadow: \"0px 0px 6px #00000029\",\n borderRadius: \"12px\",\n paddingTop: \"12px\",\n paddingBottom: \"12px\",\n top: \"48px\",\n zIndex: 999,\n \"@media(max-width: 650px)\": {\n width: \"100%\",\n },\n },\n },\n addressOptionsStyle: {\n transition: \"all 0.1s linear\",\n cursor: \"default\",\n padding: \"10px 16px\",\n display: \"flex\",\n alignItems: \"center\",\n \"&:hover\": {\n backgroundColor: Colors.BackgroundWhiteOff,\n },\n zIndex: 999,\n },\n addressOptionTitleStyle: {\n fontSize: \"14px\",\n fontWeight: 500,\n color: Colors.TextGray,\n \"&.selectedTitle\": {\n color: \"#3377CC\",\n },\n },\n }),\n { index: 1 }\n);\n","import React from 'react';\nimport PlacesAutocomplete from 'react-places-autocomplete';\nimport {addressStyle} from './styles';\n\nexport const AddressInput = ({\n dropdownClassName,\n inputRef,\n inputType,\n inputPlaceholder,\n onInputAddress,\n onFocusInput,\n onBlurInput,\n address,\n onChangeAddress,\n triggerStatus,\n searchingStatus,\n onSelectAddress,\n dropdownIsShown,\n searchType,\n disabled\n }) => {\n const classes = addressStyle();\n\n return (\n \n {\n onPass({\n ...option,\n isChecked: evt.target.checked,\n });\n }}\n inputLabel={option.label}\n />\n );\n })}\n
\n )}\n setDropdownIsShown((prevState) => !prevState)}>\n \n ) : (\n \n )}\n
\n {selectedCheckBoxes.length !== 0 && (\n \n {selectedOption ? selectedOption : dropdownTitle}\n
\n {dropdownIsShown ? (\n\n {selectedCheckBoxes.length} \n
\n )}\n {dropdownIsShown && (\n \n {dropdownOptions.map((option, index) => {\n return isHomePage ? (\n {\n handlePropTypeSelected(option.label);\n setDropdownIsShown(false);\n }}>\n \n {option.label}\n \n
\n ) : (\n \n {/* {loading && \n {suggestion.description}\n
\n );\n })\n )}\n Loading...
} */}\n {searchingStatus === 'ZERO_RESULTS' ? (\n \n No Results\n
\n ) : (\n suggestions.map((suggestion, index) => {\n return (\n \n
\n \n \n {searchIcon && (\n \n
\n addressInputRef.current.focus()}>\n 
\n
\n )}\n \n
\n );\n};\n","import React, { useContext } from \"react\";\nimport { Logo, CloseModalButton } from \"components\";\nimport { wrappersStyle } from \"./style\";\nimport { Images, RegisterContext } from \"utils\";\n\nexport const RegisterModalWrapper = ({ onClose, children }) => {\n const classes = wrappersStyle();\n\n const registerCtx = useContext(RegisterContext);\n const { modalContent } = registerCtx;\n\n return (\n \n
\n \n }\n />\n {/* Advanced Search \n
\n More Filters
*/}\n{children}
\n \n \n
\n \n }\n butnClassName={classes.closeModalButnStyle}\n />\n {modalContent === \"profilePicture\" ||\n modalContent === \"changePassword\" ||\n (modalContent === \"deleteAccount\" ||\n modalContent === \"deleteListing\" ? null : (\n {children}
\n \n {/**/}\n {/*
\n ))}\n */}\n {/* */}\n {/*
*/}\n \n {modalContent === 'profilePicture' && (\n \n {title}\n \n {children}\n
\n );\n};\n","import React, { useState } from 'react';\nimport { wrappersStyle } from './style';\nimport { Images } from 'utils';\n\nexport const ListingInputsWrapper = ({ inputsTitle, children }) => {\n const classes = wrappersStyle();\n const [inputsAreShown, setInputsAreShown] = useState(false);\n\n return (\n \n 
\n
\n )}\n \n {modalContent === 'profilePicture' ? (\n dispatch(userActions.removeUser(user?.id))}\n loader={delLoader?.length}\n />\n ) : modalContent === 'deleteListing' ? (\n dispatch(listingActions.removeListing(listingId))}\n loader={delListingLoader?.length}\n />\n ) : null}\n
\n \n \n \n
\n ) : modalContent === 'deleteAccount' ? (\n \n
\n );\n};\n","import React, { useContext, useState, useEffect } from 'react';\nimport {useDispatch, useSelector} from \"react-redux\";\nimport ReactFileReader from 'react-file-reader';\nimport { UserActionButton, SimpleModal, RegisterModalWrapper } from 'components';\nimport { wrappersStyle } from './style';\nimport { handleFileUpload, Images, RegisterContext} from 'utils';\nimport { UserRegistrationWrapper } from '.';\nimport { ChangePassword } from 'fragments';\nimport { AvatarContext } from 'utils/contexts/avatarContext';\nimport { withRouter } from 'react-router';\nimport {brokerActions, httpRequestsOnErrorsActions, userActions} from \"store\";\n\nimport {CircularProgress} from \"@mui/material\";\n\nexport const MyProfileWrapper = withRouter(({ location, children, }) => {\n const classes = wrappersStyle();\n const usrType = localStorage.getItem('userType')\n\n const user = useSelector((state) => state.users.userById);\n const dispatch = useDispatch()\n const [open, setOpen] = useState(false);\n const [error, setError] = useState(false);\n const [loaderUpload, setLoaderUpload] = useState(false);\n const [profilePicture, setProfilePicture] = useState(user?.avatar ? user.avatar : undefined);\n const userFullName = `${user?.firstName} ${user?.lastName}`;\n const registerCtx = useContext(RegisterContext);\n const { modalContent, handleModalContent } = registerCtx;\n const avatarCtx = useContext(AvatarContext);\n const { handleAvatarChange } = avatarCtx;\n\n\n const _profilePictureURL =\n // profilePicture ? profilePicture === user?.avatar ?\n profilePicture?.url ? profilePicture?.url : Images.userProfile;\n\n // useEffect(() => {\n // handleAvatarChange(profilePicture);\n // }, [profilePicture]);\n\n useEffect(() => {\n if(user?.avatar){\n setProfilePicture(user?.avatar)\n }\n },[user])\n\n const handleFileChange = async (file) => {\n const _avatarSizeLimit = 2097152;\n if (file[0]?.size > _avatarSizeLimit) {\n dispatch(httpRequestsOnErrorsActions.appendError('IMAGE_SIZE'))\n setError(true);\n return;\n }else{\n setError(false);\n dispatch(httpRequestsOnErrorsActions.removeError('IMAGE_SIZE'))\n }\n\n setLoaderUpload(true);\n await handleFileUpload(file[0]).then((response) => {\n setLoaderUpload(false);\n const uploadedAvatar = response.data;\n const userData = {\n ...user,\n avatar: uploadedAvatar,\n };\n\n setProfilePicture( uploadedAvatar )\n if(usrType === 'USER') {\n dispatch(userActions.editUser(user?.id, userData));\n }else{\n dispatch(brokerActions.editBroker(user?.id, {\n ...userData,\n avatar: uploadedAvatar,\n aboutMe: user?.aboutMe ? user?.aboutMe : '.',\n }));\n }\n }).catch(() => {\n setLoaderUpload(false);\n });\n if (open) {\n setOpen(false);\n }\n };\n\n const handleAvatarRemove = () => {\n const userData = {\n ...user,\n avatar: null,\n };\n\n if(usrType === 'USER') {\n dispatch(userActions.editUser(user?.id, userData));\n }else{\n dispatch(brokerActions.editBroker(user?.id, {\n ...userData,\n avatar: null,\n aboutMe: user?.aboutMe ? user?.aboutMe : '.',\n }));\n }\n setProfilePicture(undefined);\n setOpen(false);\n };\n\n return (\n <>\n setInputsAreShown((prevState) => !prevState)}>\n 
\n
\n {inputsTitle}
\n\n {inputsAreShown && children}\n
\n \n
\n {inputsTitle}
\n{children}
\n \n
\n \n
\n \n
\n \n
\n My Profile
\n\n
\n \n
\n {children}\n \n {\n if (!profilePicture) return;\n setOpen(true);\n handleModalContent('profilePicture');\n }}>\n {!profilePicture && (\n \n <>\n \n )}\n \n )}\n
\n \n {loaderUpload ?\n \n :\n 
\n }\n
\n { (\n {userFullName}
\n\n {\n setOpen(true);\n handleModalContent('changePassword');\n }}\n butnLabel={'Change Password'}\n />\n {\n setOpen(true);\n handleModalContent('deleteAccount');\n }}\n butnLabel={'Delete Account'}\n />\n
\n \n Profile picture helps people recognize you and builds trust in the platform.\n
\n \n ) : modalContent === 'changePassword' ? (\nUse strong password to keep your account secure.
\n\n Are you sure you want to delete your account? If you delete your account, you'll permanently lose your\n profile.\n
\n\n
\n )\n}","import React from \"react\";\nimport { Modal } from \"@mui/material\";\nimport { Backdrop } from \"@mui/material\";\n\nexport const SimpleModal = ({\n openDefault,\n handleOpenClose,\n content,\n backdropCustom,\n disableScrollLock,\n}) => {\n const [open, setOpen] = React.useState(false);\n\n // const handleOpen = () => {\n // setOpen(true);\n // };\n const handleClose = () => {\n if (handleOpenClose) {\n handleOpenClose();\n } else {\n setOpen(false);\n }\n };\n\n const body = \n
\n Price: $15.00
\n\n
\n Start Date:\n {renewPromotion === true ? startDay : moment().format('MM.DD.YYYY') }\n
\nEnd Date:\n {renewPromotion === true ? moment(endDayRenew).format('MM.DD.YYYY') : moment(newMount).format('MM.DD.YYYY')}\n
\n{content}
;\n\n return (\n \n {/* */}\n \n {body}\n \n
\n );\n};\n","import { makeStyles } from \"@material-ui/core/styles\";\n\nexport const modalContentsStyle = makeStyles(\n () => ({\n filteringFromToInModalStyle: {\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n marginTop: \"8px\",\n \"& input\": {\n maxWidth: \"202px\",\n width: \"100%\",\n },\n \"& span\": { margin: \"0 16px\" },\n },\n filteringInModalStyle: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n marginTop: \"16px\",\n flexWrap: \"wrap\",\n \"@media(max-width: 768px)\": {\n maxWidth: \"280px\",\n },\n },\n }),\n { index: 1 }\n);\n","import React from 'react';\nimport { FromToInput } from 'components';\nimport { modalContentsStyle } from './styles';\n\nexport const FilteringFromToInModal = ({\n passSelectedMin,\n passSelectedMax,\n selectedMin,\n selectedMax,\n minInputPlaceholder,\n maxInputPlaceholder,\n}) => {\n const classes = modalContentsStyle();\n\n return (\n \n passSelectedMin(evt.target.value)}\n inputPlaceholder={minInputPlaceholder}\n />\n to \n passSelectedMax(evt.target.value)}\n inputPlaceholder={maxInputPlaceholder}\n />\n
\n );\n};\n","import React from \"react\";\nimport { CheckBoxInput } from \"components\";\nimport { modalContentsStyle } from \"./styles\";\n\nexport const FilteringCheckboxInModal = ({ dropdownOptions = [], onPass }) => {\n const classes = modalContentsStyle();\n return (\n \n {dropdownOptions.map((option, index) => {\n return (\n {\n onPass({\n ...option,\n isChecked: evt.target.checked,\n });\n }}\n inputLabel={option.label}\n />\n );\n })}\n
\n );\n};\n","import { makeStyles } from \"@material-ui/core/styles\";\nimport { Colors } from \"utils\";\n\nexport const logoStyle = makeStyles(\n () => ({\n logoStyle: {\n display: \"flex\",\n alignItems: \"center\",\n cursor: \"pointer\",\n \"& > h1\": {\n fontSize: \"24px\",\n fontWeight: \"800\",\n color: Colors.TextBlack,\n textTransform: \"uppercase\",\n },\n \"&::after\": {\n content: \"''\",\n display: \"block\",\n width: \"10px\",\n height: \"10px\",\n backgroundColor: Colors.ThemePink,\n borderRadius: \"2px\",\n marginLeft: \"6px\",\n transform: \"rotate(45deg)\",\n },\n },\n }),\n { index: 1 }\n);\n","import React from 'react';\nimport { logoStyle } from './styles';\n\nexport const Logo = ({ logoClassName, onClickLogo }) => {\n const classes = logoStyle();\n\n return (\n \n
\n );\n};\n","import { makeStyles } from \"@material-ui/core/styles\";\n\nexport const customBreadcrumbsStyle = makeStyles(\n () => ({\n customBreadcrumbsStyle: {\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n },\n breadcrumbsContainerStyle: {\n maxWidth: \"1440px\",\n width: \"100%\",\n padding: \"50px 80px 0px\",\n \"@media(max-width: 1200px)\": {\n paddingLeft: \"70px\",\n paddingRight: \"70px\",\n },\n \"@media(max-width: 768px)\": {\n paddingLeft: \"37px\",\n paddingRight: \"37px\",\n },\n \"@media(max-width: 400px)\": {\n paddingLeft: \"16px\",\n paddingRight: \"16px\",\n },\n },\n breadcrumbsStyle: {\n marginBottom: \"32px !important\",\n \"@media(max-width: 705px)\": {\n marginBottom: \"24px !important\",\n },\n },\n parentStyle: {\n fontSize: \"16px !important\",\n fontWeight: \"500 !important\",\n color: \"#757280 !important\",\n textDecoration: \"none !important\",\n cursor: \"pointer\",\n },\n childStyle: {\n fontSize: \"16px !important\",\n fontWeight: \"500 !important\",\n color: \"#2B273C !important\",\n cursor: \"default\",\n },\n }),\n { index: 1 }\n);\n","import React from \"react\";\nimport { Breadcrumbs, Link, Typography } from \"@mui/material\";\nimport { withRouter } from \"react-router-dom\";\nimport { hideParamsId, makeCapitalize } from \"utils\";\nimport { customBreadcrumbsStyle } from \"./styles\";\n\nexport const CustomBreadcrumbs = withRouter(\n ({ history, location, breadcrumbsClassName }) => {\n const classes = customBreadcrumbsStyle();\n\n const pathnames = location.pathname\n .split(\"/\")\n .filter((pathname) => pathname);\n\n return (\n {'croill'}
\n\n \n {pathnames.length === 0 ? (\n Home page \n ) : (\n history.push(\"/\")}\n >\n Home page\n \n )}\n {pathnames.map((pathname, index) => {\n const routeTo = `/${pathnames.slice(0, index + 1).join(\"/\")}`;\n const isLast = index === pathnames.length - 1;\n\n return isLast ? (\n \n {makeCapitalize(hideParamsId(pathname))}\n \n ) : (\n history.push(routeTo)}\n >\n {makeCapitalize(hideParamsId(pathname))}\n \n );\n })}\n \n
\n \n
;\n\n useEffect(() => {\n if (info) {\n toast(screen);\n }\n }, [info]);\n\n return (\n \n 
\n
\n {text}
\n\n \n
\n );\n};","import { RouterSwitcher } from \"root\";\n\nfunction App() {\n return