@meatech/payblend_app_ui_component 1.0.69

package/components/Toasts/BaseToast.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import {useMemo} from 'react';
+import {View, TouchableOpacity} from 'react-native';
+
+import {styles} from './BaseToast.styles';
+import {BaseToastProps, ToastTypeE} from '@ui/types';
+import {Icon} from '@ui/components';
+import {Images, colors, ph, pw} from '@ui/themes';
+import Text from '../Text';
+
+export function BaseToast({
+  title,
+  type,
+  subTitle,
+  hide,
+  onPress,
+  activeOpacity = 1,
+  style,
+  touchableContainerProps,
+  contentContainerStyle,
+  contentContainerProps,
+  titleStyle,
+  titleNumberOfLines = 1,
+  titleProps,
+  subTitleStyle,
+  subTitleProps,
+  isShowLeftIcon = false,
+  isShowRightIcon = false,
+}: BaseToastProps) {
+  const {tintColor, icName} = useMemo(() => {
+    switch (type) {
+      case ToastTypeE.success:
+        return {
+          tintColor: colors.green[90],
+          icName: 'ic_checkmark_circle',
+        };
+      case ToastTypeE.error:
+        return {
+          tintColor: colors.red[90],
+          icName: 'ic_alert',
+        };
+      case ToastTypeE.info:
+        return {
+          tintColor: colors.blue[90],
+          icName: 'ic_info',
+        };
+      case ToastTypeE.warning:
+        return {
+          tintColor: colors.yellow[90],
+          icName: 'ic_warning',
+        };
+      default:
+        return {tintColor: colors.neutral[100], icName: ''};
+    }
+  }, [type]);
+  const renderLeadingIcon = () => {
+    if (!icName && !type) return;
+    return (
+      <Icon
+        width={pw(24)}
+        height={ph(24)}
+        name={icName as keyof typeof Images}
+        tintColor={tintColor}
+      />
+    );
+  };
+  const renderTrailingIcon = () => {
+    return (
+      <Icon
+        onPress={hide}
+        width={pw(24)}
+        height={ph(24)}
+        name="ic_close"
+        tintColor={tintColor}
+      />
+    );
+  };
+  return (
+    <TouchableOpacity
+      disabled={!onPress}
+      onPress={onPress}
+      activeOpacity={activeOpacity}
+      style={[styles.base, style]}
+      {...touchableContainerProps}>
+      {isShowLeftIcon && renderLeadingIcon()}
+      <View
+        style={[styles.contentContainer, contentContainerStyle]}
+        {...contentContainerProps}>
+        {(title?.length ?? 0) > 0 && (
+          <Text
+            size="small"
+            fontWeight={'700'}
+            style={[styles.titleText, titleStyle]}
+            numberOfLines={titleNumberOfLines}
+            ellipsizeMode="tail"
+            {...titleProps}>
+            {title}
+          </Text>
+        )}
+        {(subTitle?.length ?? 0) > 0 && (
+          <Text size="xs" style={subTitleStyle} {...subTitleProps}>
+            {subTitle}
+          </Text>
+        )}
+      </View>
+      {isShowRightIcon && renderTrailingIcon()}
+    </TouchableOpacity>
+  );
+}

package/components/Toasts/DefaultToast.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import {StyleSheet} from 'react-native';
+import {BaseToastProps} from '@ui/types';
+import {BaseToast} from './BaseToast';
+import {colors} from '@ui/themes';
+
+
+export function DefaultToast(props: BaseToastProps) {
+  return (
+    <BaseToast
+      style={styles.container}
+      titleStyle={styles.textDefaultColor}
+      subTitleStyle={styles.textDefaultColor}
+      {...props}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.neutral[10],
+  },
+  textDefaultColor: {color: colors.neutral[90]},
+});

package/components/Toasts/ErrorToast.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import {StyleSheet} from 'react-native';
+import {BaseToastProps} from '@ui/types';
+import {BaseToast} from './BaseToast';
+import {colors} from '@ui/themes';
+
+
+export function ErrorToast(props: BaseToastProps) {
+  return (
+    <BaseToast
+      style={styles.container}
+      titleStyle={styles.textErrorColor}
+      subTitleStyle={styles.textErrorColor}
+      {...props}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.red[10],
+  },
+  textErrorColor: {color: colors.red[90]},
+});

package/components/Toasts/InfoToast.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import {StyleSheet} from 'react-native';
+import {BaseToastProps} from '@ui/types';
+import {BaseToast} from './BaseToast';
+import {colors} from '@ui/themes';
+
+
+export function InfoToast(props: BaseToastProps) {
+  return (
+    <BaseToast
+      style={styles.container}
+      titleStyle={styles.textInfoColor}
+      subTitleStyle={styles.textInfoColor}
+      {...props}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.blue[10],
+  },
+  textInfoColor: {color: colors.blue[90]},
+});

package/components/Toasts/SuccessToast.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import {StyleSheet} from 'react-native';
+import {BaseToastProps} from '@ui/types';
+import {BaseToast} from './BaseToast';
+import {colors} from '@ui/themes';
+
+
+export function SuccessToast(props: BaseToastProps) {
+  return (
+    <BaseToast
+      style={styles.container}
+      titleStyle={styles.textSuccessColor}
+      subTitleStyle={styles.textSuccessColor}
+      {...props}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.green[10],
+  },
+  textSuccessColor: {color: colors.green[90]},
+});

package/components/Toasts/Toast.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import {forwardRef, memo} from 'react';
+
+import {ToastUI} from './ToastUI';
+import {
+  ToastHideParams,
+  ToastProps,
+  ToastRef,
+  ToastShowParams,
+} from '@ui/types';
+import {useToast} from '@ui/hooks';
+
+const ToastRoot = memo(
+  forwardRef((props: ToastProps, ref) => {
+    const {config, ...defaultOptions} = props;
+    const {show, hide, isVisible, options, data} = useToast({
+      defaultOptions,
+    });
+
+    // This must use useCallback to ensure the ref doesn't get set to null and then a new ref every render.
+    React.useImperativeHandle(
+      ref,
+      React.useCallback(
+        () => ({
+          show,
+          hide,
+        }),
+        [hide, show],
+      ),
+    );
+
+    return (
+      <ToastUI
+        isVisible={isVisible}
+        options={options}
+        data={data}
+        hide={hide}
+        show={show}
+        config={config}
+      />
+    );
+  }),
+);
+
+type ToastRefObj = {
+  current: ToastRef | null;
+};
+
+let refs: ToastRefObj[] = [];
+
+/**
+ * Adds a ref to the end of the array, which will be used to show the toasts until its ref becomes null.
+ *
+ * @param newRef the new ref, which must be stable for the life of the Toast instance.
+ */
+function addNewRef(newRef: ToastRef) {
+  refs.push({
+    current: newRef,
+  });
+}
+
+/**
+ * Removes the passed in ref from the file-level refs array using a strict equality check.
+ *
+ * @param oldRef the exact ref object to remove from the refs array.
+ */
+function removeOldRef(oldRef: ToastRef | null) {
+  refs = refs.filter(r => r.current !== oldRef);
+}
+
+export const Toast = (props: ToastProps) => {
+  const toastRef = React.useRef<ToastRef | null>(null);
+
+  /*
+    This must use `useCallback` to ensure the ref doesn't get set to null and then a new ref every render.
+    Failure to do so will cause whichever Toast *renders or re-renders* last to be the instance that is used,
+    rather than being the Toast that was *mounted* last.
+  */
+  const setRef = React.useCallback((ref: ToastRef | null) => {
+    // Since we know there's a ref, we'll update `refs` to use it.
+    if (ref) {
+      // store the ref in this toast instance to be able to remove it from the array later when the ref becomes null.
+      toastRef.current = ref;
+      addNewRef(ref);
+    } else {
+      // remove the this toast's ref, wherever it is in the array.
+      removeOldRef(toastRef.current);
+    }
+  }, []);
+
+  return <ToastRoot ref={setRef} {...props} />;
+};
+
+/**
+ * Get the active Toast instance `ref`, by priority.
+ * The "highest" Toast in the `View` hierarchy has the highest priority.
+ *
+ * For example, a Toast inside a `Modal`, would have had its ref set later than a Toast inside App's Root.
+ * Therefore, the library knows that it is currently visible on top of the App's Root
+ * and will thus use the `Modal`'s Toast when showing/hiding.
+ *
+ * ```js
+ * <>
+ *  <Toast />
+ *  <Modal>
+ *    <Toast />
+ *  </Modal>
+ * </>
+ * ```
+ */
+function getRef() {
+  const reversePriority = [...refs].reverse();
+  const activeRef = reversePriority.find(ref => ref?.current !== null);
+  if (!activeRef) {
+    return null;
+  }
+  return activeRef.current;
+}
+
+Toast.show = (params: ToastShowParams) => {
+  getRef()?.show(params);
+};
+
+Toast.hide = (params?: ToastHideParams) => {
+  getRef()?.hide(params);
+};

package/components/Toasts/ToastUI.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+
+import {AnimatedContainer} from './AnimatedContainer';
+import {ErrorToast} from './ErrorToast';
+import {InfoToast} from './InfoToast';
+import {SuccessToast} from './SuccessToast';
+import {
+  ToastConfig,
+  ToastData,
+  ToastHideParams,
+  ToastOptions,
+  ToastShowParams,
+} from '@ui/types';
+import {WarningToast} from './WarningToast';
+import { DefaultToast } from './DefaultToast';
+
+export type ToastUIProps = {
+  isVisible: boolean;
+  options: Required<ToastOptions>;
+  data: ToastData;
+  show: (params: ToastShowParams) => void;
+  hide: (params: ToastHideParams) => void;
+  config?: ToastConfig;
+};
+
+const defaultToastConfig: ToastConfig = {
+  default: props => <DefaultToast {...props} />,
+  success: props => <SuccessToast {...props} />,
+  error: props => <ErrorToast {...props} />,
+  info: props => <InfoToast {...props} />,
+  warning: props => <WarningToast {...props} />,
+};
+
+function renderComponent({
+  data,
+  options,
+  config,
+  isVisible,
+  show,
+  hide,
+}: ToastUIProps) {
+  const {title, subTitle} = data;
+  const {type, onPress, position, props, isShowLeftIcon, isShowRightIcon} =
+    options;
+
+  const toastConfig = {
+    ...defaultToastConfig,
+    ...config,
+  };
+  const ToastComponent = toastConfig[type];
+
+  if (!ToastComponent) {
+    throw new Error(
+      `Toast type: '${type}' does not exist. You can add it via the 'config' prop on the Toast instance. Learn more: https://github.com/calintamas/react-native-toast-message/blob/master/README.md`,
+    );
+  }
+
+  return ToastComponent({
+    position,
+    type,
+    isVisible,
+    title,
+    subTitle,
+    show,
+    hide,
+    onPress,
+    props,
+    isShowLeftIcon,
+    isShowRightIcon,
+  });
+}
+
+export function ToastUI(props: ToastUIProps) {
+  const {isVisible, options, hide} = props;
+  const {position, topOffset, bottomOffset, swipeable} = options;
+
+  return (
+    <AnimatedContainer
+      isVisible={isVisible}
+      position={position}
+      topOffset={topOffset}
+      bottomOffset={bottomOffset}
+      swipeable={swipeable}
+      onHide={hide}>
+      {renderComponent(props)}
+    </AnimatedContainer>
+  );
+}

package/components/Toasts/WarningToast.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import {StyleSheet} from 'react-native';
+import {BaseToastProps} from '@ui/types';
+import {BaseToast} from './BaseToast';
+import {colors} from '@ui/themes';
+
+export function WarningToast(props: BaseToastProps) {
+  return (
+    <BaseToast
+      style={styles.container}
+      titleStyle={styles.textWarningColor}
+      subTitleStyle={styles.textWarningColor}
+      {...props}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.yellow[10],
+  },
+  textWarningColor: {color: colors.yellow[90]},
+});

package/components/Toasts/index.ts

@@ -0,0 +1 @@
+export * from './Toast';

package/components/index.ts

@@ -0,0 +1,24 @@
+export * from './Toasts';
+export * from './Icons';
+export * from './Container';
+export * from './ProgressBars';
+export * from './Inputs';
+export * from './Header';
+export * from './Inputs';
+export * from './TickItem';
+export * from './IconWithLabel';
+export * from './OptionalUtilities';
+export * from './Switch';
+export * from './SnapImageCarousel';
+export * from './Inputs';
+export * from './Image';
+export * from './SkeletonLoader';
+export * from './NotificationModal';
+export * from './Modal';
+export {default as Text} from './Text';
+export {default as Button} from './Button';
+export {default as Header} from './Header';
+export * from './LoadingOverlay';
+export * from './BalanceCard';
+export * from './PaymentMethodCard';
+export * from './PaymentMethodCardWithAmount';

package/constants/config.ts

@@ -0,0 +1,5 @@
+export const MAX_OTP_LENGTH = 6;
+export const OTP_TIMER_SECOND = 60;
+export const MIN_AGE_LIMIT = 20;
+export const ACCESS_TOKEN_KEY = 'accessToken';
+export const REFRESH_TOKEN_KEY = 'refreshToken';

package/constants/const.ts

@@ -0,0 +1,57 @@
+import { Images } from '@ui/themes';
+import { getImageSource } from '@ui/utils';
+
+export const secretQuestionList = [
+  {
+    label: '卒業した小学校はどこですか',
+    value: '1',
+  },
+  {
+    label: 'お父さんの誕生日はいつですか',
+    value: '2',
+  },
+];
+
+export const paymentCardDataByTypes: {
+  [key: string]: {
+    label: string;
+    icon: keyof typeof Images;
+    photo: string;
+  };
+} = {
+  DIRECT: {
+    label: 'Direct決済',
+    icon: 'ic_fire',
+    photo: getImageSource(Images.banner9),
+  },
+  VISA_PREPAID: {
+    label: 'Visa Prepaid',
+    icon: 'ic_visa_card',
+    photo: getImageSource(Images.banner5),
+  },
+  POINT: {
+    label: '***Point',
+    icon: 'ic_point_p',
+    photo: getImageSource(Images.banner6),
+  },
+  SALARY_ACCOUNT: {
+    label: '給与口座',
+    icon: 'ic_salary',
+    photo: getImageSource(Images.banner8),
+  },
+  FUND_TRANSFER_ACCOUNT: {
+    label: '資金移動口座',
+    icon: 'ic_arrow_right_visa_card',
+    photo: getImageSource(Images.banner7),
+  },
+  PAY: {
+    label: '****pay',
+    icon: 'ic_home',
+    photo: getImageSource(Images.banner9),
+  },
+  VISA: {
+    label: 'VISA',
+    icon: 'ic_visa_card',
+    photo: getImageSource(Images.banner5),
+  },
+};

package/constants/enum.ts

@@ -0,0 +1,25 @@
+export enum OtpTypeE {
+  EmailOTP = 'EMAIL',
+  PhoneOTP = 'PHONE',
+  ForgotPasswordOTP = 'FORGOT_PASSWORD',
+  ForgotEmailOTP = 'FORGOT_EMAIL',
+  EmailChangeOTP = 'EMAIL_CHANGE',
+  PhoneChangeOTP = 'PHONE_CHANGE',
+}
+
+export enum ResultType {
+  ISSUED = 'ISSUED',
+  CARD_DELIVERY_IN_PROGRESS = 'CARD_DELIVERY_IN_PROGRESS',
+  CARD_ACTIVATED = 'CARD_ACTIVATED',
+  CARD_CANCELLED = 'CARD_CANCELLED',
+}
+
+export enum EPaymentCardTypes {
+  DIRECT = 'DIRECT',
+  VISA = 'VISA',
+  VISA_PREPAID = 'VISA_PREPAID',
+  POINT = 'POINT',
+  SALARY_ACCOUNT = 'SALARY_ACCOUNT',
+  FUND_TRANSFER_ACCOUNT = 'FUND_TRANSFER_ACCOUNT',
+  PAY = 'PAY',
+}

package/constants/index.ts

@@ -0,0 +1,6 @@
+export * from './response-code';
+export * from './config';
+export * from './enum';
+export * from './const';
+export * from './titles';
+export * from './mutation-key';

package/constants/mutation-key.ts

@@ -0,0 +1,7 @@
+export const MUTATION_KEY = {
+  SIGN_IN: 'signIn',
+  CREATE_USER: 'createUser',
+  SECRET_QUESTION: 'secretQuestion',
+  SIGN_OUT: 'signOut',
+  STATE: 'state',
+};

package/constants/response-code.ts

@@ -0,0 +1,6 @@
+export const RESPONSE_CODE = {
+  success: [200, 201],
+  unauthorized: [401, 403],
+  notFound: [404],
+  badRequest: [400],
+};

package/constants/titles.ts

@@ -0,0 +1,4 @@
+export const ToastTitle = {
+  errorTitle: 'エラー',
+  successTitle: '成功',
+};