TD-703: Add history back button for mobile devices (#230)

src/app/components/app/modal-container/modal/form-container/form-container.tsx

@@ -33,7 +33,10 @@ const Form = styled.div<{ height?: number }>`
     background: #fff;
     border-radius: 16px;
     border: 1px solid ${({ theme }) => theme.form.border};
-    padding: 24px;
+    padding: 16px;
+    @media ${device.desktop} {
+        padding: 24px;
+    }
     overflow: hidden;
     transition: height 0.3s;
     height: ${({ height }) => (height ? `${height}px` : 'auto')};

src/app/components/app/modal-container/modal/info/back.tsx

@@ -0,0 +1,35 @@
+import { useCallback } from 'react';
+import styled from 'styled-components';
+
+import { Locale } from 'checkout/locale';
+
+import { ReactComponent as ChevronLeftIcon } from '../../../../ui/icon/chevron-left.svg';
+
+const Container = styled.div`
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+`;
+
+const ChevronLeft = styled(ChevronLeftIcon)`
+    height: 16px;
+    width: 16px;
+`;
+
+const Label = styled.p`
+    font-weight: 500;
+    font-size: 16px;
+    color: ${({ theme }) => theme.font.primaryColor};
+    margin: 0;
+`;
+
+export const Back = ({ locale }: { locale: Locale }) => {
+    const back = useCallback(() => window.history.back(), []);
+    return (
+        <Container onClick={back}>
+            <ChevronLeft />
+            <Label>{locale['info.back']}</Label>
+        </Container>
+    );
+};

src/app/components/app/modal-container/modal/info/info.tsx

@@ -1,60 +1,54 @@
+import isMobile from 'ismobilejs';
 import { useContext, useMemo } from 'react';
 import styled from 'styled-components';
 
 import { formatAmount } from 'checkout/utils';
 import { device } from 'checkout/utils/device';
 
+import { Back } from './back';
 import { InitialContext } from '../../../initial-context';
 
 const InfoWrapper = styled.div`
     padding: 16px;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 24px;
 
     @media ${device.desktop} {
         padding: 24px 0;
         width: 230px;
         margin-right: 30px;
-        gap: 24px;
     }
 `;
 
-const CompanyName = styled.h4`
+const CompanyName = styled.p`
     font-weight: 500;
-    font-size: 16px;
+    font-size: 18px;
     color: ${({ theme }) => theme.font.primaryColor};
-    letter-spacing: 0;
-    line-height: 20px;
     margin: 0;
 `;
 
-const Amount = styled.h1`
+const Amount = styled.p`
     font-weight: 500;
-    font-size: 30px;
+    font-size: 32px;
     color: ${({ theme }) => theme.font.primaryColor};
-    letter-spacing: 0;
-    line-height: 35px;
     margin: 0;
 `;
 
-const Order = styled.div`
+const Order = styled.p`
     font-weight: 900;
-    font-size: 11px;
+    font-size: 12px;
     color: ${({ theme }) => theme.font.primaryColor};
     opacity: 0.5;
     letter-spacing: 2px;
-    line-height: 15px;
     text-transform: uppercase;
     margin: 0;
 `;
 
-const ProductDescription = styled.div`
+const ProductDescription = styled.p`
     font-weight: 500;
     font-size: 16px;
     color: ${({ theme }) => theme.font.primaryColor};
-    letter-spacing: 0;
-    line-height: 20px;
     margin: 0;
 `;
 
@@ -66,11 +60,16 @@ const DescriptionContainer = styled.div`
 
 export const Info = () => {
     const { locale, initConfig, amountInfo } = useContext(InitialContext);
-
     const formattedAmount = useMemo(() => formatAmount(amountInfo), [amountInfo]);
+    const isBackVisible = useMemo(() => isMobile(window.navigator).phone || isMobile(window.navigator).tablet, []);
 
     return (
         <InfoWrapper>
+            {isBackVisible && (
+                <div>
+                    <Back locale={locale} />
+                </div>
+            )}
             {initConfig.name ? <CompanyName id="company-name-label">{initConfig.name}</CompanyName> : false}
             {formattedAmount ? <Amount>{formattedAmount}</Amount> : false}
             {initConfig.description && (

src/app/components/app/modal-container/modal/modal.tsx

@@ -5,7 +5,7 @@ import { Info } from './info';
 
 export const Modal = () => (
     <>
-        <FormBlock id="form-container">
+        <FormBlock>
             <Info />
             <FormContainer />
         </FormBlock>

src/locale/bn.json

@@ -1,4 +1,5 @@
 {
+    "info.back": "",
     "info.order.label": "",
     "info.modal.no.available.payment.method": "",
     "form.header.payment.methods.label": "",

src/locale/en.json

@@ -1,4 +1,5 @@
 {
+    "info.back": "Back",
     "info.order.label": "Order details",
     "info.modal.no.available.payment.method": "No available payment methods",
     "form.header.payment.methods.label": "Please choose a payment method",

src/locale/ja.json

@@ -1,4 +1,5 @@
 {
+    "info.back": "戻る",
     "info.order.label": "注文詳細",
     "info.modal.no.available.payment.method": "利用できる支払方法はありません",
     "form.header.payment.methods.label": "お支払い方法を選択してください",

src/locale/ko.json

@@ -1,4 +1,5 @@
 {
+    "info.back": "뒤로",
     "info.order.label": "주문 세부 사항",
     "info.modal.no.available.payment.method": "사용 가능한 결제 수단이 없습니다",
     "form.header.payment.methods.label": "결제 수단을 선택하십시오",

src/locale/pt.json

@@ -1,4 +1,5 @@
 {
+    "info.back": "Voltar",
     "info.order.label": "Detalhe do Pagamento",
     "info.modal.no.available.payment.method": "Sem opções de pagamento disponível",
     "form.header.payment.methods.label": "Por favor escolha seu método de pagamento",

src/locale/ru.json

@@ -1,4 +1,5 @@
 {
+    "info.back": "Назад",
     "info.order.label": "Ваш заказ",
     "info.modal.no.available.payment.method": "Отсутствуют доступные методы оплаты",
     "form.header.payment.methods.label": "Выберите способ оплаты",