npm - ordering-ui-react-native - Versions diffs - 0.21.17-release → 0.21.18-release - Mend

ordering-ui-react-native 0.21.17-release → 0.21.18-release

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.21.17-release",
+  "version": "0.21.18-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/business/src/components/LanguageSelector/index.tsx CHANGED Viewed

@@ -25,8 +25,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
       value: language?.code,
       label: language?.name,
       inputLabel: language?.code.toUpperCase(),
-      countryCode: langCountries.find(item => item.value == language?.code)
-        ?.countryCode,
+      countryCode: langCountries.find(item => item.value == language?.code)?.countryCode,
     };
   });
@@ -50,6 +49,9 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
     },
   });
+  console.log('_languages', _languages);
   return (
     <Container style={{ backgroundColor: theme.colors.inputChat }}>
       {languagesState?.languages && (

package/themes/business/src/components/LanguageSelector/lang_country.json CHANGED Viewed

@@ -5,18 +5,6 @@
     "value": "en",
     "countryCode": "US"
   },
-  {
-    "inputLabel": "DE",
-    "label": "German",
-    "value": "de",
-    "countryCode": "DE"
-  },
-  {
-    "inputLabel": "ES",
-    "label": "Spanish",
-    "value": "es",
-    "countryCode": "ES"
-  },
   {
     "inputLabel": "MX",
     "label": "Spanish",
@@ -30,22 +18,70 @@
     "countryCode": "GT"
   },
   {
-    "inputLabel": "DA",
-    "label": "Danish",
-    "value": "da",
-    "countryCode": "DK"
+    "inputLabel": "AF",
+    "label": "Afghanistan",
+    "value": "af",
+    "countryCode": "AF"
   },
   {
-    "inputLabel": "NL",
-    "label": "Dutch",
-    "value": "nl",
-    "countryCode": "NL"
+    "inputLabel": "AL",
+    "label": "Albania",
+    "value": "sq",
+    "countryCode": "AL"
   },
   {
-    "inputLabel": "PT",
-    "label": "Portuguese",
-    "value": "pt",
-    "countryCode": "PT"
+    "inputLabel": "AD",
+    "label": "Andorra",
+    "value": "ca",
+    "countryCode": "AD"
+  },
+  {
+    "inputLabel": "AM",
+    "label": "Armenia",
+    "value": "hy",
+    "countryCode": "AM"
+  },
+  {
+    "inputLabel": "AZ",
+    "label": "Azerbaijan",
+    "value": "az",
+    "countryCode": "AZ"
+  },
+  {
+    "inputLabel": "BD",
+    "label": "Bangladesh",
+    "value": "bn",
+    "countryCode": "BD"
+  },
+  {
+    "inputLabel": "BY",
+    "label": "Belarus",
+    "value": "be",
+    "countryCode": "BY"
+  },
+  {
+    "inputLabel": "BT",
+    "label": "Bhutan",
+    "value": "dz",
+    "countryCode": "BT"
+  },
+  {
+    "inputLabel": "BA",
+    "label": "Bosnia and Herzegovina",
+    "value": "bs",
+    "countryCode": "BA"
+  },
+  {
+    "inputLabel": "BG",
+    "label": "Bulgaria",
+    "value": "bg",
+    "countryCode": "BG"
+  },
+  {
+    "inputLabel": "BI",
+    "label": "Burundi",
+    "value": "rn",
+    "countryCode": "BI"
   },
   {
     "inputLabel": "CA",
@@ -53,42 +89,174 @@
     "value": "ca",
     "countryCode": "ES"
   },
+  {
+    "inputLabel": "KH",
+    "label": "Cambodia",
+    "value": "km",
+    "countryCode": "KH"
+  },
+  {
+    "inputLabel": "CN",
+    "label": "China",
+    "value": "zh",
+    "countryCode": "CN"
+  },
+  {
+    "inputLabel": "HR",
+    "label": "Croatia",
+    "value": "hr",
+    "countryCode": "HR"
+  },
+  {
+    "inputLabel": "CZ",
+    "label": "Czechia",
+    "value": "cs",
+    "countryCode": "CZ"
+  },
+  {
+    "inputLabel": "DK",
+    "label": "Denmark",
+    "value": "da",
+    "countryCode": "DK"
+  },
+  {
+    "inputLabel": "DJ",
+    "label": "Djibouti",
+    "value": "aa",
+    "countryCode": "DJ"
+  },
+  {
+    "inputLabel": "EE",
+    "label": "Estonia",
+    "value": "et",
+    "countryCode": "EE"
+  },
+  {
+    "inputLabel": "SZ",
+    "label": "Eswatini",
+    "value": "ss",
+    "countryCode": "SZ"
+  },
+  {
+    "inputLabel": "ET",
+    "label": "Ethiopia",
+    "value": "am",
+    "countryCode": "ET"
+  },
+  {
+    "inputLabel": "FO",
+    "label": "Faroe Islands",
+    "value": "fo",
+    "countryCode": "FO"
+  },
+  {
+    "inputLabel": "FJ",
+    "label": "Fiji",
+    "value": "fj",
+    "countryCode": "FJ"
+  },
+  {
+    "inputLabel": "FI",
+    "label": "Finland",
+    "value": "fi",
+    "countryCode": "FI"
+  },
   {
     "inputLabel": "FR",
-    "label": "French",
+    "label": "France",
     "value": "fr",
     "countryCode": "FR"
   },
   {
-    "inputLabel": "TR",
-    "label": "Turkish",
-    "value": "tr",
-    "countryCode": "TR"
+    "inputLabel": "GE",
+    "label": "Georgia",
+    "value": "ka",
+    "countryCode": "GE"
   },
   {
-    "inputLabel": "KM",
-    "label": "Cambodian",
-    "value": "km",
-    "countryCode": "KH"
+    "inputLabel": "DE",
+    "label": "Germany",
+    "value": "de",
+    "countryCode": "DE"
   },
   {
-    "inputLabel": "ZH-CN",
-    "label": "Chinese Simplified",
-    "value": "zh-CN",
-    "countryCode": "CN"
+    "inputLabel": "GH",
+    "label": "Ghana",
+    "value": "ak",
+    "countryCode": "GH"
+  },
+  {
+    "inputLabel": "GR",
+    "label": "Greece",
+    "value": "el",
+    "countryCode": "GR"
+  },
+  {
+    "inputLabel": "GL",
+    "label": "Greenland",
+    "value": "kl",
+    "countryCode": "GL"
+  },
+  {
+    "inputLabel": "HT",
+    "label": "Haiti",
+    "value": "ht",
+    "countryCode": "HT"
   },
   {
-    "inputLabel": "HI",
-    "label": "Hindi",
+    "inputLabel": "HU",
+    "label": "Hungary",
+    "value": "hu",
+    "countryCode": "HU"
+  },
+  {
+    "inputLabel": "IS",
+    "label": "Iceland",
+    "value": "is",
+    "countryCode": "IS"
+  },
+  {
+    "inputLabel": "IN",
+    "label": "India",
     "value": "hi",
     "countryCode": "IN"
   },
   {
     "inputLabel": "ID",
-    "label": "Indonesian",
+    "label": "Indonesia",
     "value": "id",
     "countryCode": "ID"
   },
+  {
+    "inputLabel": "IR",
+    "label": "Iran",
+    "value": "fa",
+    "countryCode": "IR"
+  },
+  {
+    "inputLabel": "IE",
+    "label": "Ireland",
+    "value": "ga",
+    "countryCode": "IE"
+  },
+  {
+    "inputLabel": "IL",
+    "label": "Israel",
+    "value": "he",
+    "countryCode": "IL"
+  },
+  {
+    "inputLabel": "IT",
+    "label": "Italy",
+    "value": "it",
+    "countryCode": "IT"
+  },
+  {
+    "inputLabel": "JP",
+    "label": "Japan",
+    "value": "ja",
+    "countryCode": "JP"
+  },
   {
     "inputLabel": "KN",
     "label": "Kannad",
@@ -96,11 +264,222 @@
     "countryCode": "IN"
   },
   {
-    "inputLabel": "MS",
-    "label": "Malay",
+    "inputLabel": "KZ",
+    "label": "Kazakhstan",
+    "value": "kk",
+    "countryCode": "KZ"
+  },
+  {
+    "inputLabel": "KG",
+    "label": "Kyrgyzstan",
+    "value": "ky",
+    "countryCode": "KG"
+  },
+  {
+    "inputLabel": "LA",
+    "label": "Laos",
+    "value": "lo",
+    "countryCode": "LA"
+  },
+  {
+    "inputLabel": "LV",
+    "label": "Latvia",
+    "value": "lv",
+    "countryCode": "LV"
+  },
+  {
+    "inputLabel": "LT",
+    "label": "Lithuania",
+    "value": "lt",
+    "countryCode": "LT"
+  },
+  {
+    "inputLabel": "LU",
+    "label": "Luxembourg",
+    "value": "lb",
+    "countryCode": "LU"
+  },
+  {
+    "inputLabel": "MK",
+    "label": "North Macedonia",
+    "value": "mk",
+    "countryCode": "MK"
+  },
+  {
+    "inputLabel": "MG",
+    "label": "Madagascar",
+    "value": "mg",
+    "countryCode": "MG"
+  },
+  {
+    "inputLabel": "MW",
+    "label": "Malawi",
+    "value": "ny",
+    "countryCode": "MW"
+  },
+  {
+    "inputLabel": "MY",
+    "label": "Malaysia",
     "value": "ms",
     "countryCode": "MY"
   },
+  {
+    "inputLabel": "MV",
+    "label": "Maldives",
+    "value": "dv",
+    "countryCode": "MV"
+  },
+  {
+    "inputLabel": "ML",
+    "label": "Mali",
+    "value": "bm",
+    "countryCode": "ML"
+  },
+  {
+    "inputLabel": "MT",
+    "label": "Malta",
+    "value": "mt",
+    "countryCode": "MT"
+  },
+  {
+    "inputLabel": "MH",
+    "label": "Marshall Islands",
+    "value": "mh",
+    "countryCode": "MH"
+  },
+  {
+    "inputLabel": "MN",
+    "label": "Mongolia",
+    "value": "mn",
+    "countryCode": "MN"
+  },
+  {
+    "inputLabel": "NR",
+    "label": "Nauru",
+    "value": "na",
+    "countryCode": "NR"
+  },
+  {
+    "inputLabel": "NP",
+    "label": "Nepal",
+    "value": "ne",
+    "countryCode": "NP"
+  },
+  {
+    "inputLabel": "NL",
+    "label": "Netherlands",
+    "value": "nl",
+    "countryCode": "NL"
+  },
+  {
+    "inputLabel": "NU",
+    "label": "Niue",
+    "value": "ni",
+    "countryCode": "NU"
+  },
+  {
+    "inputLabel": "NO",
+    "label": "Norway",
+    "value": "no",
+    "countryCode": "NO"
+  },
+  {
+    "inputLabel": "PK",
+    "label": "Pakistan",
+    "value": "ur",
+    "countryCode": "PK"
+  },
+  {
+    "inputLabel": "PW",
+    "label": "Palau",
+    "value": "pau",
+    "countryCode": "PW"
+  },
+  {
+    "inputLabel": "PY",
+    "label": "Paraguay",
+    "value": "gn",
+    "countryCode": "PY"
+  },
+  {
+    "inputLabel": "PH",
+    "label": "Philippines",
+    "value": "tl",
+    "countryCode": "PH"
+  },
+  {
+    "inputLabel": "PL",
+    "label": "Poland",
+    "value": "pl",
+    "countryCode": "PL"
+  },
+  {
+    "inputLabel": "PT",
+    "label": "Portugal",
+    "value": "pt",
+    "countryCode": "PT"
+  },
+  {
+    "inputLabel": "RO",
+    "label": "Romania",
+    "value": "ro",
+    "countryCode": "RO"
+  },
+  {
+    "inputLabel": "RU",
+    "label": "Russia",
+    "value": "ru",
+    "countryCode": "RU"
+  },
+  {
+    "inputLabel": "RW",
+    "label": "Rwanda",
+    "value": "rw",
+    "countryCode": "RW"
+  },
+  {
+    "inputLabel": "WS",
+    "label": "Samoa",
+    "value": "sm",
+    "countryCode": "WS"
+  },
+  {
+    "inputLabel": "RS",
+    "label": "Serbia",
+    "value": "sr",
+    "countryCode": "RS"
+  },
+  {
+    "inputLabel": "SA",
+    "label": "Saudi Arabia",
+    "value": "ar",
+    "countryCode": "SA"
+  },
+  {
+    "inputLabel": "SC",
+    "label": "Seychelles",
+    "value": "crs",
+    "countryCode": "SC"
+  },
+  {
+    "inputLabel": "SK",
+    "label": "Slovakia",
+    "value": "sk",
+    "countryCode": "SK"
+  },
+  {
+    "inputLabel": "SI",
+    "label": "Slovenia",
+    "value": "sl",
+    "countryCode": "SI"
+  },
+  {
+    "inputLabel": "SO",
+    "label": "Somalia",
+    "value": "so",
+    "countryCode": "SO"
+  },
   {
     "inputLabel": "TA",
     "label": "Tamil",
@@ -108,45 +487,111 @@
     "countryCode": "IN"
   },
   {
-    "inputLabel": "AR",
-    "label": "Arabic",
-    "value": "ar",
-    "countryCode": "EG"
+    "inputLabel": "ZA",
+    "label": "South Africa",
+    "value": "zu",
+    "countryCode": "ZA"
   },
   {
-    "inputLabel": "RU",
-    "label": "Russian",
-    "value": "ru",
-    "countryCode": "RU"
+    "inputLabel": "KR",
+    "label": "South Korea",
+    "value": "ko",
+    "countryCode": "KR"
   },
   {
-    "inputLabel": "JA",
-    "label": "Japanese",
-    "value": "ja",
-    "countryCode": "JP"
+    "inputLabel": "ES",
+    "label": "Spain",
+    "value": "es",
+    "countryCode": "ES"
   },
   {
-    "inputLabel": "BN",
-    "label": "Bengali",
-    "value": "bn",
-    "countryCode": "BD"
+    "inputLabel": "LK",
+    "label": "Sri Lanka",
+    "value": "si",
+    "countryCode": "LK"
   },
   {
-    "inputLabel": "IT",
-    "label": "Italian",
-    "value": "it",
-    "countryCode": "IT"
+    "inputLabel": "SE",
+    "label": "Sweden",
+    "value": "sv",
+    "countryCode": "SE"
   },
   {
-    "inputLabel": "EL",
-    "label": "Greek",
-    "value": "el",
-    "countryCode": "GR"
+    "inputLabel": "TJ",
+    "label": "Tajikistan",
+    "value": "tg",
+    "countryCode": "TJ"
   },
   {
-    "inputLabel": "BG",
-    "label": "Bulgarian Translation",
-    "value": "bg",
-    "countryCode": "BG"
+    "inputLabel": "TZ",
+    "label": "Tanzania",
+    "value": "sw",
+    "countryCode": "TZ"
+  },
+  {
+    "inputLabel": "TH",
+    "label": "Thailand",
+    "value": "th",
+    "countryCode": "TH"
+  },
+  {
+    "inputLabel": "TK",
+    "label": "Tokelau",
+    "value": "tkl",
+    "countryCode": "TK"
+  },
+  {
+    "inputLabel": "TO",
+    "label": "Tonga",
+    "value": "to",
+    "countryCode": "TO"
+  },
+  {
+    "inputLabel": "TR",
+    "label": "Turkey",
+    "value": "tr",
+    "countryCode": "TR"
+  },
+  {
+    "inputLabel": "TM",
+    "label": "Turkmenistan",
+    "value": "tk",
+    "countryCode": "TM"
+  },
+  {
+    "inputLabel": "UA",
+    "label": "Ukraine",
+    "value": "uk",
+    "countryCode": "UA"
+  },
+  {
+    "inputLabel": "UZ",
+    "label": "Uzbekistan",
+    "value": "uz",
+    "countryCode": "UZ"
+  },
+  {
+    "inputLabel": "VU",
+    "label": "Vanuatu",
+    "value": "bi",
+    "countryCode": "VU"
+  },
+  {
+    "inputLabel": "VN",
+    "label": "Vietnam",
+    "value": "vi",
+    "countryCode": "VN"
+  },
+  {
+    "inputLabel": "ZW",
+    "label": "Zimbabwe",
+    "value": "sn",
+    "countryCode": "ZW"
+  },
+  {
+    "inputLabel": "ZH-CN",
+    "label": "Chinese Simplified",
+    "value": "zh-CN",
+    "countryCode": "CN"
   }
 ]

package/themes/original/src/components/StripeElementsForm/index.tsx CHANGED Viewed

@@ -9,7 +9,7 @@ import {
 } from '@stripe/stripe-react-native';
 import { useTheme } from 'styled-components/native';
 import { ErrorMessage } from './styles';
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { StripeElementsForm as StripeFormController } from './naked';
 import { OButton, OText } from '../shared';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -17,7 +17,7 @@ import { StripeMethodForm } from '../../../../../src/components/StripeMethodForm
 const StripeElementsFormUI = (props: any) => {
 	const {
-		publicKey,
+		publicKeyState,
 		handleSource,
 		values,
 		businessId,
@@ -55,7 +55,7 @@ const StripeElementsFormUI = (props: any) => {
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
 	const zipCodeEnabled = validationFields?.fields?.card?.zipcode?.enabled
 	const zipCodeRequired = validationFields?.fields?.card?.zipcode?.required
-	const isToSave = methodsPay?.includes(paymethod) ? publicKey : publicKeyAddCard
+	const isToSave = methodsPay?.includes(paymethod) ? publicKeyState?.key : (publicKeyAddCard || publicKeyState?.key)
 	const styles = StyleSheet.create({
 		container: {
 			width: '100%',
@@ -201,70 +201,78 @@ const StripeElementsFormUI = (props: any) => {
 	return (
 		<View style={{ ...styles.container, height: methodsPay?.includes(paymethod) ? 'auto' : height - top - bottom - 60 - (isKeyboardShow ? 250 : 0) }}>
-			{publicKey ? (
-				<View style={{ flex: 1 }}>
-					<StripeProvider
-						publishableKey={isToSave}
-						merchantIdentifier={merchantId}
-						urlScheme={`${urlScheme}://checkout/${cart?.uuid}`}
-					>
-						{methodsPay?.includes(paymethod) ? (
-							<StripeMethodForm
-								handleSource={handleSource}
-								onCancel={onCancel}
-								cart={cart}
-								cartTotal={cartTotal}
-								setErrors={setErrors}
-								paymethod={paymethod}
-								devMode={publicKey?.includes('test')}
-								setMethodPaySupported={setMethodPaySupported}
-								placeByMethodPay={placeByMethodPay}
-								methodPaySupported={methodPaySupported}
-								setPlaceByMethodPay={setPlaceByMethodPay}
-								androidAppId={androidAppId}
-							/>
-						) : (
-							<CardField
-								postalCodeEnabled={zipCodeEnabled}
-								cardStyle={{
-									backgroundColor: '#FFFFFF',
-									textColor: '#000000',
-									borderWidth: 1,
-									borderRadius: 8,
-									borderColor: theme.colors.border
-								}}
-								style={{
-									width: '100%',
-									height: 50,
-									marginVertical: 30,
-									zIndex: 9999,
-								}}
-								onCardChange={(cardDetails: any) => setCard(cardDetails)}
-							/>
-						)}
-					</StripeProvider>
-					{!!errors && (
+			{publicKeyState.loading ? (
+				<Placeholder Animation={Fade}>
+					<PlaceholderLine height={50} style={{ marginTop: 20 }} />
+				</Placeholder>
+			) : (
+				<>
+					{publicKeyState?.key ? (
+						<View style={{ flex: 1 }}>
+							<StripeProvider
+								publishableKey={isToSave}
+								merchantIdentifier={merchantId}
+								urlScheme={`${urlScheme}://checkout/${cart?.uuid}`}
+							>
+								{methodsPay?.includes(paymethod) ? (
+									<StripeMethodForm
+										handleSource={handleSource}
+										onCancel={onCancel}
+										cart={cart}
+										cartTotal={cartTotal}
+										setErrors={setErrors}
+										paymethod={paymethod}
+										devMode={publicKeyState?.key?.includes('test')}
+										setMethodPaySupported={setMethodPaySupported}
+										placeByMethodPay={placeByMethodPay}
+										methodPaySupported={methodPaySupported}
+										setPlaceByMethodPay={setPlaceByMethodPay}
+										androidAppId={androidAppId}
+									/>
+								) : (
+									<CardField
+										postalCodeEnabled={zipCodeEnabled}
+										cardStyle={{
+											backgroundColor: '#FFFFFF',
+											textColor: '#000000',
+											borderWidth: 1,
+											borderRadius: 8,
+											borderColor: theme.colors.border
+										}}
+										style={{
+											width: '100%',
+											height: 50,
+											marginVertical: 30,
+											zIndex: 9999,
+										}}
+										onCardChange={(cardDetails: any) => setCard(cardDetails)}
+									/>
+								)}
+							</StripeProvider>
+							{!!errors && (
+								<ErrorMessage>
+									<OText
+										size={20}
+										color={theme.colors.error}
+										style={{ marginTop: 20, textAlign: 'center' }}
+									>
+										{errors}
+									</OText>
+								</ErrorMessage>
+							)}
+						</View>
+					) : (
 						<ErrorMessage>
 							<OText
 								size={20}
 								color={theme.colors.error}
-								style={{ marginTop: 20, textAlign: 'center' }}
+								style={{ marginTop: 20 }}
 							>
-								{errors}
+								{t('SOMETHING_WRONG', 'Something is wrong!')}
 							</OText>
 						</ErrorMessage>
 					)}
-				</View>
-			) : (
-				<ErrorMessage>
-					<OText
-						size={20}
-						color={theme.colors.error}
-						style={{ marginTop: 20 }}
-					>
-						{t('SOMETHING_WRONG', 'Something is wrong!')}
-					</OText>
-				</ErrorMessage>
+				</>
 			)}
 			{!methodsPay?.includes(paymethod) && (
 				<OButton

package/themes/original/src/components/StripeElementsForm/naked.tsx CHANGED Viewed

@@ -13,6 +13,7 @@ export const StripeElementsForm = (props: any) => {
   const [ordering] = useApi();
   const [{ token }] = useSession();
   const [state, setState] = useState({ loading: false, loadingAdd: false, error: null, requirements: null });
+  const [publicKeyState, setPublicKeyState] = useState({ key: props.publicKey, loading: true, error: null })
   const getRequirements = async () => {
     try {
@@ -85,6 +86,51 @@ export const StripeElementsForm = (props: any) => {
     }
   }
+  /**
+   * Method to get stripe credentials from API
+   */
+  const getCredentials = async () => {
+    try {
+      setPublicKeyState({
+        ...publicKeyState,
+        loading: true
+      })
+      const { content: { result, error } } = await ordering.setAccessToken(token).paymentCards().getCredentials()
+      if (!error) {
+        setPublicKeyState({
+          loading: false,
+          key: result.publishable,
+          error: null
+        })
+      } else {
+        setPublicKeyState({
+          ...publicKeyState,
+          loading: false,
+          error: result
+        })
+      }
+    } catch (error) {
+      setPublicKeyState({
+        ...publicKeyState,
+        loading: false,
+        error: error.message
+      })
+    }
+  }
+  useEffect(() => {
+    if (!token) return
+    if (props.publicKey) {
+      setPublicKeyState({
+        loading: false,
+        key: props.publicKey,
+        error: null
+      })
+    } else {
+      getCredentials()
+    }
+  }, [token, props.publicKey])
   useEffect(() => {
     if (!token || state.requirements) return
     toSave && getRequirements()
@@ -96,6 +142,7 @@ export const StripeElementsForm = (props: any) => {
       values={state}
       requirements={state.requirements}
       stripeTokenHandler={stripeTokenHandler}
+      publicKeyState={publicKeyState}
     />
   )
 }