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>
        <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>
    </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.'
                content={
<div>
    <img src="https://placehold.co/500x500/orange/white?text=Content" alt="Terms and Conditions" />
    <div>
    <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>
    </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);
                        }}
                    >
                        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>
    );
}

function LoadingModal() {
    const [isOpen, setIsOpen] = React.useState(false);
    const [isLoading, setIsLoading] = React.useState(false);

    React.useEffect(() => {
        if (isOpen && isLoading) {
            // Simulate loading for 2 seconds
            const timer = setTimeout(() => {
                setIsLoading(false);
            }, 2000);

            return () => clearTimeout(timer);
        }
    }, [isOpen, isLoading]);

    const handleOpen = () => {
        setIsOpen(true);
        setIsLoading(true);
    };

    const handleClose = () => {
        setIsOpen(false);
        setIsLoading(false);
    };

    return (
        <React.Fragment>
            <Button onClick={handleOpen}>
                Open Loading Modal
            </Button>
            <ModalV2
                isOpen={isOpen}
                isLoading={isLoading}
                onCloseClick={handleClose}
                onCloseFinish={() => {
                    console.log('Loading Modal onCloseFinish');
                    setIsOpen(false);
                }}
                onOpenFinish={() => {
                    console.log('Loading Modal onOpenFinish');
                }}
                title='Your Project Details'
                description='Here are the details about your upcoming project.'
                content={
                    <div>
                        <p>Project Name: Kitchen Renovation</p>
                        <p>Estimated Cost: $15,000 - $25,000</p>
                        <p>Timeline: 6-8 weeks</p>
                        <p>Service Professional: John's Construction Co.</p>
                    </div>
                }
                primaryCta={
                    <Button onClick={handleClose}>
                        Got it
                    </Button>
                }
                secondaryCta={
                    <Button theme="secondary" onClick={handleClose}>
                        Cancel
                    </Button>
                }
            />
        </React.Fragment>
    );
}