@infosoftas/s4-orders-js-sdk 0.1.20 → 0.1.21-0

package/src/components/OrderDenialModal/OrderDenialModal.tsx

@@ -1,89 +1,102 @@
-import { FC } from 'react';
-import { createPortal } from 'react-dom';
-
-import { OrderDenialFallbackOfferType } from '../../types/general';
-import Button from '../Button/Button';
-
-import './orderDenialModal.scss';
-
-type Props = {
-    isOpen: boolean;
-    message?: string;
-    offer?: OrderDenialFallbackOfferType;
-    canContinue?: boolean;
-    closeButtonText?: string;
-    continueButtonText?: string;
-    onContinue: () => void;
-    onClose: () => void;
-};
-
-const OrderDenialModal: FC<Props> = ({
-    isOpen,
-    message,
-    offer,
-    canContinue = true,
-    closeButtonText = 'Close',
-    continueButtonText = 'Continue',
-    onContinue,
-    onClose,
-}) => {
-    if (!isOpen || typeof document === 'undefined') {
-        return null;
-    }
-
-    return createPortal(
-        <div
-            className="sdk-order-denial-modal-overlay"
-            data-testid="sdk-order-denial-modal-overlay"
-        >
-            <div
-                className="sdk-order-denial-modal"
-                role="dialog"
-                aria-modal="true"
-                aria-label="Order denial modal"
-            >
-                <p
-                    className="sdk-order-denial-modal-text"
-                    style={{ whiteSpace: 'pre-line' }}
-                >
-                    {message?.replace(/\\n/g, '\n')}
-                </p>
-                {offer?.title && offer?.templatePackageId && (
-                    <div className="sdk-order-denial-offer-box">
-                        <h4 className="sdk-order-denial-offer-title">
-                            {offer.title}
-                        </h4>
-                        {offer.description && (
-                            <p className="sdk-order-denial-offer-description">
-                                {offer.description}
-                            </p>
-                        )}
-                        {offer.price && (
-                            <p className="sdk-order-denial-offer-meta">
-                                {offer.price}
-                            </p>
-                        )}
-                    </div>
-                )}
-                <div className="sdk-order-denial-modal-actions">
-                    <Button
-                        type="button"
-                        btnType="default"
-                        buttonText={closeButtonText}
-                        onClick={onClose}
-                    />
-                    {canContinue && (
-                        <Button
-                            type="button"
-                            buttonText={continueButtonText}
-                            onClick={onContinue}
-                        />
-                    )}
-                </div>
-            </div>
-        </div>,
-        document.body
-    );
-};
-
-export default OrderDenialModal;
+import { FC } from 'react';
+
+import { OrderDenialFallbackOfferType } from '../../types/general';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '../ui/alert-dialog';
+
+type Props = {
+    isOpen: boolean;
+    message?: string;
+    offer?: OrderDenialFallbackOfferType;
+    canContinue?: boolean;
+    closeButtonText?: string;
+    continueButtonText?: string;
+    onContinue: () => void;
+    onClose: () => void;
+};
+
+const splitMessage = (message = '') => {
+    const [title = '', ...rest] = message
+        .replace(/\\n/g, '\n')
+        .split(/\n\s*\n/)
+        .map((part) => part.trim())
+        .filter(Boolean);
+
+    return { title, description: rest.join('\n\n') };
+};
+
+const OrderDenialModal: FC<Props> = ({
+    isOpen,
+    message,
+    offer,
+    canContinue = true,
+    closeButtonText = 'Close',
+    continueButtonText = 'Continue',
+    onContinue,
+    onClose,
+}) => {
+    const { title, description } = splitMessage(message);
+    const showOffer = !!offer?.title && !!offer?.templatePackageId;
+
+    return (
+        <AlertDialog
+            open={isOpen}
+            onOpenChange={(open) => {
+                if (!open) onClose();
+            }}
+        >
+            <AlertDialogContent data-testid="sdk-order-denial-modal">
+                <AlertDialogHeader>
+                    <AlertDialogTitle className="whitespace-pre-line">
+                        {title}
+                    </AlertDialogTitle>
+                    {description && (
+                        <AlertDialogDescription className="whitespace-pre-line">
+                            {description}
+                        </AlertDialogDescription>
+                    )}
+                </AlertDialogHeader>
+
+                {showOffer && (
+                    <div
+                        className="flex flex-col gap-1 rounded-2xl bg-muted p-4 text-sm"
+                        data-testid="sdk-order-denial-offer"
+                    >
+                        <p className="font-medium">{offer?.title}</p>
+                        {offer?.description && (
+                            <p className="text-muted-foreground">
+                                {offer.description}
+                            </p>
+                        )}
+                        {offer?.price && (
+                            <p className="mt-1 font-semibold tabular-nums">
+                                {offer.price}
+                            </p>
+                        )}
+                    </div>
+                )}
+
+                <AlertDialogFooter>
+                    <AlertDialogCancel variant="ghost">
+                        {closeButtonText}
+                    </AlertDialogCancel>
+                    {canContinue && (
+                        <AlertDialogAction onClick={onContinue}>
+                            {continueButtonText}
+                        </AlertDialogAction>
+                    )}
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+};
+
+export default OrderDenialModal;

package/src/components/OrderForm/ContactDetailsSection.tsx

@@ -0,0 +1,71 @@
+import { FC } from 'react';
+
+import formFieldsMapper from '../FormFields/FormFieldsMapper';
+import ToggleField from '../FormFields/ToggleFiled';
+import { OrderFormFieldType } from '../../types/general';
+import { FieldGroup, FieldLegend, FieldSet } from '../ui/field';
+
+type FieldListProps = {
+    fields: OrderFormFieldType[];
+};
+
+const FieldList: FC<FieldListProps> = ({ fields }) => (
+    <>
+        {fields.map((field) => {
+            const Component = formFieldsMapper[field.name];
+
+            return Component ? (
+                <Component
+                    key={field.name}
+                    name={field.name}
+                    label={field.label}
+                    required={field.required || false}
+                    readOnly={field.readOnly || false}
+                />
+            ) : null;
+        })}
+    </>
+);
+
+type Props = {
+    label?: string;
+    orderFields: OrderFormFieldType[];
+    invoiceOrderFields: OrderFormFieldType[];
+    showOrderFields: boolean;
+    showInvoiceToggle: boolean;
+    showInvoiceFields: boolean;
+    invoiceToggleLabel?: string;
+    onInvoiceToggle?: (value: boolean) => void;
+};
+
+const ContactDetailsSection: FC<Props> = ({
+    label,
+    orderFields,
+    invoiceOrderFields,
+    showOrderFields,
+    showInvoiceToggle,
+    showInvoiceFields,
+    invoiceToggleLabel,
+    onInvoiceToggle,
+}) => (
+    <div className="sdk-order-details-section">
+        <FieldSet>
+            {label && <FieldLegend variant="label">{label}</FieldLegend>}
+            <FieldGroup>
+                {showOrderFields && <FieldList fields={orderFields} />}
+                {showInvoiceToggle && (
+                    <ToggleField
+                        name="invoiceAddressSelection"
+                        label={invoiceToggleLabel ?? 'Invoice Address'}
+                        toggleCallback={onInvoiceToggle}
+                    />
+                )}
+                {showInvoiceFields && (
+                    <FieldList fields={invoiceOrderFields} />
+                )}
+            </FieldGroup>
+        </FieldSet>
+    </div>
+);
+
+export default ContactDetailsSection;