ordering-ui-react-native 0.11.60 → 0.12.2

package/themes/single-business/src/components/DriverTips/styles.tsx

@@ -13,21 +13,22 @@ export const DTWrapperTips = styled.View`
   display: flex;
   flex-direction: row;
   width: 100%;
-  justify-content: space-between;
+  justify-content: space-evenly;
   align-items: center;
   flex-wrap: wrap;
 `
 
 export const DTCard = styled.View`
+  display: flex;
   justify-content: center;
   align-items: center;
-  padding: 10px;
-  border: 1px solid ${(props: any) => props.isActive ? props.theme.colors.primary : props.theme.colors.border};
+  padding: 15px;
+  border: 1px solid ${(props: any) => props.theme.colors.whiteGray};
   text-transform: capitalize;
-  min-height: 48px;
-  min-width: 48px;
-  width: 48px;
-  height: 48px;
+  min-height: 60px;
+  min-width: 60px;
+  margin-right: 10px;
+  margin-top: 10px;
 
   ${(props: any) => props.isActive && css`
     background-color: ${(props: any) => props.theme.colors.primary};
@@ -45,11 +46,11 @@ export const DTForm = styled.View`
 export const DTLabel = styled.Text`
   font-size: 10px;
   align-self: flex-start;
-  color: ${(props: any) => props.theme.colors.textSecondary}
+  color: ${(props: any) => props.theme.colors.textSecondary};
   ${(props: any) => props.theme?.rtl && css`
     margin-left: 20px;
     margin-right: 0;
-  `}
+  `};
   margin-top: 5px;
   margin-bottom: 17px;
 `

package/themes/single-business/src/components/PaymentOptions/index.tsx

@@ -134,7 +134,7 @@ const PaymentOptionsUI = (props: any) => {
 					/>
 					<OText
 						size={10}
-						style={{ marginStart: 12 }}
+						style={{ marginLeft: 12 }}
 						color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
 					>
 						{t(item.gateway.toUpperCase(), item.name)}
@@ -151,19 +151,21 @@ const PaymentOptionsUI = (props: any) => {
 	return (
 		<PMContainer>
 			{paymethodsList.paymethods.length > 0 && (
-				<PMDropDownWrapper onPress={() => setShowMethods(true)}>
-					<OText color={theme.colors.textSecondary} style={{marginStart: 14}}>{paymethodSelected?.paymethod?.name || t('SELECT_PAYMENT_METHOD', 'Select Paymethod')}</OText>
-					<OIcon color={theme.colors.textSecondary} width={16} src={theme.images.general.chevron_right} style={{transform: [{rotate: '90deg'}], marginEnd: 14}} />
-					{isShowMethods && <PMDropDownCont>
-						{
-							pmData.map((item: any, idx: number) => 
-							<React.Fragment key={idx}>
-								{renderPaymethods({item})}
-							</React.Fragment>	
-							)
-						}
-					</PMDropDownCont>}
-				</PMDropDownWrapper>
+        <View style={{ flexDirection: 'column' }}>
+          <PMDropDownWrapper onPress={() => setShowMethods(!isShowMethods)}>
+            <OText color={theme.colors.textSecondary} style={{marginLeft: 14}}>{paymethodSelected?.paymethod?.name || t('SELECT_PAYMENT_METHOD', 'Select Paymethod')}</OText>
+            <OIcon color={theme.colors.textSecondary} width={16} src={theme.images.general.chevron_right} style={{transform: [{rotate: '90deg'}], marginEnd: 14}} />
+          </PMDropDownWrapper>
+          {isShowMethods && (
+            <PMDropDownCont>
+              {pmData.map((item: any, idx: number) =>
+                <TouchableOpacity key={idx} onPress={() => console.log('asdasdasda')}>
+                  {renderPaymethods({item})}
+                </TouchableOpacity>
+              )}
+            </PMDropDownCont>
+          )}
+        </View>
 			)}
 
 			{(paymethodsList.loading || isLoading) && (

package/themes/single-business/src/components/PaymentOptions/styles.tsx

@@ -66,11 +66,9 @@ export const PMDropDownWrapper = styled.TouchableOpacity`
 `;
 
 export const PMDropDownCont = styled.View`
-  background-color: white;
-  border-radius: 7.6px;
-  position: absolute;
-  top: 44px;
+  border-radius: 8px;
   width: 100%;
-  padding: 10px 16px;
+  padding: 10px 0 0;
   box-shadow: 0 2px 3px #0000004D;
-`;
+  z-index: 99999;
+`;

package/themes/single-business/src/components/shared/index.tsx

@@ -1,16 +1,17 @@
-import OText from './OText'
+import OAlert from './OAlert'
+import OBottomPopup from './OBottomPopup'
 import OButton from './OButton'
-import OInput from './OInput'
 import ODropDown from './ODropDown'
 import OIcon from './OIcon'
-import OIconText from './OIconText'
 import OIconButton from './OIconButton'
-import OTextarea from './OTextarea'
-import OToggle from './OToggle'
+import OIconText from './OIconText'
+import OInput from './OInput'
 import OKeyButton from './OKeyButton'
 import OModal from './OModal'
-import OAlert from './OAlert'
-import OBottomPopup from './OBottomPopup'
+import OText from './OText'
+import OTextarea from './OTextarea'
+import { Toast } from './OToast'
+import OToggle from './OToggle'
 
 export {
 	OText,
@@ -24,6 +25,7 @@ export {
 	OToggle,
 	OKeyButton,
 	OAlert,
-  	OModal,
+  OModal,
 	OBottomPopup,
+  Toast
 }