ordering-ui-external 14.1.7 → 14.1.8

package/src/themes/five/src/components/UserDetails/index.js

@@ -12,7 +12,8 @@ import {
   TitleContainer,
   CountryFlag,
   PhoneContainer,
-  SkeletonsContainer
+  SkeletonsContainer,
+  ChangeCustomerText
 } from './styles'
 import MdClose from '@meronex/icons/md/MdClose'
 import PhoneInput from 'react-phone-number-input'
@@ -177,13 +178,7 @@ const UserDetailsUI = (props) => {
               {!isModal && (
                 <h1>{t('CUSTOMER_DETAILS', 'Customer Details')}</h1>
               )}
-              {cartStatus !== 2 && (
-                !isEdit ? (
-                  <span onClick={() => toggleIsEdit()}>{t('CHANGE_USER_DETAILS', 'Change customer details')}</span>
-                ) : (
-                  <FcCancel className='cancel' onClick={() => toggleEditState()} />
-                )
-              )}
+              {cartStatus !== 2 && isEdit && <FcCancel className='cancel' onClick={() => toggleEditState()} />}
             </Header>
           )}
 
@@ -211,6 +206,11 @@ const UserDetailsUI = (props) => {
                   </p>
                 </PhoneContainer>
               )}
+              <ChangeCustomerText>
+                {cartStatus !== 2 && (
+                  <span onClick={() => toggleIsEdit()}>{t('CHANGE_USER_DETAILS', 'Change customer details')}</span>
+                )}
+              </ChangeCustomerText>
             </UserData>
           ) : (
             <SideForm>

package/src/themes/five/src/components/UserDetails/styles.js

@@ -27,15 +27,6 @@ export const Header = styled.div`
     cursor: pointer;
   }
 
-  span {
-    font-size: 13px;
-    color: ${props => props.theme.colors.primary};
-    cursor: pointer;
-    user-select: none;
-    &:hover {
-        text-decoration: underline;
-      }
-  }
 `
 
 export const SideForm = styled.div`
@@ -114,8 +105,24 @@ export const PhoneContainer = styled.div`
   display: flex;
   align-items: center;
   height: 30px;
+  p {
+    margin: 1rem 0;
+  }
 `
 
 export const SkeletonsContainer = styled.div`
   margin-top: 25px;
 `
+
+export const ChangeCustomerText = styled.div`
+
+  span {
+    font-size: 13px;
+    color: ${props => props.theme.colors.primary};
+    cursor: pointer;
+    user-select: none;
+    &:hover {
+        text-decoration: underline;
+      }
+  }
+`