Modal V2

function DefaultModal() {
    const [isOpen, setIsOpen] = React.useState(false);
    const [licenseText, setLicenseText] = React.useState('');

    return (
        <React.Fragment>
            <Button
                onClick={() => {
                    setIsOpen(true);
                }}
            >
                Open modal
            </Button>
            <ModalV2
                isOpen={isOpen}
                onCloseClick={() => {
                    setIsOpen(false);
                }}
                onCloseFinish={() => {
                    console.log('Modal onCloseFinish');
                }}
                onOpenFinish={() => {
                    console.log('Modal onOpenFinish');
                }}
                pillText='Terms'
                pillColor='indigo'
                illustrationUrl='https://placehold.co/300x300/blue/white?text=Square+Illustration+300x300'
                title='Accept our terms, conditions and legal agreements'
                description='You must read and accept our terms and conditions before using the platform.'
                content={
                <div>
                    <img src="https://placehold.co/500x500/orange/white?text=Content" alt="Terms and Conditions" />
                    <div className="tp-wrap-snap tp-longread tp-longread--spacing">
        <h1>Terms of Use</h1>
        <p>Effective: June 9, 2025</p>
        <p>
            <strong>
                IMPORTANT NOTICE: THIS AGREEMENT CONTAINS A BINDING ARBITRATION PROVISION AND CLASS
                ACTION WAIVER. IT AFFECTS YOUR LEGAL RIGHTS AS DETAILED IN THE
                <a href="https://www.thumbtack.com/terms/#arbitration-and-class-action-waiver">
                ARBITRATION AND CLASS ACTION WAIVER SECTION</a>
                BELOW. EXCEPT WHERE PROHIBITED BY APPLICABLE LAW, THESE TERMS REQUIRE YOU TO
                ARBITRATE DISPUTES WITH US RATHER THAN RESOLVE DISPUTES THROUGH A JUDGE OR JURY
                TRIAL, OR ANY COURT PROCEEDINGS, OR CLASS ACTIONS OF ANY KIND. BY ACCESSING, OR
                USING THE PLATFORM, YOU HEREBY WAIVE ANY AND ALL RIGHTS TO INITIATE OR PARTICIPATE
                IN ANY CLASS ACTION LAWSUIT OR REPRESENTATIVE ACTION WITH RESPECT TO ANY DISPUTES OR
                CLAIMS ARISING OUT OF OR RELATING TO THESE TERMS OR THE PLATFORM. PLEASE READ
                CAREFULLY.
            </strong>
        </p>
        <h2 id="acceptance-of-these-terms">ACCEPTANCE OF THESE TERMS</h2>
        <p>
            This Terms of Use Agreement ("Terms"), including the
            <a href="https://www.thumbtack.com/terms/#arbitration-and-class-action-waiver">
            BINDING ARBITRATION AND CLASS ACTION WAIVER CONTAINED HEREIN</a>
            govern your access to, use of, and participation in the Platform made available by
            Thumbtack, Inc. or any of its subsidiaries (collectively, and including such entities
            operating under any other names (including, without limitation, Setter), "Thumbtack,"
            "we," "our," or "us") or through Thumbtack and the entirety of your relationship with
            Thumbtack. YOU UNDERSTAND AND AUTHORIZE THUMBTACK TO USE YOUR INFORMATION TO OBTAIN
            BACKGROUND CHECKS AND BUSINESS CREDIT CHECKS FROM OUR VENDORS AND/OR VERIFY YOUR
            IDENTITY THROUGHOUT YOUR USE OF THE SERVICE IN ACCORDANCE WITH APPLICABLE LAWS,
            INCLUDING BUT NOT LIMITED TO THE FAIR CREDIT REPORTING ACT (“FCRA”).
        </p>
        <p>
            THESE TERMS, OUR <a href="https://www.thumbtack.com/privacy/">PRIVACY POLICY</a>, AND
            ALL OTHER DOCUMENTS REFERENCED HEREIN GOVERN THE RELATIONSHIP BETWEEN YOU, THE USER OF
            THE PLATFORM, AND THUMBTACK. YOU HEREBY AGREE THAT THE AGREEMENT FORMED BY THESE TERMS
            IS EQUIVALENT TO ANY WRITTEN, NEGOTIATED AGREEMENT SIGNED BY YOU. PLEASE READ THE TERMS
            THOROUGHLY AND CAREFULLY. BY ACCESSING OR OTHERWISE USING THE PLATFORM, YOU AGREE TO BE
            BOUND BY THESE TERMS. IF YOU DO NOT AGREE TO THESE TERMS, THEN YOU MAY NOT ACCESS OR USE
            THE PLATFORM.
        </p>
        <p>
            All references to "you" or "your," as applicable, mean the person who accesses, uses,
            and/or participates in the Platform in any manner, and each of your heirs, assigns, and
            successors. If you use the Platform on behalf of an entity or other individual, you
            represent and warrant that you have the authority to bind that entity or individual, and
            to perform and otherwise undertake all of your obligations hereunder. Your acceptance of
            the Terms will be deemed an acceptance by that entity, and "you" and "your" herein will
            refer to that entity, its directors, officers, employees, and agents.
        </p>
        <h2 id="modifications">MODIFICATIONS</h2>
        <p>
            Thumbtack reserves the right, in our sole discretion, to modify these Terms, and any
            other documents incorporated by reference herein, at any time and without prior notice.
            Thumbtack will notify you of changes by posting the updated Terms on the Platform and
            may also, in our sole discretion, notify you by sending you a message and/or otherwise
            notifying you when you are logged into your account. Modifications will become effective
            30 days after the earliest of: (a) modifications being posted on the Platform; (b)
            Thumbtack's transmission of a message to you about the modifications (which may be made
            via a notice or communication on the Platform itself); or (c) you are otherwise notified
            when you are logged into your account. Your use of the Platform after the expiration of
            the 30 days will constitute your consent to the changes. If you do not agree, you may
            not access or use the Platform. Be sure to return to the Platform and this webpage
            periodically to ensure you are familiar with the most current version of these Terms.
            YOUR CONTINUED USE OF OR ACCESS TO THE PLATFORM AFTER SUCH EFFECTIVE DATE OF ANY SUCH
            MODIFICATION OR AMENDMENT INDICATES YOU ACCEPT AND AGREE TO BE BOUND BY THE MODIFIED
            TERMS.
        </p>
        <h2 id="additional-terms-and-policies">ADDITIONAL TERMS AND POLICIES</h2>
        <p>
            Please review
            <a href="https://www.thumbtack.com/privacy">Thumbtack's Privacy Policy</a>, incorporated
            herein by reference, for information and notices concerning Thumbtack's collection and
            use of your information. The provision and delivery of text messages by Thumbtack or our
            text message service providers is governed by our
            <a href="https://help.thumbtack.com/article/thumbtack-sms-terms-and-conditions">
            SMS Terms and Conditions</a>, which are expressly incorporated herein. The “Thumbtack Guarantee” is governed by the
            <a href="https://help.thumbtack.com/article/thumbtack-guarantee-terms">
            Thumbtack Guarantee Terms and Conditions</a>, which are expressly incorporated herein. Please review the full set of key
            <a href="https://help.thumbtack.com/article/thumbtack-policies">Thumbtack policies</a>
            that govern your use of the Platform and our interactions with you and third-parties,
            which are expressly incorporated herein. Certain areas of and/or products on the
            Platform may have different terms and conditions posted or may require you to agree with
            and accept additional terms and conditions or policies. If there is a conflict between
            these Terms and the terms and conditions or policies posted for a specific area or
            product, the latter takes precedence with respect to your use of that area or product.
        </p>
        <h2 id="key-terms">KEY TERMS</h2>
        <p>"Collective Content" means User Content and Thumbtack Content together.</p>
        <p>
            "Content" means text, graphics, images, music, software, audio, video, information or
            other materials, including but not limited to profile information, Pro Services
            requests, quotes, message threads, reviews, scheduling and calendar information, and
            other information or materials available on or through the Platform.
        </p>
        <p>
            "Consumer" means a User who is registered to search for Service Professionals on the
            Platform, seeks Pro Services from Service Professionals on the Platform, makes a booking
            with a Service Professional to purchase a Pro Service (or receive a quote in
            contemplation thereof), is registered for or undergoes a home specialist consultation or
            similar service with respect to their home, utilizes a Thumbtack plan to track
            maintenance on a home, is a Thumbtack Plus member, agrees to these Terms, or otherwise
            uses the Platform, including, without limitation, receive, pay for, review, or
            facilitate the receipt of Pro Services. Because a Consumer may be, or may become, a
            customer of a Service Professional, a Consumer is often referred to as a “customer” or a
            “Customer” on the Platform and in marketing materials related to the Platform. Please
            note that, for purposes of these Terms, “Consumer” includes, without limitation, any
            individual or agent you authorize to use your Account on your behalf.
        </p>
        <p>
            "Fee" means any amount charged by Thumbtack to a User in connection with the Platform.
        </p>
        <p>
            “Feedback” means any feedback, comments, questions, or suggestions provided by a User
            concerning Thumbtack or our services, including our Platform.
        </p>
        <p>
            "Platform" means all Thumbtack websites, mobile or other applications, software,
            processes, video consultations, subscription services, and any other services provided
            by or through Thumbtack.
        </p>
        <p>
            “Privacy Policy” means the Thumbtack Privacy Policy located at
            <a href="https://www.thumbtack.com/privacy/">https://www.thumbtack.com/privacy/</a>,
            including any amendments, supplements or modifications thereto made from time to time.
        </p>
        <p>
            "Pro Services" means the services listed, quoted, scheduled, offered, fulfilled or
            provided by Service Professionals, or sought, scheduled, paid for, or received by
            Consumers, through the Platform.
        </p>
        <p>
            "Service Professional" means a User who uses, or is registered to use, the Platform to
            offer, provide, receive payment for, or facilitate the provision of Pro Services.
            Service Professionals are often referred to as “pros” on the Platform.
        </p>
        <p>
            "Thumbtack Content" means all Content Thumbtack makes available on or through the
            Platform, including any Content licensed from a third-party, but excluding User Content.
        </p>
        <p>
            "User" means a person or entity who completes Thumbtack's account registration process,
            agrees to these Terms, utilizes any services offered by or through the Platform, or a
            person or entity who submits or receives a request through Thumbtack, including but not
            limited to Service Professionals and Consumers.
        </p>
        <p>
            "User Content" means all Content submitted, posted, uploaded, published, or transmitted
            on or through the Platform by any User or other user of the Platform, including but not
            limited to photographs, voice or audio recordings, videos, profile information,
            descriptions, postings, reviews, requests, messages, and payments made through the
            Platform, but excluding Thumbtack Content and
            <a href="https://www.thumbtack.com/terms/#feedback">Feedback</a>.
        </p>
        <h2 id="eligibility-service-professional-representations-warranties-and-use-of-the-platform">
            CHANGES, ELIGIBILITY, SERVICE PROFESSIONAL REPRESENTATIONS, WARRANTIES, AND USE OF THE
            PLATFORM
        </h2>
        <p>
            Thumbtack reserves the right at any time and with or without notice to you, to change
            (i) the Platform, including, without limitation, eliminating, supplementing, modifying,
            adding, or discontinuing any content, feature, data, or service on or available through
            the Platform, or the hours during which they are available; and (ii) the prices and Fees
            (if any) for access to or use of the Platform or any component thereof. We will not be
            liable to you or any third-party for any modification, price change, suspension, or
            discontinuance of the Platform, or any component or services on the Platform. We reserve
            the right to limit the availability of the Platform, Content, or Pro Services offered
            thereon to any person, geographic area, or jurisdiction we so desire, at any time and in
            our sole discretion.
        </p>
        <p>
            Access to and use of the Platform is available only to individuals who are at least 18
            years old and can form legally binding contracts under applicable law. By accessing or
            using the Platform, you represent and warrant that you meet these requirements.
            Thumbtack, at all times, strives to maintain compliance with all laws applicable to its
            performance under these Terms and its provision of the Platform. Thumbtack also uses its
            best efforts to stay up to date on updates to those applicable laws.
        </p>
        <p>
            By registering or using the Platform to offer, post, or provide Pro Services, Service
            Professionals represent and warrant that they, and the employees, agents, suppliers
            contractors, and subcontractors who may perform work for them, (i) are properly and
            fully qualified and experienced, and licensed, certified, bonded, and insured, as
            required by applicable laws or regulations to which they may be subject in the
            jurisdiction(s) in which they offer their Pro Services and in relation to the specific
            job they are performing; (ii) comply and will continue to comply with all applicable
            laws, including, without limitation, applicable privacy and marketing laws, in their use
            of the Platform and any personal information obtained from the Platform; (iii) will
            perform the Pro Service as outlined in their agreement with the Consumer and work to
            remedy any material deviations from such contract; and (iv) will perform the Pro
            Services in a professional, workmanlike manner in accordance with industry standards and
            in accordance with these Terms.
        </p>
        <p>
            Thumbtack does not sell or otherwise provide Pro Services. Thumbtack may directly
            provide home project consultations and related on-Platform services to Consumers, but
            any Pro Services solicited as a result of any such consultations or on-Platform services
            are provided by an independent Service Professional without any representation,
            warranty, guarantee, or endorsement from Thumbtack other than as expressly provided for
            herein. Thumbtack also facilitates Pro Service transactions, which facilitation may
            include displaying a list of Service Professionals profiles, allowing Consumers and
            Service Professionals to send messages to each other, allowing for the booking of an
            appointment for the provision of Pro Services, assisting in the selection of a Service
            Professional for certain Consumers, and processing payment for certain Pro Services.
            Consumers understand that any such facilitation does not constitute a warranty,
            guarantee, or endorsement in relation to the Pro Services. Without limiting the
            foregoing, we make no representation—and you acknowledge that we make no
            representation—that the Platform, or Pro Services available through the Platform, are
            appropriate or available for use in all locations. Those who choose to access the
            Platform and Pro Services therein do so of their own initiative and at their own risk
            and are responsible for compliance with applicable federal, state and other local laws.
            Service Professionals understand and agree that using the Platform does not guarantee
            that anyone will engage them for Pro Services. Consumers understand that any Pro
            Services they solicit and/or pay for using the Platform are solicited directly from the
            Service Professional providing such Pro Services.
        </p>
        <p>
            Service Professionals understand and agree that they are customers of Thumbtack, and are
            not Thumbtack employees, contractors, consultants, joint venturers, partners, or agents.
            Service Professionals acknowledge that they provide their own equipment, select their
            own jobs, develop their own expertise, are free to do jobs through other platforms and
            lead sources, and determine their own work schedule. Thumbtack does not control, and has
            no right to control, the services a Service Professional provides (including the details
            of how the Service Professional provides such services) if the Service Professional is
            engaged by a Consumer or any other person, except as specifically noted herein or on the
            Platform.
        </p>
        <p>
            Thumbtack, as permitted by applicable laws, obtains reports regarding Service
            Professionals, which may include history of criminal convictions or sex offender
            registration, and we may limit, block, suspend, deactivate, or cancel a Service
            Professional's account based on the results of such a report, with or without notice. As
            a Service Professional, you agree and authorize us to use your personal information,
            such as your full name and date of birth, to obtain such reports from Thumbtack's
            vendors. Please see our
            <a href="https://www.thumbtack.com/privacy/">Privacy Policy</a> for more information.
            Service Professionals agree to inform Thumbtack of any material criminal convictions
            that occur after any such reports are run.
        </p>
        <h2 id="account-registration-and-other-submissions">
            ACCOUNT REGISTRATION AND OTHER SUBMISSIONS
        </h2>
        <p>
            <em>Contact Information</em>: If you have any questions about these Terms or the
            Platform, please contact us by sending an email to
            <a href="mailto:support@thumbtack.com">support@thumbtack.com</a>.
        </p>
    </div>
</div>}
                primaryCta={
                    <Button
                        onClick={() => {
                            console.log('Primary button clicked');
                            setIsOpen(false);
                        }}
                    >
                        Accept
                    </Button>
                }
                secondaryCta={
                    <Button
                        theme="secondary"
                        onClick={() => {
                            console.log('Secondary button clicked');
                            setIsOpen(false);
                        }}
                    >
                        Back
                    </Button>
                }
                tertiaryCta={
                    <Button
                        theme="tertiary"
                        onClick={() => {
                            console.log('Secondary button clicked');
                            setIsOpen(false);
                        }}
                    >
                        Restart
                    </Button>
                }
                disclaimer='By clicking "Accept", you agree to our terms and conditions.'
            />
        </React.Fragment>
    );
}

function PromoModal() {
    const [isOpen, setIsOpen] = React.useState(false);
    const [licenseText, setLicenseText] = React.useState('');

    return (
        <React.Fragment>
            <Button
                onClick={() => {
                    setIsOpen(true);
                }}
            >
                Check it out
            </Button>
            <ModalV2
                promotionImageUrl='http://placehold.co/600x300/orange/white?text=Promotion'
                isOpen={isOpen}
                onCloseClick={() => {
                    setIsOpen(false);
                }}
                onCloseFinish={() => {
                    console.log('Modal onCloseFinish');
                    setIsOpen(false);
                }}
                onOpenFinish={() => {
                    console.log('Modal onOpenFinish');
                }}
                title='10% off on your first 3 leads!'
                description='Purchase today to take advantage of this offer.'
                primaryCta={
                    <Button
                        onClick={() => {
                            console.log('Primary button clicked');
                            setIsOpen(false);
                        }}
                    >
                        Accept
                    </Button>
                }
                secondaryCta={
                    <Button
                        theme="secondary"
                        onClick={() => {
                            console.log('Secondary button clicked');
                            setIsOpen(false);
                        }}
                    >
                        Cancel
                    </Button>
                }
            />
        </React.Fragment>
    );
}

function ConfirmationModal() {
    const [isOpen, setIsOpen] = React.useState(false);
    const [licenseText, setLicenseText] = React.useState('');

    return (
        <React.Fragment>
            <Button
                onClick={() => {
                    setIsOpen(true);
                }}
            >
                Confirm Save
            </Button>
            <ModalV2
                isOpen={isOpen}
                onCloseClick={() => {
                    setIsOpen(false);
                }}
                onCloseFinish={() => {
                    console.log('Modal onCloseFinish');
                    setIsOpen(false);
                }}
                onOpenFinish={() => {
                    console.log('Modal onOpenFinish');
                }}
                title='Are you sure you want to save your credit card?'
                description='By storing your credit card, you can make purchases faster and easier.'
                primaryCta={
                    <Button
                        onClick={() => {
                            console.log('Primary button clicked');
                            setIsOpen(false);
                        }}
                    >
                        Accept
                    </Button>
                }
                secondaryCta={
                    <Button
                        theme="secondary"
                        onClick={() => {
                            console.log('Secondary button clicked');
                            setIsOpen(false);
                        }}
                    >
                        Cancel
                    </Button>
                }
            />
        </React.Fragment>
    );
}