@fullstackunicorn/create-root 1.0.17 → 1.0.18

package/assets/root.fullstackunicorn.dev/frontend/base/checkout/CheckoutCard.js

@@ -0,0 +1,29 @@
+import { useGetCheckout } from '#@/base/checkout/@use.js'
+import { CheckoutCardPod } from '#@/base/checkout/CheckoutCard.pod.js'
+
+export const CheckoutCard = ({ isCancel }) => {
+
+    const checkout = useGetCheckout()
+
+    const product = checkout.product || {}
+    const seller = checkout.seller || {}
+
+    const text = {}
+
+    if (isCancel) text.title = 'Payment cancelled'
+    else text.title = 'Payment completed'
+
+    text.productName = `Product: ${product.name || ''}`
+    text.productCode = `Code: ${product.code || ''}`
+    text.productQuantity = `Quantity: ${product.quantity || ''}`
+
+    if (seller.name) text.sellerName = `Seller: ${seller.name}`
+
+    return (
+        <CheckoutCardPod
+            isCancel={isCancel}
+            text={text}
+            isSeller={!!seller.name}
+        />
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/base/checkout/CheckoutCard.pod.js

@@ -0,0 +1,25 @@
+import { useStyle } from '#@/style/@use.js'
+import { View } from '#@/imports/core/View.js'
+import { Text, Textline } from '#@/imports/core/Text.js'
+
+export const CheckoutCardPod = ({ isCancel, text = {}, isSeller }) => {
+
+    const { s, c, f, F, S } = useStyle()
+
+    F.title = [s.fs24, s.lh32, s.fw700]
+    F.text = [s.fs16, s.lh24, s.fw500]
+
+    S.wrap = [s.col, s.Xmax600, s.Xr, s.padding24, s.radius20, c.base_NN_W700]
+    S.title = [...F.title, isCancel ? c.item_OR : c.item_C1]
+    S.text = [...F.text, s.marginT12, c.item_NN_B400]
+
+    return (
+        <View classes={S.wrap}>
+            <Textline classes={S.title} font={f.f1} text={text.title} />
+            <Text classes={S.text} font={f.f1} text={text.productName} />
+            <Text classes={S.text} font={f.f1} text={text.productCode} />
+            <Text classes={S.text} font={f.f1} text={text.productQuantity} />
+            {!!isSeller && <Text classes={S.text} font={f.f1} text={text.sellerName} />}
+        </View>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/base/cookies/@tools.js

@@ -0,0 +1,67 @@
+import { constants } from '#@/root/constants.js'
+
+class Tools {
+
+    initCookies = async ({ logic }) => {
+        const timestamp = new Date().toISOString()
+        const response = {}
+        for (const name of Object.keys(logic.cookies.data)) {
+            const isAgreed = !!logic.cookies.data[name].isAlwaysOn
+            response[name] = { timestamp, isAgreed }
+        }
+        return response
+    }
+
+    getSubmit = async (device_id) => {
+        const { env } = constants
+
+        const battery = navigator.getBattery ? await navigator.getBattery() : {}
+        const metadataObj = {
+            timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            language: window.navigator.language,
+            pageTitle: document.title,
+            referrer: document.referrer,
+            pageURL: window.location.href,
+            platform: window.navigator.platform,
+            deviceMemory: navigator.deviceMemory,
+            screenWidth: window.screen.width,
+            screenHeight: window.screen.height,
+            colorDepth: window.screen.colorDepth,
+            maxScreenWidth: window.screen.width * window.devicePixelRatio,
+            maxScreenHeight: window.screen.height * window.devicePixelRatio,
+            pixelRatio: window.devicePixelRatio,
+            screenOrientation: screen?.orientation?.type,
+            hardwareConcurrency: navigator.hardwareConcurrency,
+            touchSupport: 'ontouchstart' in window || navigator.maxTouchPoints > 0,
+            colorGamut: window.matchMedia("(color-gamut: srgb)").matches
+                ? "srgb"
+                : window.matchMedia("(color-gamut: p3)").matches
+                    ? "p3"
+                    : window.matchMedia("(color-gamut: rec2020)").matches
+                        ? "rec2020"
+                        : "unknown",
+            rtt: navigator?.connection?.rtt,
+            hasGamepad: navigator.getGamepads ? navigator.getGamepads().length > 0 : false,
+            keyboardEnabled: "onkeydown" in document,
+            cookieEnabled: navigator.cookieEnabled,
+            javaEnabled: navigator.javaEnabled ? navigator.javaEnabled() : false,
+            doNotTrack: navigator.doNotTrack,
+            networkType: navigator?.connection?.effectiveType,
+            downlinkSpeed: navigator?.connection?.downlink,
+            batteryLevel: battery?.level * 100,
+            batteryCharging: battery?.charging
+        }
+
+        const metadata = {
+            submit_timestamp: new Date().toISOString(),
+            submit_device_id: device_id,
+            submit_client_id: env.CLIENT_ID,
+            submit_user_agent: window.navigator.userAgent,
+            submit_metadata: Object.entries(metadataObj).map(([key, value]) => `${key}:${value ? value : 'unknown'}`).join(" | ")
+        }
+
+        return metadata
+    }
+}
+
+export const tools = new Tools()

package/assets/root.fullstackunicorn.dev/frontend/base/cookies/@use.js

@@ -0,0 +1,218 @@
+import { useEffect, useRef } from 'react'
+import { atom, useAtom, useSetAtom, useGetAtom, makeId } from '#@/imports/npm.js'
+import { storage } from '#@/imports/storage.js'
+import { api } from '#@/client/@api.js'
+import { constants } from '#@/root/constants.js'
+import { useUrl } from '#@/base/router/@use.js'
+import { alerts, useSetAlerts } from '#@/base/alerts/@use.js'
+import { useGetStatics } from '#@/base/statics/@use.js'
+import { useModals, useSetModals, useModalClose } from '#@/base/modals/@use.js'
+import { useGetLanguage } from '#@/base/language/@use.js'
+import { useGetLookups } from '#@/base/lookups/@use.js'
+import { tools } from '#@/base/cookies/@tools.js'
+
+export const device = atom()
+export const handleDevice = atom(
+    (get) => get(device),
+    (get, set, value) => {
+        set(device, value)
+        storage.set('device', value)
+    }
+)
+
+export const consent = atom('')
+export const handleConsent = atom(
+    (get) => get(consent),
+    (get, set, value) => {
+        set(consent, value)
+        storage.set('consent', value)
+    }
+)
+
+export const cookies = atom({})
+export const handleCookies = atom(
+    (get) => get(cookies),
+    (get, set, value) => {
+        set(cookies, value)
+        storage.setJSON('cookies', value)
+    }
+)
+
+export const isCookiesInitialized = atom(false)
+export const initializeCookies = atom(
+    (get) => get(isCookiesInitialized),
+    async (get, set, statics) => {
+
+        const initials = await tools.initCookies(statics) 
+
+        const saved = {}
+        if (constants.services.IS_CARD_COOKIES_OFF) saved.device = storage.init('device', 'none')
+        else saved.device = storage.init('device', makeId())
+        saved.cookies = storage.initJSON('cookies', initials)
+        saved.consent = storage.get('consent')
+
+        const refresh = async () => {
+
+            const response = await api.cookies.get()
+
+            if (response.isOffline) set(alerts, { id: 'offline' })
+            else if (response.isError) set(alerts, { id: 'error-cookies-get' })
+            else if (response.isNotFound) {
+                storage.remove('consent')
+                storage.setJSON('cookies', initials)
+                set(consent, '')
+                set(cookies, initials)
+            }
+            else if (response.isValid) set(handleCookies, response.data)
+        }
+
+        set(device, saved.device)
+        set(cookies, saved.cookies)
+
+        if (saved.consent) {
+            set(consent, saved.consent)
+            await refresh(saved.consent)
+        }
+        set(isCookiesInitialized, true)
+    }
+)
+
+export const useInitializeCookies = () => useAtom(initializeCookies)
+
+export const useDevice = () => useAtom(handleDevice)
+export const useSetDevice = () => useSetAtom(handleDevice)
+export const useGetDevice = () => useGetAtom(handleDevice)
+
+export const useConsent = () => useAtom(handleConsent)
+export const useSetConsent = () => useSetAtom(handleConsent)
+export const useGetConsent = () => useGetAtom(handleConsent)
+
+export const useCookies = () => useAtom(handleCookies)
+export const useSetCookies = () => useSetAtom(handleCookies)
+export const useGetCookies = () => useGetAtom(handleCookies)
+
+export const useGetAgreement = () => {
+
+    const language = useGetLanguage()
+
+    const getAgreement = (agreement) => ({
+        ...agreement, 
+        agreement_language: language.slug
+    })
+    return getAgreement
+}
+
+export const useGetCookiesData = () => {
+
+    const statics = useGetStatics()
+    const lookups = useGetLookups()
+
+    const setAlerts = useSetAlerts()
+    const setCookies = useSetCookies()
+    const setConsent = useSetConsent()
+
+    const modalClose = useModalClose()
+
+    const getAgreement = useGetAgreement()
+
+    const getCookiesData = ({ formResult, id, isCloseDisabled, isLanguageButton }) => {
+
+        const onSetValue = async () => {
+
+            const device = storage.get('device')
+            const agreement = getAgreement({
+                agreement_type: statics.logic.cookies.type,
+                agreement_version: statics.logic.cookies.version,
+                agreement_subject_id: device,
+                agreement_subject_type: 'device_id',
+                agreement_agreed: formResult.current,
+            })
+
+            const agreements = { [statics.logic.cookies.type]: agreement }
+            const submit = await tools.getSubmit(device)
+
+            const consent = [{ agreements, submit }]
+            const response = await api.cookies.set(consent)
+
+            if (response.isOffline) setAlerts({ id: 'offline' })
+            else if (response.isError) setAlerts({ id: 'error-cookies-set' })
+            else if (response.isValid) {
+                setCookies(response.data)
+                setConsent(response.consent_id)
+                void api.cookies.get() //@NOTE no await is for caching
+            }
+            modalClose(id)
+        }
+
+        const itemVisual = {}
+        for (const key of Object.keys(statics.logic.cookies.data)) {
+            itemVisual[key] = { svg: statics.visual.svg.cookies }
+        }
+
+        const data = {}
+        data.isCloseDisabled = isCloseDisabled
+        data.isLanguageButton = isLanguageButton
+        data.onSetValue = onSetValue
+        data.formResult = formResult
+        data.itemLogic = statics.logic.cookies
+        data.itemVisual = itemVisual
+        data.svg = statics.visual.svg.cookies
+        data.itemVerbal = { 
+            title: lookups.cookies.verbal.modal.title,
+            description: lookups.cookies.verbal.modal.description,
+            action: lookups.cookies.verbal.modal.action,
+            data: lookups.cookies.verbal.data
+        }
+
+        return data
+    }
+    return getCookiesData
+}
+
+export const useWelcome = () => {
+
+    const { lang } = useUrl()
+
+    const setModals = useSetModals()
+    const modalRef = useRef('')
+
+    const consent = useGetConsent()
+
+    const cookies = useGetCookies()
+    const formResult = useRef({})
+    formResult.current = cookies
+
+    const getCookiesData = useGetCookiesData()
+
+    const isCloseDisabled = true
+    const isLanguageButton = constants.services.IS_CARD_LANGUAGE_OFF ? false : true
+
+    useEffect(() => {
+
+        if (constants.services.IS_CARD_COOKIES_OFF) return
+        if (consent) return
+
+        if (!modalRef.current) modalRef.current = makeId()
+        const data = getCookiesData({ formResult, id: modalRef.current, isCloseDisabled, isLanguageButton })
+        setModals([{ id: modalRef.current, name: 'sliders', data }])
+
+    }, [consent, lang])
+}
+
+export const useCookiesEdit = () => {
+
+    const [modals, setModals] = useModals()
+    const cookies = useGetCookies()
+
+    const formResult = useRef({})
+    formResult.current = cookies
+
+    const getCookiesData = useGetCookiesData()
+
+    const onPress = async () => {
+        const id = makeId()
+        const data = getCookiesData({ formResult, id })
+        setModals([...modals, { id, name: 'sliders', data }])
+    }
+    return onPress
+}

package/assets/root.fullstackunicorn.dev/frontend/base/cookies/CookiesCard.js

@@ -0,0 +1,19 @@
+import { useGetStatics } from '#@/base/statics/@use.js'
+import { useCookiesEdit } from '#@/base/cookies/@use.js'
+import { Launcher } from '#@/panels/cards/Launcher.js'
+
+export const CookiesCard = ({ api }) => {
+
+    const statics = useGetStatics()
+    const onPress = useCookiesEdit()
+
+    return (
+        <Launcher 
+            svg={{logo:statics.visual.svg.cookies, action:statics.visual.svg.edit}}
+            title={api.title}
+            description={api.description}
+            label={api.label}
+            onPress={onPress} 
+        />
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/base/errors/@use.js

@@ -0,0 +1,7 @@
+import { atom, useAtom, useSetAtom, useGetAtom } from '#@/imports/npm.js'
+
+export const error = atom({})
+
+export const useError = () => useAtom(error)
+export const useSetError = () => useSetAtom(error)
+export const useGetError = () => useGetAtom(error)

package/assets/root.fullstackunicorn.dev/frontend/base/errors/Errors.js

@@ -0,0 +1,14 @@
+import { errors } from '#@/root/errors.js'
+import { useGetError } from '#@/base/errors/@use.js'
+
+export const Errors = () => {
+
+    const error = useGetError()
+
+    F3.logs({error}, 'Errors')
+    
+    if (!error.name) return null
+
+    return errors[error.name]
+
+}

package/assets/root.fullstackunicorn.dev/frontend/base/language/@tools.js

@@ -0,0 +1,45 @@
+class Tools {
+
+    getLanguageLabel = (lookups, slug) => {
+
+        const languages = lookups.languages.verbal.data.items
+        const languagesDefaults = lookups.languages.original.data.items
+        
+        const lang = languages[slug].variant
+            ? `${languages[slug].name} (${languages[slug].variant})`
+            : languages[slug].name
+
+        const langDefault = languagesDefaults[slug].variant
+            ? `${languagesDefaults[slug].name} (${languagesDefaults[slug].variant})`
+            : languagesDefaults[slug].name
+
+        const label = lang + (lang === langDefault ? '' : ` / ${langDefault}`)
+        return label
+    }
+
+    getLanguage = (slug, lookups) => {
+        const plural = lookups.languages?.logic?.[slug]?.plural
+        const alphabet = lookups.languages?.logic?.[slug]?.alphabet
+        const isRTL = lookups.alphabets?.logic?.[alphabet]?.isRTL
+        return { slug, alphabet, plural, isRTL }
+    }
+
+    getLanguages = (lookups, langs) => {
+        const result = {}
+        for (const slug of langs) {
+            const label = this.getLanguageLabel(lookups, slug)
+            if (!label) continue
+            result[slug] = label
+        }
+        return result
+    }
+
+    getNewHistory = (history, lang) => history.map(path => {
+        const parts = path.split('/')
+        parts[1] = lang
+        return parts.join('/')
+    })
+}
+
+
+export const tools = new Tools()

package/assets/root.fullstackunicorn.dev/frontend/base/language/@use.js

@@ -0,0 +1,144 @@
+import { useEffect, useState } from 'react'
+import { atom, useAtom, useSetAtom, useGetAtom } from '#@/imports/npm.js'
+import { useNavigate } from '#@/imports/router.js'
+import { makeId } from '#@/imports/npm.js'
+import { api } from '#@/client/@api.js'
+import { uri } from '#@/App.uri.js'
+import { storage } from '#@/imports/storage.js'
+import { useUrl } from '#@/base/router/@use.js'
+import { useGetStatics, useSetVerbal } from '#@/base/statics/@use.js'
+import { useHistory } from '#@/base/router/@use.js'
+import { useModals } from '#@/base/modals/@use.js'
+import { useGetLookups } from '#@/base/lookups/@use.js'
+import { useSetAlerts } from '#@/base/alerts/@use.js'
+import { tools } from '#@/base/language/@tools.js'
+
+export const language = atom({})
+export const handleLanguage = atom(
+    (get) => get(language),
+    (get, set, value = {}) => {
+        set(language, value)
+        storage.setJSON('language', value)
+    }
+)
+export const languageContent = atom({})
+export const handleLanguageContent = atom(
+    (get) => get(languageContent),
+    (get, set, value = {}) => {
+        set(languageContent, value)
+        storage.setJSON('languageContent', value)
+    }
+)
+
+export const isLanguageInitialized = atom(false)
+export const initializeLanguage = atom(
+    (get) => get(isLanguageInitialized),
+    async (get, set, init = {}) => {
+
+        set(language, storage.setJSON('language', init.language))
+        set(languageContent, storage.setJSON('languageContent', init.languageContent))
+
+        set(isLanguageInitialized, true)
+    }
+)
+
+export const useInitializeLanguage = () => useAtom(initializeLanguage)
+
+export const useLanguage = () => useAtom(handleLanguage)
+export const useSetLanguage = () => useSetAtom(handleLanguage)
+export const useGetLanguage = () => useGetAtom(handleLanguage)
+
+export const useLanguageContent = () => useAtom(handleLanguageContent)
+export const useSetLanguageContent = () => useSetAtom(handleLanguageContent)
+export const useGetLanguageContent = () => useGetAtom(handleLanguageContent)
+
+export const useGetLang = () => {
+    const language = useGetLanguage()
+    return language.slug
+}
+
+export const useLanguageLabel = () => {
+
+    const statics = useGetStatics()
+    const language = useGetLanguage()
+    const lookups = useGetLookups()
+    const isOriginal = language.slug === statics.logic['@lang']
+    const [label, setLabel] = useState('')
+
+    useEffect(() => {
+        const result = tools.getLanguageLabel(lookups, language.slug)
+        setLabel(result)
+    }, [isOriginal, language])
+
+    return label
+}
+
+export const useLanguageEdit = () => {
+
+    const { path } = useUrl()
+    const navigate = useNavigate()
+
+    const label = useLanguageLabel()
+    const lookups = useGetLookups()
+
+    const statics = useGetStatics()
+    const setVerbal = useSetVerbal()
+
+    const [history, setHistory] = useHistory()
+
+    const languages = [statics.logic['@lang'], ...F3.arr.safe(statics.logic['@langs'])]
+
+    const [language, setLanguage] = useLanguage()
+    const [modals, setModals] = useModals()
+    const setAlerts = useSetAlerts({})
+
+    const onPress = async () => {
+
+        const languagesVerbal = lookups.languages.verbal.data.items
+        const languagesDefault = lookups.languages.logic
+
+        const data = {}
+
+        data.onSetValue = async newValue => {
+
+            if (newValue.slug === language.slug) return
+            if (!languages.includes(newValue.slug)) return
+
+            const localVerbal = await api.statics.get(uri.data.root.verbal, { lang: newValue.slug })
+
+            const result = {}
+            result.verbal = localVerbal['@data']
+            result.language = tools.getLanguage(newValue.slug, statics.logic)
+
+            if (!result.language || !result.verbal) {
+                const alert = {}
+                alert.id = 'no-language'
+                alert.params = { language: tools.getLanguageLabel(lookups, newValue.slug) }
+                return setAlerts(alert)
+            }
+
+            const newHistory = tools.getNewHistory(history, newValue.slug)
+
+            setHistory(newHistory)
+            setVerbal(result.verbal)
+            setLanguage(result.language)
+            navigate(`/${newValue.slug}/${path}`)
+        }
+
+        data.value = {}
+        data.value.slug = language.slug
+        data.value.value = label
+
+        data.itemLogic = {}
+        data.itemLogic.options = languages
+
+        data.itemVerbal = {}
+        data.itemVerbal.options = tools.getLanguages(lookups, languages)
+        data.itemVerbal.title = lookups.languages.verbal.views.modal.title
+
+        const id = makeId()
+        setModals([...modals, { id, name: 'selects', data }])
+    }
+
+    return onPress
+}

package/assets/root.fullstackunicorn.dev/frontend/base/language/LanguageButton.js

@@ -0,0 +1,18 @@
+import { useLanguageLabel, useLanguageEdit } from '#@/base/language/@use.js'
+import { useGetStatics } from '#@/base/statics/@use.js'
+import { IconTextButton } from '#@/modules/buttons/IconTextButton.js'
+
+export const LanguageButton = () => {
+
+    const statics = useGetStatics()
+    const onPress = useLanguageEdit()
+    const label = useLanguageLabel()
+
+    return (
+        <IconTextButton 
+            svg={statics.visual.svg.language}
+            text={label}
+            onPress={onPress}
+        />
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/base/language/LanguageCard.js

@@ -0,0 +1,20 @@
+import { useLanguageLabel, useLanguageEdit } from '#@/base/language/@use.js'
+import { useGetStatics } from '#@/base/statics/@use.js'
+import { Launcher } from '#@/panels/cards/Launcher.js'
+
+export const LanguageCard = ({ api={} }) => {
+
+    const statics = useGetStatics()
+    const onPress = useLanguageEdit()
+    const label = useLanguageLabel()
+
+    return (
+        <Launcher 
+            svg={{logo:statics.visual.svg.language, action:statics.visual.svg.edit}}
+            title={api.title}
+            description={api.description}
+            label={label}
+            onPress={onPress}
+        />
+    )
+}