@licklist/design 0.58.6-dev.6 → 0.58.6-dev.7

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useForm } from "react-hook-form";
-import Form from "react-bootstrap/Form";
 
 import Button from "react-bootstrap/Button";
 import { useHistory } from "react-router-dom";
@@ -14,6 +13,7 @@ import {
   AttemptPaymentResponse,
 } from "@licklist/plugins/dist/hooks/Ryft/useRyftPayment";
 import { BlockLoader, ButtonLoader } from "../../static";
+import { injectComponentsInRyftForm } from "./utils/ryft-form";
 
 export const ryftErrorMap: Record<string, string> = {
   insufficient_funds: "insufficientFunds",
@@ -50,6 +50,7 @@ export const RyftPaymentForm = ({
   onSubmit,
 }: RyftPaymentFormProps) => {
   const { t } = useTranslation(["Design", "Validation", "Ryft"]);
+  const formRef = useRef<HTMLFormElement | null>(null);
   const history = useHistory();
 
   const [isValid, setIsValid] = useState(false);
@@ -117,6 +118,12 @@ export const RyftPaymentForm = ({
     }
   };
 
+  useEffect(
+    () => injectComponentsInRyftForm({ t }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [formRef.current?.childNodes?.length]
+  );
+
   useEffect(() => {
     if (!accountId.data || accountId.isError) return;
 
@@ -175,15 +182,14 @@ export const RyftPaymentForm = ({
 
   return (
     <>
-      <Form.Label>{t("Design:paymentDetails")}</Form.Label>
-      {/* For unknown reasons ryft doesn't work with bootstrap form */}
       <form
+        ref={formRef}
         id="ryft-pay-form"
         noValidate
         onSubmit={methods.handleSubmit(handleSubmit)}
         className="ryft-payment-form"
       >
-        <div className="submit-button-wrapper mt-3 p-1">
+        <div className="submit-button-wrapper mt-4 p-1">
           <Button type="submit" disabled={isBtnDisabled || !isValid}>
             {isBtnDisabled && <ButtonLoader />}
             {t("Design:buyNow")}

package/src/iframe/ryft/utils/ryft-form.ts

@@ -0,0 +1,47 @@
+import { TFunction } from "react-i18next";
+
+export const injectComponentsInRyftForm = ({
+  t,
+}: {
+  t: TFunction<string[]>;
+}) => {
+  const cardContainer = document.getElementById("ryft-pay-iframe");
+  const oldCardDividerContainer = document.getElementById(
+    "card-title-container"
+  );
+
+  if (!cardContainer || oldCardDividerContainer) {
+    return;
+  }
+
+  const cardTitle = document.createElement("div");
+  const cardText = document.createElement("div");
+  const cardTitleContainer = document.createElement("div");
+  cardTitleContainer.id = "card-title-container";
+  cardTitle.textContent = t("Design:enterCardDetails");
+  cardText.className = "bold-text form-label";
+  cardText.innerText = t("Design:paymentDetails");
+  cardTitleContainer.append(cardTitle, cardText);
+  cardContainer?.before(cardTitleContainer);
+
+  const payGrid = document.getElementById("ryft-pay-grid");
+
+  if (!payGrid) {
+    return;
+  }
+
+  // Adding title and divider for apple and google pay button
+  const mobilePayTitle = document.createElement("div");
+  const dividerText = document.createElement("div");
+  const divider = document.createElement("div");
+  const container = document.createElement("div");
+  mobilePayTitle.className = "mobile-pay-title";
+  mobilePayTitle.innerText = t("Design:expressCheckoutWith");
+  dividerText.id = "mobile-pay-divider-text";
+  dividerText.innerText = "or";
+  divider.id = "mobile-pay-divider";
+  container.id = "mobile-pay-divider-container";
+  container.append(dividerText, divider);
+  payGrid.before(mobilePayTitle);
+  payGrid.after(container);
+};

package/src/styles/iframe-order-process/IframeOrderProcess.scss

@@ -46,9 +46,8 @@
     color: $snippet-page-header-steps-body-color;
     transition: $color-transition;
     margin-left: 0.5rem;
-    width: 6rem;
     word-break: break-word;
-    font-size: 0.75rem;
+    font-size: 0.875rem;
 
     @include media-breakpoint-down(sm) {
       display: none;
@@ -62,6 +61,31 @@
   font-weight: 400;
   font-size: 0.875rem;
 
+  .payment-page-toggle {
+    p {
+      font-size: 1rem;
+      font-weight: 600;
+    }
+    .price {
+      font-weight: 700;
+    }
+  }
+
+  .payment-metadata {
+    font-weight: 500;
+  }
+
+  .total {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    div {
+      font-size: 1rem;
+      font-weight: 700;
+    }
+  }
+
   b {
     display: block;
     font-size: 1rem;
@@ -113,6 +137,15 @@
 
   .cart-items {
     font-weight: 400;
+    margin-bottom: 1.4rem;
+    border-bottom: 2px solid $separator-color;
+
+    .people {
+      margin-bottom: 0;
+      p {
+        margin-bottom: 0;
+      }
+    }
 
     .empty-cart {
       margin: 1rem 0;
@@ -125,8 +158,11 @@
     }
 
     .products-by-menu-step {
+      margin-top: 1.4rem;
+      font-size: 0.875rem;
       .title {
-        font-weight: 500;
+        font-size: 1rem;
+        font-weight: 600;
       }
 
       .categories {
@@ -136,8 +172,8 @@
       }
 
       .products {
-        margin-top: 0.5rem;
-
+        margin-top: 1.4rem;
+        font-size: 0.875rem;
         .product {
           margin: 0.5rem 0;
 
@@ -148,6 +184,15 @@
               margin-bottom: 0.5rem;
             }
           }
+
+          .name {
+            font-weight: 600;
+          }
+
+          .price {
+            font-weight: 400;
+            font-size: 0.875rem;
+          }
         }
 
         &:not(:last-child) {
@@ -168,6 +213,12 @@
         margin: 0 0 0.5rem;
 
         .title {
+          font-size: 1rem;
+          font-weight: 600;
+        }
+
+        .metadata {
+          font-size: 0.95rem;
           font-weight: 600;
         }
       }
@@ -181,19 +232,7 @@
   }
 
   hr {
-    margin: 0;
-    border-width: 2px;
-    border-color: $separator-color;
-  }
-
-  .products {
-    font-size: 0.75rem;
-
-    .product {
-      .name {
-        font-weight: 500;
-      }
-    }
+    margin-bottom: 1.5rem;
   }
 }
 

package/src/styles/iframe-page/PageBody.scss

@@ -1,3 +1,4 @@
+// TODO when all iframe pages will be ready, think how we can combine it all in page-body style
 .page-body {
   display: flex;
   background-color: transparent;
@@ -77,7 +78,7 @@
   }
 
   .right-block {
-    height: calc(100% - 1rem);
+    height: 100%;
     max-width: 17.5rem;
     min-width: 17.5rem;
     width: 100%;

package/src/styles/ryft-payment-form/RyftPaymentForm.scss

@@ -1,10 +1,52 @@
 .payment_link {
+  padding: 0 0 1rem 0;
+
+  .button-wrapper {
+    top: 2rem;
+    right: 2rem;
+    position: absolute;
+    z-index: 100;
+  }
+
   .page-body {
+    padding: 0;
+    height: calc(100vh - 2rem) !important;
+
+    .navigation {
+      display: block;
+      @include media-breakpoint-down(sm) {
+        padding: 0;
+      }
+    }
+
+    .right-block {
+      margin-left: 0;
+      height: calc(100vh - 2rem);
+      max-height: calc(100vh - 1rem);
+      @include media-breakpoint-down(sm) {
+        width: calc(100% - 2rem);
+        max-width: unset;
+        position: inherit;
+        overflow: visible;
+        margin: 0 1rem 1rem;
+        height: unset;
+        min-height: unset;
+        max-height: 100%;
+      }
+    }
+
     .left-block {
       .left-block-container {
         position: relative;
         max-height: 100%;
 
+        .payment-title {
+          font-size: 0.875rem;
+          font-weight: 600;
+          align-items: center;
+          margin-left: 0.5rem;
+        }
+
         .ryft-payment-form {
           .submit-button-wrapper {
             margin: -1rem 0 1rem;
@@ -13,7 +55,55 @@
               width: 100%;
             }
           }
+          #mobile-pay-divider-container {
+            display: flex;
+            position: relative;
+            margin-bottom: 1rem;
+            #mobile-pay-divider-text {
+              margin-right: 1rem;
+              font-size: 0.875rem;
+              font-weight: 600;
+            }
+            #mobile-pay-divider {
+              width: 100%;
+              border-bottom: 1px #dfdfdf solid;
+              margin-bottom: 0.6rem;
+            }
+          }
 
+          #card-title-container {
+            height: auto;
+            border: none;
+            margin-bottom: 0.5rem;
+            text-align: left;
+            :first-child {
+              font-size: 1rem;
+              font-weight: 600;
+              margin-bottom: 1rem;
+            }
+
+            .form-label {
+              margin-bottom: 0.5rem;
+            }
+          }
+          .mobile-pay-title {
+            display: block;
+            font-weight: 600;
+            font-size: 1rem;
+            color: black;
+            padding: 0;
+            font-style: normal;
+            font-family: inherit;
+            margin-bottom: 1rem;
+          }
+        }
+        .form {
+          .input {
+            border: 2px solid #525252 !important;
+          }
+        }
+
+        .ryft-payment-form {
           @include media-breakpoint-up(md) {
             .submit-button-wrapper {
               max-width: 15.5rem;
@@ -22,10 +112,9 @@
 
           // it's style for Google and Apple pay container, for unknown reasons we can't move this html elements with appendChild or replaceChild
           .ryft-pay-grid {
-            position: absolute !important;
-            top: 10rem;
             width: 100%;
             max-width: 15.5rem;
+            margin-bottom: 1rem;
           }
           .ryft-pay-apple-pay-button {
             border-radius: 0.25rem;
@@ -36,6 +125,36 @@
           display: none !important;
         }
       }
+      @include media-breakpoint-down(sm) {
+        .left-block-container {
+          max-height: 100%;
+          overflow: visible;
+        }
+      }
+    }
+
+    @include media-breakpoint-down(sm) {
+      flex-direction: column-reverse;
+      overflow: scroll;
+
+      @include media-breakpoint-down(sm) {
+        .left-block {
+          min-height: 100%;
+        }
+        .right-block {
+          margin: 0 auto;
+          width: 100%;
+          .children-wrapper {
+            .accordion {
+              .collapse {
+                overflow: visible;
+                overflow-x: unset;
+                scrollbar-width: unset;
+              }
+            }
+          }
+        }
+      }
     }
   }
   ::-webkit-scrollbar {
@@ -62,3 +181,7 @@
     }
   }
 }
+
+#ryft-threeDSMethodIframe {
+  display: none;
+}