Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/s0rus/inpost-geowidget-next
Inpost Geowidget V5 component for Next.js applications
https://github.com/s0rus/inpost-geowidget-next
geowidget inpost inpost-geowidget inpost-geowidget-next next nextjs nextjs14 paczkomaty widget
Last synced: 20 days ago
JSON representation
Inpost Geowidget V5 component for Next.js applications
- Host: GitHub
- URL: https://github.com/s0rus/inpost-geowidget-next
- Owner: s0rus
- License: mit
- Created: 2024-09-28T14:17:42.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-10-24T12:24:44.000Z (2 months ago)
- Last Synced: 2024-11-07T06:52:42.083Z (about 2 months ago)
- Topics: geowidget, inpost, inpost-geowidget, inpost-geowidget-next, next, nextjs, nextjs14, paczkomaty, widget
- Language: TypeScript
- Homepage:
- Size: 43.9 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Inpost Geowidget for Next.js
This package provides a wrapper for the [Inpost Geowidget V5](https://geowidget.inpost.pl/docs/index.html) for use in Next.js applications.
## Usage
1. Setting up
Visit the [geowidget documentation](https://dokumentacja-inpost.atlassian.net/wiki/spaces/PL/pages/58327041/Geowidget+v5+ENG).
Set up your project and get your API token as mentioned in the documentation.
2. Copy the component to your project
```typescript
// src/components/inpost-geowidget.tsx
"use client";
import Head from "next/head";
import Script from "next/script";
import * as React from "react";
export type InpostGeowidget = Omit;
export const InpostGeowidget = React.forwardRef<
InpostGeowidget,
InpostGeowidgetProps
>(
(
{
token,
language = "pl",
config = "parcelCollect",
containerProps,
onPoint,
...rest
},
ref
) => {
const geowidgetRef = React.useRef(null);
const _api = React.useRef();
const { className: containerPropsClassName, ...containerPropsRest } =
containerProps ?? {};
const initGeowidget = React.useCallback(
function initGeowidget(evt: CustomEvent) {
const api = evt.detail.api;
_api.current = api;
api.addPointSelectedCallback(onPoint);
},
[onPoint, ref]
);
React.useEffect(() => {
const controller = new AbortController();
const geowidget = geowidgetRef.current;
if (geowidget) {
geowidget.addEventListener(
"inpost.geowidget.init",
initGeowidget as EventListener,
{
signal: controller.signal
}
);
}
return () => {
controller.abort();
};
}, [initGeowidget]);
React.useImperativeHandle(
ref,
() => ({
changeLanguage: (lang) => {
_api.current?.changeLanguage(lang);
},
changePointsType: (type) => {
_api.current?.changePointsType(type);
},
changePosition: (position, zoom) => {
_api.current?.changePosition(position, zoom);
},
changeZoomLevel: (zoom) => {
_api.current?.changeZoomLevel(zoom);
},
clearSearch: () => {
_api.current?.clearSearch();
},
hideSearchResults: () => {
_api.current?.hideSearchResults();
},
search: (query) => {
_api.current?.search(query);
},
selectPoint: (name) => {
_api.current?.selectPoint(name);
},
showPoint: (name) => {
_api.current?.showPoint(name);
},
showPointDetails: (name) => {
_api.current?.showPointDetails(name);
}
}),
[]
);
return (
<>
>
);
}
);
export interface InpostGeowidgetPoint {
address: InpostAddress;
address_details: InpostAddressDetails;
apm_doubled: string;
easy_access_zone?: boolean;
image_url: string;
location: Location;
location_24: boolean;
location_description: string;
name: string;
opening_hours: string;
operating_hours_extended: InpostOperatingHoursExtended;
partner_id: number;
payment_point_descr: string;
payment_type: {
2?: string;
};
physical_type_description: string;
physical_type_mapped: string;
recommended_low_interest_box_machines_list: string[];
type: "parcel_locker" | "parcel_locker_superpop" | "pop";
virtual: string;
}
export interface InpostGeowidgetProps
extends React.HTMLAttributes {
token: string;
language?: InpostLanguage;
config?: InpostConfig;
containerProps?: React.HTMLAttributes;
onPoint: (point: InpostGeowidgetPoint) => void;
}
export type InpostLanguage = "pl" | "en" | "uk";
export type InpostConfig =
| "parcelCollect"
| "parcelCollectPayment"
| "parcelCollect247"
| "parcelSend";
export type InpostAddress = {
line1: string;
line2: string;
};
export type InpostAddressDetails = {
building_number: string;
city: string;
flat_number: string;
post_code: string;
province: string;
street: string;
};
export type InpostFilterPoints = "ALL" | "PARCEL_LOCKER" | "POP";
export type InpostLocation = {
distance?: number;
latitude: number;
longitude: number;
};
export type InpostOpenedHoursRange = {
end: number;
start: number;
};
export type InpostOperatingHoursExtended = {
customer?: {
monday: InpostOpenedHoursRange;
tuesday: InpostOpenedHoursRange;
wednesday: InpostOpenedHoursRange;
thursday: InpostOpenedHoursRange;
friday: InpostOpenedHoursRange;
saturday: InpostOpenedHoursRange;
sunday: InpostOpenedHoursRange;
};
};
interface InpostInternalApi {
api: InpostApiMethods;
}
interface InpostApiMethods {
addPointSelectedCallback: (callback: (point: InpostGeowidgetPoint) => void
) => void;
changeLanguage: (lang: InpostLanguage) => void;
changePointsType: (type: InpostFilterPoints) => void;
changePosition: (position: InpostLocation, zoom?: number) => void;
changeZoomLevel: (zoom: number) => void;
clearSearch: () => void;
hideSearchResults: () => void;
search: (query: string) => void;
selectPoint: (name: string) => void;
showPoint: (name: string) => void;
showPointDetails: (name: string) => void;
}
declare global {
namespace JSX {
interface IntrinsicElements {
"inpost-geowidget": React.DetailedHTMLProps<
React.HTMLAttributes & {
token: string;
language: InpostLanguage;
config: InpostConfig;
},
HTMLElement
>;
}
}
interface GlobalEventHandlersMap {
onPoint: CustomEvent;
}
}
```
3. Use the component in your application.
Keep in mind that if you want to use the component in "sandbox", you might need to update urls for the css and script tags as mentioned in the documentation.
The component is made for copy as is to give you the exact control over it.
Feel free to edit/remove the things you don't need.
Usage example:
```typescript
'use client';
import { InpostGeowidget } from 'inpost-geowidget-next';
import { useEffect, useRef } from 'react';
export default function Home() {
const geowidgetRef = useRef(null);
useEffect(() => {
// Select initial point by providing it's name
geowidgetRef.current?.selectPoint("XXXXXX");
}, [])
return (
console.log(point.name)}
containerProps={{
className: 'h-[1000px]',
}}
/>
);
}
```