@selfcommunity/react-ui 0.10.5-payments.192 → 0.10.5-payments.193

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/lib/cjs/components/BuyButton/BuyButton.js +1 -1
  2. package/lib/cjs/components/Checkout/Checkout.js +22 -7
  3. package/lib/cjs/components/PaymentOrder/PaymentOrder.d.ts +3 -0
  4. package/lib/cjs/components/PaymentOrder/PaymentOrder.js +2 -2
  5. package/lib/cjs/components/PaywallsConfigurator/PaywallsConfigurator.js +1 -1
  6. package/lib/esm/components/BuyButton/BuyButton.js +1 -1
  7. package/lib/esm/components/Checkout/Checkout.js +25 -10
  8. package/lib/esm/components/PaymentOrder/PaymentOrder.d.ts +3 -0
  9. package/lib/esm/components/PaymentOrder/PaymentOrder.js +2 -2
  10. package/lib/esm/components/PaywallsConfigurator/PaywallsConfigurator.js +1 -1
  11. package/lib/umd/react-ui.js +1 -1
  12. package/package.json +8 -8
package/lib/cjs/components/BuyButton/BuyButton.js CHANGED
@@ -185,7 +185,7 @@ function BuyButton(inProps) {
185
185
  if (!contentId && !content) {
186
186
  return null;
187
187
  }
188
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: disabled ? (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.buyButton.disabled", defaultMessage: "ui.buyButton.disabled" }) : '' }, { children: (0, jsx_runtime_1.jsx)(RequestRoot, Object.assign({ className: (0, classnames_1.default)(classes.requestRoot, className), variant: "contained", color: purchased ? 'inherit' : 'secondary', size: "small", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "card_giftcard" }), loading: scUserContext.user === undefined || purchased === null, onClick: handleOpen, disabled: disabled || (!paymentOrder && purchased) }, rest, { children: !paymentOrder && purchased ? (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.buyButton.free", defaultMessage: "ui.buyButton.free" }) : btnLabel })) })), paymentOrder && showTicket && (0, jsx_runtime_1.jsx)(PaymentOrderPdfButton_1.default, Object.assign({}, PaymentOrderPdfButtonComponentProps, { paymentOrder: paymentOrder })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", component: "div", marginBottom: 2 }, { children: (0, jsx_runtime_1.jsx)("b", { children: paymentOrder ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallssDialog.title.purchased", defaultMessage: "ui.paymentProductsDialog.title.purchased" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallssDialog.title", defaultMessage: "ui.paymentProductsDialog.title" })) }) })), (0, jsx_runtime_1.jsx)(Paywalls_1.default, Object.assign({ contentType: contentType }, (content ? { content } : { contentId }), { prefetchedPaymentContentStatus: {
188
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: disabled ? (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.buyButton.disabled", defaultMessage: "ui.buyButton.disabled" }) : '' }, { children: (0, jsx_runtime_1.jsx)(RequestRoot, Object.assign({ className: (0, classnames_1.default)(classes.requestRoot, className), variant: "contained", color: purchased ? 'inherit' : 'secondary', size: "small", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "card_giftcard" }), loading: scUserContext.user === undefined || purchased === null, onClick: handleOpen, disabled: disabled || (!paymentOrder && purchased) }, rest, { children: !paymentOrder && purchased ? (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.buyButton.free", defaultMessage: "ui.buyButton.free" }) : btnLabel })) })), paymentOrder && showTicket && (0, jsx_runtime_1.jsx)(PaymentOrderPdfButton_1.default, Object.assign({}, PaymentOrderPdfButtonComponentProps, { paymentOrder: paymentOrder })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", component: "div", marginBottom: 2 }, { children: (0, jsx_runtime_1.jsx)("b", { children: paymentOrder ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsDialog.title.purchased", defaultMessage: "ui.paywallsDialog.title.purchased" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsDialog.title", defaultMessage: "ui.paywallsDialog.title" })) }) })), (0, jsx_runtime_1.jsx)(Paywalls_1.default, Object.assign({ contentType: contentType }, (content ? { content } : { contentId }), { prefetchedPaymentContentStatus: {
189
189
  paywalls: products,
190
190
  payment_order: paymentOrder
191
191
  }, onUpdatePaymentOrder: handleUpdatePaymentOrder }))] }) }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PaywallsDialog_1.default, { open: true, onClose: handleClose, PaywallsComponentProps: Object.assign(Object.assign({ contentType }, (content ? { content } : { contentId })), { prefetchedPaymentContentStatus: {
package/lib/cjs/components/Checkout/Checkout.js CHANGED
@@ -21,6 +21,7 @@ const Course_1 = tslib_1.__importDefault(require("../Course"));
21
21
  const Group_1 = tslib_1.__importDefault(require("../Group"));
22
22
  const event_1 = require("../../types/event");
23
23
  const course_1 = require("../../types/course");
24
+ const PaymentOrder_1 = tslib_1.__importDefault(require("../PaymentOrder"));
24
25
  const classes = {
25
26
  root: `${constants_1.PREFIX}-root`,
26
27
  content: `${constants_1.PREFIX}-content`,
@@ -28,7 +29,8 @@ const classes = {
28
29
  contentDesc: `${constants_1.PREFIX}-content-desc`,
29
30
  contentCoverage: `${constants_1.PREFIX}-content-coverage`,
30
31
  checkout: `${constants_1.PREFIX}-checkout`,
31
- object: `${constants_1.PREFIX}-object`
32
+ object: `${constants_1.PREFIX}-object`,
33
+ paymentOrder: `${constants_1.PREFIX}-payment-order`
32
34
  };
33
35
  const Root = (0, material_1.styled)(material_1.Box, {
34
36
  slot: 'Root',
@@ -41,10 +43,14 @@ function Checkout(inProps) {
41
43
  name: constants_1.PREFIX
42
44
  });
43
45
  const { className, clientSecret, contentType, contentId, content, priceId, returnUrl, successUrl, uiMode, onComplete } = props, rest = tslib_1.__rest(props, ["className", "clientSecret", "contentType", "contentId", "content", "priceId", "returnUrl", "successUrl", "uiMode", "onComplete"]);
46
+ // STATE
44
47
  const [loading, setLoading] = (0, react_1.useState)(false);
45
48
  const [initialized, setInitialized] = (0, react_1.useState)(false);
49
+ const [paymentOrder, setPaymentOrder] = (0, react_1.useState)(null);
46
50
  // CONTEXT
47
51
  const scUserContext = (0, react_core_1.useSCUser)();
52
+ const scPreferencesContext = (0, react_1.useContext)(react_core_1.SCPreferencesContext);
53
+ const appUrl = (0, react_1.useMemo)(() => scPreferencesContext.preferences && scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_APP_URL].value, [scPreferencesContext.preferences]);
48
54
  const intl = (0, react_intl_1.useIntl)();
49
55
  // HOOKS
50
56
  const { isPaymentsEnabled, stripePublicKey, stripeConnectedAccountId } = (0, react_core_1.useSCPaymentsEnabled)();
@@ -53,16 +59,25 @@ function Checkout(inProps) {
53
59
  : null;
54
60
  // STATE
55
61
  const [clientSecretKey, setClientSecretKey] = (0, react_1.useState)(clientSecret);
62
+ // CONST
56
63
  const isContentObject = (0, react_1.useMemo)(() => contentType && contentId !== undefined, [contentType, contentId]);
57
64
  const fetchClientSecret = (0, react_1.useCallback)(() => {
58
65
  // Create a Checkout Session
59
66
  if (!loading) {
60
67
  setInitialized(true);
61
68
  setLoading(true);
62
- api_services_1.PaymentApiClient.checkoutCreateSession(Object.assign(Object.assign(Object.assign({ content_type: contentType, content_id: content ? content.id : contentId, payment_price_id: priceId }, (returnUrl && { return_url: returnUrl })), (successUrl && { success_url: successUrl })), (uiMode && { ui_mode: uiMode })))
63
- .then((r) => {
64
- setClientSecretKey(r.client_secret);
65
- setLoading(false);
69
+ api_services_1.PaymentApiClient.getPaymentContentStatus({ content_id: contentId, content_type: contentType })
70
+ .then((data) => {
71
+ if (!data.payment_order) {
72
+ api_services_1.PaymentApiClient.checkoutCreateSession(Object.assign(Object.assign(Object.assign({ content_type: contentType, content_id: content ? content.id : contentId, payment_price_id: priceId }, (returnUrl && { return_url: returnUrl })), (successUrl && { success_url: successUrl })), (uiMode && { ui_mode: uiMode }))).then((r) => {
73
+ setClientSecretKey(r.client_secret);
74
+ setLoading(false);
75
+ });
76
+ }
77
+ else {
78
+ setPaymentOrder(data.payment_order);
79
+ setLoading(false);
80
+ }
66
81
  })
67
82
  .catch((error) => {
68
83
  console.error('Error fetching session client secret:', error);
@@ -87,7 +102,7 @@ function Checkout(inProps) {
87
102
  return null;
88
103
  }
89
104
  // eslint-disable-next-line @typescript-eslint/no-misused-promises
90
- if (!stripePromise || !clientSecretKey || !scUserContext.user) {
105
+ if (!stripePromise || (!clientSecretKey && !paymentOrder) || !scUserContext.user) {
91
106
  return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
92
107
  }
93
108
  const renderContentObject = () => {
@@ -110,6 +125,6 @@ function Checkout(inProps) {
110
125
  }
111
126
  return _c;
112
127
  };
113
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [isContentObject && contentType !== types_1.SCContentType.COMMUNITY && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.contentObject }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.contentCoverage }), renderContentObject()] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.contentDesc }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", mb: 1 }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkout.contentDesc.title", defaultMessage: "ui.checkout.contentDesc.title" }) }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkout.contentDesc.subTitle", defaultMessage: "ui.checkout.contentDesc.subTitle" }) }))] }))] }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ id: "checkout", className: classes.checkout }, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.EmbeddedCheckoutProvider, Object.assign({ stripe: stripePromise, options: providerOptions }, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.EmbeddedCheckout, {}) })) }))] })));
128
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [isContentObject && contentType !== types_1.SCContentType.COMMUNITY && clientSecret && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.contentObject }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.contentCoverage }), renderContentObject()] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.contentDesc }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", mb: 1 }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkout.contentDesc.title", defaultMessage: "ui.checkout.contentDesc.title" }) }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkout.contentDesc.subTitle", defaultMessage: "ui.checkout.contentDesc.subTitle" }) }))] }))] }))), clientSecret && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ id: "checkout", className: classes.checkout }, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.EmbeddedCheckoutProvider, Object.assign({ stripe: stripePromise, options: providerOptions }, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.EmbeddedCheckout, {}) })) }))), !clientSecret && paymentOrder && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.paymentOrder }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "text", color: "primary", href: `${appUrl}`, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: [' ', "Back to home"] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h2", color: "textSecondary", mb: 2 }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkout.paymentOrder", defaultMessage: "ui.checkout.paymentOrder" }) }) })), (0, jsx_runtime_1.jsx)(PaymentOrder_1.default, { paymentOrderId: paymentOrder.id, hidePaymentOrderPdfButton: contentType !== types_1.SCContentType.EVENT })] })))] })));
114
129
  }
115
130
  exports.default = Checkout;
package/lib/cjs/components/PaymentOrder/PaymentOrder.d.ts CHANGED
@@ -1,7 +1,10 @@
1
1
  import { SCPaymentOrder } from '@selfcommunity/types';
2
+ import { PaymentOrderPdfButtonProps } from '../PaymentOrderPdfButton';
2
3
  export interface PaymentOrderProps {
3
4
  className?: string;
4
5
  paymentOrderId?: number;
5
6
  paymentOrder?: SCPaymentOrder;
7
+ hidePaymentOrderPdfButton?: boolean;
8
+ PaymentOrderPdfButtonComponentProps?: PaymentOrderPdfButtonProps;
6
9
  }
7
10
  export default function PaymentOrder(inProps: PaymentOrderProps): JSX.Element;
package/lib/cjs/components/PaymentOrder/PaymentOrder.js CHANGED
@@ -38,7 +38,7 @@ function PaymentOrder(inProps) {
38
38
  props: inProps,
39
39
  name: constants_1.PREFIX
40
40
  });
41
- const { className, paymentOrderId, paymentOrder } = props, rest = tslib_1.__rest(props, ["className", "paymentOrderId", "paymentOrder"]);
41
+ const { className, paymentOrderId, paymentOrder, hidePaymentOrderPdfButton = false, PaymentOrderPdfButtonComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "paymentOrderId", "paymentOrder", "hidePaymentOrderPdfButton", "PaymentOrderPdfButtonComponentProps"]);
42
42
  // HOOKS
43
43
  const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
44
44
  const { scPaymentOrder } = (0, react_core_1.useSCFetchPaymentOrder)({ id: paymentOrderId, paymentOrder });
@@ -75,6 +75,6 @@ function PaymentOrder(inProps) {
75
75
  hour: 'numeric',
76
76
  minute: 'numeric'
77
77
  })
78
- } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.price", defaultMessage: "ui.paymentOrder.price", values: { price: (0, payment_1.getConvertedAmount)(scPaymentOrder.payment_price) } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary", component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.status", defaultMessage: "ui.paymentOrder.status" }) })), (0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.status, variant: 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.status.paid", defaultMessage: "ui.paymentOrder.status.paid" }), color: "success", size: "small" }), (0, jsx_runtime_1.jsx)("br", {}), scPaymentOrder && ((0, jsx_runtime_1.jsx)(PaymentOrderPdfButton_1.default, { paymentOrder: scPaymentOrder, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.ticket.view", defaultMessage: "ui.paymentOrder.ticket.view" }) }))] }))] })));
78
+ } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.price", defaultMessage: "ui.paymentOrder.price", values: { price: (0, payment_1.getConvertedAmount)(scPaymentOrder.payment_price) } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary", component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.status", defaultMessage: "ui.paymentOrder.status" }) })), (0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.status, variant: 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.status.paid", defaultMessage: "ui.paymentOrder.status.paid" }), color: "success", size: "small" }), (0, jsx_runtime_1.jsx)("br", {}), scPaymentOrder && !hidePaymentOrderPdfButton && ((0, jsx_runtime_1.jsx)(PaymentOrderPdfButton_1.default, Object.assign({ paymentOrder: scPaymentOrder, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.ticket.view", defaultMessage: "ui.paymentOrder.ticket.view" }) }, PaymentOrderPdfButtonComponentProps)))] }))] })));
79
79
  }
80
80
  exports.default = PaymentOrder;
package/lib/cjs/components/PaywallsConfigurator/PaywallsConfigurator.js CHANGED
@@ -159,7 +159,7 @@ function PaywallsConfigurator(inProps) {
159
159
  /**
160
160
  * Fetch paywalls
161
161
  */
162
- const fetchPaywalls = (next = `${api_services_1.Endpoints.GetPaywalls.url({})}?content_id=${contentId}&content_type=${contentType}&active=1`) => tslib_1.__awaiter(this, void 0, void 0, function* () {
162
+ const fetchPaywalls = (next = `${api_services_1.Endpoints.GetPaywalls.url({})}?content_id=${contentId}&content_type=${contentType}&active=1&payment_product__active=1`) => tslib_1.__awaiter(this, void 0, void 0, function* () {
163
163
  const response = yield api_services_1.http.request({
164
164
  url: next,
165
165
  method: api_services_1.Endpoints.GetPaywalls.method
package/lib/esm/components/BuyButton/BuyButton.js CHANGED
@@ -183,7 +183,7 @@ export default function BuyButton(inProps) {
183
183
  if (!contentId && !content) {
184
184
  return null;
185
185
  }
186
- return (_jsxs(_Fragment, { children: [_jsx(Tooltip, Object.assign({ title: disabled ? _jsx(FormattedMessage, { id: "ui.buyButton.disabled", defaultMessage: "ui.buyButton.disabled" }) : '' }, { children: _jsx(RequestRoot, Object.assign({ className: classNames(classes.requestRoot, className), variant: "contained", color: purchased ? 'inherit' : 'secondary', size: "small", startIcon: _jsx(Icon, { children: "card_giftcard" }), loading: scUserContext.user === undefined || purchased === null, onClick: handleOpen, disabled: disabled || (!paymentOrder && purchased) }, rest, { children: !paymentOrder && purchased ? _jsx(FormattedMessage, { id: "ui.buyButton.free", defaultMessage: "ui.buyButton.free" }) : btnLabel })) })), paymentOrder && showTicket && _jsx(PaymentOrderPdfButton, Object.assign({}, PaymentOrderPdfButtonComponentProps, { paymentOrder: paymentOrder })), open && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: _jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h5", component: "div", marginBottom: 2 }, { children: _jsx("b", { children: paymentOrder ? (_jsx(FormattedMessage, { id: "ui.paywallssDialog.title.purchased", defaultMessage: "ui.paymentProductsDialog.title.purchased" })) : (_jsx(FormattedMessage, { id: "ui.paywallssDialog.title", defaultMessage: "ui.paymentProductsDialog.title" })) }) })), _jsx(Paywalls, Object.assign({ contentType: contentType }, (content ? { content } : { contentId }), { prefetchedPaymentContentStatus: {
186
+ return (_jsxs(_Fragment, { children: [_jsx(Tooltip, Object.assign({ title: disabled ? _jsx(FormattedMessage, { id: "ui.buyButton.disabled", defaultMessage: "ui.buyButton.disabled" }) : '' }, { children: _jsx(RequestRoot, Object.assign({ className: classNames(classes.requestRoot, className), variant: "contained", color: purchased ? 'inherit' : 'secondary', size: "small", startIcon: _jsx(Icon, { children: "card_giftcard" }), loading: scUserContext.user === undefined || purchased === null, onClick: handleOpen, disabled: disabled || (!paymentOrder && purchased) }, rest, { children: !paymentOrder && purchased ? _jsx(FormattedMessage, { id: "ui.buyButton.free", defaultMessage: "ui.buyButton.free" }) : btnLabel })) })), paymentOrder && showTicket && _jsx(PaymentOrderPdfButton, Object.assign({}, PaymentOrderPdfButtonComponentProps, { paymentOrder: paymentOrder })), open && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: _jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h5", component: "div", marginBottom: 2 }, { children: _jsx("b", { children: paymentOrder ? (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title.purchased", defaultMessage: "ui.paywallsDialog.title.purchased" })) : (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title", defaultMessage: "ui.paywallsDialog.title" })) }) })), _jsx(Paywalls, Object.assign({ contentType: contentType }, (content ? { content } : { contentId }), { prefetchedPaymentContentStatus: {
187
187
  paywalls: products,
188
188
  payment_order: paymentOrder
189
189
  }, onUpdatePaymentOrder: handleUpdatePaymentOrder }))] }) }))) : (_jsx(_Fragment, { children: _jsx(PaywallsDialog, { open: true, onClose: handleClose, PaywallsComponentProps: Object.assign(Object.assign({ contentType }, (content ? { content } : { contentId })), { prefetchedPaymentContentStatus: {
package/lib/esm/components/Checkout/Checkout.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { __rest } from "tslib";
2
2
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { useCallback, useEffect, useMemo, useState } from 'react';
4
- import { Box, Typography, styled } from '@mui/material';
3
+ import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
4
+ import { Box, Button, Icon, styled, Typography } from '@mui/material';
5
5
  import { useThemeProps } from '@mui/system';
6
6
  import classNames from 'classnames';
7
7
  import { EmbeddedCheckout, EmbeddedCheckoutProvider } from '@stripe/react-stripe-js';
@@ -12,13 +12,14 @@ import { PREFIX } from './constants';
12
12
  import { SCContentType } from '@selfcommunity/types';
13
13
  import { FormattedMessage, useIntl } from 'react-intl';
14
14
  import { getDefaultLocale } from '../../utils/payment';
15
- import { useSCPaymentsEnabled, useSCUser } from '@selfcommunity/react-core';
15
+ import { SCPreferences, SCPreferencesContext, useSCPaymentsEnabled, useSCUser } from '@selfcommunity/react-core';
16
16
  import Event from '../Event';
17
17
  import Category from '../Category';
18
18
  import Course from '../Course';
19
19
  import Group from '../Group';
20
20
  import { SCEventTemplateType } from '../../types/event';
21
21
  import { SCCourseTemplateType } from '../../types/course';
22
+ import PaymentOrder from '../PaymentOrder';
22
23
  const classes = {
23
24
  root: `${PREFIX}-root`,
24
25
  content: `${PREFIX}-content`,
@@ -26,7 +27,8 @@ const classes = {
26
27
  contentDesc: `${PREFIX}-content-desc`,
27
28
  contentCoverage: `${PREFIX}-content-coverage`,
28
29
  checkout: `${PREFIX}-checkout`,
29
- object: `${PREFIX}-object`
30
+ object: `${PREFIX}-object`,
31
+ paymentOrder: `${PREFIX}-payment-order`
30
32
  };
31
33
  const Root = styled(Box, {
32
34
  slot: 'Root',
@@ -39,10 +41,14 @@ export default function Checkout(inProps) {
39
41
  name: PREFIX
40
42
  });
41
43
  const { className, clientSecret, contentType, contentId, content, priceId, returnUrl, successUrl, uiMode, onComplete } = props, rest = __rest(props, ["className", "clientSecret", "contentType", "contentId", "content", "priceId", "returnUrl", "successUrl", "uiMode", "onComplete"]);
44
+ // STATE
42
45
  const [loading, setLoading] = useState(false);
43
46
  const [initialized, setInitialized] = useState(false);
47
+ const [paymentOrder, setPaymentOrder] = useState(null);
44
48
  // CONTEXT
45
49
  const scUserContext = useSCUser();
50
+ const scPreferencesContext = useContext(SCPreferencesContext);
51
+ const appUrl = useMemo(() => scPreferencesContext.preferences && scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_APP_URL].value, [scPreferencesContext.preferences]);
46
52
  const intl = useIntl();
47
53
  // HOOKS
48
54
  const { isPaymentsEnabled, stripePublicKey, stripeConnectedAccountId } = useSCPaymentsEnabled();
@@ -51,16 +57,25 @@ export default function Checkout(inProps) {
51
57
  : null;
52
58
  // STATE
53
59
  const [clientSecretKey, setClientSecretKey] = useState(clientSecret);
60
+ // CONST
54
61
  const isContentObject = useMemo(() => contentType && contentId !== undefined, [contentType, contentId]);
55
62
  const fetchClientSecret = useCallback(() => {
56
63
  // Create a Checkout Session
57
64
  if (!loading) {
58
65
  setInitialized(true);
59
66
  setLoading(true);
60
- PaymentApiClient.checkoutCreateSession(Object.assign(Object.assign(Object.assign({ content_type: contentType, content_id: content ? content.id : contentId, payment_price_id: priceId }, (returnUrl && { return_url: returnUrl })), (successUrl && { success_url: successUrl })), (uiMode && { ui_mode: uiMode })))
61
- .then((r) => {
62
- setClientSecretKey(r.client_secret);
63
- setLoading(false);
67
+ PaymentApiClient.getPaymentContentStatus({ content_id: contentId, content_type: contentType })
68
+ .then((data) => {
69
+ if (!data.payment_order) {
70
+ PaymentApiClient.checkoutCreateSession(Object.assign(Object.assign(Object.assign({ content_type: contentType, content_id: content ? content.id : contentId, payment_price_id: priceId }, (returnUrl && { return_url: returnUrl })), (successUrl && { success_url: successUrl })), (uiMode && { ui_mode: uiMode }))).then((r) => {
71
+ setClientSecretKey(r.client_secret);
72
+ setLoading(false);
73
+ });
74
+ }
75
+ else {
76
+ setPaymentOrder(data.payment_order);
77
+ setLoading(false);
78
+ }
64
79
  })
65
80
  .catch((error) => {
66
81
  console.error('Error fetching session client secret:', error);
@@ -85,7 +100,7 @@ export default function Checkout(inProps) {
85
100
  return null;
86
101
  }
87
102
  // eslint-disable-next-line @typescript-eslint/no-misused-promises
88
- if (!stripePromise || !clientSecretKey || !scUserContext.user) {
103
+ if (!stripePromise || (!clientSecretKey && !paymentOrder) || !scUserContext.user) {
89
104
  return _jsx(CheckoutSkeleton, {});
90
105
  }
91
106
  const renderContentObject = () => {
@@ -108,5 +123,5 @@ export default function Checkout(inProps) {
108
123
  }
109
124
  return _c;
110
125
  };
111
- return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [isContentObject && contentType !== SCContentType.COMMUNITY && (_jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsxs(Box, Object.assign({ className: classes.contentObject }, { children: [_jsx(Box, { className: classes.contentCoverage }), renderContentObject()] })), _jsxs(Box, Object.assign({ className: classes.contentDesc }, { children: [_jsx(Typography, Object.assign({ variant: "h5", mb: 1 }, { children: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.checkout.contentDesc.title", defaultMessage: "ui.checkout.contentDesc.title" }) }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: "ui.checkout.contentDesc.subTitle", defaultMessage: "ui.checkout.contentDesc.subTitle" }) }))] }))] }))), _jsx(Box, Object.assign({ id: "checkout", className: classes.checkout }, { children: _jsx(EmbeddedCheckoutProvider, Object.assign({ stripe: stripePromise, options: providerOptions }, { children: _jsx(EmbeddedCheckout, {}) })) }))] })));
126
+ return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [isContentObject && contentType !== SCContentType.COMMUNITY && clientSecret && (_jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsxs(Box, Object.assign({ className: classes.contentObject }, { children: [_jsx(Box, { className: classes.contentCoverage }), renderContentObject()] })), _jsxs(Box, Object.assign({ className: classes.contentDesc }, { children: [_jsx(Typography, Object.assign({ variant: "h5", mb: 1 }, { children: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.checkout.contentDesc.title", defaultMessage: "ui.checkout.contentDesc.title" }) }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: "ui.checkout.contentDesc.subTitle", defaultMessage: "ui.checkout.contentDesc.subTitle" }) }))] }))] }))), clientSecret && (_jsx(Box, Object.assign({ id: "checkout", className: classes.checkout }, { children: _jsx(EmbeddedCheckoutProvider, Object.assign({ stripe: stripePromise, options: providerOptions }, { children: _jsx(EmbeddedCheckout, {}) })) }))), !clientSecret && paymentOrder && (_jsxs(Box, Object.assign({ className: classes.paymentOrder }, { children: [_jsxs(Button, Object.assign({ variant: "text", color: "primary", href: `${appUrl}`, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: [' ', "Back to home"] })), _jsx(Typography, Object.assign({ variant: "h2", color: "textSecondary", mb: 2 }, { children: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.checkout.paymentOrder", defaultMessage: "ui.checkout.paymentOrder" }) }) })), _jsx(PaymentOrder, { paymentOrderId: paymentOrder.id, hidePaymentOrderPdfButton: contentType !== SCContentType.EVENT })] })))] })));
112
127
  }
package/lib/esm/components/PaymentOrder/PaymentOrder.d.ts CHANGED
@@ -1,7 +1,10 @@
1
1
  import { SCPaymentOrder } from '@selfcommunity/types';
2
+ import { PaymentOrderPdfButtonProps } from '../PaymentOrderPdfButton';
2
3
  export interface PaymentOrderProps {
3
4
  className?: string;
4
5
  paymentOrderId?: number;
5
6
  paymentOrder?: SCPaymentOrder;
7
+ hidePaymentOrderPdfButton?: boolean;
8
+ PaymentOrderPdfButtonComponentProps?: PaymentOrderPdfButtonProps;
6
9
  }
7
10
  export default function PaymentOrder(inProps: PaymentOrderProps): JSX.Element;
package/lib/esm/components/PaymentOrder/PaymentOrder.js CHANGED
@@ -36,7 +36,7 @@ export default function PaymentOrder(inProps) {
36
36
  props: inProps,
37
37
  name: PREFIX
38
38
  });
39
- const { className, paymentOrderId, paymentOrder } = props, rest = __rest(props, ["className", "paymentOrderId", "paymentOrder"]);
39
+ const { className, paymentOrderId, paymentOrder, hidePaymentOrderPdfButton = false, PaymentOrderPdfButtonComponentProps = {} } = props, rest = __rest(props, ["className", "paymentOrderId", "paymentOrder", "hidePaymentOrderPdfButton", "PaymentOrderPdfButtonComponentProps"]);
40
40
  // HOOKS
41
41
  const { isPaymentsEnabled } = useSCPaymentsEnabled();
42
42
  const { scPaymentOrder } = useSCFetchPaymentOrder({ id: paymentOrderId, paymentOrder });
@@ -73,5 +73,5 @@ export default function PaymentOrder(inProps) {
73
73
  hour: 'numeric',
74
74
  minute: 'numeric'
75
75
  })
76
- } }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrder.price", defaultMessage: "ui.paymentOrder.price", values: { price: getConvertedAmount(scPaymentOrder.payment_price) } }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary", component: "span" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrder.status", defaultMessage: "ui.paymentOrder.status" }) })), _jsx(Chip, { className: classes.status, variant: 'outlined', label: _jsx(FormattedMessage, { id: "ui.paymentOrder.status.paid", defaultMessage: "ui.paymentOrder.status.paid" }), color: "success", size: "small" }), _jsx("br", {}), scPaymentOrder && (_jsx(PaymentOrderPdfButton, { paymentOrder: scPaymentOrder, label: _jsx(FormattedMessage, { id: "ui.paymentOrder.ticket.view", defaultMessage: "ui.paymentOrder.ticket.view" }) }))] }))] })));
76
+ } }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrder.price", defaultMessage: "ui.paymentOrder.price", values: { price: getConvertedAmount(scPaymentOrder.payment_price) } }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary", component: "span" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrder.status", defaultMessage: "ui.paymentOrder.status" }) })), _jsx(Chip, { className: classes.status, variant: 'outlined', label: _jsx(FormattedMessage, { id: "ui.paymentOrder.status.paid", defaultMessage: "ui.paymentOrder.status.paid" }), color: "success", size: "small" }), _jsx("br", {}), scPaymentOrder && !hidePaymentOrderPdfButton && (_jsx(PaymentOrderPdfButton, Object.assign({ paymentOrder: scPaymentOrder, label: _jsx(FormattedMessage, { id: "ui.paymentOrder.ticket.view", defaultMessage: "ui.paymentOrder.ticket.view" }) }, PaymentOrderPdfButtonComponentProps)))] }))] })));
77
77
  }
package/lib/esm/components/PaywallsConfigurator/PaywallsConfigurator.js CHANGED
@@ -157,7 +157,7 @@ export default function PaywallsConfigurator(inProps) {
157
157
  /**
158
158
  * Fetch paywalls
159
159
  */
160
- const fetchPaywalls = (next = `${Endpoints.GetPaywalls.url({})}?content_id=${contentId}&content_type=${contentType}&active=1`) => __awaiter(this, void 0, void 0, function* () {
160
+ const fetchPaywalls = (next = `${Endpoints.GetPaywalls.url({})}?content_id=${contentId}&content_type=${contentType}&active=1&payment_product__active=1`) => __awaiter(this, void 0, void 0, function* () {
161
161
  const response = yield http.request({
162
162
  url: next,
163
163
  method: Endpoints.GetPaywalls.method