hiko-social-login-react/dist/index.mjs.map

HIKO Social Login react for Hydrogen integration

{"version":3,"sources":["../src/SocialLoginWidget.tsx","../src/Demo.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from \"react\";\n\nconst DEFAULT_PATH = \"/js/hiko-auth-headless.js\";\n\nexport function SocialLoginWidget({\n    shop,\n    publicAccessToken,\n    logout,\n    refresh,\n    baseUrl,\n}: {\n    shop: string;\n    publicAccessToken: string;\n    logout: Function;\n    refresh: Function;\n    baseUrl: string;\n}) {\n    const container = useRef<HTMLInputElement>(null);\n    const [path, setPath] = useState(DEFAULT_PATH);\n\n    useEffect(() => {\n        if (!document.querySelector(`script[src*=\"${path}\"]`)) {\n            const script = document.createElement(\"script\");\n            script.src = `${baseUrl}${path}`;\n            script.async = true;\n            script.onload = () =>\n                window.HIKO.render(container.current, shop, publicAccessToken);\n            document.head.appendChild(script);\n        }\n\n        logout(() => {\n            window.HIKO.logout();\n            window.HIKO.render(container.current, shop, publicAccessToken);\n        });\n\n        refresh(() => {\n            const found = document.querySelector(`script[src*=\"${path}\"]`);\n            if (found) {\n                found.remove();\n                window.HIKO.release();\n                setPath(`${DEFAULT_PATH}?t=${Date.now()}`);\n            }\n        });\n    }, []);\n\n    return <div ref={container}></div>;\n}\n","import { useState, useEffect, useCallback, useRef } from \"react\";\nimport { SocialLoginWidget } from \"./SocialLoginWidget\";\nimport \"./demo.css\";\n\nexport function Demo({\n    shop,\n    publicAccessToken,\n    baseUrl = \"https://apps.hiko.link\",\n}: {\n    shop: string;\n    publicAccessToken: string;\n    baseUrl: string;\n}) {\n    const logoutCallbackRef = useRef<(() => void) | null>(null);\n    const refreshCallbackRef = useRef<(() => void) | null>(null);\n    const [customer, setCustomer] = useState(window.HIKO?.customer);\n\n    const handleCustomEvents = useCallback((event: any) => {\n        console.info(\n            `catch event: ${JSON.stringify(event.detail, null, \"  \")}`\n        );\n\n        if ([\"login\", \"activate\", \"multipass\"].includes(event.detail.action))\n            setCustomer(event.detail.customer);\n        else if (event.detail.action !== \"click\")\n            console.error(`unhandled action ${event.detail.action}`);\n    }, []);\n\n    const getCustomerDetail = useCallback(() => {\n        fetch(`https://${shop}/api/2023-04/graphql.json`, {\n            headers: {\n                \"Content-Type\": \"application/graphql\",\n                \"X-Shopify-Storefront-Access-Token\": publicAccessToken,\n            },\n            method: \"POST\",\n            body: `query {\n                customer(customerAccessToken: \"${customer.accessToken}\") { \n                    id\n                    displayName\n                    firstName\n                    lastName\n                    acceptsMarketing\n                    phone\n                    email\n                    createdAt\n                    updatedAt\n                }\n            }`,\n        })\n            .then((response) => response.json())\n            .then((res) => {\n                const value = {\n                    ...res.data.customer,\n                    ...customer,\n                };\n                setCustomer(value);\n                window.HIKO.customer = value;\n            })\n            .catch((err) => console.error(err.message));\n    }, [customer]);\n\n    useEffect(() => {\n        document.addEventListener(\"hiko\", handleCustomEvents);\n        return () => document.removeEventListener(\"hiko\", handleCustomEvents);\n    }, []);\n\n\n    const logout = (callback: () => void) => {\n        logoutCallbackRef.current = callback;\n    };\n\n    const refresh = (callback: () => void) => {\n        refreshCallbackRef.current = callback;\n    };\n\n    return (\n        <div className=\"main\">\n            <div className=\"widget\">\n                <SocialLoginWidget\n                    shop={shop}\n                    publicAccessToken={publicAccessToken}\n                    logout={logout}\n                    refresh={refresh}\n                    baseUrl={baseUrl}\n                ></SocialLoginWidget>\n\n                <ShowCustomer customer={customer} />\n            </div>\n\n            <div className=\"panel\">\n                <button\n                    onClick={() => {\n                        if (refreshCallbackRef.current)\n                            refreshCallbackRef.current();\n                    }}\n                >\n                    Refresh\n                </button>\n\n                {customer ? (\n                    <>\n                        <button\n                            onClick={() => {\n                                if (logoutCallbackRef.current) {\n                                    logoutCallbackRef.current();\n                                    setCustomer(null);\n                                }\n                            }}\n                        >\n                            Logout\n                        </button>\n\n                        <button onClick={() => getCustomerDetail()}>\n                            Customer detail\n                        </button>\n                    </>\n                ) : null}\n            </div>\n        </div>\n    );\n}\n\nfunction ShowCustomer({ customer }: { customer: any }) {\n    if (!customer) return <></>;\n    return (\n        <ul>\n            {Object.keys(customer).map((key) => (\n                <li key={key}>\n                    {key}: {customer[key]}\n                </li>\n            ))}\n        </ul>\n    );\n}\n"],"mappings":"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","names":["useState","useEffect","useRef","jsx","useRef","useState","useEffect"]}