Merge branch 'feat/MRM-6181' into 'release/v0.16.3'

MRM-6191: adding the unique classes for checkout and pay buttons

See merge request mashroom/frontend/main-next!837

(cherry picked from commit 4c7079ea)

dc520034 MRM-6191: adding the unique classes for checkout and pay buttons

src/features/private/cart/molecules/SummaryCard.tsx

@@ -36,6 +36,9 @@ const SummaryCard = ({
   const pickedItems = allItems.filter((s) => pickedKeys.has(s.code));
   const fullPrice = pickedItems.reduce((c, next) => c + (next.price ?? 0), 0);
   const [isOpen, setOpen] = useState<boolean>(false);
+  const btnClassNames = pickedItems
+    .map((item) => `${item.code}_checkout`)
+    .join(" ");
 
   return (
     <>
@@ -66,7 +69,12 @@ const SummaryCard = ({
               Select products on the left or sign in to see previous purchases
             </p>
           )}
-          <Button.Blue disabled={disabled} onClick={handleSubmit} type="button">
+          <Button.Blue
+            className={btnClassNames}
+            disabled={disabled}
+            onClick={handleSubmit}
+            type="button"
+          >
             {userId ? "Checkout" : "Sign in & checkout"}
           </Button.Blue>
         </FullArea>
@@ -80,7 +88,12 @@ const SummaryCard = ({
           {fullPrice ? (
             <MenuBtn onClick={() => setOpen(true)} type="button" />
           ) : null}
-          <Button.Blue disabled={disabled} onClick={handleSubmit} type="button">
+          <Button.Blue
+            className={btnClassNames}
+            disabled={disabled}
+            onClick={handleSubmit}
+            type="button"
+          >
             Checkout
           </Button.Blue>
         </MobileArea>

src/features/private/checkout/machine/machine-types.ts

@@ -45,6 +45,7 @@ export type CheckoutContext = {
   availableServices: ListingGetServiceExtraFragment[] | null | undefined;
   priceList: Array<{
     title: string;
+    code: string;
     price: number;
   }>;
 } & ProductsAndUserData;
@@ -60,6 +61,7 @@ export type START = {
   userData: Invoice_Api_UserDataInput;
   priceList: Array<{
     title: string;
+    code: string;
     price: number;
   }>;
   availableServices: readonly ListingGetServiceExtraFragment[];
@@ -72,6 +74,7 @@ export type NEXT = {
   userData: Invoice_Api_UserDataInput;
   priceList?: Array<{
     title: string;
+    code: string;
     price: number;
   }>;
   availableServices: readonly ListingGetServiceExtraFragment[];

src/features/private/checkout/organisms/Review/index.tsx

@@ -36,6 +36,7 @@ type Props = {
   prevStepLabel: string | null | undefined;
   priceList: Array<{
     title: string;
+    code?: string;
     price: number;
   }>;
   orderId: string | undefined;
@@ -66,6 +67,9 @@ const Review: FC<Props> = ({
   const sum = useMemo(() => {
     return priceList.reduce((acc, product) => acc + product.price, 0);
   }, [priceList]);
+  const btnClassName = useMemo(() => {
+    return priceList.map((product) => `${product.code}_pay`).join(" ");
+  }, [priceList]);
 
   const handleSubmit = async () => {
     try {
@@ -173,6 +177,7 @@ const Review: FC<Props> = ({
             />
             <StripeLogo className={css.stripeLogo} />
             <FormAction
+              btnClassNames={btnClassName}
               submitText={
                 <>
                   <Lock className={css.lockIcon} /> Pay {formatPrice(sum, 0)}

src/features/private/checkout/utils/index.ts

@@ -14,6 +14,7 @@ export const makeCheckoutData = (
   idsInsuranceProducts: string[];
   priceList: Array<{
     title: string;
+    code: string;
     price: number;
   }>;
 } => {
@@ -28,6 +29,7 @@ export const makeCheckoutData = (
 
   const priceList = (value.products ?? []).map((v) => ({
     title: v.service?.service.title ?? "",
+    code: v.service?.service.code ?? "",
     price:
       (v.service?.service.price ?? 0) + (v.service?.service.tax_amount ?? 0),
   }));

src/uikit2/listing/atoms/FormAction/index.tsx

@@ -11,10 +11,12 @@ type Props = ComponentProps<"div"> & {
   submitText?: ReactNode;
   skipText?: string;
   onSkip?: () => void;
+  btnClassNames?: string;
 };
 
 const FormAction: FC<Props> = ({
   className,
+  btnClassNames,
   withSkip,
   submitText = "Next",
   onSkip,
@@ -31,6 +33,7 @@ const FormAction: FC<Props> = ({
   return (
     <div className={cn(css.container, className)}>
       <Button.Blue
+        className={btnClassNames}
         disabled={
           disabledSubmit ||
           getState().hasValidationErrors ||