react-easy-wall 1.3.4 → 2.0.2

package/src/components/paywall/PaywallSubscription.tsx

@@ -0,0 +1,153 @@
+
+import React from 'react';
+import { Box, BoxProps, Typography, TypographyProps, ButtonProps, Button } from '@mui/material';
+
+export interface PaywallSubscriptionProps {
+  post?: any;
+  containerProps?: BoxProps;
+  titleProps?: TypographyProps;
+  subtitleProps?: TypographyProps;
+  buttonProps?: ButtonProps;
+  buttonText?: string;
+  secondaryButtonProps?: ButtonProps;
+  secondaryButtonText?: string;
+  title?: string;
+  subtitle?: string;
+  withCaption?: boolean;
+}
+
+export const PaywallSubscription: React.FC<PaywallSubscriptionProps> = ({
+  containerProps = {},
+  subtitleProps = {},
+  buttonProps = {},
+  titleProps = {},
+  secondaryButtonText = 'Ya soy suscriptor',
+  secondaryButtonProps = {},
+  withCaption = false,
+  title = 'Este artículo es exclusivo para suscriptores',
+  subtitle = 'Tu contribución nos ayuda a cubrir costos de investigación, tecnología y ofrecerte servicios de valor agregado.',
+  post,
+  buttonText = 'Suscríbete',
+}) => {
+  const { sx: sxContainerProps, ...containerPropRest } = containerProps;
+  const { sx: sxSubtitleProps, ...subtitlePropRest } = subtitleProps;
+  const { sx: sxTitleProps, ...titlePropRest } = titleProps;
+  const { sx: sxButtonProps, ...buttonPropsRest } = buttonProps;
+  const { sx: sxSecondaryButtonProps, ...secondaryButtonPropsRest } = secondaryButtonProps;
+  const url = process.env.NEXT_PUBLIC_URL_PORTAL || '';
+  const handleButton = () => {
+    if (!url) {
+      console.error('NEXT_PUBLIC_URL_PORTAL is required!');
+      return null;
+    }
+
+    return (window.location.href = `${url}/planes?post_url=${window.location.href}`);
+  };
+
+  const handleSecondaryButton = () => {
+    if (!url) {
+      console.error('NEXT_PUBLIC_URL_PORTAL is required!');
+      return null;
+    }
+
+    return (window.location.href = `${url}/autenticacion?action=AUTH_LOGIN?post_url=${window.location.href}`);
+  };
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        width: '100%',
+        border: '1px solid #707070',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        background: 'white',
+        paddingTop: '80px',
+        paddingBottom: '80px',
+        borderRadius: '20px',
+        boxShadow: '0px 0px 32px #00000029',
+        ...sxContainerProps,
+      }}
+      {...containerPropRest}>
+      <Box
+        sx={{
+          width: {
+            xs: 360,
+            md: 460,
+          },
+          justifyContent: 'center',
+          alignItems: 'center',
+          flexDirection: 'column',
+          display: 'flex',
+        }}>
+        <Typography
+          sx={{
+            fontWeight: 700,
+            lineHeight: '34px',
+            fontSize: '34px',
+            textAlign: 'center',
+            marginBottom: '1.5rem',
+            ...sxTitleProps,
+          }}
+          {...titlePropRest}>
+          {title}
+        </Typography>
+        <Typography
+          sx={{ textAlign: 'center', marginBottom: '1.5rem', ...sxSubtitleProps }}
+          {...subtitlePropRest}>
+          {subtitle}
+        </Typography>
+        <Button
+          disableElevation
+          disableRipple
+          disableTouchRipple
+          disableFocusRipple
+          sx={{
+            background: '#f75957',
+            '&:hover': {
+              backgroundColor: '#f75957',
+            },
+            fontWeight: 700,
+            textTransform: 'uppercase',
+            marginBottom: '.5rem',
+            color: 'white',
+            fontSize: '18px',
+            paddingTop: '.5rem',
+            paddingBottom: '.5rem',
+            paddingLeft: '.75rem',
+            paddingRight: '.75rem',
+            borderRadius: '0.25rem',
+            ...sxButtonProps,
+          }}
+          onClick={() => handleButton()}
+          {...buttonPropsRest}>
+          {buttonText}
+        </Button>
+        <Button
+          disableElevation
+          disableRipple
+          disableTouchRipple
+          disableFocusRipple
+          sx={{
+            textDecoration: 'underline',
+            background: 'transparent',
+            textTransform: 'none',
+            fontWeight: 700,
+            textAlign: 'center',
+            fontSize: '16px',
+            paddingTop: '.5rem',
+            paddingBottom: '.5rem',
+            paddingLeft: '.75rem',
+            paddingRight: '.75rem',
+            color: 'black',
+            ...sxSecondaryButtonProps,
+          }}
+          onClick={() => handleSecondaryButton()}
+          {...secondaryButtonPropsRest}>
+          {secondaryButtonText}
+        </Button>
+      </Box>
+    </Box>
+  );
+};

package/src/components/session/SessionClientProvider.tsx

@@ -0,0 +1,27 @@
+import { GoogleOAuthProvider } from '@react-oauth/google';
+import React, { ReactNode, useEffect } from 'react';
+import { GOOGLE_AUTH_CLIENT } from '../../shared/constants';
+import { SessionUserClientProvider } from './SessionUserClientProvider';
+import { Config } from '@/config/config.types';
+import { sessionConfigStore } from '@/components/session/session.stores';
+
+type SessionClientProviderProps = {
+  children: ReactNode;
+  config: Config;
+};
+
+export const SessionClientProvider: React.FC<SessionClientProviderProps> = ({
+  children,
+  config,
+}) => {
+
+  useEffect(() => {
+    sessionConfigStore.dispatch(config);
+  }, [config]);
+
+  return (
+    <GoogleOAuthProvider clientId={GOOGLE_AUTH_CLIENT}>
+      <SessionUserClientProvider config={config}>{children}</SessionUserClientProvider>
+    </GoogleOAuthProvider>
+  );
+};

package/src/components/session/SessionUserClientProvider.tsx

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import { User, UserSavedPost } from '@/shared/types/generated';
+import { Provider } from './SessionUserContext';
+import { SessionContextDefaultValues } from './session.types';
+import { useGoogleOneTapLogin } from '@react-oauth/google';
+
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { theme } from '@/shared/mui/theme';
+import { getSubscriptionActive } from './session.utils';
+import { COOKIES_OPTIONS } from './session.constants';
+import { useCallAction, useEvent } from '@cobuildlab/react-simple-state';
+import { currentUserAction, googleOneTapAction } from './session.actions';
+import { universalCookies } from '@/shared/cookies';
+import { COOKIE_NAME } from '@/shared/constants';
+import { tokenEvent } from './session.events';
+import { Config } from '@/config/config.types';
+
+type SessionUserClientProviderProps = {
+  children: React.ReactNode;
+  config: Config;
+};
+
+export const SessionUserClientProvider: React.FC<SessionUserClientProviderProps> = ({
+  children,
+  config,
+}) => {
+  const [user, setUser] = useState<User | null | undefined>(null);
+  const { token } = useEvent(tokenEvent);
+  const [savedPosts, setSavedPosts] = useState<UserSavedPost[]>([]);
+
+  const [callGoogleOneTap] = useCallAction(googleOneTapAction, {
+    onCompleted: (data) => {
+      universalCookies.set(COOKIE_NAME, data.token, COOKIES_OPTIONS);
+      window.location.reload();
+    },
+  });
+
+  useGoogleOneTapLogin({
+    onSuccess: (credentialResponse) => {
+      callGoogleOneTap(credentialResponse.credential);
+    },
+    onError: () => {
+      console.log('Login Failed');
+    },
+    disabled: !!token,
+    promptMomentNotification: (data) => {
+      // if (data.isSkippedMoment()) {
+      //   createAction(EasyDataName.skipSwg);
+      // }
+    },
+  });
+
+  const [callCurrentUserAction, loading] = useCallAction(currentUserAction, {
+    onCompleted: (data) => {
+      setUser(data.currentUser);
+      setSavedPosts(data.currentUser?.post_saved as UserSavedPost[]);
+      console.log({ data });
+    },
+    onError: (error) => {
+      universalCookies.remove(COOKIE_NAME, COOKIES_OPTIONS);
+      console.log({ message: error.message });
+    },
+  });
+
+  useEffect(() => {
+    if (token) {
+      callCurrentUserAction();
+    }
+  }, [callCurrentUserAction, token]);
+
+  const values: SessionContextDefaultValues = {
+    user,
+    config,
+    subscription: getSubscriptionActive(user),
+    loading,
+    savedPosts,
+    isAuthenticated: !!token,
+  };
+
+  return (
+    <Provider value={values}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </Provider>
+  );
+};

package/src/components/session/SessionUserContext.tsx

@@ -0,0 +1,9 @@
+
+import { createContext } from 'react';
+
+import { SessionContextDefaultValues } from './session.types';
+import { DEFAULT_USER_CONTEXT } from './session.constants';
+
+export const Context = createContext<SessionContextDefaultValues>(DEFAULT_USER_CONTEXT);
+
+export const { Provider } = Context;

package/src/components/session/server.ts

@@ -0,0 +1 @@
+export { SessionProviderServer } from './SessionProviderServer';

package/src/components/session/session.actions.ts

@@ -0,0 +1,99 @@
+import { createAction } from '@cobuildlab/react-simple-state';
+import {
+  createUserSavedPostErrorEvent,
+  createUserSavedPostEvent,
+  currentUserErrorEvent,
+  currentUserEvent,
+  deleteUserSavedPostErrorEvent,
+  deleteUserSavedPostEvent,
+  googleOneTapErrorEvent,
+  googleOneTapEvent,
+} from './session.events';
+import { URI } from '@/shared/constants';
+import axios from 'axios';
+import { apolloClient } from '@/shared/apollo/apollo.client';
+import {
+  CreateUserSavedPostDocument,
+  CreateUserSavedPostMutation,
+  CreateUserSavedPostMutationVariables,
+  CurrentUserDocument,
+  CurrentUserQuery,
+  CurrentUserQueryVariables,
+  DeleteUserSavedPostDocument,
+  DeleteUserSavedPostMutation,
+  DeleteUserSavedPostMutationVariables,
+} from '@/shared/types/generated';
+
+export const googleOneTapAction = createAction(
+  googleOneTapEvent,
+  googleOneTapErrorEvent,
+  async (idToken?: string) => {
+    let token = undefined;
+    if (!URI) {
+      console.error('URI is missing');
+      return { token };
+    }
+
+    const response = await axios.post<{ token: string }>(`${URI}/google/sign-up`, {
+      idToken,
+      url: window.location.href,
+    });
+
+    token = response.data.token;
+
+    return {
+      token,
+    };
+  },
+);
+
+export const currentUserAction = createAction(currentUserEvent, currentUserErrorEvent, async () => {
+  const response = await apolloClient().query<CurrentUserQuery, CurrentUserQueryVariables>({
+    query: CurrentUserDocument,
+    fetchPolicy: 'network-only',
+  });
+
+  return {
+    currentUser: response.data?.currentUser,
+  };
+});
+
+export const easyWallCreateUserSavedPost = createAction(
+  createUserSavedPostEvent,
+  createUserSavedPostErrorEvent,
+  async (variables: CreateUserSavedPostMutationVariables) => {
+    const response = await apolloClient().mutate<
+      CreateUserSavedPostMutation,
+        CreateUserSavedPostMutationVariables
+    >({
+      mutation: CreateUserSavedPostDocument,
+      variables,
+      awaitRefetchQueries: true,
+      refetchQueries: [{ query: CurrentUserDocument }],
+    });
+
+    return {
+      createUserSavedPost: response.data?.createUserSavedPost,
+    };
+  },
+);
+
+export const deleteUserSavedPostAction = createAction(
+  deleteUserSavedPostEvent,
+  deleteUserSavedPostErrorEvent,
+  async (variables: DeleteUserSavedPostMutationVariables) => {
+    const response = await apolloClient().mutate<
+      DeleteUserSavedPostMutation,
+      DeleteUserSavedPostMutationVariables
+    >({
+      mutation: DeleteUserSavedPostDocument,
+      variables,
+      awaitRefetchQueries: true,
+      refetchQueries: [{ query: CurrentUserDocument }],
+    });
+
+    return {
+      deleteUserSavedPost: response.data?.deleteUserSavedPost,
+    };
+  },
+);

package/src/components/session/session.constants.ts

@@ -0,0 +1,12 @@
+import moment from 'moment';
+import { COOKIE_DOMAIN } from '../../shared/constants';
+
+export const DEFAULT_USER_CONTEXT = {
+  user: undefined,
+};
+
+export const COOKIES_OPTIONS = {
+  expires: moment().add(1, 'year').toDate(),
+  path: '/',
+  domain: COOKIE_DOMAIN,
+};

package/src/components/session/session.events.ts

@@ -0,0 +1,48 @@
+import { createEvent } from '@cobuildlab/react-simple-state';
+import { User, UserSavedPost } from '../../shared/types/generated';
+import { Token } from './session.types';
+import { universalCookies } from '../../shared/cookies';
+import { COOKIE_NAME } from '../../shared/constants';
+
+export const tokenEvent = createEvent<Token>({
+  initialValue: {
+    token: universalCookies.get(COOKIE_NAME) || '',
+  },
+});
+
+export const googleOneTapEvent = createEvent<{
+  token: string | undefined;
+}>({
+  initialValue: {
+    token: undefined,
+  },
+});
+
+export const googleOneTapErrorEvent = createEvent();
+
+export const currentUserEvent = createEvent<{
+  currentUser: User | undefined | null;
+}>({
+  initialValue: {
+    currentUser: undefined,
+  },
+});
+export const currentUserErrorEvent = createEvent<Error>();
+
+export const createUserSavedPostEvent = createEvent<{
+  createUserSavedPost: undefined | null | UserSavedPost;
+}>({
+  initialValue: {
+    createUserSavedPost: undefined,
+  },
+});
+export const createUserSavedPostErrorEvent = createEvent<Error>();
+
+export const deleteUserSavedPostEvent = createEvent<{
+  deleteUserSavedPost: undefined | null | UserSavedPost;
+}>({
+  initialValue: {
+    deleteUserSavedPost: undefined,
+  },
+});
+export const deleteUserSavedPostErrorEvent = createEvent<Error>();

package/src/components/session/session.hooks.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { Context } from './SessionUserContext';
+
+export const useSession = () => {
+  return useContext(Context);
+};

package/src/components/session/session.stores.ts

@@ -0,0 +1,6 @@
+import { createStore } from '@cobuildlab/react-simple-state';
+import {Config} from "@/config/config.types";
+
+export const sessionConfigStore = createStore<Config | undefined>({
+  initialValue: undefined,
+});

package/src/components/session/session.types.ts

@@ -0,0 +1,16 @@
+import { Subscription, User, UserSavedPost } from '../../shared/types/generated';
+import { Config } from '../../config/config.types';
+
+export type Token = {
+  token: undefined | string;
+};
+
+export type SessionContextDefaultValues = {
+  user?: User | null;
+  config?: Config;
+  subscription?: Subscription | null;
+  isAuthenticated?: boolean;
+  loading?: boolean;
+  logout?: () => void;
+  savedPosts?: UserSavedPost[];
+};

package/src/components/session/session.utils.ts

@@ -0,0 +1,5 @@
+import { SubscriptionStatuses, User } from '../../shared/types/generated';
+
+export const getSubscriptionActive = (user?: User | null) => {
+  return user?.subscriptions?.find((item) => item?.status === SubscriptionStatuses.Active);
+};

package/src/config/config.types.ts

@@ -0,0 +1,9 @@
+
+
+export interface Config {
+    uri?: string;
+    urlPortal?: string;
+    cookieTokenName?: string;
+    cookieDomain?: string;
+    googleClient?: string;
+}

package/src/graphql/comment.queries.graphql

@@ -0,0 +1,42 @@
+mutation CreateComment($data: CreateCommentInput) {
+    createComment(data: $data) {
+        id
+        post_id
+        message
+    }
+}
+
+query Comments($where: CommentsWhere, $page: Int, $pageSize: Int) {
+    comments(where: $where, page: $page, pageSize: $pageSize) {
+        items {
+            id
+            message
+            created_at
+            updated_at
+            user {
+                avatar
+                name
+            }
+            replies{
+                id
+                message
+                created_at
+                updated_at
+                user {
+                    avatar
+                    name
+                }
+            }
+        }
+        count
+    }
+}
+
+mutation CreateReplyComment($data: CreateReplyCommentInput) {
+    createReplyComment(data: $data) {
+        id
+        post_id
+        message
+        comment_id
+    }
+}

package/src/graphql/user.queries.graphql

@@ -0,0 +1,56 @@
+query CurrentUser {
+    currentUser {
+        id
+        name
+        email
+        avatar
+        gender
+        birthday
+        site
+        social_providers {
+            id
+            provider
+            provider_id
+            primary
+        }
+        roles_on_users{
+            role_id
+            role {
+                id
+                name
+            }
+        }
+        subscriptions {
+            plan {
+                title
+                description
+                sub_title
+                price
+                title_front
+            }
+            cancel_date
+            status
+            payment_method
+            period_end_date
+            period_start_date
+            is_cancel
+            id
+        }
+        post_saved {
+            id
+            post_id
+        }
+    }
+}
+
+mutation createUserSavedPost($data: CreateUserSavedPostInput) {
+    createUserSavedPost(data: $data) {
+        id
+    }
+}
+
+mutation deleteUserSavedPost($data: DeleteUserSavedPostInput) {
+    deleteUserSavedPost(data: $data) {
+        id
+    }
+}

package/src/shared/apollo/apollo.client.ts

@@ -0,0 +1,33 @@
+import { HttpLink, ApolloClient, InMemoryCache } from '@apollo/client';
+import { SetContextLink } from '@apollo/client/link/context';
+import { universalCookies } from '../cookies';
+import { COOKIE_NAME, URI } from '../constants';
+
+const authLink = new SetContextLink(() => {
+  const token = universalCookies.get(COOKIE_NAME);
+  if (token) {
+    return {
+      headers: {
+        authorization: token ? `Bearer ${token}` : '',
+        'Apollo-Require-Preflight': 'true',
+      },
+    };
+  }
+  return {
+    headers: {
+      'Apollo-Require-Preflight': 'true',
+    },
+  };
+});
+
+export const apolloClient = () => {
+  const httpLink = new HttpLink({
+    uri: URI,
+    fetchOptions: { cache: 'no-store' },
+  });
+
+  return new ApolloClient({
+    cache: new InMemoryCache(),
+    link: authLink.concat(httpLink),
+  });
+};

package/src/shared/components/buttons/ButtonDefault.tsx

@@ -0,0 +1,45 @@
+
+
+import React from 'react';
+import {
+  CircularProgress,
+  Box,
+  ButtonProps,
+  Button as MUIButton,
+} from '@mui/material';
+
+interface ButtonDefaultProps extends ButtonProps {
+  isLoading?: boolean | undefined;
+}
+
+const Loading: React.FC = () => (
+  <Box marginRight={2} display="flex" alignItems="center">
+    <CircularProgress size={18} />
+  </Box>
+);
+
+export const ButtonDefault: React.FC<
+  ButtonDefaultProps & { component?: React.ElementType }
+> = ({
+  children,
+  component,
+  size = 'large',
+  variant = 'contained',
+  isLoading,
+  disabled,
+  ...rest
+}) => {
+  return (
+    <MUIButton
+      disabled={isLoading || disabled}
+      disableElevation
+      variant={variant}
+      component={component || 'button'}
+      color="primary"
+      size={size}
+      {...rest}
+    >
+      {isLoading ? <Loading /> : children}
+    </MUIButton>
+  );
+};