{ "version": 3, "sources": ["../../../../../../owl-nest/common/money/src/accounting.tsx", "../../../../../../owl-nest/common/money/src/components/SecurePaymentModal.tsx"], "sourcesContent": ["import * as React from 'react'\nimport styled from 'styled-components'\n\nimport * as api from '@owl-nest/api-client/latest'\nimport { LocaleMoneyDisplayer } from '@ulule/owl-kit-components'\nimport { NUMBER_FORMAT_CONFIG } from '@ulule/owl-kit-components/next'\nimport * as env from '@owl-nest/config'\n\ntype MoneyDisplayerProps = {\n readonly amount: number\n readonly currency?: string // FIXME Remove optional trait when removing `project` attribute\n readonly precision?: number\n // @deprecated: Pass `currency` instead\n readonly project?: api.Project\n}\n\nexport function MoneyDisplayer({\n amount,\n currency,\n precision,\n project,\n}: MoneyDisplayerProps): React.ReactElement<MoneyDisplayerProps> {\n const projectCurrency = project?.currency // FIXME: Should pass only the currency, not whole project since the component isn't project-bound.\n const userLanguage = env.getUserConfig().lang\n\n return (\n <LocaleMoneyDisplayer\n amount={amount}\n currency={currency ?? projectCurrency}\n localeFormat={userLanguage.toLowerCase()}\n precision={precision}\n rates={env.CURRENCIES_RATES}\n targetCurrency={currency}\n />\n )\n}\n\ntype CurrencyDisplayerProps = {\n className?: string\n children: React.ReactNode\n currency: string\n // Wrap currency into a <span> to allow its positioning\n wrapCurrency?: boolean\n}\n\nexport enum SymbolPosition {\n AHEAD,\n BEHIND,\n}\n\nexport function CurrencyDisplayer({\n className,\n children,\n currency,\n wrapCurrency = false,\n}: CurrencyDisplayerProps): React.ReactElement<CurrencyDisplayerProps> {\n const currencySymbol = env.CURRENCIES_SYMBOL[currency].symbol\n const userConfig = env.useUserEnv()\n const position = getPosition(userConfig.lang)\n\n if (wrapCurrency) {\n return (\n <>\n {position === SymbolPosition.AHEAD && <WrapCurrency className={className}>{currencySymbol}</WrapCurrency>}\n {children}\n {position === SymbolPosition.BEHIND && <WrapCurrency className={className}>{currencySymbol}</WrapCurrency>}\n </>\n )\n }\n\n return (\n <>\n {position === SymbolPosition.AHEAD && currencySymbol}\n {children}\n {position === SymbolPosition.BEHIND && currencySymbol}\n </>\n )\n}\n\ntype WrapCurrencyProps = {\n className?: string\n children: React.ReactNode\n}\n\nfunction WrapCurrency({ className, children }: WrapCurrencyProps): React.ReactElement<WrapCurrencyProps> {\n return <CurrencyWrapper className={className}>{children}</CurrencyWrapper>\n}\n\nexport const CurrencyWrapper = styled.span``\n\nexport function getPosition(userLanguage: api.Lang): SymbolPosition {\n const format = NUMBER_FORMAT_CONFIG[userLanguage].format\n const indexOfSymbol = format.indexOf('%s')\n const indexOfValue = format.indexOf('%v')\n\n if (indexOfSymbol < indexOfValue) {\n return SymbolPosition.AHEAD\n } else {\n return SymbolPosition.BEHIND\n }\n}\n\nexport { SecurePaymentModal } from './components/SecurePaymentModal'\n", "import * as React from 'react'\nimport styled from 'styled-components'\nimport { createPortal } from 'react-dom'\n\nimport { t, tc } from '@owl-nest/localize'\nimport * as plume from '@ulule/owl-kit-components/next'\n\ntype SecurePaymentModalProps = {\n className?: string\n open: boolean\n projectIsDonationBased: boolean\n setOpen: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nfunction SecurePaymentModalComponent({\n className,\n open,\n projectIsDonationBased,\n setOpen,\n}: SecurePaymentModalProps): React.ReactElement {\n return (\n <>\n {createPortal(\n <plume.ModalWithIcon\n className={className}\n open={open}\n closable\n onClose={() => setOpen(false)}\n icon={<plume.illustrations.twoToned.SecurePaymentMedium size={140} />}\n svgScale={0.9}\n buttons={{\n type: 'button',\n props: {\n onClick: () => setOpen(false),\n size: 'medium',\n children: t('Continue'),\n },\n }}\n >\n <plume.styles.heading.S>\n {projectIsDonationBased ? t('Secure and final payment') : t('Secure and flexible payment')}\n </plume.styles.heading.S>\n <plume.styles.copy.M>\n {projectIsDonationBased\n ? t(\n 'Your payment in the form of a donation is not refundable. However, if the project team decides to cancel its fundraising, you will automatically get a refund.',\n )\n : t(\n \"If the project doesn't reach its goal, you will be refunded free of charge to your bank account or the payment method used.\",\n )}\n </plume.styles.copy.M>\n <plume.styles.copy.M>\n {t('All payments are secure, and we do not store any credit card information.')}\n </plume.styles.copy.M>\n <plume.styles.copy.M>\n {tc('For more information about Ulule, [link: see FAQ].', {\n link: (\n <plume.styles.link.Primary tinted href=\"https://support.ulule.com/hc/\" target=\"_blank\" rel=\"noopener\" />\n ),\n })}\n </plume.styles.copy.M>\n <PaymentPartnersLogoSection>\n <plume.glyphs.paymentMethods.SSL></plume.glyphs.paymentMethods.SSL>\n <plume.glyphs.paymentMethods.VerifiedByVisa></plume.glyphs.paymentMethods.VerifiedByVisa>\n <plume.glyphs.paymentMethods.MastercardSecurecode></plume.glyphs.paymentMethods.MastercardSecurecode>\n </PaymentPartnersLogoSection>\n </plume.ModalWithIcon>,\n document.getElementById('modal-container') ?? document.body,\n )}\n </>\n )\n}\n\nexport const SecurePaymentModal = styled(SecurePaymentModalComponent)`\n ${plume.styles.modal.Body} {\n display: flex;\n flex-direction: column;\n }\n\n ${plume.styles.heading.S} {\n text-align: left;\n margin: 15px 0;\n }\n\n ${plume.styles.copy.M} {\n text-align: left;\n margin-bottom: 25px;\n }\n\n @media screen and ${plume.BREAKPOINTS.TABLET} {\n ${plume.styles.modal.Wrapper} {\n max-width: 480px;\n }\n }\n`\n\nconst PaymentPartnersLogoSection = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: space-around;\n margin: 0 auto;\n margin-bottom: 13px;\n width: 60%;\n\n svg {\n height: 1.8rem;\n margin-bottom: 10px;\n width: 25%;\n }\n`\n"], "mappings": "qPAAAA,IAAAC,IAAA,IAAAC,EAAuB,OCAvBC,IAAAC,IAAA,IAAAC,EAAuB,OAEvB,IAAAC,EAA6B,OAY7B,SAASC,EAA4B,CACnC,UAAAC,EACA,KAAAC,EACA,uBAAAC,EACA,QAAAC,CACF,EAAgD,CAnBhD,IAAAC,EAoBE,OACE,mCACG,gBACC,gBAAOC,EAAN,CACC,UAAWL,EACX,KAAMC,EACN,SAAQ,GACR,QAAS,IAAME,EAAQ,EAAK,EAC5B,KAAM,gBAAOG,EAAc,SAAS,oBAA7B,CAAiD,KAAM,IAAK,EACnE,SAAU,GACV,QAAS,CACP,KAAM,SACN,MAAO,CACL,QAAS,IAAMH,EAAQ,EAAK,EAC5B,KAAM,SACN,YAAU,KAAE,UAAU,CACxB,CACF,GAEA,gBAAOI,EAAO,QAAQ,EAArB,KACEL,KAAyB,KAAE,0BAA0B,KAAI,KAAE,6BAA6B,CAC3F,EACA,gBAAOK,EAAO,KAAK,EAAlB,KACEL,KACG,KACE,gKACF,KACA,KACE,6HACF,CACN,EACA,gBAAOK,EAAO,KAAK,EAAlB,QACE,KAAE,2EAA2E,CAChF,EACA,gBAAOA,EAAO,KAAK,EAAlB,QACE,MAAG,qDAAsD,CACxD,KACE,gBAAOA,EAAO,KAAK,QAAlB,CAA0B,OAAM,GAAC,KAAK,gCAAgC,OAAO,SAAS,IAAI,WAAW,CAE1G,CAAC,CACH,EACA,gBAACC,EAAA,KACC,gBAAOC,EAAO,eAAe,IAA5B,IAAgC,EACjC,gBAAOA,EAAO,eAAe,eAA5B,IAA2C,EAC5C,gBAAOA,EAAO,eAAe,qBAA5B,IAAiD,CACpD,CACF,GACAL,EAAA,SAAS,eAAe,iBAAiB,IAAzC,KAAAA,EAA8C,SAAS,IACzD,CACF,CAEJ,CAvEA,IAAAA,EAyEaM,EAAqBC,EAAOZ,CAA2B,EAAlCK,MAAmCQ,EAAA,QAC1C,iEAKD,4DAKH,mFAKuB,WACd,+CAhBtBL,EAAO,MAAM,KAKbA,EAAO,QAAQ,EAKfA,EAAO,KAAK,EAKMM,EAAY,OAC5BN,EAAO,MAAM,SA1FzBO,EAgGMN,EAA6BG,EAAO,IAAPG,MAAUF,EAAA,4NDhFtC,SAASG,EAAe,CAC7B,OAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,CACF,EAAiE,CAC/D,IAAMC,EAAkBD,GAAA,YAAAA,EAAS,SAC3BE,EAAmBC,EAAc,EAAE,KAEzC,OACE,gBAACC,EAAA,CACC,OAAQP,EACR,SAAUC,GAAA,KAAAA,EAAYG,EACtB,aAAcC,EAAa,YAAY,EACvC,UAAWH,EACX,MAAWM,EACX,eAAgBP,EAClB,CAEJ,CAnCA,IAAAQ,EAwFaC,EAAkBC,EAAO,KAAPF,MAAWG,EAAA,QAEnC,SAASC,EAAYC,EAAwC,CAClE,IAAMC,EAASC,EAAqBF,CAAY,EAAE,OAC5CG,EAAgBF,EAAO,QAAQ,IAAI,EACnCG,EAAeH,EAAO,QAAQ,IAAI,EAExC,OAAIE,EAAgBC,EACX,EAEA,CAEX", "names": ["init_define_process_env", "init_sentry_release_injection_stub", "React", "init_define_process_env", "init_sentry_release_injection_stub", "React", "import_react_dom", "SecurePaymentModalComponent", "className", "open", "projectIsDonationBased", "setOpen", "_a", "ModalWithIcon", "illustrations_exports", "styles_exports", "PaymentPartnersLogoSection", "glyphs_exports", "SecurePaymentModal", "src_default", "__template", "breakpoints_exports", "_b", "MoneyDisplayer", "amount", "currency", "precision", "project", "projectCurrency", "userLanguage", "getUserConfig", "LocaleMoneyDisplayer", "CURRENCIES_RATES", "_a", "CurrencyWrapper", "src_default", "__template", "getPosition", "userLanguage", "format", "NUMBER_FORMAT_CONFIG", "indexOfSymbol", "indexOfValue"] }