<template>
    <div v-if="display" class="alert alert-warning small">
        <button v-if="dismissable" type="button" class="btn-close float-end" aria-label="Close" @click="dismiss"></button>
        <p>
            Hi! It seems you're using Safari. We’ve been getting reports regarding issues with some pages not loading on that browser.
            From the information we’ve gathered so far, it seems like the issue is limited to Safari
            (and on iPhones and iPads all browsers are unfortunately forced to use Safari under the hood as their engine).
        </p>

        <p>
            Safari has been changing a lot recently about the way they handle Progressive Web Apps
            so that they can implement malicious compliance with new EU regulations –
            and <a href="https://techcrunch.com/2024/02/15/apple-confirms-its-breaking-iphone-web-apps-in-the-eu-on-purpose/" target="_blank">
                Apple has actually confirmed they break such apps on purpose
            </a>  –
            and while we haven’t been able yet to identify the root cause of those issues, they seem to be stemming from those changes on Apple’s end.
        </p>

        <p>
            This issue is very difficult to debug, as we’re not getting error messages in the logs or the console,
            and we cannot even reproduce it ourselves, as it seems to only be broken for some users, but not all.
            We’ll be working on trying to find a solution, but we can’t make any promises yet.
            Accessing the page from a non-Safari browser on a desktop seems to be the only solution in the meanwhile.
            Keep in mind that Apple forces all browsers on iPhone / iPad to use Safari's engine under the hood.
        </p>

        <p class="mb-0">
            Sorry for the trouble! 😢
        </p>
    </div>
</template>

<script>
export default {
    props: {
        dismissable: { type: Boolean },
    },
    data() {
        return {
            display: false,
        };
    },
    mounted() {
        this.display = this.$isSafari();

        if (this.dismissable && !!localStorage.getItem('safariWarningDismissed')) {
            this.display = false;
        }
    },
    methods: {
        dismiss() {
            localStorage.setItem('safariWarningDismissed', '1');
            this.display = false;
        },
    },
};
</script>
