👩‍💻Group Buy Flow

Here is all you need to know and do to enable the "Separly Group Buy"! 🎉

import { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import SeparlyModal, { GroupData, BusinessData, Theme, NetworkId } from '@separlycom/groups'; 
// for standard integration uncomment the below
//import Separly, { GroupData, BusinessData, Theme } from '@separlycom/so-widget'; 
//import { NetworkId } from '@separlycom/groups/global/configs';

const Host = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const [sharedGroupId, setSharedGroupId] = useState<string>();
  const [groupData, setGroupData] = useState<GroupData>();
  
  return (
    <>
      <button
        onClick={() => {
        setGroupData(groupData);
        setSharedGroupId(undefined);
        setIsOpen(true);
        }}
      >
        Buy Together
      </button>
      <Fling
          isOpen={isOpen}
          onToggle={(isOpen) => setIsOpen(isOpen)}
                    onLoaded={() => {setIsLoaded(true);}}
          businessData={businessData}
          groupData={groupData}
          groupId={sharedGroupId}
          networkId={NetworkId.POLYGON}
          testMode={false}
                theme={theme}
        />
    </>
  );
};

const root = createRoot(document.getElementById('root') as HTMLElement);

root.render(<Host />);

Navigate to a URL with "separly-group-id" query parameter

TypeScript

import { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import SeparlyModal, { GroupData, BusinessData, Theme, NetworkId } from '@separlycom/groups'; 
// for standard integration uncomment the below
//import Fling, { GroupData, BusinessData, Theme } from '@separlycom/so-widget'; 
//import { NetworkId } from '@separlycom/groups/global/configs';

const SEPARLY_GROUP_ID = 'separly-group-id';

const Host = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false)
  const [sharedGroupId, setSharedGroupId] = useState<string>();
  const [groupData, setGroupData] = useState<GroupData>();
  
  const urlParams = new URLSearchParams(window.location.search);
  const groupIdFromUrl = urlParams.get(SEPARLY_GROUP_ID);

  useEffect(() => {
    if (groupIdFromUrl) {
      setSharedGroupId(groupIdFromUrl);
      setIsOpen(true);
    }
  }, []);

  return (
    <>
      <button
        onClick={() => {
          setGroupData(groupData);
          setSharedGroupId(undefined);
          setIsOpen(true);
        }}
      >
        Buy Together
      </button>
      <Fling
          isOpen={isOpen}
          onToggle={(isOpen) => setIsOpen(isOpen)}
          onLoaded={() => {setIsLoaded(true);}}
          businessData={businessData}
          groupData={groupData}
          groupId={sharedGroupId}
          networkId={NetworkId.POLYGON}
          testMode={false}
            theme={theme}
        />
    </>
  );
};

const root = createRoot(document.getElementById('root') as HTMLElement);

root.render(<Host />);

That's it, the "Separly Group Buy" is now available.

✉️ Talk to us!

Our product evolves and improves as you build on top of it, iterating quickly to help support new use cases and constantly optimising for value. To do so effectively, we want your feedback. Any feedback is welcomed - good, bad, or neutral. You can share your input via email to [e-mail]