Untitled
unknown
plain_text
2 years ago
45 kB
8
Indexable
import { turboFootballUrl } from '@/lib/api/getAxios';
import { Field, Form, Formik } from 'formik';
import React, { useEffect, useState } from 'react';
import { BiFootball } from 'react-icons/bi';
import { AiFillAndroid, AiFillApple } from 'react-icons/ai';
import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import * as Yup from 'yup';
import useAuthContext from '../../contexts/AuthContext';
import BlockCountrySelect from '../Input/BlockCountrySelect';
import { toast } from 'react-hot-toast';
const EditForm = () => {
const [activeTab, setActiveTab] = useState(0);
const [loading, setLoading] = useState(true);
const [initialValues, setInitialValues] = useState({});
const { token } = useAuthContext();
useEffect(() => {
setLoading(true);
async function getSettings() {
await turboFootballUrl
.get('/api/admin/v1/settings', {
headers: {
authorization: `bearer ${token}`,
},
})
.then((res) => {
console.log(res.data);
setInitialValues(res?.data?.data);
setLoading(false);
});
}
getSettings();
}, [token]);
const defaultValueAnd = initialValues?.android_settings?.block_country;
const defaultValueIos = initialValues?.ios_settings?.block_country;
// Define the validation schema using Yup
const validationSchema = Yup.object().shape({
// Define your validation schema here
});
const handleTabChange = (index) => {
setActiveTab(index);
};
const handleSubmit = async (values) => {
// Handle form submission here
setLoading(true);
await turboFootballUrl
.put('/api/admin/v1/settings', values, {
headers: {
authorization: `bearer ${token}`,
api_key: process.env.NEXT_PUBLIC_TURBO_API_TOKEN,
},
})
.then((res) => {
// console.log(res.data);
// setInitialValues(res?.data?.updatedAppSettings);
toast.success(res?.data?.message)
setLoading(false);
});
};
return (
<Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit} enableReinitialize>
{({ values, setFieldValue }) => (
<Form>
<div className="card mb-3">
<div className="card-body">
<div className="row ">
<div className="col-md-12">
<label className="mt-4 px-2 text-[16px] font-semibold">
Notification Type <span className="text-[16px] text-red-500">*</span>
</label>
<Field as="select" name="notification_type" class="Select an option form-select">
<option value="Select One" disabled>
Select One
</option>
<option value="onesignal">OneSignal</option>
<option value="fcm">FCM</option>
</Field>
</div>
{values?.notification_type === 'onesignal' && (
<>
<div className="col-md-6">
<div className="form-group">
<label className="mt-4 px-2 text-[16px] font-semibold" htmlFor="email">
One signal app id{' '}
</label>
<Field className="form-input" name="one_signal_app_id" />
</div>
</div>
<div className="col-md-6">
<div className="form-group">
<label className="mt-4 px-2 text-[16px] font-semibold" htmlFor="email">
One signal api key
</label>
<Field className="form-input" name="one_signal_api_key" id="" />
</div>
</div>
</>
)}
{values?.notification_type === 'fcm' && (
<>
<div className="col-md-6">
<div className="form-group">
<label className="mt-4 px-2 text-[16px] font-semibold" htmlFor="email">
Firebase Server Key
</label>
<Field className="form-input" name="firebase_key" />
</div>
</div>
<div className="col-md-6">
<div className="form-group">
<label className="mt-4 px-2 text-[16px] font-semibold" htmlFor="email">
Firebase Topic
</label>
<Field className="form-input" name="firebase_topics" id="" />
</div>
</div>
</>
)}
<div className="col-md-6">
<div className="form-group">
<label className="mt-4 px-2 text-[16px] font-semibold" htmlFor="email">
Sports Api Base Url <span className="text-[16px] text-red-500">*</span>
</label>
<Field name="api_base_url" className="form-input" />
</div>
</div>
<div className="col-md-6">
<div className="form-group">
<label className="mt-4 px-2 text-[16px] font-semibold" htmlFor="email">
Sports Api Key <span className="text-[16px] text-red-500">*</span>
</label>
<Field name="api_key" className="form-input" />
</div>
</div>
</div>
</div>
</div>
<Tabs selectedIndex={activeTab} onSelect={handleTabChange}>
<TabList className="flex items-center justify-center gap-5 mt-10">
<Tab className={`px-4 py-2 font-semibold rounded shadow bg-white text-lg text-gray-800 flex items-center gap-2 ${activeTab === 0 && 'bg-blue-500 text-gray-200 shadow-md shadow-blue-300 scale-110 transition-all ease-linear'}`}> <AiFillAndroid/> <p>Android Settings</p> </Tab>
<Tab className={`px-4 py-2 font-semibold rounded shadow bg-white text-lg text-gray-800 flex items-center gap-2 ${activeTab === 1 && 'bg-blue-500 text-gray-200 shadow-md shadow-blue-300 scale-110 transition-all ease-linear'}`}><AiFillApple/> <p>Ios Settings</p> </Tab>
</TabList>
<TabPanel>
<div className="mt-2">
{/* General Settings */}
<h4 className="mb-2 text-lg font-normal">General Settings</h4>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="privacy_policy">
Privacy Policy
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.privacy_policy" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="terms_condition">
Terms & Condition
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.terms_condition" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="share_link">
App Share Link
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.share_link" />
</div>
{/* App Control */}
<div className="mt-2">
<h4 className="mb-2 text-lg font-normal">App Control</h4>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="default_page">
App Default Page
</label>
<Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="android_settings.default_page">
<option value="Select One" disabled>
Select One
</option>
<option value="Live">Live</option>
<option value="Home">Home</option>
</Field>
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="publish_control">
App Publishing Control
</label>
<Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="android_settings.publish_control">
<option value="Select One" disabled>
Select One
</option>
<option value={true}>On</option>
<option value={false}>Off</option>
</Field>
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="hide_version">
Hide Live by Version Code
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="number" name="android_settings.hide_version" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="highlights_type">
Highlights Type
</label>
<Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="highlights_type" id="android_settings.highlights_type">
<option value="Select One" disabled>
Select One
</option>
<option value="Enable">Enable</option>
<option value="Disable">Disable</option>
<option value="YouTube Only">YouTube Only</option>
</Field>
</div>
</div>
</div>
{/* Ads Control */}
<div className="mt-2">
<h4 className="mb-2 text-lg font-normal">Ads Control</h4>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="aads_status">
Ads Status
</label>
<Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="aads_status" id="android_settings.aads_status">
<option value="Select One" disabled>
Select One
</option>
<option value={true}>On</option>
<option value={false}>Off</option>
</Field>
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="click_control">
Click Control
</label>
<Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="click_control" id="android_settings.click_control">
<option value="Select One" disabled>
Select One
</option>
<option value="Off">Off</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</Field>
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="app_id">
Google App ID
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.app_id" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="app_open_id">
Google App Open Ads Code
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.app_open_id" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="banner_id">
Google Banner Ads Code
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.banner_id" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="interstitial_id">
Google Interstitial Ads Code
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.interstitial_id" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="adaptive_interstitial_id">
Google Adaptive Interstitial Ads Code
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.adaptive_interstitial_id" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="native_id">
Google Native Ads Code
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.native_id" />
</div>
<div className="col-span-1 md:col-span-2">
<label className="mt-2 px-1 font-semibold" htmlFor="rewarded_aads">
Google Rewarded Ads Code
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.rewarded_aads" />
</div>
</div>
</div>
<div className="mt-2">
<h4 className="mb-2 text-lg font-normal">Version Control</h4>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="version_code">
Version Code
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.version_code" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="force_update">
Force Update
</label>
<Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="android_settings.force_update">
<option value="Select One" disabled>
Select One
</option>
<option value={true}>On</option>
<option value={false}>Off</option>
</Field>
</div>
<div className="col-span-1 md:col-span-2">
<label className="mt-2 px-1 font-semibold" htmlFor="app_url">
App Url
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.app_url" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="update_location">
App Update Location
</label>
<Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="android_settings.update_location">
<option value="Select One" disabled>
Select One
</option>
<option value="Store">Store</option>
<option value="Web">Web</option>
</Field>
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="button_text">
Button Text
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.button_text" />
</div>
<div className="col-span-1 md:col-span-2">
<label className="mt-2 px-1 font-semibold" htmlFor="description">
Description
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.description" />
</div>
</div>
</div>
<div className="mt-2">
<h4 className="mb-2 text-lg font-normal">Block Country</h4>
<label className="mt-2 px-1 font-semibold" htmlFor="description">
Select Countries
</label>
<BlockCountrySelect key={"android_settings"} name="android_settings.block_country" defaultValue={defaultValueAnd} initialValues={initialValues} values={values} setFieldValue={setFieldValue} />
</div>
</div>
</TabPanel>
<TabPanel>
<div className="mt-2">
{/* General Settings */}
<h4 className="mb-2 text-lg font-normal">General Settings</h4>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="privacy_policy">
Privacy Policy
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.privacy_policy" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="terms_condition">
Terms & Condition
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.terms_condition" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="share_link">
App Share Link
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.share_link" />
</div>
{/* App Control */}
<div className="mt-2">
<h4 className="mb-2 text-lg font-normal">App Control</h4>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="default_page">
App Default Page
</label>
<Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="ios_settings.default_page">
<option value="Select One" disabled>
Select One
</option>
<option value="Live">Live</option>
<option value="Home">Home</option>
</Field>
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="publish_control">
App Publishing Control
</label>
<Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="ios_settings.publish_control">
<option value="Select One" disabled>
Select One
</option>
<option value={true}>On</option>
<option value={false}>Off</option>
</Field>
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="hide_version">
Hide Live by Version Code
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="number" name="ios_settings.hide_version" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="highlights_type">
Highlights Type
</label>
<Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="highlights_type" id="ios_settings.highlights_type">
<option value="Select One" disabled>
Select One
</option>
<option value="Enable">Enable</option>
<option value="Disable">Disable</option>
<option value="YouTube Only">YouTube Only</option>
</Field>
</div>
</div>
</div>
{/* Ads Control */}
<div className="mt-2">
<h4 className="mb-2 text-lg font-normal">Ads Control</h4>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="aads_status">
Ads Status
</label>
<Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="aads_status" id="ios_settings.aads_status">
<option value="Select One" disabled>
Select One
</option>
<option value={true}>On</option>
<option value={false}>Off</option>
</Field>
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="click_control">
Click Control
</label>
<Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="click_control" id="ios_settings.click_control">
<option value="Select One" disabled>
Select One
</option>
<option value="Off">Off</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</Field>
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="app_id">
Google App ID
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.app_id" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="app_open_id">
Google App Open Ads Code
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.app_open_id" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="banner_id">
Google Banner Ads Code
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.banner_id" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="interstitial_id">
Google Interstitial Ads Code
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.interstitial_id" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="adaptive_interstitial_id">
Google Adaptive Interstitial Ads Code
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.adaptive_interstitial_id" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="native_id">
Google Native Ads Code
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.native_id" />
</div>
<div className="col-span-1 md:col-span-2">
<label className="mt-2 px-1 font-semibold" htmlFor="rewarded_aads">
Google Rewarded Ads Code
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.rewarded_aads" />
</div>
</div>
</div>
<div className="mt-2">
<h4 className="mb-2 text-lg font-normal">Version Control</h4>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="version_code">
Version Code
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.version_code" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="force_update">
Force Update
</label>
<Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="ios_settings.force_update">
<option value="Select One" disabled>
Select One
</option>
<option value={true}>On</option>
<option value={false}>Off</option>
</Field>
</div>
<div className="col-span-1 md:col-span-2">
<label className="mt-2 px-1 font-semibold" htmlFor="app_url">
App Url
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.app_url" />
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="update_location">
App Update Location
</label>
<Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="ios_settings.update_location">
<option value="Select One" disabled>
Select One
</option>
<option value="Store">Store</option>
<option value="Web">Web</option>
</Field>
</div>
<div>
<label className="mt-2 px-1 font-semibold" htmlFor="button_text">
Button Text
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.button_text" />
</div>
<div className="col-span-1 md:col-span-2">
<label className="mt-2 px-1 font-semibold" htmlFor="description">
Description
</label>
<Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.description" />
</div>
</div>
</div>
<div className="mt-2">
<h4 className="mb-2 text-lg font-normal">Block Country</h4>
<label className="mt-2 px-1 font-semibold" htmlFor="description">
Select Countries
</label>
<BlockCountrySelect key={'ios_settings'} name="ios_settings.block_country" defaultValue={defaultValueIos} initialValues={initialValues} setFieldValue={setFieldValue} />
</div>
</div>
</TabPanel>
</Tabs>
<button type="submit" className="btn btn-outline-primary btn-lg">
Submit
{loading ?
<>
<svg
viewBox="0 0 24 24"
width="24"
height="24"
stroke="currentColor"
strokeWidth="1.5"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
className="inline-block h-5 w-5 shrink-0 animate-[spin_2s_linear_infinite] align-middle ltr:ml-2 rtl:mr-2"
>
<line x1="12" y1="2" x2="12" y2="6"></line>
<line x1="12" y1="18" x2="12" y2="22"></line>
<line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
<line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
<line x1="2" y1="12" x2="6" y2="12"></line>
<line x1="18" y1="12" x2="22" y2="12"></line>
<line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
<line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
</svg>
</>
:
<>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="ml-2 h-5 w-5">
<path
opacity="0.5"
d="M3 15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21H15C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path d="M12 3V16M12 16L16 11.625M12 16L8 11.625" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path>
</svg>
</>
}
</button>
</Form>
)}
</Formik>
);
};
export default EditForm;
Editor is loading...