@selfcommunity/react-ui 0.11.0-alpha.67 → 0.11.0-alpha.68

package/lib/esm/components/UserAddPaymentMethodForm/UserAddPaymentMethodForm.d.ts

@@ -0,0 +1,40 @@
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { PaymentMethod as StripePaymentMethod } from '@stripe/stripe-js';
+export interface UserAddPaymentMethodFormProps extends BaseDialogProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    customer: any;
+    collectBillingAddress?: boolean;
+    handleSuccess?: (paymentMethod: StripePaymentMethod) => void;
+    handleClose?: () => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS User Add Payment Method Form. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserAddPaymentMethodForm} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserAddPaymentMethodForm` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserAddPaymentMethodForm-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function UserAddPaymentMethodForm(inProps: UserAddPaymentMethodFormProps): JSX.Element;

package/lib/esm/components/UserAddPaymentMethodForm/UserAddPaymentMethodForm.js

@@ -0,0 +1,140 @@
+import { __awaiter, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { useSCPaymentsEnabled, useSCUser } from '@selfcommunity/react-core';
+import { useThemeProps } from '@mui/system';
+import { PREFIX } from './constants';
+import BaseDialog from '../../shared/BaseDialog';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { loadStripe } from '@stripe/stripe-js';
+import { Button, Paper, Stack, Typography } from '@mui/material';
+import { AddressElement, PaymentElement, useElements } from '@stripe/react-stripe-js';
+import { getDefaultLocale } from '../../utils/payment';
+import { LoadingButton } from '@mui/lab';
+import { useSnackbar } from 'notistack';
+const classes = {
+    root: `${PREFIX}-root`,
+    address: `${PREFIX}-loading`
+};
+const Root = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({
+    [`& .${classes.address}`]: {
+        padding: 10,
+        borderRadius: 5,
+        margin: '20px 0px'
+    }
+}));
+/**
+ * > API documentation for the Community-JS User Add Payment Method Form. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserAddPaymentMethodForm} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserAddPaymentMethodForm` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserAddPaymentMethodForm-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function UserAddPaymentMethodForm(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className = null, customer, collectBillingAddress = false, handleSuccess, handleClose } = props, rest = __rest(props, ["className", "customer", "collectBillingAddress", "handleSuccess", "handleClose"]);
+    // CONTEXT
+    const scUserContext = useSCUser();
+    // STATE
+    const [errorMessage, setErrorMessage] = useState(null);
+    const [ready, setReady] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [addressState, setAddressState] = useState({ name: customer.name, address: customer.address });
+    const [isEditingBillingAddress, setIsEditingBillingAddress] = React.useState(false);
+    const { enqueueSnackbar } = useSnackbar();
+    // HOOKS
+    const { isPaymentsEnabled, stripePublicKey, stripeConnectedAccountId } = useSCPaymentsEnabled();
+    const intl = useIntl();
+    const stripePromise = isPaymentsEnabled && stripePublicKey && stripeConnectedAccountId && loadStripe
+        ? loadStripe(stripePublicKey, { stripeAccount: stripeConnectedAccountId, locale: getDefaultLocale(intl).locale })
+        : null;
+    const elements = useElements();
+    const handleError = (error) => {
+        setLoading(false);
+        enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error", defaultMessage: "ui.common.error" }), {
+            variant: 'error',
+            autoHideDuration: 3000
+        });
+    };
+    const handleSubmit = (event) => __awaiter(this, void 0, void 0, function* () {
+        /*
+    
+            // We don't want to let default form submission happen here,
+            // which would refresh the page.
+            event.preventDefault();
+    
+            if (!stripePromise || !elements) {
+                // Stripe.js hasn't yet loaded.
+                // Make sure to disable form submission until Stripe.js has loaded.
+                return null;
+            }
+    
+            setLoading(true);
+    
+            // Trigger form validation and wallet collection
+            const {error: submitError} = await elements.submit();
+            if (submitError) {
+                handleError(submitError);
+                return;
+            }
+    
+            // Create the PaymentMethod using the details collected by the Payment Element
+            const {error, paymentMethod} = await stripe.createPaymentMethod({
+                elements,
+                params: {billing_details: addressState}
+            });
+    
+            if (error) {
+                // This point is only reached if there's an immediate error when
+                // creating the PaymentMethod. Show the error to your customer (for example, payment details incomplete)
+                handleError(error);
+                return;
+            }
+    
+            const res = await attachPaymentMethodToCustomer(paymentMethod.id);
+            if (res.error) {
+                handleError(res.error);
+                return;
+            }
+    
+            handleSuccess?.(paymentMethod as StripePaymentMethod); */
+    });
+    const onHandleClose = () => {
+        handleClose === null || handleClose === void 0 ? void 0 : handleClose();
+    };
+    const paymentElementOptions = {
+        defaultValues: Object.assign({}, (collectBillingAddress && { billingDetails: addressState }))
+    };
+    if (!isPaymentsEnabled || !scUserContext.user) {
+        return null;
+    }
+    return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsxs("form", Object.assign({ onSubmit: handleSubmit }, { children: [_jsx(PaymentElement, { id: "payment-element", options: paymentElementOptions, onReady: () => setReady(true) }), collectBillingAddress && (_jsx(Paper, Object.assign({ variant: "outlined", className: classes.address }, { children: Object.keys(addressState).length && !isEditingBillingAddress ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: 'body1' }, { children: addressState.name })), _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: [addressState.address.line1, _jsx("br", {}), addressState.address.line2] })), _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: [addressState.address.postal_code, " - ", addressState.address.city, " - ", addressState.address.country] })), _jsx(Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', disabled: !elements, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: "Change" }))] })) : (_jsxs(_Fragment, { children: [_jsx(AddressElement, { onChange: (event) => {
+                                    setAddressState(event.value);
+                                }, options: {
+                                    mode: 'billing',
+                                    defaultValues: addressState
+                                } }), _jsx(Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', disabled: !elements || loading || !ready, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: _jsx(FormattedMessage, { id: 'ui.userAddPaymentMethodForm.useDefaultMethod', defaultMessage: 'ui.userAddPaymentMethodForm.useDefaultMethod' }) }))] })) }))), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 2, mt: 3 }, { children: [_jsx(Button, Object.assign({ onClick: onHandleClose, variant: "outlined" }, { children: _jsx(FormattedMessage, { id: "ui.userAddPaymentMethodForm.cancelButton", defaultMessage: "ui.userAddPaymentMethodForm.cancelButton" }) })), _jsx(LoadingButton, Object.assign({ disabled: !ready, loading: loading, type: "submit", variant: "contained" }, { children: _jsx(FormattedMessage, { id: "ui.userAddPaymentMethodForm.addButton", defaultMessage: "ui.userAddPaymentMethodForm.addButton" }) }))] })), errorMessage && _jsx("div", { children: errorMessage })] })) })));
+}

package/lib/esm/components/UserAddPaymentMethodForm/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCUserAddPaymentMethodForm";

package/lib/esm/components/UserAddPaymentMethodForm/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCUserAddPaymentMethodForm';

package/lib/esm/components/UserAddPaymentMethodForm/index.d.ts

@@ -0,0 +1,3 @@
+import UserAddPaymentMethodForm, { UserAddPaymentMethodFormProps } from './UserAddPaymentMethodForm';
+export default UserAddPaymentMethodForm;
+export { UserAddPaymentMethodFormProps };

package/lib/esm/components/UserAddPaymentMethodForm/index.js

@@ -0,0 +1,2 @@
+import UserAddPaymentMethodForm from './UserAddPaymentMethodForm';
+export default UserAddPaymentMethodForm;

package/lib/esm/components/UserBillingInfo/Skeleton.d.ts

@@ -0,0 +1,25 @@
+import { UserBillingInfoMode } from '../../constants/Billing';
+/**
+ * > API documentation for the Community-JS User Billing Info Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserBillingInfoSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserBillingInfoSkeleton-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserBillingInfoSkeleton-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export interface UserSkeletonBillingInfoProps {
+    mode?: UserBillingInfoMode;
+}
+export default function UserBillingInfoSkeleton(props: UserSkeletonBillingInfoProps): JSX.Element | null;

package/lib/esm/components/UserBillingInfo/Skeleton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Grid, Skeleton } from '@mui/material';
+import { UserBillingInfoMode } from '../../constants/Billing';
+export default function UserBillingInfoSkeleton(props) {
+    if (props.mode === UserBillingInfoMode.READ) {
+        return (_jsxs(Box, { children: [_jsx(Skeleton, { variant: "rectangular", height: 15, width: 200, sx: { mb: 2 } }), _jsx(Skeleton, { variant: "rectangular", height: 15, width: 250, sx: { mb: 2 } }), _jsx(Skeleton, { variant: "rectangular", height: 15, width: 220, sx: { mb: 2 } }), _jsx(Skeleton, { variant: "rectangular", height: 15, width: 190, sx: { mb: 2 } })] }));
+    }
+    return (_jsxs(Grid, Object.assign({ container: true, spacing: 3 }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: 6, justifyContent: 'center' }, { children: _jsx(Skeleton, { variant: "rounded", height: 30, width: 100 }) }))] })));
+}

package/lib/esm/components/UserBillingInfo/UserBillingInfo.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { UserBillingInfoMode } from '../../constants/Billing';
+import { SCCustomerBillingInfo } from '@selfcommunity/types/src/types';
+export interface UserBillingInfoProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    id?: string;
+    inlineDisplay?: boolean;
+    buttonLabel?: JSX.Element;
+    mode?: UserBillingInfoMode;
+    onLoad?: (account: SCCustomerBillingInfo, isCustomerCompleted: boolean) => void;
+    onChange?: (account: SCCustomerBillingInfo) => void;
+    onSave?: (account: SCCustomerBillingInfo) => void;
+    onError?: (error: any) => void;
+    onBack?: () => void;
+    onChangeViewMode?: (mode: UserBillingInfoMode) => void;
+    disableButtons?: boolean;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * BillingInfo component interface reference
+ */
+export declare type UserBillingInfoRef = {
+    isBillingInfoCompleted: () => boolean;
+    showError: (e: string) => void;
+    billingMode: () => UserBillingInfoMode;
+};
+declare const _default: React.ForwardRefExoticComponent<Pick<UserBillingInfoProps, keyof UserBillingInfoProps> & React.RefAttributes<UserBillingInfoRef>>;
+export default _default;