Sms integration

Is it possible to integrate sms API, to send sms after save successfully a resource

5 Replies

Hi @Sly. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to integrate an SMS API to send an SMS after successfully saving a resource in a refine application. You can achieve this by using the successNotification property in hooks like useForm or useShow to trigger the SMS API call upon a successful operation. Here is an example of how you can customize the successNotification to send an SMS using an SMS API like Twilio: 1. Set up the Notification Provider: Ensure you have the NotificationProvider set up in your application. This is required for the successNotification property to work. 2. Customize the successNotification: Use the successNotification property in the useForm hook to call your SMS API. Here is a code example using the useForm hook:

import { useForm } from "@refinedev/core";
import axios from "axios";

const MyComponent = () => {
  const { formProps, saveButtonProps } = useForm({
    successNotification: async (data, values, resource) => {
      // Customize the success notification
      const message = `Successfully created ${data.title}`;
      
      // Call your SMS API here
      try {
        await axios.post('<https://your-sms-api.com/send',> {
          to: 'recipient-phone-number',
          message: message,
        });
      } catch (error) {
        console.error("Failed to send SMS:", error);
      }

      return {
        message: message,
        description: "good job!",
        type: "success",
      };
    },
  });

  return (
    <form {...formProps}>
      {/* Your form fields here */}
      <button {...saveButtonProps}>Save</button>
    </form>
  );
};

import { useForm } from "@refinedev/core";
import axios from "axios";

const MyComponent = () => {
  const { formProps, saveButtonProps } = useForm({
    successNotification: async (data, values, resource) => {
      // Customize the success notification
      const message = `Successfully created ${data.title}`;
      
      // Call your SMS API here
      try {
        await axios.post('<https://your-sms-api.com/send',> {
          to: 'recipient-phone-number',
          message: message,
        });
      } catch (error) {
        console.error("Failed to send SMS:", error);
      }

      return {
        message: message,
        description: "good job!",
        type: "success",
      };
    },
  });

  return (
    <form {...formProps}>
      {/* Your form fields here */}
      <button {...saveButtonProps}>Save</button>
    </form>
  );
};

In this example, after a successful form submission, the successNotification function is called. Inside this function, you can make an API call to your SMS service to send a notification. For more details on customizing notifications, you can refer to the useForm documentation (https://refine.dev/docs/data/hooks/use-form/#successnotification-) and the Notification Providers guide (https://refine.dev/docs/guides-concepts/notifications/#notification-providers). If you need to set up Twilio for SMS, you can follow the guide on OTP Authentication with Supabase and Twilio in React (https://refine.dev/blog/supabase-twilio-otp-authentication-in-react/#set-up-the-supabase-project) for detailed instructions on configuring Twilio. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@1172098337760096258> kapa.ai is still learning and improving, please let us know how it did by reacting below

ratty-blushOP•6mo ago

@kapa.ai can I use Supabase and Strapi in the same project?

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can use both Supabase and Strapi in the same refine project. Refine allows you to use multiple data providers, which means you can integrate different backends within the same application. Here is how you can set up both Supabase and Strapi in your refine project: 1. Install the necessary packages: - For Supabase: @refinedev/supabase - For Strapi: @refinedev/strapi-v4 2. Create clients for both Supabase and Strapi: - Set up the Supabase client in src/utility/supabaseClient.ts:

     import { createClient } from "@refinedev/supabase";

     const SUPABASE_URL = "<https://your-supabase-url.supabase.co";>
     const SUPABASE_KEY = "your-supabase-key";

     export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, {
       db: {
         schema: "public",
       },
       auth: {
         persistSession: true,
       },
     });

     import { createClient } from "@refinedev/supabase";

     const SUPABASE_URL = "<https://your-supabase-url.supabase.co";>
     const SUPABASE_KEY = "your-supabase-key";

     export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, {
       db: {
         schema: "public",
       },
       auth: {
         persistSession: true,
       },
     });

- Set up the Strapi client in src/utility/strapiClient.ts:

     import axios from "axios";
     import { DataProvider } from "@refinedev/strapi-v4";

     const API_URL = "<https://your-strapi-url/api";>

     export const strapiClient = DataProvider(API_URL, axios);

     import axios from "axios";
     import { DataProvider } from "@refinedev/strapi-v4";

     const API_URL = "<https://your-strapi-url/api";>

     export const strapiClient = DataProvider(API_URL, axios);

3. Configure the data providers in your App component:

   import { Refine } from "@refinedev/core";
   import { supabaseClient } from "./utility/supabaseClient";
   import { strapiClient } from "./utility/strapiClient";

   function App() {
     return (
       <Refine
         dataProvider={{
           default: supabaseClient,
           strapi: strapiClient,
         }}
         // other configurations
       />
     );
   }

   export default App;

   import { Refine } from "@refinedev/core";
   import { supabaseClient } from "./utility/supabaseClient";
   import { strapiClient } from "./utility/strapiClient";

   function App() {
     return (
       <Refine
         dataProvider={{
           default: supabaseClient,
           strapi: strapiClient,
         }}
         // other configurations
       />
     );
   }

   export default App;

4. Use the data providers in your components: - When using hooks like useList, useShow, useCreate, etc., you can specify which data provider to use by passing the resource parameter:

     import { useList } from "@refinedev/core";

     const MyComponent = () => {
       const { data, isLoading } = useList({
         resource: "posts", // This will use the default (Supabase) data provider
       });

       const { data: strapiData, isLoading: strapiLoading } = useList({
         resource: "strapi::articles", // This will use the Strapi data provider
       });

       return (
         <div>
           {/* Render your data */}
         </div>
       );
     };

     import { useList } from "@refinedev/core";

     const MyComponent = () => {
       const { data, isLoading } = useList({
         resource: "posts", // This will use the default (Supabase) data provider
       });

       const { data: strapiData, isLoading: strapiLoading } = useList({
         resource: "strapi::articles", // This will use the Strapi data provider
       });

       return (
         <div>
           {/* Render your data */}
         </div>
       );
     };

By following these steps, you can successfully integrate both Supabase and Strapi in the same refine project. For more details on data providers, you can refer to the Data Provider documentation (https://refine.dev/docs/data/data-provider/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@1172098337760096258> kapa.ai is still learning and improving, please let us know how it did by reacting below