@selfcommunity/react-ui 0.10.5-payments.158 → 0.10.5-payments.162

package/lib/cjs/components/PaymentProduct/PaymentProduct.js

@@ -32,7 +32,7 @@ function PaymentProduct(inProps) {
     const { scPaymentProduct } = (0, react_core_1.useSCFetchPaymentProduct)({ id: paymentProductId, paymentProduct });
     // CONST
     const productPaymentPriceIds = (0, react_1.useMemo)(() => {
-        if (scPaymentProduct) {
+        if (scPaymentProduct && scPaymentProduct.payment_prices) {
             return scPaymentProduct.payment_prices.map((p) => p.id);
         }
         return [];
@@ -45,6 +45,7 @@ function PaymentProduct(inProps) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ disabled: !productPaymentPriceIds.length, defaultExpanded: isProductExpanded && productPaymentPriceIds.length > 0, square: true, className: (0, classnames_1.default)(classes.root, className) }, (expanded && { expanded }), rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.AccordionSummary, Object.assign({ "aria-controls": "panel1-content", id: "panel1-header" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", component: "div" }, { children: (0, jsx_runtime_1.jsx)("b", { children: scPaymentProduct.name && scPaymentProduct.name }) })), scPaymentProduct.description && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", component: "div" }, { children: scPaymentProduct.description })))] })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: !hidePaymentProductPrices &&
+                    scPaymentProduct.payment_prices &&
                     scPaymentProduct.payment_prices.map((price, index) => ((0, jsx_runtime_1.jsx)(PaymentProductPrice_1.default, Object.assign({ price: price }, PaymentProductPriceComponentProps, (contentType && { contentType }), (content ? { content } : { contentId }), (paymentOrder && { paymentOrder, onHandleActionBuy: onUpdatePaymentOrder })), index))) })] })));
 }
 exports.default = PaymentProduct;

package/lib/cjs/components/PaymentProductPrice/PaymentProductPrice.js

@@ -6,13 +6,13 @@ const react_1 = require("react");
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
-const types_1 = require("@selfcommunity/types");
 const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const react_intl_1 = require("react-intl");
 const react_core_1 = require("@selfcommunity/react-core");
 const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const payment_1 = require("../../utils/payment");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     image: `${constants_1.PREFIX}-image`,
@@ -41,9 +41,6 @@ function PaymentProductPrice(inProps) {
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
     const intl = (0, react_intl_1.useIntl)();
     const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
-    const formattedPrice = (0, react_1.useMemo)(() => {
-        return ((0, jsx_runtime_1.jsxs)("b", { children: [(price.unit_amount / 100).toFixed(2), price.currency === types_1.SCPaymentPriceCurrencyType.EUR && '€'] }));
-    }, [price]);
     const handleActionBuy = (0, react_1.useCallback)((e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -55,8 +52,8 @@ function PaymentProductPrice(inProps) {
     if (!price) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ disableTypography: true, className: classes.root, image: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.image }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ variant: "square", alt: 'price.name', className: classes.image }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "card_giftcard" }) })) })), primary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: formattedPrice })), secondary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: classes.secondary }, { children: price.description }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isMobile && paymentOrder && paymentOrder.payment_price.id === price.id && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: (0, classnames_1.default)(classes.secondary, classes.purchasedAt) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paymentProduct.action.purchasedAt", id: "ui.paymentProduct.action.purchasedAt", values: {
-                                purchasedAt: intl.formatDate(new Date(), { day: 'numeric', year: 'numeric', month: 'long' })
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ disableTypography: true, className: classes.root, image: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.image }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ variant: "square", alt: 'price.name', className: classes.image }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "card_giftcard" }) })) })), primary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, payment_1.getConvertedAmount)(price) }) })), secondary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: classes.secondary }, { children: price.description }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isMobile && paymentOrder && paymentOrder.payment_price.id === price.id && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: (0, classnames_1.default)(classes.secondary, classes.purchasedAt) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paymentProduct.action.purchasedAt", id: "ui.paymentProduct.action.purchasedAt", values: {
+                                purchasedAt: intl.formatDate(new Date(paymentOrder.created_at), { day: 'numeric', year: 'numeric', month: 'long' })
                             } }) }))) })] }), actions: actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.action }, { children: (0, jsx_runtime_1.jsx)(material_1.Zoom, Object.assign({ in: true, style: { transitionDelay: '200ms' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: paymentOrder && paymentOrder.payment_price.id === price.id ? 'secondary' : 'error', className: (0, classnames_1.default)(classes.button, { [classes.buttonPurchased]: paymentOrder && paymentOrder.payment_price.id === price.id }) }, (paymentOrder && { disabled: true }), { variant: "contained", component: react_core_1.Link, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "card_giftcard" }) }, (onHandleActionBuy && { onClick: handleActionBuy }), { to: `${scRoutingContext.url(react_core_1.SCRoutes.CHECKOUT_PAYMENT, {
                         content_type: contentType.toLowerCase(),
                         content_id: content ? content.id : contentId,

package/lib/cjs/components/Paywalls/Paywalls.js

@@ -15,6 +15,8 @@ const utils_1 = require("@selfcommunity/utils");
 const Errors_1 = require("../../constants/Errors");
 const PaymentProducts_1 = tslib_1.__importDefault(require("../PaymentProducts"));
 const react_intl_1 = require("react-intl");
+const PaymentProduct_1 = tslib_1.__importDefault(require("../PaymentProduct"));
+const payment_1 = require("../../utils/payment");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     error: `${constants_1.PREFIX}-error`
@@ -37,6 +39,7 @@ function Paywalls(inProps) {
     // HOOKS
     const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
     const isMountedRef = (0, react_core_1.useIsComponentMountedRef)();
+    const intl = (0, react_intl_1.useIntl)();
     // Check if the payment price of the purchase is in the current list
     const isPricePurchasedIncluded = (0, react_1.useMemo)(() => {
         let _included = false;
@@ -84,6 +87,9 @@ function Paywalls(inProps) {
     if (!isPaymentsEnabled) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PaymentProducts_1.default, Object.assign({ contentType: contentType }, (content ? { content } : { contentId }), { prefetchedProducts: products, paymentOrder: paymentOrder }, (paymentOrder && { paymentOrder, onUpdatePaymentOrder }))), paymentOrder && !isPricePurchasedIncluded && ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "error", className: classes.error }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywalls.priceNotIncluded", defaultMessage: "ui.paywalls.priceNotIncluded" }) })))] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PaymentProducts_1.default, Object.assign({ contentType: contentType }, (content ? { content } : { contentId }), { prefetchedProducts: products, paymentOrder: paymentOrder }, (paymentOrder && { paymentOrder, onUpdatePaymentOrder }))), paymentOrder && !isPricePurchasedIncluded && ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "error", className: classes.error }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywalls.priceNotIncluded", defaultMessage: "ui.paywalls.priceNotIncluded" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paywalls.contentPurchasedAt", id: "ui.paywalls.contentPurchasedAt", values: {
+                                    purchasedAt: intl.formatDate(new Date(paymentOrder.created_at), { day: 'numeric', year: 'numeric', month: 'long' }),
+                                    price: (0, payment_1.getConvertedAmount)(paymentOrder.payment_price)
+                                } }) })), (0, jsx_runtime_1.jsx)(PaymentProduct_1.default, Object.assign({ paymentProduct: paymentOrder.payment_price.payment_product, contentType: contentType }, (content ? { content } : { contentId })))] })))] })) })));
 }
 exports.default = Paywalls;

package/lib/esm/components/PaymentProduct/PaymentProduct.js

@@ -30,7 +30,7 @@ export default function PaymentProduct(inProps) {
     const { scPaymentProduct } = useSCFetchPaymentProduct({ id: paymentProductId, paymentProduct });
     // CONST
     const productPaymentPriceIds = useMemo(() => {
-        if (scPaymentProduct) {
+        if (scPaymentProduct && scPaymentProduct.payment_prices) {
             return scPaymentProduct.payment_prices.map((p) => p.id);
         }
         return [];
@@ -43,5 +43,6 @@ export default function PaymentProduct(inProps) {
         return _jsx(PaymentProductSkeleton, {});
     }
     return (_jsxs(Root, Object.assign({ disabled: !productPaymentPriceIds.length, defaultExpanded: isProductExpanded && productPaymentPriceIds.length > 0, square: true, className: classNames(classes.root, className) }, (expanded && { expanded }), rest, { children: [_jsxs(AccordionSummary, Object.assign({ "aria-controls": "panel1-content", id: "panel1-header" }, { children: [_jsx(Typography, Object.assign({ variant: "h5", component: "div" }, { children: _jsx("b", { children: scPaymentProduct.name && scPaymentProduct.name }) })), scPaymentProduct.description && (_jsx(Typography, Object.assign({ variant: "body1", component: "div" }, { children: scPaymentProduct.description })))] })), _jsx(AccordionDetails, { children: !hidePaymentProductPrices &&
+                    scPaymentProduct.payment_prices &&
                     scPaymentProduct.payment_prices.map((price, index) => (_jsx(PaymentProductPrice, Object.assign({ price: price }, PaymentProductPriceComponentProps, (contentType && { contentType }), (content ? { content } : { contentId }), (paymentOrder && { paymentOrder, onHandleActionBuy: onUpdatePaymentOrder })), index))) })] })));
 }

package/lib/esm/components/PaymentProductPrice/PaymentProductPrice.js

@@ -1,16 +1,16 @@
 import { __rest } from "tslib";
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useMemo } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import { Avatar, Box, Button, Icon, Typography, useMediaQuery, useTheme, Zoom } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
-import { SCPaymentPriceCurrencyType } from '@selfcommunity/types';
 import { PREFIX } from './constants';
 import PaymentProductPriceSkeleton from './Skeleton';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Link, SCRoutes, useSCPaymentsEnabled, useSCRouting } from '@selfcommunity/react-core';
 import BaseItem from '../../shared/BaseItem';
 import classNames from 'classnames';
+import { getConvertedAmount } from '../../utils/payment';
 const classes = {
     root: `${PREFIX}-root`,
     image: `${PREFIX}-image`,
@@ -39,9 +39,6 @@ export default function PaymentProductPrice(inProps) {
     const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
     const intl = useIntl();
     const { isPaymentsEnabled } = useSCPaymentsEnabled();
-    const formattedPrice = useMemo(() => {
-        return (_jsxs("b", { children: [(price.unit_amount / 100).toFixed(2), price.currency === SCPaymentPriceCurrencyType.EUR && '€'] }));
-    }, [price]);
     const handleActionBuy = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -53,8 +50,8 @@ export default function PaymentProductPrice(inProps) {
     if (!price) {
         return _jsx(PaymentProductPriceSkeleton, {});
     }
-    return (_jsx(Root, Object.assign({ disableTypography: true, className: classes.root, image: _jsx(Box, Object.assign({ className: classes.image }, { children: _jsx(Avatar, Object.assign({ variant: "square", alt: 'price.name', className: classes.image }, { children: _jsx(Icon, { children: "card_giftcard" }) })) })), primary: _jsx(Typography, Object.assign({ variant: "body1" }, { children: formattedPrice })), secondary: _jsxs(_Fragment, { children: [!isMobile && (_jsx(Typography, Object.assign({ component: "p", variant: "body2", className: classes.secondary }, { children: price.description }))), _jsx(_Fragment, { children: !isMobile && paymentOrder && paymentOrder.payment_price.id === price.id && (_jsx(Typography, Object.assign({ component: "p", variant: "body2", className: classNames(classes.secondary, classes.purchasedAt) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.paymentProduct.action.purchasedAt", id: "ui.paymentProduct.action.purchasedAt", values: {
-                                purchasedAt: intl.formatDate(new Date(), { day: 'numeric', year: 'numeric', month: 'long' })
+    return (_jsx(Root, Object.assign({ disableTypography: true, className: classes.root, image: _jsx(Box, Object.assign({ className: classes.image }, { children: _jsx(Avatar, Object.assign({ variant: "square", alt: 'price.name', className: classes.image }, { children: _jsx(Icon, { children: "card_giftcard" }) })) })), primary: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx("b", { children: getConvertedAmount(price) }) })), secondary: _jsxs(_Fragment, { children: [!isMobile && (_jsx(Typography, Object.assign({ component: "p", variant: "body2", className: classes.secondary }, { children: price.description }))), _jsx(_Fragment, { children: !isMobile && paymentOrder && paymentOrder.payment_price.id === price.id && (_jsx(Typography, Object.assign({ component: "p", variant: "body2", className: classNames(classes.secondary, classes.purchasedAt) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.paymentProduct.action.purchasedAt", id: "ui.paymentProduct.action.purchasedAt", values: {
+                                purchasedAt: intl.formatDate(new Date(paymentOrder.created_at), { day: 'numeric', year: 'numeric', month: 'long' })
                             } }) }))) })] }), actions: actions !== null && actions !== void 0 ? actions : (_jsx(Box, Object.assign({ className: classes.action }, { children: _jsx(Zoom, Object.assign({ in: true, style: { transitionDelay: '200ms' } }, { children: _jsx(Button, Object.assign({ size: "small", color: paymentOrder && paymentOrder.payment_price.id === price.id ? 'secondary' : 'error', className: classNames(classes.button, { [classes.buttonPurchased]: paymentOrder && paymentOrder.payment_price.id === price.id }) }, (paymentOrder && { disabled: true }), { variant: "contained", component: Link, startIcon: _jsx(Icon, { children: "card_giftcard" }) }, (onHandleActionBuy && { onClick: handleActionBuy }), { to: `${scRoutingContext.url(SCRoutes.CHECKOUT_PAYMENT, {
                         content_type: contentType.toLowerCase(),
                         content_id: content ? content.id : contentId,

package/lib/esm/components/Paywalls/Paywalls.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { Alert, Box } from '@mui/material';
+import { Alert, Box, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
@@ -12,7 +12,9 @@ import PaymentProductsSkeleton from './Skeleton';
 import { Logger } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import PaymentProducts from '../PaymentProducts';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
+import PaymentProduct from '../PaymentProduct';
+import { getConvertedAmount } from '../../utils/payment';
 const classes = {
     root: `${PREFIX}-root`,
     error: `${PREFIX}-error`
@@ -35,6 +37,7 @@ export default function Paywalls(inProps) {
     // HOOKS
     const { isPaymentsEnabled } = useSCPaymentsEnabled();
     const isMountedRef = useIsComponentMountedRef();
+    const intl = useIntl();
     // Check if the payment price of the purchase is in the current list
     const isPricePurchasedIncluded = useMemo(() => {
         let _included = false;
@@ -82,5 +85,8 @@ export default function Paywalls(inProps) {
     if (!isPaymentsEnabled) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: loading ? (_jsx(PaymentProductsSkeleton, {})) : (_jsxs(_Fragment, { children: [_jsx(PaymentProducts, Object.assign({ contentType: contentType }, (content ? { content } : { contentId }), { prefetchedProducts: products, paymentOrder: paymentOrder }, (paymentOrder && { paymentOrder, onUpdatePaymentOrder }))), paymentOrder && !isPricePurchasedIncluded && (_jsx(Alert, Object.assign({ severity: "error", className: classes.error }, { children: _jsx(FormattedMessage, { id: "ui.paywalls.priceNotIncluded", defaultMessage: "ui.paywalls.priceNotIncluded" }) })))] })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: loading ? (_jsx(PaymentProductsSkeleton, {})) : (_jsxs(_Fragment, { children: [_jsx(PaymentProducts, Object.assign({ contentType: contentType }, (content ? { content } : { contentId }), { prefetchedProducts: products, paymentOrder: paymentOrder }, (paymentOrder && { paymentOrder, onUpdatePaymentOrder }))), paymentOrder && !isPricePurchasedIncluded && (_jsxs(Alert, Object.assign({ severity: "error", className: classes.error }, { children: [_jsx(Typography, Object.assign({ component: "p", variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.paywalls.priceNotIncluded", defaultMessage: "ui.paywalls.priceNotIncluded" }) })), _jsx(Typography, Object.assign({ component: "p", variant: "body2" }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.paywalls.contentPurchasedAt", id: "ui.paywalls.contentPurchasedAt", values: {
+                                    purchasedAt: intl.formatDate(new Date(paymentOrder.created_at), { day: 'numeric', year: 'numeric', month: 'long' }),
+                                    price: getConvertedAmount(paymentOrder.payment_price)
+                                } }) })), _jsx(PaymentProduct, Object.assign({ paymentProduct: paymentOrder.payment_price.payment_product, contentType: contentType }, (content ? { content } : { contentId })))] })))] })) })));
 }