@licklist/design 0.71.15 → 0.71.16-stage.0

package/dist/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryTotal.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAIjD,eAAO,MAAM,YAAY,sEAKtB,IAAI,CACL,mBAAmB,EACnB,YAAY,GAAG,mBAAmB,GAAG,gBAAgB,GAAG,eAAe,CACxE,4CA4BA,CAAA"}
+{"version":3,"file":"SummaryTotal.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAIjD,eAAO,MAAM,YAAY,sEAKtB,IAAI,CACL,mBAAmB,EACnB,YAAY,GAAG,mBAAmB,GAAG,gBAAgB,GAAG,eAAe,CACxE,4CAyCA,CAAA"}

package/dist/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.js

@@ -15,7 +15,14 @@ var SummaryTotal = function(param) {
     }, [
         formValues
     ]);
-    var cartSum = isFreePayment ? 0 : cartSumByOrderProducts(orderProducts) + transactionFee;
+    var cartSum = isFreePayment ? 0 : cartSumByOrderProducts({
+        orderProducts: orderProducts
+    }) + transactionFee;
+    var totalSum = isFreePayment ? 0 : cartSumByOrderProducts({
+        orderProducts: orderProducts,
+        isTotalSum: true
+    }) + transactionFee;
+    var hasRemaingToPay = totalSum > cartSum;
     if (!orderProducts.length) {
         return null;
     }
@@ -23,12 +30,16 @@ var SummaryTotal = function(param) {
         className: "d-flex flex-column justify-content-between",
         children: [
             /*#__PURE__*/ jsx(SummaryTotalBlock, {
-                label: t('total'),
+                label: t(hasRemaingToPay ? "payNow" : "total"),
                 amount: cartSum
             }),
             !!totalWithDiscount && !isFreePayment && /*#__PURE__*/ jsx(SummaryTotalBlock, {
                 label: t('totalWithDiscount'),
                 amount: totalWithDiscount + transactionFee
+            }),
+            hasRemaingToPay && /*#__PURE__*/ jsx(SummaryTotalBlock, {
+                label: t("remaining"),
+                amount: totalSum - cartSum
             })
         ]
     });

package/dist/iframe/order-process/components/BookingSummary/utils/index.d.ts

@@ -1,5 +1,8 @@
 import { QuantityCheckProductInfo } from '@licklist/plugins/dist/types/Api/verifyStock';
 import { OrderItem } from '@licklist/plugins/dist/types/context/Iframe/orderItems';
-export declare const cartSumByOrderProducts: (orderProducts?: OrderItem[]) => number;
+export declare const cartSumByOrderProducts: ({ orderProducts, isTotalSum, }: {
+    orderProducts?: OrderItem[];
+    isTotalSum?: boolean;
+}) => number;
 export declare const getProductError: (productsWithErrors: QuantityCheckProductInfo[], productId: OrderItem["id"]) => string | undefined;
 //# sourceMappingURL=index.d.ts.map

package/dist/iframe/order-process/components/BookingSummary/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/BookingSummary/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,8CAA8C,CAAA;AACvF,OAAO,EAAE,SAAS,EAAE,MAAM,wDAAwD,CAAA;AAElF,eAAO,MAAM,sBAAsB,mBAAoB,SAAS,EAAE,WASjE,CAAA;AAED,eAAO,MAAM,eAAe,uBACN,wBAAwB,EAAE,aACnC,SAAS,CAAC,IAAI,CAAC,KACzB,MAAM,GAAG,SAGA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/BookingSummary/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,8CAA8C,CAAA;AACvF,OAAO,EAAE,SAAS,EAAE,MAAM,wDAAwD,CAAA;AAElF,eAAO,MAAM,sBAAsB,mCAGhC;IACD,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,WAWA,CAAC;AAEF,eAAO,MAAM,eAAe,uBACN,wBAAwB,EAAE,aACnC,SAAS,CAAC,IAAI,CAAC,KACzB,MAAM,GAAG,SAGA,CAAA"}

package/dist/iframe/order-process/components/BookingSummary/utils/index.js

@@ -1,10 +1,11 @@
-var cartSumByOrderProducts = function(orderProducts) {
+var cartSumByOrderProducts = function(param) {
+    var orderProducts = param.orderProducts, isTotalSum = param.isTotalSum;
     if (!orderProducts || !orderProducts.length) {
         return 0;
     }
     return orderProducts.reduce(function(prevSumValue, product) {
         if (!product) return 0;
-        var price = (product === null || product === void 0 ? void 0 : product.hasDeposit) ? product === null || product === void 0 ? void 0 : product.deposit : product === null || product === void 0 ? void 0 : product.price;
+        var price = isTotalSum ? product === null || product === void 0 ? void 0 : product.price : (product === null || product === void 0 ? void 0 : product.deposit) || (product === null || product === void 0 ? void 0 : product.price);
         return prevSumValue + price * product.quantity;
     }, 0);
 };

package/dist/iframe/payment/payment-page/PaymentPage.d.ts

@@ -10,7 +10,7 @@ interface PaymentProps extends RyftPaymentFormProps {
     onFailIframePayment?: () => void;
     data?: PaymentLinkResponse | null;
     isLoading: boolean;
-    bookingSummaryProps: Omit<BookingSummaryProps, 'totallWithDiscount'>;
+    bookingSummaryProps: BookingSummaryProps;
     paymentMetadata?: PaymentMetadata;
 }
 export declare const PaymentPage: ({ onCloseIframePayment, onFailIframePayment, data, isLoading, bookingSummaryProps, paymentMetadata, ...ryftPaymentFormProps }: PaymentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/iframe/payment/payment-page/PaymentPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentPage.d.ts","sourceRoot":"","sources":["../../../../src/iframe/payment/payment-page/PaymentPage.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gDAAgD,CAAA;AACpF,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAA;AAI9F,OAAO,EAEL,oBAAoB,EACrB,MAAM,4BAA4B,CAAA;AAOnC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb;AAED,UAAU,YAAa,SAAQ,oBAAoB;IACjD,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAA;IAChC,IAAI,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAA;IACjC,SAAS,EAAE,OAAO,CAAA;IAClB,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAA;IACpE,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC;AAED,eAAO,MAAM,WAAW,kIAQrB,YAAY,4CAkKd,CAAA"}
+{"version":3,"file":"PaymentPage.d.ts","sourceRoot":"","sources":["../../../../src/iframe/payment/payment-page/PaymentPage.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gDAAgD,CAAA;AACpF,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAA;AAI9F,OAAO,EAEL,oBAAoB,EACrB,MAAM,4BAA4B,CAAA;AAOnC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb;AAED,UAAU,YAAa,SAAQ,oBAAoB;IACjD,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAA;IAChC,IAAI,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAA;IACjC,SAAS,EAAE,OAAO,CAAA;IAClB,mBAAmB,EAAE,mBAAmB,CAAA;IACxC,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC;AAED,eAAO,MAAM,WAAW,kIAQrB,YAAY,4CAwNd,CAAA"}

package/dist/iframe/payment/payment-page/PaymentPage.js

@@ -174,12 +174,21 @@ var PaymentPage = function(_param) {
             })
         });
     }
-    var orderTotalAmountByFormValues = cartSumByOrderProducts((bookingSummaryProps === null || bookingSummaryProps === void 0 ? void 0 : bookingSummaryProps.formValues) && Object.values(bookingSummaryProps === null || bookingSummaryProps === void 0 ? void 0 : bookingSummaryProps.formValues));
+    var orderCartAmountByFormValues = cartSumByOrderProducts({
+        orderProducts: (bookingSummaryProps === null || bookingSummaryProps === void 0 ? void 0 : bookingSummaryProps.formValues) && Object.values(bookingSummaryProps === null || bookingSummaryProps === void 0 ? void 0 : bookingSummaryProps.formValues)
+    });
+    var orderTotalAmountByFormValues = cartSumByOrderProducts({
+        orderProducts: (bookingSummaryProps === null || bookingSummaryProps === void 0 ? void 0 : bookingSummaryProps.formValues) && Object.values(bookingSummaryProps === null || bookingSummaryProps === void 0 ? void 0 : bookingSummaryProps.formValues),
+        isTotalSum: true
+    });
+    var hasRemaingToPay = orderTotalAmountByFormValues > orderCartAmountByFormValues;
     // User can fill promo code only in iframe application.
     // It isn't possible via payment link. This check will
     // be applied when there is no metadata and in case when
     // orderValues sum is greater than amount in order.
-    var isCalculatedAmountGreaterThanOrderAmount = orderTotalAmountByFormValues > (data === null || data === void 0 ? void 0 : data.amount);
+    var isCalculatedAmountGreaterThanOrderAmount = !hasRemaingToPay && orderCartAmountByFormValues > (data === null || data === void 0 ? void 0 : data.amount);
+    var isPaymentLinkWithRemainingToPay = (data === null || data === void 0 ? void 0 : data.remaining_to_pay) && !!Number(data === null || data === void 0 ? void 0 : data.remaining_to_pay);
+    var totalPaidWithRemainingToPay = (data === null || data === void 0 ? void 0 : data.amount_to_pay) && !!Number(data === null || data === void 0 ? void 0 : data.amount_to_pay);
     return /*#__PURE__*/ jsx(Page, {
         className: "payment_link",
         children: /*#__PURE__*/ jsx(PageBody, {
@@ -219,10 +228,33 @@ var PaymentPage = function(_param) {
                         }) : /*#__PURE__*/ jsxs(Fragment, {
                             children: [
                                 isCalculatedAmountGreaterThanOrderAmount && /*#__PURE__*/ jsx(SummaryTotalBlock, {
-                                    label: t('total'),
-                                    amount: orderTotalAmountByFormValues + ((bookingSummaryProps === null || bookingSummaryProps === void 0 ? void 0 : bookingSummaryProps.transactionFee) || 0)
+                                    label: t(hasRemaingToPay ? 'payNow' : 'total'),
+                                    amount: orderCartAmountByFormValues + ((bookingSummaryProps === null || bookingSummaryProps === void 0 ? void 0 : bookingSummaryProps.transactionFee) || 0)
                                 }),
-                                /*#__PURE__*/ jsx(SummaryTotalBlock, {
+                                hasRemaingToPay && /*#__PURE__*/ jsxs(Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(SummaryTotalBlock, {
+                                            label: t('remaining'),
+                                            amount: orderTotalAmountByFormValues - orderCartAmountByFormValues
+                                        }),
+                                        /*#__PURE__*/ jsx(SummaryTotalBlock, {
+                                            label: t('total'),
+                                            amount: orderTotalAmountByFormValues
+                                        })
+                                    ]
+                                }),
+                                isPaymentLinkWithRemainingToPay && /*#__PURE__*/ jsx(SummaryTotalBlock, {
+                                    label: t('remaningToPay'),
+                                    amount: Number(data === null || data === void 0 ? void 0 : data.remaining_to_pay)
+                                }),
+                                totalPaidWithRemainingToPay && /*#__PURE__*/ jsx(SummaryTotalBlock, {
+                                    label: t('totalAmount'),
+                                    amount: Number(data === null || data === void 0 ? void 0 : data.amount_to_pay)
+                                }),
+                                isPaymentLinkWithRemainingToPay && totalPaidWithRemainingToPay ? /*#__PURE__*/ jsx(SummaryTotalBlock, {
+                                    label: t('payNow'),
+                                    amount: data === null || data === void 0 ? void 0 : data.amount
+                                }) : /*#__PURE__*/ jsx(SummaryTotalBlock, {
                                     label: t(isCalculatedAmountGreaterThanOrderAmount ? 'totalWithDiscount' : 'total'),
                                     amount: (data === null || data === void 0 ? void 0 : data.amount) + ((bookingSummaryProps === null || bookingSummaryProps === void 0 ? void 0 : bookingSummaryProps.transactionFee) || 0)
                                 })

package/dist/iframe/payment/payment-status-page/PaymentStatusPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentStatusPage.d.ts","sourceRoot":"","sources":["../../../../src/iframe/payment/payment-status-page/PaymentStatusPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,qDAAqD,CAAA;AACzF,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAG7D,eAAO,MAAM,mBAAmB,WAAW,CAAA;AAC3C,eAAO,MAAM,oBAAoB,YAAY,CAAA;AAC7C,eAAO,MAAM,oBAAoB,YAAY,CAAA;AAE7C,MAAM,MAAM,WAAW,GACnB,OAAO,oBAAoB,GAC3B,OAAO,mBAAmB,GAC1B,OAAO,oBAAoB,CAAA;AAE/B,UAAU,2BAA2B;IACnC,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,EAAE,WAAW,CAAA;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,mBAAmB,CAAC,EAAE,mBAAmB,CAAA;IACzC,kBAAkB,CAAC,EAAE,SAAS,CAAA;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC;AASD,eAAO,MAAM,iBAAiB,iLAa3B,2BAA2B,4CA4G7B,CAAA"}
+{"version":3,"file":"PaymentStatusPage.d.ts","sourceRoot":"","sources":["../../../../src/iframe/payment/payment-status-page/PaymentStatusPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,qDAAqD,CAAA;AACzF,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAG7D,eAAO,MAAM,mBAAmB,WAAW,CAAA;AAC3C,eAAO,MAAM,oBAAoB,YAAY,CAAA;AAC7C,eAAO,MAAM,oBAAoB,YAAY,CAAA;AAE7C,MAAM,MAAM,WAAW,GACnB,OAAO,oBAAoB,GAC3B,OAAO,mBAAmB,GAC1B,OAAO,oBAAoB,CAAA;AAE/B,UAAU,2BAA2B;IACnC,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,EAAE,WAAW,CAAA;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,mBAAmB,CAAC,EAAE,mBAAmB,CAAA;IACzC,kBAAkB,CAAC,EAAE,SAAS,CAAA;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC;AASD,eAAO,MAAM,iBAAiB,iLAa3B,2BAA2B,4CAkI7B,CAAA"}

package/dist/iframe/payment/payment-status-page/PaymentStatusPage.js

@@ -65,15 +65,21 @@ var PaymentStatusPage = function(param) {
     if (isLoading) return /*#__PURE__*/ jsx(LoaderIndicator, {
         isLoaded: false
     });
-    var _bookingSummaryProps_formValues;
-    var orderTotalAmounByFormValues = cartSumByOrderProducts(Object.values((_bookingSummaryProps_formValues = bookingSummaryProps === null || bookingSummaryProps === void 0 ? void 0 : bookingSummaryProps.formValues) !== null && _bookingSummaryProps_formValues !== void 0 ? _bookingSummaryProps_formValues : {}));
+    var orderCartAmountByFormValues = cartSumByOrderProducts({
+        orderProducts: (bookingSummaryProps === null || bookingSummaryProps === void 0 ? void 0 : bookingSummaryProps.formValues) && Object.values(bookingSummaryProps === null || bookingSummaryProps === void 0 ? void 0 : bookingSummaryProps.formValues)
+    });
+    var orderTotalAmountByFormValues = cartSumByOrderProducts({
+        orderProducts: (bookingSummaryProps === null || bookingSummaryProps === void 0 ? void 0 : bookingSummaryProps.formValues) && Object.values(bookingSummaryProps === null || bookingSummaryProps === void 0 ? void 0 : bookingSummaryProps.formValues),
+        isTotalSum: true
+    });
+    var hasRemaingToPay = orderTotalAmountByFormValues > orderCartAmountByFormValues;
     // User can fill promocode only in iframe appcliation.
     // It didn't possible via payment link. This check will
     // be applied when there are no metadata and in case when
     // orderValues sum is greater than amount in order.
     // For payment status page booking summary props can be empty
     // so we should also check for them
-    var isCalculatedAmountGreaterThanOrderAmount = bookingSummaryProps && orderTotalAmounByFormValues > totalAmount;
+    var isCalculatedAmountGreaterThanOrderAmount = !hasRemaingToPay && bookingSummaryProps && orderCartAmountByFormValues > totalAmount;
     return /*#__PURE__*/ jsx(Page, {
         className: "payment-status-page",
         isAppUsingInIframe: isAppUsingInIframe,
@@ -121,12 +127,16 @@ var PaymentStatusPage = function(param) {
                         }) : /*#__PURE__*/ jsxs(Fragment, {
                             children: [
                                 isCalculatedAmountGreaterThanOrderAmount && /*#__PURE__*/ jsx(SummaryTotalBlock, {
-                                    label: t('total'),
-                                    amount: orderTotalAmounByFormValues + ((bookingSummaryProps === null || bookingSummaryProps === void 0 ? void 0 : bookingSummaryProps.transactionFee) || 0)
+                                    label: t(hasRemaingToPay ? "payNow" : "total"),
+                                    amount: orderCartAmountByFormValues + ((bookingSummaryProps === null || bookingSummaryProps === void 0 ? void 0 : bookingSummaryProps.transactionFee) || 0)
                                 }),
                                 /*#__PURE__*/ jsx(SummaryTotalBlock, {
                                     label: t(isCalculatedAmountGreaterThanOrderAmount ? 'totalWithDiscount' : 'total'),
                                     amount: totalAmount + ((bookingSummaryProps === null || bookingSummaryProps === void 0 ? void 0 : bookingSummaryProps.transactionFee) || 0)
+                                }),
+                                hasRemaingToPay && /*#__PURE__*/ jsx(SummaryTotalBlock, {
+                                    label: t("remaining"),
+                                    amount: orderTotalAmountByFormValues - orderCartAmountByFormValues
                                 })
                             ]
                         })

package/dist/styles/date-time-button/DateTimeButton.scss

@@ -33,8 +33,10 @@
 
   &.disabled {
     border: 2px solid $snippet-calendar-disabled-button-border-color;
-    background-color: $snippet-calendar-disabled-button-background-color;
+    background-color:transparent;
+    border: none;
     color: $snippet-calendar-disabled-button-font-color;
+    cursor: not-allowed;
 
     .weekday-info {
       div:last-child {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.71.15",
+  "version": "0.71.16-stage.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,9 +42,9 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.32.5",
+    "@licklist/core": "0.32.7",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.35.1",
+    "@licklist/plugins": "0.35.6",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
     "react": "17.0.2",
@@ -61,9 +61,9 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.32.5",
+    "@licklist/core": "0.32.7",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.35.1",
+    "@licklist/plugins": "0.35.6",
     "@mantine/core": "6.0.22",
     "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
@@ -206,4 +206,4 @@
     "node": "20.9.0",
     "yarn": "4.4.0"
   }
-}
+}

package/src/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.tsx

@@ -22,22 +22,35 @@ export const SummaryTotal = ({
 
   const cartSum = isFreePayment
     ? 0
-    : cartSumByOrderProducts(orderProducts) + transactionFee
+    : cartSumByOrderProducts({orderProducts}) + transactionFee
+
+
+    const totalSum = isFreePayment
+    ? 0
+    : cartSumByOrderProducts({orderProducts, isTotalSum: true}) +
+      transactionFee;
+      
+    const hasRemaingToPay = totalSum > cartSum;
 
   if (!orderProducts.length) {
     return null
   }
 
   return (
-    <div className='d-flex flex-column justify-content-between'>
-      <SummaryTotalBlock label={t('total')} amount={cartSum} />
-
+    <div className="d-flex flex-column justify-content-between">
+      <SummaryTotalBlock
+        label={t(hasRemaingToPay ? "payNow" : "total")}
+        amount={cartSum}
+      />
       {!!totalWithDiscount && !isFreePayment && (
         <SummaryTotalBlock
           label={t('totalWithDiscount')}
           amount={totalWithDiscount + transactionFee}
         />
       )}
+      {hasRemaingToPay && (
+        <SummaryTotalBlock label={t("remaining")} amount={totalSum - cartSum} />
+      )}
     </div>
   )
 }

package/src/iframe/order-process/components/BookingSummary/utils/index.ts

@@ -1,16 +1,24 @@
 import { QuantityCheckProductInfo } from '@licklist/plugins/dist/types/Api/verifyStock'
 import { OrderItem } from '@licklist/plugins/dist/types/context/Iframe/orderItems'
 
-export const cartSumByOrderProducts = (orderProducts?: OrderItem[]) => {
+export const cartSumByOrderProducts = ({
+  orderProducts,
+  isTotalSum,
+}: {
+  orderProducts?: OrderItem[];
+  isTotalSum?: boolean;
+}) => {
   if (!orderProducts || !orderProducts.length) {
     return 0
   }
   return orderProducts.reduce((prevSumValue: number, product) => {
-    if (!product) return 0
-    const price = product?.hasDeposit ? product?.deposit : product?.price
-    return prevSumValue + price * product.quantity
-  }, 0)
-}
+    if (!product) return 0;
+    const price = isTotalSum
+      ? product?.price
+      : product?.deposit || product?.price;
+    return prevSumValue + price * product.quantity;
+  }, 0);
+};
 
 export const getProductError = (
   productsWithErrors: QuantityCheckProductInfo[],

package/src/iframe/payment/payment-page/PaymentPage.tsx

@@ -28,7 +28,7 @@ interface PaymentProps extends RyftPaymentFormProps {
   onFailIframePayment?: () => void
   data?: PaymentLinkResponse | null
   isLoading: boolean
-  bookingSummaryProps: Omit<BookingSummaryProps, 'totallWithDiscount'>
+  bookingSummaryProps: BookingSummaryProps
   paymentMetadata?: PaymentMetadata
 }
 
@@ -103,17 +103,33 @@ export const PaymentPage = ({
     )
   }
 
-  const orderTotalAmountByFormValues = cartSumByOrderProducts(
-    bookingSummaryProps?.formValues &&
+  const orderCartAmountByFormValues = cartSumByOrderProducts({
+    orderProducts:
+      bookingSummaryProps?.formValues &&
       Object.values(bookingSummaryProps?.formValues),
-  )
+  })
+
+  const orderTotalAmountByFormValues = cartSumByOrderProducts({
+    orderProducts:
+      bookingSummaryProps?.formValues &&
+      Object.values(bookingSummaryProps?.formValues),
+    isTotalSum: true,
+  })
+
+  const hasRemaingToPay =
+    orderTotalAmountByFormValues > orderCartAmountByFormValues
 
   // User can fill promo code only in iframe application.
   // It isn't possible via payment link. This check will
   // be applied when there is no metadata and in case when
   // orderValues sum is greater than amount in order.
   const isCalculatedAmountGreaterThanOrderAmount =
-    orderTotalAmountByFormValues > data?.amount
+    !hasRemaingToPay && orderCartAmountByFormValues > data?.amount
+
+  const isPaymentLinkWithRemainingToPay =
+    data?.remaining_to_pay && !!Number(data?.remaining_to_pay)
+  const totalPaidWithRemainingToPay =
+    data?.amount_to_pay && !!Number(data?.amount_to_pay)
 
   return (
     <Page className='payment_link'>
@@ -173,25 +189,63 @@ export const PaymentPage = ({
                     <>
                       {isCalculatedAmountGreaterThanOrderAmount && (
                         <SummaryTotalBlock
-                          label={t('total')}
+                          label={t(hasRemaingToPay ? 'payNow' : 'total')}
                           amount={
-                            orderTotalAmountByFormValues +
+                            orderCartAmountByFormValues +
                             (bookingSummaryProps?.transactionFee || 0)
                           }
                         />
                       )}
 
-                      <SummaryTotalBlock
-                        label={t(
-                          isCalculatedAmountGreaterThanOrderAmount
-                            ? 'totalWithDiscount'
-                            : 'total',
-                        )}
-                        amount={
-                          data?.amount +
-                          (bookingSummaryProps?.transactionFee || 0)
-                        }
-                      />
+                      {hasRemaingToPay && (
+                        <>
+                          <SummaryTotalBlock
+                            label={t('remaining')}
+                            amount={
+                              orderTotalAmountByFormValues -
+                              orderCartAmountByFormValues
+                            }
+                          />
+
+                          <SummaryTotalBlock
+                            label={t('total')}
+                            amount={orderTotalAmountByFormValues}
+                          />
+                        </>
+                      )}
+
+                      {isPaymentLinkWithRemainingToPay && (
+                        <SummaryTotalBlock
+                          label={t('remaningToPay')}
+                          amount={Number(data?.remaining_to_pay)}
+                        />
+                      )}
+
+                      {totalPaidWithRemainingToPay && (
+                        <SummaryTotalBlock
+                          label={t('totalAmount')}
+                          amount={Number(data?.amount_to_pay)}
+                        />
+                      )}
+                      {isPaymentLinkWithRemainingToPay &&
+                      totalPaidWithRemainingToPay ? (
+                        <SummaryTotalBlock
+                          label={t('payNow')}
+                          amount={data?.amount}
+                        />
+                      ) : (
+                        <SummaryTotalBlock
+                          label={t(
+                            isCalculatedAmountGreaterThanOrderAmount
+                              ? 'totalWithDiscount'
+                              : 'total',
+                          )}
+                          amount={
+                            data?.amount +
+                            (bookingSummaryProps?.transactionFee || 0)
+                          }
+                        />
+                      )}
                     </>
                   )}
                 </div>

package/src/iframe/payment/payment-status-page/PaymentStatusPage.tsx

@@ -59,9 +59,20 @@ export const PaymentStatusPage = ({
 
   if (isLoading) return <LoaderIndicator isLoaded={false} />
 
-  const orderTotalAmounByFormValues = cartSumByOrderProducts(
-    Object.values(bookingSummaryProps?.formValues ?? {}),
-  )
+
+const orderCartAmountByFormValues = cartSumByOrderProducts({
+  orderProducts:
+    bookingSummaryProps?.formValues &&
+    Object.values(bookingSummaryProps?.formValues),
+});
+const orderTotalAmountByFormValues = cartSumByOrderProducts({
+  orderProducts:
+    bookingSummaryProps?.formValues &&
+    Object.values(bookingSummaryProps?.formValues),
+  isTotalSum: true,
+});
+const hasRemaingToPay =
+  orderTotalAmountByFormValues > orderCartAmountByFormValues;
 
   // User can fill promocode only in iframe appcliation.
   // It didn't possible via payment link. This check will
@@ -70,7 +81,9 @@ export const PaymentStatusPage = ({
   // For payment status page booking summary props can be empty
   // so we should also check for them
   const isCalculatedAmountGreaterThanOrderAmount =
-    bookingSummaryProps && orderTotalAmounByFormValues > totalAmount
+  !hasRemaingToPay &&
+  bookingSummaryProps &&
+  orderCartAmountByFormValues > totalAmount;
 
   return (
     <Page
@@ -127,9 +140,9 @@ export const PaymentStatusPage = ({
                     <>
                       {isCalculatedAmountGreaterThanOrderAmount && (
                         <SummaryTotalBlock
-                          label={t('total')}
+                        label={t(hasRemaingToPay ? "payNow" : "total")}
                           amount={
-                            orderTotalAmounByFormValues +
+                            orderCartAmountByFormValues +
                             (bookingSummaryProps?.transactionFee || 0)
                           }
                         />
@@ -146,6 +159,15 @@ export const PaymentStatusPage = ({
                           (bookingSummaryProps?.transactionFee || 0)
                         }
                       />
+                          {hasRemaingToPay && (
+                        <SummaryTotalBlock
+                          label={t("remaining")}
+                          amount={
+                            orderTotalAmountByFormValues -
+                            orderCartAmountByFormValues
+                          }
+                        />
+                      )}
                     </>
                   )}
                 </div>

package/src/styles/date-time-button/DateTimeButton.scss

@@ -33,8 +33,10 @@
 
   &.disabled {
     border: 2px solid $snippet-calendar-disabled-button-border-color;
-    background-color: $snippet-calendar-disabled-button-background-color;
+    background-color:transparent;
+    border: none;
     color: $snippet-calendar-disabled-button-font-color;
+    cursor: not-allowed;
 
     .weekday-info {
       div:last-child {